From b3e39d1f1c0af6417f7854bf51a7d7a983f574ff Mon Sep 17 00:00:00 2001
From: lelinhtinh <lelinhtinh2013@gmail.com>
Date: Sat, 25 Jul 2020 16:47:43 +0700
Subject: [PATCH] Make download button. Close #31

---
 _layouts/default.html      |   5 ++++-
 assets/css/style.scss      |   1 +
 assets/icon/download.png   | Bin 0 -> 725 bytes
 assets/js/main.js          |  23 +++++++++++++++++++++--
 assets/js/worker/format.js |  10 +++++++++-
 5 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 assets/icon/download.png

diff --git a/_layouts/default.html b/_layouts/default.html
index 9fd994f..fc80968 100644
--- 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
index 479d835..92bdf1d 100644
--- 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
new file mode 100644
index 0000000000000000000000000000000000000000..547ec43d318076ca2f7e18352f388d4d1ab716a7
GIT binary patch
literal 725
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM0wlfaz7_*1mUKs7M+SzC{oH>NS%G|oWRD<U
z28Jp%28M<f28Lfip@tU>45bDP46hOx7_4S6Fo+k-*%fF5lweBoc6VW5Sk<d+1mtlR
zctiqC<U0bwj8nDwq=AC$C7!;n>`&MwIpx%@uiZ9>fq`+cr;B5V#p&M3wi%NHMcVF5
zKe}#}u_VaKqvzNI0ReXNcB^T5+a9dyn7v}D-drv{t1cFuylYOzB5(AUcGPR=9o!PS
z(A8^}YKcbUgcS-ApKWD7Ej{^t^8E5$-}gSZeZKGc9c@;o!y4LeKKC<i=2>NHaW;Cv
zDgJvCnIEX`U3<8HGV8Mr%irELEOE(Eobwno#f8%(cRb~N^Hj0eX7M4t<2LDk|0Lb^
z{W@W3pF3k|dczD6tE6M4uIEKBn(n<+a=>@H%G~v<-)~@+DcGd>nALBmmJd^S_Gxj4
znX210y_UrOUVdPTN*;scxgYOxHb0wrR?R@kuF%2ez!G-_!R4peKep#LUjD$TVz#0s
zW%X5-zXm}bue~O{P@C1FmmS-~6yI59V(Y-RL(c58&&ze&eyp*5zGlVoXX}N_0>7tv
zzPdcYPa{<<`%7-!r33YozH-@EByHdM^2Unqk%H+zZ;Pnr>@_?rlrB0g#B6Co@^g)X
z^$!`lP2z8rDmlr`-Z+b)+qJ-6aKDNd-;4v#Y`G6;+0OkXtK83f<A6|@xpJ3P{Qlx^
z%e3x$vZva!)Ti3$ZLOcl35-G264!{5l*E!$tK_0oAjM#0U}T_cV6JOq8e(8+Wo%$&
zY_4r!U}a#icgEK@C>nC}Q!>*kacekp)HeXAK@wy`aDG}zd16s2LwR|*US?i)adKio
Ys$PCk`s{Z$Qb0uvp00i_>zopr0EtEtwg3PC

literal 0
HcmV?d00001

diff --git a/assets/js/main.js b/assets/js/main.js
index 70f12ea..848c652 100644
--- 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
index 7599c43..6d51499 100644
--- 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
+    });
 });