[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!

[one-ant]

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.

[lawgsy]

Hi I've just updated this for the latest version of Trillium (version 0.97.2). It'll do virtually the same I think as the one above. It doesn't use a widget instead of the toolbar yet but so be it, it functions. I'm sure this isn't entirely the way it's meant to be written but I'm glad it works.

It does NOT require the CSS note anymore, just a JS as described how to make above with the type JS Frontend and label #run=frontendStartup

I have no idea how it deals with cloned notes, I'm sure it works the same as the one above.
There is some wonky behaviour I think when you try to look for a hidden note and click it and still might be able to see the content. I just wanted certain notes out of the tree myself. Feel free to extend the functionality.

It does append (hidden) after showing hidden notes and makes the title italic.

Enjoy.

// Global State
window.hiddenNotesAreVisible = true;

// Show/Hide Logic
window.showNotes = async () => {
    $('li:has(> span.hidden)').show().addClass("fst-italic");
    $('span.hidden').append('<span id="hidden_text_elem"> (hidden)</span>');
    window.hiddenNotesAreVisible = true;

    $('button.bx-show').removeClass("bx-show").addClass("bx-hide");
};

window.hideNotes = async () => {
    $('li:has(> span.hidden)').hide();
    $('span.hidden').find('#hidden_text_elem').remove();
    window.hiddenNotesAreVisible = false;

    $('button.bx-hide').removeClass("bx-hide").addClass("bx-show");
};

window.toggleNotes = async () => {
    window.hiddenNotesAreVisible ? window.hideNotes() : window.showNotes();
};

// Toolbar Button
api.addButtonToToolbar({
    title: 'Show hidden notes',
    icon: 'show',
    action: window.toggleNotes
});

// Tab Switching Logic
const tabContextProto = Object.getPrototypeOf(api.getActiveContext());
const original_setNote = tabContextProto.setNote;

tabContextProto.setNote = async function(inputNotePath, triggerSwitchEvent = true) {
    const splitPath = inputNotePath.split('/');

    if (!window.hiddenNotesAreVisible) {
        while (splitPath.length > 1) {
            const currentNote = await api.getNote(splitPath.at(-1));
            if (currentNote.hasLabel('hidden')) {
                splitPath.pop();
            } else {
                break;
            }
        }
    }

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

// Tree Logic
const noteTree = api.getComponentByEl(document.querySelector('.tree-wrapper'));
const noteTreeProto = Object.getPrototypeOf(noteTree);

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);

    setTimeout(() => {
        if (window.hiddenNotesAreVisible) window.hideNotes();
    }, 100);
};

const original_updateNode = noteTreeProto.updateNode;
noteTreeProto.updateNode = function(node) {
    original_updateNode.call(this, node);
    updateHiddenClassOnNode(node);
};

// Tree Helpers
function flattenTree(node) {
    return [node, ...(node.children?.flatMap(flattenTree) || [])];
}

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]);
    allNodes.forEach(updateHiddenClassOnNode);

    if (!window.hiddenNotesAreVisible) window.hideNotes();
}

async function updateHiddenClassOnNode(node) {
    const path = getNotePath(node);
    const isHidden = await Promise.any(path.map(async id => {
        const note = await api.getNote(id);
        return note.hasLabel('hidden');
    }));

    node.toggleClass('hidden', isHidden);
}

// Attribute Editor Hook
const attributeEditor = $('.attribute-list > div');
const attributeEditorProto = Object.getPrototypeOf(attributeEditor);
const original_save = attributeEditorProto.save;

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

// Note List Filtering
const noteList = $('.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 (window.hiddenNotesAreVisible) {
        noteProto.getChildNoteIds = function() {
            return this.children.filter(id => {
                const childNote = this.froca.getNoteFromCache(id);
                return !childNote?.hasLabel('hidden');
            });
        };
    }

    await original_renderNoteList.call(this, note);
    noteProto.getChildNoteIds = original_getChildNoteIds;
};

// Final Initialization
noteTree.reloadTreeFromCache();
console.log('[HideNotes] Plugin initialized');