Added highlighting (issue #133).

codex-team · Feb 22, 2018 · 4ef6862 · 4ef6862
1 parent 967adac
commit 4ef6862
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 17 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
@@ -238,15 +238,17 @@ export default class Aside {
    * @param {number} noteData.folderId
    *
    * @param {Boolean} isRootFolder - true if Note is included to the Root Folder
+   * @param {Object} searchData    - object with search data
    */
-  addMenuItem(noteData, isRootFolder, isSearch) {
+  addMenuItem(noteData, isRootFolder, searchData) {
     /**
      * Creating note DOM
-     * @param {String} title   - name of the note
-     * @param {Object} dataset - dataset of the root DOM note element
+     * @param {String} title     - name of the note
+     * @param {Object} dataset   - dataset of the root DOM note element
+     * @param {Object} highlight - object with coords of highlight for search
      */
-    let createNoteDOM = (title, dataset) => {
-      let item = this.makeMenuItem(title, dataset);
+    let createNoteDOM = (title, dataset, highlight) => {
+      let item = this.makeMenuItem(title, dataset, highlight);
 
       notesMenu.insertAdjacentElement('afterbegin', item);
 
@@ -258,9 +260,9 @@ export default class Aside {
       return;
     }
 
-    if (isSearch) {
+    if (searchData) {
       notesMenu = document.querySelector('[name="js-found-notes-menu"]');
-      createNoteDOM(noteData.title, {id: noteData._id});
+      createNoteDOM(noteData.title, {id: noteData._id}, searchData.highlight);
       return;
     } else {
       codex.notes.searcher.pushData({title: noteData.title, _id: noteData._id});
@@ -312,16 +314,23 @@ export default class Aside {
 
   /**
    * Makes aside menu item
-   * @param  {String} title   - item title
-   * @param  {object} dataset - data to store in dataset
+   * @param  {String} title     - item title
+   * @param  {Object} dataset   - data to store in dataset
+   * @param  {Object} highlight - pointers to part of title text to highlight
    * @return {Element}
    */
-  makeMenuItem(title, dataset) {
+  makeMenuItem(title, dataset, highlight) {
     title = this.createMenuItemTitle(title);
 
-    let item = $.make('li', null, {
-      textContent: title
-    });
+    let item = $.make('li');
+
+    if (highlight) {
+      item.innerHTML = title.substring(0, highlight.start) +
+        '<span>' + title.substring(highlight.start, highlight.end) + '</span>'
+        + title.substring(highlight.end);
+    } else {
+      item.textContent = title;
+    }
 
     for (let key in dataset) {
       item.dataset[key] = dataset[key];

diff --git a/public/javascripts/searcher.js b/public/javascripts/searcher.js
@@ -122,11 +122,19 @@ export default class Searcher {
    * @param {String} title - key to find data
    */
   search( title ) {
+    let highlight = {
+      start: 0,
+      end: 0
+    };
+
     this.reset();
 
     this.dataset.forEach((element) => {
-      if (element.title.indexOf(title) == 0)      {
-        codex.notes.aside.addMenuItem(element, true, true);
+      highlight.start = element.title.indexOf(title);
+
+      if (highlight.start > -1)      {
+        highlight.end = highlight.start + title.length;
+        codex.notes.aside.addMenuItem(element, true, {highlight: highlight});
       }
     });
   }

diff --git a/public/stylesheets/components/searcher.css b/public/stylesheets/components/searcher.css
@@ -23,3 +23,7 @@
     }
 
 }
+
+[name='js-found-notes-menu'] span {
+    color: white;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,3 +23,7 @@ @@
         }
     }
+    [name='js-found-notes-menu'] span {
+        color: white;
+    }