feat(nodeMenu): add memo field

Author: SSShooter

src/plugin/nodeMenu.less

@@ -12,7 +12,7 @@ nmenu {
   transition: 0.3s all;
   &.close {
     height: 30px;
-    width: 50px;
+    width: 46px;
     overflow: hidden;
   }
   .button-container {
@@ -41,7 +41,8 @@ nmenu {
   .nm-fontcolor-container {
     margin-bottom: 10px;
   }
-  input {
+  input,
+  textarea {
     background: #f7f9fa;
     border: 1px solid #dce2e6;
     border-radius: 3px;
@@ -50,6 +51,9 @@ nmenu {
     width: 100%;
     box-sizing: border-box;
   }
+  textarea {
+    resize: none;
+  }
   .split6 {
     display: inline-block;
     width: 16.66%;

src/plugin/nodeMenu.ts

@@ -1,9 +1,10 @@
 import './nodeMenu.less'
 import i18n from '../i18n'
 
-const createDiv = (id) => {
+const createDiv = (id, innerHTML) => {
   const div = document.createElement('div')
   div.id = id
+  div.innerHTML = innerHTML
   return div
 }
 
@@ -29,42 +30,45 @@ const colorList = [
 ]
 
 export default function(mind) {
-  const locale = i18n[mind.locale] ? mind.locale : 'en'
-  let bgOrFont
-  const styleDiv = createDiv('nm-style')
-  const tagDiv = createDiv('nm-tag')
-  const iconDiv = createDiv('nm-icon')
-  const urlDiv = createDiv('nm-url')
+  function clearSelect(klass, remove) {
+    var elems = mind.container.querySelectorAll(klass)
+    ;[].forEach.call(elems, function(el) {
+      el.classList.remove(remove)
+    })
+  }
 
-  styleDiv.innerHTML = `
-      <div class="nm-fontsize-container">
-        ${['15', '24', '32']
+  // create element
+  const locale = i18n[mind.locale] ? mind.locale : 'en'
+  const styleDiv = createDiv('nm-style', `
+  <div class="nm-fontsize-container">
+    ${['15', '24', '32']
     .map(size => {
       return `<div class="size"  data-size="${size}">
-        <svg class="icon" style="width: ${size}px;height: ${size}px" aria-hidden="true">
-          <use xlink:href="#icon-a"></use>
-        </svg></div>`
+    <svg class="icon" style="width: ${size}px;height: ${size}px" aria-hidden="true">
+      <use xlink:href="#icon-a"></use>
+    </svg></div>`
     })
     .join('')}<div class="bold"><svg class="icon" aria-hidden="true">
-  <use xlink:href="#icon-B"></use>
-  </svg></div>
-      </div>
-      <div class="nm-fontcolor-container">
-        ${colorList
+<use xlink:href="#icon-B"></use>
+</svg></div>
+  </div>
+  <div class="nm-fontcolor-container">
+    ${colorList
     .map(color => {
       return `<div class="split6"><div class="palette" data-color="${color}" style="background-color: ${color};"></div></div>`
     })
     .join('')}
-      </div>
-      <div class="bof">
-      <span class="font">${i18n[locale].font}</span>
-      <span class="background">${i18n[locale].background}</span>
-      </div>
-  `
-  tagDiv.innerHTML = `${i18n[locale].tag}<input class="nm-tag" tabindex="-1" placeholder="${i18n[locale].tagsSeparate}" /><br>`
-  iconDiv.innerHTML = `${i18n[locale].icon}<input class="nm-icon" tabindex="-1" placeholder="${i18n[locale].iconsSeparate}" /><br>`
-  urlDiv.innerHTML = `${i18n[locale].url}<input class="nm-url" tabindex="-1" /><br>`
+  </div>
+  <div class="bof">
+  <span class="font">${i18n[locale].font}</span>
+  <span class="background">${i18n[locale].background}</span>
+  </div>`)
+  const tagDiv = createDiv('nm-tag', `${i18n[locale].tag}<input class="nm-tag" tabindex="-1" placeholder="${i18n[locale].tagsSeparate}" />`)
+  const iconDiv = createDiv('nm-icon', `${i18n[locale].icon}<input class="nm-icon" tabindex="-1" placeholder="${i18n[locale].iconsSeparate}" />`)
+  const urlDiv = createDiv('nm-url', `${i18n[locale].url}<input class="nm-url" tabindex="-1" />`)
+  const memoDiv = createDiv('nm-memo', `${i18n[locale].memo || 'Memo'}<textarea class="nm-memo" rows="5" tabindex="-1" />`)
 
+  // create container
   const menuContainer = document.createElement('nmenu')
   menuContainer.innerHTML = `
   <div class="button-container"><svg class="icon" aria-hidden="true">
@@ -75,23 +79,22 @@ export default function(mind) {
   menuContainer.appendChild(tagDiv)
   menuContainer.appendChild(iconDiv)
   menuContainer.appendChild(urlDiv)
+  menuContainer.appendChild(memoDiv)
   menuContainer.hidden = true
-
-  function clearSelect(klass, remove) {
-    var elems = mind.container.querySelectorAll(klass)
-    ;[].forEach.call(elems, function(el) {
-      el.classList.remove(remove)
-    })
-  }
-
   mind.container.append(menuContainer)
+
+  // query input element
   const sizeSelector = menuContainer.querySelectorAll('.size')
   const bold:HTMLElement = menuContainer.querySelector('.bold')
   const buttonContainer:HTMLElement = menuContainer.querySelector('.button-container')
   const fontBtn:HTMLElement = menuContainer.querySelector('.font')
   const tagInput:HTMLInputElement = mind.container.querySelector('.nm-tag')
   const iconInput:HTMLInputElement = mind.container.querySelector('.nm-icon')
   const urlInput:HTMLInputElement = mind.container.querySelector('.nm-url')
+  const memoInput:HTMLInputElement = mind.container.querySelector('.nm-memo')
+
+  // handle input and button click
+  let bgOrFont
   menuContainer.onclick = e => {
     if (!mind.currentNode) return
     const nodeObj = mind.currentNode.nodeObj
@@ -170,6 +173,10 @@ export default function(mind) {
     if (!mind.currentNode) return
     mind.updateNodeHyperLink(mind.currentNode.nodeObj, e.target.value)
   }
+  memoInput.onchange = (e:InputEvent & { target: HTMLInputElement}) => {
+    if (!mind.currentNode) return
+    mind.currentNode.nodeObj.memo = e.target.value
+  }
   let state = 'open'
   buttonContainer.onclick = e => {
     if (state === 'open') {
@@ -182,6 +189,8 @@ export default function(mind) {
       buttonContainer.innerHTML = `<svg class="icon" aria-hidden="true"><use xlink:href="#icon-close"></use></svg>`
     }
   }
+
+  // handle node selection
   mind.bus.addListener('unselectNode', function() {
     menuContainer.hidden = true
   })
@@ -217,10 +226,7 @@ export default function(mind) {
     } else {
       iconInput.value = ''
     }
-    if (nodeObj.hyperLink) {
-      urlInput.value = nodeObj.hyperLink
-    } else {
-      urlInput.value = ''
-    }
+    urlInput.value = nodeObj.hyperLink || ''
+    memoInput.value = nodeObj.memo || ''
   })
 }