add the load animatation 💄

manifest.json

@@ -3,12 +3,6 @@
   "short_name": "ExportToMarkdown",
   "description": "This is utilized to export the story in Medium to a markdown format file.",
   "version": "0.0.1",
-  // "background": {
-  //   "scripts": [
-  //     "scripts/widget.js",
-  //     "scripts/snarkdown.js"
-  //   ]
-  // },
   "icons": {
     "16": "icons/icon-19.png",
     "48": "icons/icon-48.png",

popup.html

@@ -33,16 +33,48 @@
       position: fixed;
       left: 50%;
       top: 50%;
-      transform: rotate(360deg);
-      transition: all 1s ease-in-out;
+      -webkit-animation: spin1 2s infinite linear;
+      -moz-animation: spin1 2s infinite linear;
+      -o-animation: spin1 2s infinite linear;
+      -ms-animation: spin1 2s infinite linear;
+      animation: spin1 2s infinite linear;
+      display: block;
     }
 
-    span:hover {
-      transform: rotate(180deg);
-      -moz-animation-iteration-count: infinite;
-      -webkit-animation-iteration-count: infinite;
-      -o-animation-iteration-count: infinite;
-      transition: all 1s ease-in-out;
+    @-webkit-keyframes spin1 {
+      0% {
+        -webkit-transform: rotate(0deg);
+      }
+      100% {
+        -webkit-transform: rotate(360deg);
+      }
+    }
+
+    @-moz-keyframes spin1 {
+      0% {
+        -moz-transform: rotate(0deg);
+      }
+      100% {
+        -moz-transform: rotate(360deg);
+      }
+    }
+
+    @-o-keyframes spin1 {
+      0% {
+        -o-transform: rotate(0deg);
+      }
+      100% {
+        -o-transform: rotate(360deg);
+      }
+    }
+
+    @-ms-keyframes spin1 {
+      0% {
+        -ms-transform: rotate(0deg);
+      }
+      100% {
+        -ms-transform: rotate(360deg);
+      }
     }
   </style>
 </head>
@@ -53,6 +85,7 @@
       <h1>The export result</h1>
     </li>
     <li><button class="export">export</button></li>
+    <li><button class="copy">copy to clipboard</button></li>
   </ul>
 
   <span><img src="load.svg"></span>

scripts/widget.js

@@ -8,6 +8,11 @@
     exportMedium()
   })
 
+  document.querySelector('.copy').addEventListener('click', function() {
+    const value = document.querySelector('#source').value;
+    copyToClipboard(value);
+  })
+
 const MEDIUM_IMG_CDN = 'https://cdn-images-1.medium.com/max/'
 
 function exportMedium () {
@@ -199,3 +204,27 @@ function createMarkupsArray (markups) {
   }
   return markups_array
 }
+
+function copyToClipboard(input) {
+  const el = document.createElement('textarea');
+  el.value = input;
+
+  el.setAttribute('readonly', '');
+	el.style.contain = 'strict';
+	el.style.all = 'unset';
+	el.style.position = 'absolute';
+	el.style.left = '-9999px';
+	el.style.fontSize = '12pt'; 
+
+	document.body.appendChild(el);
+	el.select();
+
+	let success = false;
+	try {
+		success = document.execCommand('copy');
+	} catch (err) {}
+
+	document.body.removeChild(el);
+
+	return success;
+}