add load form 💄

madneal · Jun 8, 2017 · 032fd1d · 032fd1d
1 parent 11df211
commit 032fd1d
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 21 deletions.
diff --git a/popup.html b/popup.html
@@ -27,6 +27,17 @@
       display: inline;
     }
 
+    #shadow {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 0;
+      width: 100%;
+      background-color: #000;
+      opacity: .2;
+      filter: alpha(opacity=20);
+    }
+
     img {
       width: 50px;
       height: 50px;
@@ -81,16 +92,17 @@
 </head>
 
 <body>
-  <ul>
-    <li>
-      <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" class="load"></span>
   <div class="main">
+    <ul>
+      <li>
+        <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" class="load"></span>
     <div class="left-area">
       <textarea id="source"></textarea>
     </div>

diff --git a/scripts/widget.js b/scripts/widget.js
@@ -3,22 +3,36 @@
 //   // get current selected tab
 //   exportMedium()
 // })
+let mainDiv = document.querySelector('.main')
+const loadIcon = document.querySelector('.load')
 
-  document.querySelector('.export').addEventListener('click', function () {
-    document.querySelector('body').style.background = '#eee'
-    document.querySelector('img').style.visibility = 'visible'
-    exportMedium()
-    document.querySelector('body').style.background = '#fff'
-    document.querySelector('img').style.visibility = 'none'
-  })
+document.querySelector('.export').addEventListener('click', function () {
+  createLoadForm()
+  loadIcon.style.visibility = 'visible'
+  exportMedium()
+})
 
-  document.querySelector('.copy').addEventListener('click', function() {
-    const value = document.querySelector('#source').value
-    copyToClipboard(value);
-  })
+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 createLoadForm() {
+  let shadow = document.createElement('div')
+  shadow.id = 'shadow'
+  const oHeight = document.documentElement.scrollHeight
+  shadow.style.height = oHeight + 'px'
+  mainDiv.appendChild(shadow)
+}
+
+function cancelLoad() {
+  const len = mainDiv.childNodes.length
+  mainDiv.removeChild(mainDiv.childNodes[len - 1])
+  loadIcon.style.visibility = 'hidden'
+}
+
 function exportMedium () {
   chrome.tabs.query({active: true, currentWindow: true}, function (arrayOfTabs) {
     const activeTab = arrayOfTabs[0]
@@ -32,8 +46,9 @@ function exportMedium () {
         }
       })
       .then(function (text) {
-        const story = parseJsonToMarkdown(text);
-        const markdownText = story.markdown.join('');
+        const story = parseJsonToMarkdown(text)
+        const markdownText = story.markdown.join('')
+        cancelLoad()
         document.querySelector('#source').value = markdownText;
         document.querySelector('.right-area').innerHTML = snarkdown(markdownText);
       })