Recreated DOM tree for search purposes(issue #133).

codex-team · Feb 13, 2018 · 4c3343d · 4c3343d
1 parent 9a4babf
commit 4c3343d
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 35 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/searcher.js b/public/javascripts/searcher.js
@@ -8,8 +8,12 @@ export default class Searcher {
    */
   constructor() {
     this.DOM = {
-      searchField: document.getElementsByClassName('searcher__searchField')[0],
-      found: document.getElementsByClassName('searcher__found')[0],
+      input: document.getElementsByClassName('searcher__input')[0],
+      foldersContainer: document.getElementsByName('js-folders-container')[0],
+      notes: {
+        created: document.getElementsByName('js-notes-menu')[0],
+        found: document.getElementsByName('js-found-notes-menu')[0]
+      }
     };
 
     /**
@@ -24,8 +28,8 @@ export default class Searcher {
      */
     this.found = [];
 
-    this.DOM.searchField.addEventListener('keyup', () => {
-      this.search(this.DOM.searchField.value);
+    this.DOM.input.addEventListener('keyup', () => {
+      this.search(this.DOM.input.value);
     });
   }
 
@@ -75,6 +79,8 @@ export default class Searcher {
         found.push(element);
       }
     });
+
+    console.log(found);
   }
 
 }
diff --git a/public/stylesheets/base.css b/public/stylesheets/base.css
@@ -7,6 +7,7 @@
 @import "components/folder-header.css";
 @import "components/folder-settings.css";
 @import "components/status-bar.css";
+@import "components/searcher.css";
 
 body {
     height: 100vh;

diff --git a/public/stylesheets/components/aside.css b/public/stylesheets/components/aside.css
@@ -12,6 +12,13 @@
     color: var(--aside-color);
     font-size: 13.7px;
     letter-spacing: 0.3px;
+
+    &__content-wrap {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        margin-top: 15px;
+    }
 
     &__header {
         position: relative;

diff --git a/public/stylesheets/components/searcher.css b/public/stylesheets/components/searcher.css
@@ -4,8 +4,4 @@
 
     }
 
-    &__found {
-
-    }
-
 }
diff --git a/src/views/aside.pug b/src/views/aside.pug
@@ -12,35 +12,48 @@
             span.add-note-button(name="js-new-note-button")
                 include ../../public/svg/pencil.svg
                 | New note
+
+            //-
+            //- Search
+            //-
+            .searcher
+                input.searcher__input
 
             //-
             //- Scrollable zone
             //-
             .aside__scrollable
                 .aside__scrollable-content(name="js-scrollable")
 
-                    .aside__section-title Folders
+                    .aside__content-wrap(name="js-folders-container")
+                        .aside__section-title Folders
 
-                    section#folders-section
+                        section#folders-section
 
-                        .notes-list
-                            ul.notes-list__content(name="js-folders-menu")
+                            .notes-list
+                                ul.notes-list__content(name="js-folders-menu")
 
-                        .aside__add-button(name="js-new-folder-button")
-                            include ../../public/svg/plus.svg
-                            | Add folder
+                            .aside__add-button(name="js-new-folder-button")
+                                include ../../public/svg/plus.svg
+                                | Add folder
 
-                        fieldset.aside__input.hide(name="js-new-folder-field")
-                            input(placeholder="Enter title", type="text")
-                            include ../../public/svg/arrow-right.svg
+                            fieldset.aside__input.hide(name="js-new-folder-field")
+                                input(placeholder="Enter title", type="text")
+                                include ../../public/svg/arrow-right.svg
 
-                    .aside__section-title Notes
+                    .aside__content-wrap(name="js-notes-container")
+                        .aside__section-title Notes
 
-                    .notes-list
-                        ul.notes-list__content(name="js-notes-menu")
-                        //-
-                        //- div.notes-list__scroll
-                        //-
+                        .notes-list
+                            ul.notes-list__content(name="js-notes-menu")
+                            //-
+                            //- div.notes-list__scroll
+                            //-
+                            ul.notes-list__content(name="js-found-notes-menu")
+                            //-
+                            //- div.notes-list__scroll
+                            //-
+                            
 
 
         .aside-swiper__right
@@ -90,11 +103,3 @@
                     .aside__section-title Notes
                     .notes-list
                         ul.notes-list__content(name="js-folder-notes-menu")
-
-
-    //-
-    //- Search
-    //-
-    .searcher
-        input.searcher__searchField
-        .searcher__found
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,8 +4,4 @@ @@
         }
-        &__found {
-        }
     }