Make download button. Close #31

lelinhtinh · Jul 25, 2020 · b3e39d1 · b3e39d1
1 parent eb90784
commit b3e39d1
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 4 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -101,7 +101,10 @@ <h2>{{ site.description }}</h2>
                     <button id="copyjs" class="btn" type="button">
                         <img class="btn-icon" src="{{ 'assets/icon/copy-document.png' | relative_url }}" alt="Copy to clipboard">
                     </button>
-                    <a id="preview" class="btn" type="button" href="#" target="_blank">
+                    <a id="download" class="btn" type="button" href="#" download="result.js">
+                        <img class="btn-icon" src="{{ 'assets/icon/download.png' | relative_url }}" alt="Download file">
+                    </a>
+                    <a id="preview" class="btn" type="button" href="#">
                         <img class="btn-icon" src="{{ 'assets/icon/external-link-symbol.png' | relative_url }}" alt="Open in new tab">
                     </a>
                 </div>

diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -238,6 +238,7 @@ pre {
 }
 
 #preview,
+#download,
 .tab-content {
   display: none;
 

diff --git a/assets/icon/download.png b/assets/icon/download.png
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -111,6 +111,7 @@
         isAuto = false,
 
         preview = document.getElementById('preview'),
+        download = document.getElementById('download'),
 
         clipboard = new ClipboardJS('#copyjs', {
             target: function () {
@@ -163,6 +164,19 @@
             preview.href = externalUrl;
         },
 
+        downloadUrl,
+        downloadResult = function (source) {
+            if (downloadUrl) URL.revokeObjectURL(downloadUrl);
+
+            downloadUrl = new Blob([source], {
+                type: 'text/javascript'
+            });
+            downloadUrl = URL.createObjectURL(downloadUrl);
+
+            download.classList.add('show');
+            download.href = downloadUrl;
+        },
+
         workerFormat,
         workerDecode,
 
@@ -172,8 +186,13 @@
             if (!workerFormat) {
                 workerFormat = new Worker('{{ "/assets/js/worker/format.js" | relative_url }}');
                 workerFormat.addEventListener('message', function (e) {
-                    view.innerHTML = e.data;
-                    externalPreview(e.data);
+                    if (!e.data.highlight) {
+                        downloadResult(e.data.result);
+                        return;
+                    }
+
+                    view.innerHTML = e.data.result;
+                    externalPreview(e.data.result);
 
                     stopEffect();
                 });

diff --git a/assets/js/worker/format.js b/assets/js/worker/format.js
@@ -28,6 +28,11 @@ self.addEventListener('message', function (e) {
         console.log(err);
     }
 
+    self.postMessage({
+        result: source,
+        highlight: false
+    });
+
     try {
         self.importScripts('{{ "/assets/js/lib/highlight-js/highlight.min.js" | relative_url }}');
 
@@ -36,5 +41,8 @@ self.addEventListener('message', function (e) {
         console.log(err);
     }
 
-    self.postMessage(source);
+    self.postMessage({
+        result: source,
+        highlight: true
+    });
 });