search notes input box

TODO

@@ -1,7 +1,8 @@
-- when jumping to notes, tree does not scroll
 - logout detection
 - conflict detection
 
 Later:
+- collapse all button
+- context menu on items (add subnote etc.)
 - drag and drop for notes (currently only keyboard)
 - sync with sync server

src/templates/app.html

@@ -13,8 +13,14 @@
 
     <div id="content" style="margin-left: auto; margin-right: auto; width: 1100px">
       <div class="hide-toggle" style="width: 300px; height: 100%; float: left;">
-        <button type="button" class="btn" onclick="createNewTopLevelNote()">Create new note</button>
+        <!--<button type="button" class="btn" onclick="createNewTopLevelNote()">Create new note</button>-->
 
+        <p>
+          <label>Search:</label>
+          <input name="search" autocomplete="off">
+          <button id="btnResetSearch">&times;</button>
+          <span id="matches"></span>
+        </p>
         <div id="tree">
         </div>
       </div>

static/js/init.js

@@ -97,6 +97,9 @@ $(document).on('click', 'div.popover-content a', function(e) {
 let linkInfo;
 
 $(document).bind('keydown', 'alt+l', function() {
+    var range = $('#noteDetail').summernote('createRange');
+    console.log("range:", range);
+
     $("#noteAutocomplete").val('');
     $("#linkTitle").val('');
 
@@ -154,3 +157,7 @@ $("#addLinkButton").click(function() {
         });
     }
 });
+
+$(document).bind('keydown', 'alt+s', function() {
+    $("input[name=search]").focus();
+});

static/js/tree.js

@@ -147,7 +147,7 @@ $(function(){
 
         $("#tree").fancytree({
             autoScroll: true,
-            extensions: ["hotkeys"],
+            extensions: ["hotkeys", "filter"],
             source: notes,
             activate: function(event, data){
                 const node = data.node.data;
@@ -167,7 +167,39 @@ $(function(){
             },
             hotkeys: {
                 keydown: keybindings
+            },
+            filter: {
+                autoApply: true,   // Re-apply last filter if lazy data is loaded
+                autoExpand: true, // Expand all branches that contain matches while filtered
+                counter: false,     // Show a badge with number of matching child nodes near parent icons
+                fuzzy: false,      // Match single characters in order, e.g. 'fb' will match 'FooBar'
+                hideExpandedCounter: true,  // Hide counter badge if parent is expanded
+                hideExpanders: false,       // Hide expanders if all child nodes are hidden by filter
+                highlight: true,   // Highlight matches by wrapping inside <mark> tags
+                leavesOnly: false, // Match end nodes only
+                nodata: true,      // Display a 'no data' status node if result is empty
+                mode: "hide"       // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
             }
         });
     });
 });
+
+$("input[name=search]").keyup(function (e) {
+    let match = $(this).val();
+
+    if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === "") {
+        $("button#btnResetSearch").click();
+        return;
+    }
+
+    // Pass a string to perform case insensitive matching
+    let tree = $("#tree").fancytree("getTree");
+    tree.filterBranches(match);
+}).focus();
+
+$("button#btnResetSearch").click(function () {
+    $("input[name=search]").val("");
+
+    let tree = $("#tree").fancytree("getTree");
+    tree.clearFilter();
+});