history (volatile)

lib/uiinfo.js

@@ -1,23 +1,32 @@
 'use strict';
 let isDragFinished = true;
+const highlightRegex = require('../renderer/highlightregex');
 
 let regex = {
-  get inputRegex() {
+  get inputRegex () {
     return document.querySelector('#inputRegex').value;
   },
-  get outputRegex() {
+  get outputRegex () {
     return document.querySelector('#outputRegex').value;
   },
+  set inputRegex (value) {
+    document.querySelector('#inputRegex').value = value;
+    highlightRegex.handleInput();
+  },
+  set outputRegex (value) {
+    document.querySelector('#outputRegex').value = value;
+    highlightRegex.handleOutput();
+  },
   inputOption: {
-    get isExtensionIncluded() { return document.querySelector('.inputOption .isExtensionIncluded').checked }
+    get isExtensionIncluded () { return document.querySelector('.inputOption .isExtensionIncluded').checked; }
   }
-}
+};
 
 let fileinfo = {
-  set dragging(value) {
+  set dragging (value) {
     document.querySelector('.fileinfo span.dragging').innerHTML = value;
   },
-  set matching(value) {
+  set matching (value) {
     document.querySelector('.fileinfo span.matching').innerHTML = value;
   },
   reset: () => {
@@ -27,11 +36,50 @@ let fileinfo = {
       isDragFinished = true;
     }
   }
-}
+};
+
+let history = {
+  get list () {
+    let list = document.querySelectorAll('.history ul li');
+    return list;
+  },
+  add (inputRegex, outputRegex) {
+    if (this.isExist(inputRegex, outputRegex)) return false;
+    let ul = document.querySelector('.history ul');
+
+    let li = document.createElement('li');
+    li.innerHTML = `<a href='#'><span class='inputRegex'>${inputRegex}</span>
+     / <span class='outputRegex'>${outputRegex}</span></a>
+    <input type='button' value='X'>`;
+    li.querySelector('a').addEventListener('click', (e) => {
+      e.preventDefault();
+      regex.inputRegex = inputRegex;
+      regex.outputRegex = outputRegex;
+    });
+    li.querySelector('input[type=\'button\']').addEventListener('click', (e) => {
+      li.parentNode.removeChild(li);
+    });
+
+    ul.insertBefore(li, ul.firstChild);
+    if (this.list.length > 256) {
+      ul.removeChild(ul.lastChild);
+    }
+    return true;
+  },
+  isExist (inputRegex, outputRegex) {
+    let list = [].slice.call(this.list);
+    let matching = list.filter((v) => {
+      return v.querySelector('.inputRegex').innerText.trim() === inputRegex &&
+        v.querySelector('.outputRegex').innerText.trim() === outputRegex;
+    });
+    return matching.length > 0;
+  }
+};
 
 module.exports = {
-  get isDragFinished() {return isDragFinished},
-  set isDragFinished(value) {isDragFinished = value;},
+  get isDragFinished () { return isDragFinished; },
+  set isDragFinished (value) { isDragFinished = value; },
   regex: regex,
+  history: history,
   fileinfo: fileinfo
-}
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dropreplacer",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "rename drag-dropped files by regex.",
   "main": "main.js",
   "scripts": {

renderer/dragdrophandler.js

@@ -19,5 +19,7 @@ window.addEventListener('load', (loadev) => {
         if (err) console.error(err);
       });
     }
+
+    uiinfo.history.add(uiinfo.regex.inputRegex, uiinfo.regex.outputRegex);
   });
 });

renderer/highlightregex.js

@@ -1,29 +1,54 @@
 'use strict';
-window.addEventListener('load', (loadev) => {
-    let areas = document.querySelectorAll('div.highlightWrap.inputRegex');
 
-    for (let i = 0; i < areas.length; i++) {
-        let inputArea = areas[i].querySelector('#inputRegex');
-        let highlightArea = areas[i].querySelector('div.highlight');
+function handleInput() {
+  let areas = document.querySelectorAll('div.highlightWrap.inputRegex');
 
-        let inputHandler = () => {
-            let text = inputArea.value;
-            highlightArea.setAttribute('data-text', text);
-            GenInputRegexHTML(text, highlightArea);
-        }
+  for (let i = 0; i < areas.length; i++) {
+    let inputArea = areas[i].querySelector('#inputRegex');
+    let highlightArea = areas[i].querySelector('div.highlight');
 
-        inputArea.addEventListener('input', (ev) => {
-            inputHandler();
-        });
+    let text = inputArea.value;
+    highlightArea.setAttribute('data-text', text);
+    GenInputRegexHTML(text, highlightArea);
+  }
+}
 
-        // initialize
-        inputHandler();
-    }
+window.addEventListener('load', (loadev) => {
+  let areas = document.querySelectorAll('div.highlightWrap.inputRegex');
+
+  for (let i = 0; i < areas.length; i++) {
+    let inputArea = areas[i].querySelector('#inputRegex');
+    let highlightArea = areas[i].querySelector('div.highlight');
+
+    let inputHandler = () => {
+      let text = inputArea.value;
+      highlightArea.setAttribute('data-text', text);
+      GenInputRegexHTML(text, highlightArea);
+    };
+
+    inputArea.addEventListener('input', (ev) => {
+      inputHandler();
+    });
+  }
+  handleInput();
 });
 
+function handleOutput() {
+  let areas = document.querySelectorAll('div.highlightWrap.outputRegex');
+
+  for (let i = 0; i < areas.length; i++) {
+    let inputArea = areas[i].querySelector('#outputRegex');
+    let highlightArea = areas[i].querySelector('div.highlight');
+
+    let text = inputArea.value;
+    highlightArea.setAttribute('data-text', text);
+    GenOutputRegexHTML(text, highlightArea);
+  }
+}
+
 window.addEventListener('load', (loadev) => {
     let areas = document.querySelectorAll('div.highlightWrap.outputRegex');
-
+    
     for (let i = 0; i < areas.length; i++) {
         let inputArea = areas[i].querySelector('#outputRegex');
         let highlightArea = areas[i].querySelector('div.highlight');
@@ -33,16 +58,19 @@ window.addEventListener('load', (loadev) => {
             highlightArea.setAttribute('data-text', text);
             GenOutputRegexHTML(text, highlightArea);
         }
-
         inputArea.addEventListener('input', (ev) => {
             outputHandler();
         });
-
-        // initialize
-        outputHandler();
     }
+
+    handleOutput();
 });
 
+module.exports = {
+  handleInput: handleInput,
+  handleOutput: handleOutput
+};
+
 function GenInputRegexHTML(text, parent) {
     let elementList = [];
 

style/style.css

@@ -20,7 +20,7 @@ div.item {margin-bottom: .5em;}
   border: 2px solid lightgray;
 }
 
-.regex h2 { font-weight: normal; border-bottom: 1px solid lightgray; margin: .5em 0 .5em 0; }
+h2 { font-weight: normal; border-bottom: 1px solid lightgray; margin: .5em 0 .5em 0; }
 
 .regex label {display: block;}
 
@@ -69,4 +69,10 @@ div.item {margin-bottom: .5em;}
 }
 .regex div.highlightWrap div.highlight span.match {
   color: darkorange;
-}
+}
+
+.history ul { list-style: none; }
+.history ul li { display: block; overflow: hidden; }
+.history ul li a { display: inline-block; width: calc(100% - 4em); padding: .5em;  border: 1px solid grey;  text-decoration: none;}
+.history ul li input[type="button"] { float: right; height: 3em; width: 3em; }
+.history ul li .inputRegex, .history ul li .outputRegex { font-size: 1.1em; color: grey;padding: .5em;}

view/index.html

@@ -33,11 +33,12 @@ <h2>Output renaming rule</h2>
           <input type="text" id="outputRegex" value="$1 (renamed)"/>
         </div>
       </div>
-    </ul>
     </div>
     <div class="history">
+      <h2>history</h2>
+      <ul>
+      </ul>
     </div>
-
   </body>
 
   <script>