✨ url title etc

1. auto fetch url title and display as record title;
2. fixed auto saving bug

Author: differui

package-lock.json

@@ -25,7 +25,11 @@
   },
   "dependencies": {
     "axios": "^0.16.1",
+    "debounce": "^1.0.2",
+    "get-title-at-url": "^1.1.5",
+    "getfavicon": "^1.1.2",
     "qr-image": "^3.2.0",
+    "valid-url": "^1.0.9",
     "vue": "^2.3.3",
     "vue-electron": "^1.0.6",
     "vue-router": "^2.5.3",

package.json

@@ -2,7 +2,7 @@
   <ul class="qr-code-list">
     <li v-for="code in allCodes" :key="code.id" :id="code.id" class="qr-code-list__item" :class="code.selected ? 'qr-code-list__item_selected' : ''" @click="handleItemClick(code)">
       <a class="qr-code-list__anchor" href="javascript: void(0);" tabindex="-1">
-        <p class="qr-code-list__title" :title="code.title">{{ code.title }}</p>
+        <p class="qr-code-list__title" :title="code.title" @dblclick="handleTitleDoubleClick" @blur="handleTitleBlur(arguments[0], code)" @keydown="handleTitleKeyDown">{{ code.title }}</p>
         <p class="qr-code-list__content" :title="code.content">{{ code.content }}</p>
       </a>
     </li>
@@ -11,6 +11,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import * as cfg from '@/configs';
 
 export default {
   computed: {
@@ -23,6 +24,58 @@ export default {
     handleItemClick(code) {
       this.$store.dispatch('selectCode', code.id);
     },
+    handleTitleDoubleClick(ev) {
+      const body = document.querySelector('body');
+      const element = ev.currentTarget;
+
+      element.contentEditable = true;
+      element.parentElement.parentElement.classList.add('qr-code-list__item_edit');
+      if (body.createTextRange) {
+        const range = body.createTextRange();
+
+        range.moveToElementText(element);
+        range.select();
+      } else if (window.getSelection) {
+        const selection = window.getSelection();
+        const range = document.createRange();
+
+        range.selectNodeContents(element);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+    },
+    handleTitleKeyDown(ev) {
+      if (ev.keyCode === cfg.KEY_ENTER) {
+        ev.preventDefault();
+        ev.currentTarget.blur();
+      }
+    },
+    handleTitleBlur(ev, code) {
+      const element = ev.currentTarget;
+      const title = element.textContent.replace(/\n|\r/g, '');
+
+      element.contentEditable = false;
+      element.innerHTML = title;
+      element.parentElement.parentElement.classList.remove('qr-code-list__item_edit');
+      if (!title) {
+        element.innerHTML = code.title;
+        return;
+      }
+      if (title === code.title) {
+        return;
+      }
+      if (this.allCodes.some(c => c.title === title)) {
+        this.$store.dispatch('showToast', 'Duplicate record title');
+        element.innerHTML = code.title;
+        return;
+      }
+      if (title !== code.title) {
+        this.$store.dispatch('updateCode', {
+          id: code.id,
+          title,
+        });
+      }
+    },
   },
 };
 </script>
@@ -40,22 +93,6 @@ export default {
       position: relative;
     }
 
-    &__item:active,
-    &__item_selected {
-      background-color: #efefef;
-      border-bottom-color: #e0e5e6;
-
-      &:after {
-        content: '';
-        width: 100%;
-        height: 1px;
-        background-color: #e0e5e6;
-        top: -1px;
-        left: 0;
-        position: absolute;
-      }
-    }
-
     &__anchor {
       color: inherit;
       text-decoration: none;
@@ -68,18 +105,56 @@ export default {
       margin-bottom: 0;
       width: 100%;
       overflow: hidden;
-      text-overflow: ellipsis;
       white-space: nowrap;
+      position: relative;
+    }
+
+    &__title::after,
+    &__content::after {
+      content: '';
+      width: 20px;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      position: absolute;
+      background-image: linear-gradient(to left, #f6f8f8 20%, transparent);
     }
 
     &__title {
+      outline: none;
       margin-bottom: 5px;
     }
 
     &__content {
       color: #cccccc;
       font-size: 14px;
     }
+
+    // state
+    // ====
+    &__item_selected {
+      background-color: #efefef;
+      border-bottom-color: #e0e5e6;
+    }
+
+    &__item_selected::after {
+      content: '';
+      width: 100%;
+      height: 1px;
+      background-color: #e0e5e6;
+      top: -1px;
+      left: 0;
+      position: absolute;
+    }
+
+    &__item_selected &__title::after,
+    &__item_selected &__content::after {
+      background-image: linear-gradient(to left, #efefef 20%, transparent);
+    }
+
+    &__item_edit &__title::after {
+      background-image: none;
+    }
   }
 </style>
 

src/renderer/components/QrCodeList.vue

@@ -38,7 +38,7 @@ export default {
   &__wrapper {
     text-align: center;
     border-radius: 500px;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.75);
     min-width: 100px;
     max-width: 250px;
     padding: 12px;

src/renderer/components/Toast.vue

@@ -1,5 +1,7 @@
 export const MAX_AVALIABLE_CODE_COUNT = 20;
 export const MAX_CONTENT_LENGTH = 150 * 3;
 export const TOAST_DURATION = 3000;
+export const GET_TITLE_TIMEOUT = 8 * 1000;
+export const SAVE_CHECKPOINT_DURATION = 1000;
 
 export * from './keycode';

src/renderer/configs/index.js

@@ -1,3 +1,4 @@
 export * from './is';
 export * from './svg';
 export * from './storage';
+export * from './title';

src/renderer/helpers/index.js

@@ -0,0 +1,17 @@
+import getTitleAtUrl from 'get-title-at-url';
+import * as cfg from '@/configs';
+
+/* eslint-disable import/prefer-default-export */
+export function getTitle(url) {
+  return Promise.race([
+    new Promise((resolve, reject) => {
+      setTimeout(reject, cfg.GET_TITLE_TIMEOUT);
+    }),
+    new Promise((resolve, reject) => {
+      getTitleAtUrl(url, (title, err) => {
+        if (err) reject(err);
+        else resolve(title);
+      });
+    }),
+  ]);
+}

src/renderer/helpers/title.js

@@ -1,9 +1,11 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import debounce from 'debounce';
 import toast from '@/store/modules/toast';
 import qrCodeList from '@/store/modules/qr-code-list';
 import qrCodeImage from '@/store/modules/qr-code-image';
 import * as helpers from '@/helpers';
+import * as cfg from '@/configs';
 
 Vue.use(Vuex);
 
@@ -22,4 +24,7 @@ store.replaceState({
   },
   qrCodeImage: qrCodeImage.state,
 });
+store.subscribe(debounce((mutation, state) => {
+  helpers.setItem('codes', state.qrCodeList.codes);
+}, cfg.SAVE_CHECKPOINT_DURATION));
 export default store;

src/renderer/store/index.js

@@ -23,7 +23,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { parse as parseUrl } from 'url';
+import { isWebUri } from 'valid-url';
 import Toast from '@/components/Toast';
 import Scroller from '@/components/Scroller';
 import QrCodeImage from '@/components/QrCodeImage';
@@ -59,9 +59,6 @@ export default {
         this.$electron.ipcRenderer.send('encode-text', newSelectedCode.content);
       }
     },
-    allCodes(newAllCodes) {
-      helpers.setItem('codes', newAllCodes);
-    },
   },
   methods: {
     handleInputKeyDown(ev) {
@@ -86,15 +83,30 @@ export default {
         return;
       }
       if (content) {
-        const urlOpts = parseUrl(content);
+        let previousCodeId;
 
+        if (isWebUri(content)) {
+          helpers.getTitle(content)
+            .then((urlTitle) => {
+              if (urlTitle) {
+                this.$store.dispatch('updateCode', {
+                  id: previousCodeId,
+                  title: urlTitle,
+                });
+              }
+            })
+            .catch(() => {
+              // do nothing
+            });
+        }
         this.$store.dispatch('addCode', {
-          title: urlOpts.hostname || content,
+          title: content,
           content,
           selected: true,
         });
         this.$electron.ipcRenderer.send('encode-text', content);
         this.$store.dispatch('selectCode', this.allCodes[0].id);
+        previousCodeId = this.selectedCode.id;
       }
       targetNode.value = '';
     },