[PLUGIN] Hidden Notes

[abitofevrything]

This plugin allows you to mark notes as "hidden" so you can toggle their visibility at the click of a button.

Setting up the plugin

Two notes are needed for this plugin to function:

The 1st note contains the CSS for this plugin.
Create a new note, set its type to CSS and add the #appCss label. From there, insert this content:

:root {
    --hidden-display-style: none;
}

span.hidden {
    display: var(--hidden-display-style) !important;
    opacity: 0.75;
}

The 2nd note contains the logic for this plugin.
Create a new note, set its type to JS Frontend and add the #run=frontendStartup label. From there, insert this content:

await glob.appContext.initialized;
const appContext = glob.appContext;

let buttonElement;
async function hide() {
    document.documentElement.style.setProperty('--hidden-display-style', 'none');
    
    for (let el of $('li:has(> span.hidden)')) {
        el.setAttribute('style', 'display: none;')
    }
    
    buttonElement.dataset['originalTitle'] = "Show hidden notes";
    buttonElement.classList.remove('bx-hide');
    buttonElement.classList.add('bx-show');
}

async function show() {
    document.documentElement.style.setProperty('--hidden-display-style', 'block');
    
    for (let el of $('li:has(> span.hidden)')) {
        el.removeAttribute('style');
    }
    
    buttonElement.dataset['originalTitle'] = "Hide hidden notes";
    buttonElement.classList.remove('bx-show');
    buttonElement.classList.add('bx-hide');
}

function isHidden() {
    return getComputedStyle(document.documentElement)
           .getPropertyValue('--hidden-display-style')
           .trim() == 'none';
}

function toggle() {
    if (isHidden()) {
        show();
    } else {
        hide();
    }
    const noteList = appContext.getComponentByEl(document.querySelector('.note-list-widget'));
    // Force refresh
    if (noteList.isIntersecting) {
        noteList.renderNoteList(noteList.note);
    }
}

/* ------------------------------------------- GUI Button ------------------------------------------- */
api.addButtonToToolbar({
    title: 'Show hidden notes',
    icon: 'show',
    action: toggle
});

// Once button element is added to DOM, we can retrieve it
buttonElement = document.querySelector(`#toolbar-button-Show-hidden-notes`)

/* ----------------------------------------- Wrapped methods ----------------------------------------- */
// Tab context set note (open note)
const tabContextProto = Object.getPrototypeOf(appContext.tabManager.getActiveContext());

const original_setNote = tabContextProto.setNote;
tabContextProto.setNote = async function(inputNotePath, triggerSwitchEvent = true) {
    const splitPath = inputNotePath.split('/');
    
    // If hidden notes are currently hidden and we try
    // to tab to one, find first non-hidden parent and
    // tab to that instead
    if (isHidden()) {
        while (splitPath.length > 1) {
            const currentNote = await api.getNote(splitPath[splitPath.length - 1]);
            const isHidden = currentNote.hasLabel('hidden');
        
            if (isHidden) {
                splitPath.pop();
            } else {
                break;
            }
        }
    }

    return await original_setNote.call(this, splitPath.join('/'), triggerSwitchEvent);
}

// Note tree extra classes (#hidden attr -> add .hidden css class)
const noteTree = appContext.getComponentByEl(document.querySelector('.tree-wrapper'));
const noteTreeProto = Object.getPrototypeOf(noteTree);

// Wrap both init and reload methods, as well as the individual update method
const original_initFancyTree = noteTreeProto.initFancyTree;
noteTreeProto.initFancyTree = function() {
    original_initFancyTree.call(this);
    updateHiddenClass(this.tree.rootNode);
}

const original_reloadTreeFromCache = noteTreeProto.reloadTreeFromCache;
noteTreeProto.reloadTreeFromCache = async function() {
    await original_reloadTreeFromCache.call(this);
    updateHiddenClass(this.tree.rootNode);
}

const original_updateNode = noteTreeProto.updateNode;
noteTreeProto.updateNode = function(node) {
    original_updateNode.call(this, node);
    // note.extraClasses is reset on note update
    updateHiddenClassOnNode(node);
}

function flattenTree(node) {
    const ret = [node];
    
    if (node.children) {
        for (const child of node.children) {
            ret.push(...flattenTree(child))
        }
    }
    return ret;
}

function getNotePath(node) {
    const path = [];

    while (node) {
        if (node.data.noteId) {
            path.push(node.data.noteId);
        }
        node = node.getParent();
    }
        
    return path;
}

function updateHiddenClass(tree) {
    const allNodes = flattenTree(tree.children[0]);
    
    for (const node of allNodes) {
        updateHiddenClassOnNode(node);
    }
    
    if (isHidden()) {
        // Call hide() again to ensure container li's are hidden
        hide();
    }
}

async function updateHiddenClassOnNode(node) {
    let isHidden = false;
    const path = getNotePath(node);
        
    for (let noteId of path) {
        if ((await api.getNote(noteId)).hasLabel('hidden')) {
            isHidden = true;
            break;
        }
    }
        
    if (isHidden) {
        node.addClass('hidden');
    } else {
        node.removeClass('hidden');
    }
}

noteTree.reloadTreeFromCache();

// Note attribute change (if #hidden label added, add needed CSS classes)
const attributeEditor = appContext.getComponentByEl(document.querySelector('.attribute-list > div'));
const attributeEditorProto = Object.getPrototypeOf(attributeEditor);

const original_save = attributeEditorProto.save;
attributeEditorProto.save = async function() {
    await original_save.call(this);
    
    updateHiddenClass(appContext.mainTreeWidget.tree.rootNode);
}

// Don't show hidden notes in note list
const noteList = appContext.getComponentByEl(document.querySelector('.note-list-widget'));
const noteListProto = Object.getPrototypeOf(noteList);

const original_renderNoteList = noteListProto.renderNoteList;
noteListProto.renderNoteList = async function(note) {
    const noteProto = Object.getPrototypeOf(note);
    const original_getChildNoteIds = noteProto.getChildNoteIds;
    
    if (isHidden()) {
        noteProto.getChildNoteIds = function() {
            return this.children.filter(n => {
                return !this.froca.getNoteFromCache(n)?.hasLabel('hidden');
            });
        }
    }
    
    await original_renderNoteList.call(this, note);
    
    noteProto.getChildNoteIds = original_getChildNoteIds;
}

Now you can either reload the app or execute the JS note.

Using the plugin

Any notes with the #hidden label will be marked as hidden notes, and by default these are:

• Not rendered in the note tree
• Not rendered in note lists (at the bottom of notes)
• Cannot be opened (ex: by deleting a note, the app might try to open a hidden note to render instead of the deleted note)

Note that hidden notes only hide notes directly under them in the note tree, if a note under a hidden note has a clone elsewhere that clone will still be rendered. If you want clones to be hidden too, add the (inheritable) modifier to the #hidden attribute.

By clicking the eye button

that appears in the sidebar, you can toggle between hiding hidden notes and showing them to allow editing of hidden notes.

[blumpcus]

This is wonderful, thank you for the useful addition!

[anantone]

Very nice, thank you!

[meichthys]

I could have done something wrong, but this doesn't seem to work anymore. I'm getting a "isHidden" functiono not defined error after running the script.
After trying to run the script, I can't seem to open any notes, but i was able to remove the script notes and refresh to revert.

[abitofevrything]

I no longer use trillium and I know it's changed a lot since I wrote this script so it might just be out of date, but if you send me the stack trace/error I can take a look

[meichthys]

OK, no problem. I will take a look at things myself if I need to. I was just curious.