styleguide: move scripts, add mobile navigation, style generator

styleguide/assets/script/generator.js

@@ -0,0 +1,90 @@
+let can = document.createElement("canvas");
+let ctx = can.getContext('2d');
+let result;
+const downloadButton = document.querySelector('#download');
+
+function filterImage(svgDataUrl, width, height) {
+    const filteredImage = new Image();
+    const resultPreview = document.querySelector('#result_img')
+
+    can.width = width;
+    can.height = height;
+
+    filteredImage.onload = function () {
+        ctx.drawImage(filteredImage, 0, 0, width, height);
+        result = can.toDataURL();
+        downloadButton.disabled = false;
+        resultPreview.src = result;
+    };
+    filteredImage.src = svgDataUrl;
+}
+
+function loadImage(base64Image) {
+    const sourceImage = new Image();
+    const svg = document.querySelector('svg')
+    const svgImage = svg.querySelector('image')
+    const sourcePreview = document.querySelector('#source_img')
+    let svgDataUrl;
+
+    sourceImage.onload = function () {
+        let svgWidth = this.width;
+        let svgHeight = this.height;
+
+        if (this.height > 1000) {
+            svgHeight = 1000;
+            svgWidth = 1000 * this.width / this.height;
+        }
+
+        svg.setAttribute("height", svgHeight);
+        svg.setAttribute("width", svgWidth);
+
+        let svgString = (new XMLSerializer).serializeToString(svg);
+        svgDataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgString);
+
+        filterImage(svgDataUrl, this.width, this.height);
+    };
+    sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image;
+}
+
+
+function handleFileSelect(e) {
+    const files = e.target.files;
+    if (!files || !files.length) return;
+    const file = files[0];
+    if (!file.type.match('image.*')) return;
+
+    const reader = new FileReader();
+
+    reader.onload = (readerEvent) => {
+        loadImage(readerEvent.target.result);
+    };
+
+    reader.readAsDataURL(file);
+}
+
+document.querySelector('#file_input').addEventListener('change', handleFileSelect, false);
+
+function downloadURI(_uri, _name) {
+    let link = document.createElement("a");
+    link.download = 'distortedImageEH22.png';
+    link.href = result;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    delete link;
+}
+
+downloadButton.addEventListener('click', downloadURI);
+
+(async () => {
+    let exampleImageBlob = await fetch("../assets/image/example_cat.jpg")
+        .then(r => r.blob());
+
+    let dataUrl = await new Promise(resolve => {
+        let reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.readAsDataURL(exampleImageBlob);
+    });
+
+    loadImage(dataUrl);
+})()