add clear history function

dermike · Feb 2, 2017 · 48ea193 · 48ea193
1 parent 1120207
commit 48ea193
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 19 deletions.
diff --git a/css/style.css b/css/style.css
@@ -196,30 +196,17 @@ input {
 
 .url-history li {
   opacity: .5;
-}
-
-.url-history li:hover {
-  opacity: .8;
-}
-
-.url-history li:nth-child(5) {
-  background-color: #f1f1f1;
-}
-
-.url-history li:nth-child(4) {
   background-color: #e1e1e1;
 }
 
-.url-history li:nth-child(3) {
-  background-color: #d1d1d1;
-}
-
-.url-history li:nth-child(2) {
-  background-color: #c1c1c1;
+.url-history li.fadeOut {
+  animation-fill-mode: both;
+  animation-duration: 0.4s;
+  animation-name: fadeOutUp;
 }
 
-.url-history li:nth-child(1) {
-  background-color: #b1b1b1;
+.url-history li:hover {
+  opacity: .8;
 }
 
 @keyframes fadeInDown {
@@ -233,3 +220,15 @@ input {
     transform: translateY(0);
   }
 }
+
+@keyframes fadeOutUp {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+}
diff --git a/js/app.js b/js/app.js
@@ -26,6 +26,19 @@
     renderHistory(newHistory);
   }
 
+  function clearHistory() {
+    let list = document.querySelectorAll('.url-history li');
+    localStorage.removeItem('history');
+    Array.prototype.forEach.call(list, (el, i) => {
+      setTimeout(() => {
+        el.classList.add('fadeOut');
+        setTimeout(() => {
+          el.parentNode.removeChild(el);
+        }, i + 1 * 400);
+      }, i * 200);
+    });
+  }
+
   function showDialog(show) {
     if (show) {
       renderHistory(JSON.parse(localStorage.getItem('history')));
@@ -58,6 +71,10 @@
     showDialog(true);
   });
 
+  ipcRenderer.on('clear-history', () => {
+    clearHistory();
+  });
+
   ipcRenderer.on('mode', (event, message) => {
     let el = document.getElementById(message[0]);
     if (message[1]) {

diff --git a/main.js b/main.js
@@ -135,6 +135,13 @@ app.on('ready', () => {
             mainWindow.webContents.send('status', ['<span class="key" aria-label="command">&#8984;</span> + <span class="key">B</span> to enter URL (or use <a target="_new" href="https://github.com/dermike/slide-beacon">reveal.js presentation plugin</a>)', 'Waiting', true]);
           }
         },
+        {
+          'label': 'Clear history',
+          'accelerator': 'Command+H',
+          'click': () => {
+            mainWindow.webContents.send('clear-history');
+          }
+        },
         {
           'label': 'Quit',
           'accelerator': 'Command+Q',