Fully integrated with DOM (issue #133).

codex-team · Feb 15, 2018 · d65ad0d · d65ad0d
1 parent fb35b87
commit d65ad0d
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 20 deletions.
diff --git a/public/build/bundle.css b/public/build/bundle.css
diff --git a/public/build/bundle.js b/public/build/bundle.js
diff --git a/public/javascripts/aside.js b/public/javascripts/aside.js
@@ -239,13 +239,32 @@ export default class Aside {
    *
    * @param {Boolean} isRootFolder - true if Note is included to the Root Folder
    */
-  addMenuItem(noteData, isRootFolder) {
+  addMenuItem(noteData, isRootFolder, isSearch) {
+    /**
+     * Creating note DOM
+     * @param {String} title   - name of the note
+     * @param {Object} dataset - dataset of the root DOM note element
+     */
+    let createNoteDOM = (title, dataset) => {
+      let item = this.makeMenuItem(title, dataset);
+
+      notesMenu.insertAdjacentElement('afterbegin', item);
+
+      item.addEventListener('click', event => this.menuItemClicked(event) );
+    };
+
     if (!noteData.title) {
       console.warn('Can not add Note to the Aside because it has no title', noteData);
       return;
     }
 
-    codex.notes.searcher.pushData(noteData);
+    if (isSearch) {
+      notesMenu = document.querySelector('[name="js-found-notes-menu"]');
+      createNoteDOM(noteData.title, {id: noteData._id});
+      return;
+    } else {
+      codex.notes.searcher.pushData(noteData);
+    }
 
     let notesMenu;
 
@@ -268,11 +287,7 @@ export default class Aside {
       return;
     }
 
-    let item = this.makeMenuItem(noteData.title, {id: noteData._id});
-
-    notesMenu.insertAdjacentElement('afterbegin', item);
-
-    item.addEventListener('click', event => this.menuItemClicked(event) );
+    createNoteDOM(noteData.title, {id: noteData._id});
   }
 
   /**

diff --git a/public/javascripts/searcher.js b/public/javascripts/searcher.js
@@ -20,6 +20,14 @@ export default class Searcher {
       }
     };
 
+    /**
+     * CSS classes for DOM
+     * @type {Object}
+     */
+    this.CSS = {
+      hidden: 'searcher__hidden'
+    };
+
     /**
      * Default value in the search input form
      * @type {String}
@@ -33,14 +41,28 @@ export default class Searcher {
     this.dataset = [];
 
     /**
-     * Filtered results
-     * @type {Array}
+     * Keyword from search field saved after search mode was disabled
+     * @type {Strng}
      */
-    this.found = [];
+    this.lastSearch = '';
 
     this.DOM.input.addEventListener('focus', () => {
-      if (this.DOM.input.value == this.defaultInputValue) {
-        this.DOM.input.value = '';
+      this.DOM.notes.created.classList.add(this.CSS.hidden);
+      this.DOM.notes.found.classList.remove(this.CSS.hidden);
+      this.DOM.foldersContainer.classList.add(this.CSS.hidden);
+
+      this.DOM.input.value = this.lastSearch;
+    });
+
+    this.DOM.input.addEventListener('blur', (event) => {
+      if (event.relatedTarget != this.DOM.notes.found) {
+        this.DOM.notes.found.classList.add(this.CSS.hidden);
+        this.DOM.notes.found.classList.add(this.CSS.hidden);
+        this.DOM.notes.created.classList.remove(this.CSS.hidden);
+        this.DOM.foldersContainer.classList.remove(this.CSS.hidden);
+
+        this.lastSearch = this.DOM.input.value;
+        this.DOM.input.value = this.defaultInputValue;
       }
     });
 
@@ -49,6 +71,18 @@ export default class Searcher {
     });
   }
 
+  /**
+   * Cleans search results
+   * @param {Object} data - data to push to the dataset
+   */
+  reset() {
+    let found = this.DOM.notes.found,
+        parent = found.parentNode;
+
+    this.DOM.notes.found = parent.removeChild(found).cloneNode(false);
+    parent.appendChild(this.DOM.notes.found);
+  }
+
   /**
    * Push note data to array where search will be done
    * @param {Object} data - data to push to the dataset
@@ -88,15 +122,13 @@ export default class Searcher {
    * @param {String} title - key to find data
    */
   search( title ) {
-    let found = [];
+    this.reset();
 
     this.dataset.forEach((element) => {
       if (element.title.indexOf(title) == 0)      {
-        found.push(element);
+        codex.notes.aside.addMenuItem(element, true, true);
       }
     });
-
-    console.log(found);
   }
 
 }
diff --git a/public/stylesheets/components/searcher.css b/public/stylesheets/components/searcher.css
@@ -1,5 +1,9 @@
 .searcher {
 
+    &__hidden {
+        display: none;
+    }
+
     &__input {
         background: none;
     }

diff --git a/src/views/aside.pug b/src/views/aside.pug
@@ -48,7 +48,7 @@
                             //-
                             //- div.notes-list__scroll
                             //-
-                            ul.notes-list__content(name="js-found-notes-menu")
+                            ul.notes-list__content(name="js-found-notes-menu", tabindex="0")
                             //-
                             //- div.notes-list__scroll
                             //-