Search/Jump in Mobile view

[meichthys]

One feature that would really help is if there was a search or jump feature in the mobile view.
Currently for me the mobile view isn't really usable since i have thousands of notes and node levels.
Related Issue: #692

[jhc86]

I'm sharing a search tool that I made some years ago and stopped working on (and mostly stopped using) after zadam rolled out a very helpful "new tab" page

I no longer use it on desktop, but it /did/ help me find a page on mobile the other night.

It's so old and I don't use it often, so it's pretty messy. I think I had some generic icons setup at one point in time (with the old icon system) and they don't work, but otherwise it seems to still work OK.

It will start displaying search results after you type three+ characters

I assume if you have a keyboard attached, you can use it to navigate the results, (selected note should be highlighted in yellow) and use enter to jump to the targeted note. It tests OK on desktop, but I just tap on mobile.

Hope someone finds this helpful

glamour shot:

exported tree:
search.zip

js-frontend note:

//IIFE begin
(async function () { /* ... */
//IIFE begin

//declare namespaces
window.jghoffay = window.jghoffay || {};
window.jghoffay.searchTool = window.jghoffay.searchTool || {};

window.jghoffay.searchTool = {
  noteCache: [],
  init: function() {
    console.log('.init()');
    //init state
    this.selectedRow = -1;
    this.outputDocumentElement = document.getElementById("searchToolOutput");
    this.inputDocumentElement = document.getElementById("searchToolInput");
    this.formDocumentElement = document.getElementById("searchToolForm");
    window.jghoffay.searchTool.inputDocumentElement.addEventListener('input', async function (e) {
      //called each time contents of text input changes
      window.jghoffay.searchTool.selectedRow = -1;

      if (window.jghoffay.searchTool.inputDocumentElement.value.length < 3) {
        //empty, do nothing
        window.jghoffay.searchTool.cleanDocumentContainer();
      }
      else {
        await window.jghoffay.searchTool.refreshNoteCache();
        await window.jghoffay.searchTool.cleanDocumentContainer();
        window.jghoffay.searchTool.render();
      }
    });
window.jghoffay.searchTool.formDocumentElement.addEventListener('submit', function () {
      // called for enter
      if(window.jghoffay.searchTool.selectedRow != -1) {
        api.activateNote(window.jghoffay.searchTool.noteCache[window.jghoffay.searchTool.selectedRow].noteObject.noteId);
      }
      else if (window.jghoffay.searchTool.inputDocumentElement.value == '') {
        //empty, do nothing
      }
      else {
        window.jghoffay.searchTool.inputDocumentElement.value = '';
      }
    });
    window.jghoffay.searchTool.inputDocumentElement.addEventListener('keydown', async function(event) {
      if(event.key == 'ArrowDown') {
        if(window.jghoffay.searchTool.selectedRow+1 < window.jghoffay.searchTool.noteCache.length) {
          window.jghoffay.searchTool.selectedRow++;
        }
        await window.jghoffay.searchTool.cleanDocumentContainer();
        window.jghoffay.searchTool.render();
      } else if(event.key == 'ArrowUp') {
        if(window.jghoffay.searchTool.selectedRow > -1) {
          window.jghoffay.searchTool.selectedRow--;
        }
        await window.jghoffay.searchTool.cleanDocumentContainer();
        window.jghoffay.searchTool.render();
      } else if(event.key == 'Escape') {
        window.jghoffay.searchTool.selectedRow = -1;
        window.jghoffay.searchTool.inputDocumentElement.value = '';
        window.jghoffay.searchTool.cleanDocumentContainer();
      }
    });
  },
  cleanDocumentContainer: function() {
    console.log('.cleanDocumentContainer()');
    //clean the document container element of children
    while (this.outputDocumentElement.firstChild) {
        this.outputDocumentElement.removeChild(this.outputDocumentElement.firstChild);
    }
  },
  render: function(){
    for (var i = 0; i < window.jghoffay.searchTool.noteCache.length; i++) {
      const currentId = [i].id;
      var textnodeTitle = document.createTextNode(window.jghoffay.searchTool.noteCache[i].noteObject.title);
      var aelement = document.createElement('a');

      aelement.href = "#root/" + window.jghoffay.searchTool.noteCache[i].noteObject.noteId;
      aelement.appendChild(textnodeTitle);

      //span for item icon
      let iconSpan = document.createElement('span');
      iconSpan.classList.add('fancytree-custom-icon');
      iconSpan.classList.add('jam');

      if(window.jghoffay.searchTool.noteCache[i].kind == 'person') {
        iconSpan.classList.add('jam-user');
      } else if(window.jghoffay.searchTool.noteCache[i].hasChildren) {
        iconSpan.classList.add('jam-folder');
      } else {
        iconSpan.classList.add('jam-file');
      }

      let currentRow = document.createElement('tr');
      console.log('result:' + (window.jghoffay.searchTool.selectedRow == i));
      if (window.jghoffay.searchTool.selectedRow == i) {
        currentRow.classList.add('highlightedRow');
      }

      let tdTitle = document.createElement('td');

      tdTitle.appendChild(iconSpan);
      tdTitle.appendChild(aelement);
      currentRow.appendChild(tdTitle);
      window.jghoffay.searchTool.outputDocumentElement.appendChild(currentRow);
      cLogObject(currentRow);
      window.jghoffay.searchTool.inputDocumentElement.focus();
    }
  },
  refreshNoteCache: async function() {
    this.noteCache.length = 0; //clear cache
    this.noteCache.push(...await api.runOnServer(async (paramTitle) => {
      const filterednotes = await api.searchForNotes(paramTitle);
      let processedArray = [];
      for (const filterednote of filterednotes) {
        let processedObject = {};
        processedObject.noteObject = filterednote;

        processedArray.push({ noteObject:filterednote, hasChildren:await filterednote.hasChildren(), kind:await filterednote.getLabelValue('kind')});

        }
        return processedArray;
    }, [window.jghoffay.searchTool.inputDocumentElement.value]));
    cLogObject(window.jghoffay.searchTool.noteCache);
  }
};


function cLogObject(pObject, pDescription) {
  console.log('/##cLogObject: ' + pDescription);
  console.log(JSON.parse(JSON.stringify(pObject)));
  console.log('\\##cLogObject');
}



window.jghoffay.searchTool.init();
window.jghoffay.searchTool.render();
$('#searchToolInput').focus()





//create stylesheet
var sheet = (function() {
	// Create the <style> tag
var style = document.createElement("style");

	// Add a media (and/or media query) here if you'd like!
	// style.setAttribute("media", "screen")
    ///// style.setAttribute("media", "only screen and (max-width : 1024px)")

	// WebKit hack :(
	style.appendChild(document.createTextNode(""));

	// Add the <style> element to the page
	document.head.appendChild(style);

	return style.sheet;
})();
//add css rules
sheet.insertRule(".dropbtn {" +
  "background-color: #3498DB;" +
  "color: white;" +
  "padding: 16px;" +
  "font-size: 16px;" +
  "border: none;" +
  "cursor: pointer; }", 0);
sheet.insertRule(".dropbtn:hover, .dropbtn:focus {" +
  "background-color: #2980B9; }", 0);
sheet.insertRule(".dropdown {" +
  "position: relative;" +
  "display: inline-block;}", 0);
/* Dropdown Content (Hidden by Default) */
sheet.insertRule(".dropdown-content {" +
  "display: none;" +
  "position: absolute;" +
  "background-color: #f1f1f1;" +
  "min-width: 160px;" +
  "box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);" +
  "z-index: 1;" +
  "}", 0);
/* Links inside the dropdown */
sheet.insertRule(".dropdown-content a {" +
  "color: black;" +
  "padding: 12px 16px;" +
  "text-decoration: none;" +
  "display: block; }");
/* Change color of dropdown links on hover */
sheet.insertRule(".dropdown-content a:hover {background-color: #ddd}");
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
sheet.insertRule("div.show {display:block;}");
sheet.insertRule("div.cssfoo3 { background: yellow; }", 0);
sheet.insertRule("tr.highlightedRow { background: yellow; }", 0);

//IIFE end
})();
//IIFE end

html note to be rendered:

<form id="searchToolForm">
  <input id="searchToolInput" autofocus></input><BR>
</form>
<table id="searchToolOutput" class='datacell'></table>

[meichthys]

For any others who may come across this, quick search has been implemented in the mobile view 👍