CheezeNotes/static/modules/cheezenotes.js

import { saveSelection, loadSelection, insertTextAtCaret, insertAtLineStart } from './caret.js';
import { formatLine, load, save, formatTable, redrawTables, appendData, dpwidth } from './md.js';

const showtokens = [
    { fontSize: 0 },
    { fontSize: '90%' }
];

const hidetokens = [
    { fontSize: '90%' },
    { fontSize: 0 }
];

function timeoutSave() {
    if (window.tos !== null) {
        window.clearTimeout(window.tos);
    }
    window.tos = window.setTimeout(onsave, 5000);
}

function showTokens() {
    let tokens = document.getElementsByClassName('token');
    for (let i = 0; i < tokens.length; i++) {
        tokens[i].animate(showtokens, { duration: 50, iterations: 1 });
    }
}

function hideTokens() {
    let tokens = document.getElementsByClassName('token');
    for (let i = 0; i < tokens.length; i++) {
        tokens[i].animate(hidetokens, { duration: 50, iterations: 1 });
    }
}

function ontextarea(e) {
    let ta = document.getElementById('ta');
    let taButton = document.getElementById('taButton');
    if (taButton.classList.contains('buttonoff')) {
        ta.style.display = 'inline';
    } else {
        ta.style.display = 'none';
    }
}

function onboldbutton(e) {
    e.preventDefault();
    let cheezenotes = document.getElementById('cheezenotes');
    cheezenotes.focus();
    insertTextAtCaret('**', '**');
    onedit(e);
    return false;
}

function onitalicbutton(e) {
    e.preventDefault();
    let cheezenotes = document.getElementById('cheezenotes');
    cheezenotes.focus();
    insertTextAtCaret('_', '_');
    onedit(e);
    return false;
}

function onstrikebutton(e) {
    e.preventDefault();
    let cheezenotes = document.getElementById('cheezenotes');
    cheezenotes.focus();
    insertTextAtCaret('~~', '~~');
    onedit(e);
    return false;
}

function onmonobutton(e) {
    e.preventDefault();
    let cheezenotes = document.getElementById('cheezenotes');
    cheezenotes.focus();
    insertTextAtCaret('`', '`');
    onedit(e);
    return false;
}

function onh1button(e) {
    e.preventDefault();
    let cheezenotes = document.getElementById('cheezenotes');
    cheezenotes.focus();
    let sel = saveSelection();
    if (sel[0].classList.contains('h')) {
        return false;
    } else {
        insertAtLineStart('#&nbsp;');
    }
    onedit(e);
    return false;
}

function onh2button(e) {
    e.preventDefault();
    let cheezenotes = document.getElementById('cheezenotes');
    cheezenotes.focus();
    let sel = saveSelection();
    if (sel[0].classList.contains('h')) {
        return false;
    } else {
        insertAtLineStart('##&nbsp;');
    }
    onedit(e);
    return false;
}

function onh3button(e) {
    e.preventDefault();
    let cheezenotes = document.getElementById('cheezenotes');
    cheezenotes.focus();
    let sel = saveSelection();
    if (sel[0].classList.contains('h')) {
        return false;
    } else {
        insertAtLineStart('###&nbsp;');
    }
    onedit(e);
    return false;
}

function onbqbutton(e) {
    e.preventDefault();
    let cheezenotes = document.getElementById('cheezenotes');
    cheezenotes.focus();
    insertTextAtCaret('>', '');
    onedit(e);
    return false;
}

function onsave(e) {
    let saveButton = document.getElementById('saveButton');
    saveButton.disabled = true;
    let text = save(document.getElementById('ta'), document.getElementById('cheezenotes'));
    fetch(document.location.href, { method: "PUT", body: text }).catch((error) => {
        saveButton.disabled = false;
        alert(error);
    })
}

function onload(e) {
    load(document.getElementById('ta'), document.getElementById('cheezenotes'));
}

function onedit(e) {
    timeoutSave();

    if (e.inputType == 'insertCompositionText') {
        e.preventDefault();
        return false;
    }

    saveButton.disabled = false;
    let ret = saveSelection();
    let line = ret[0];
    let position = ret[1];

    if (line.innerText == '\n') {
        line.className = 'cheezenotes_line';
        line.classList.add('body');
        return;
    }

    let prevline = line.previousSibling;
    if (prevline != null && prevline.innerText == '\n') {
        /*prevline.className = 'cheezenotes_line';
        prevline.classList.add('body');*/
        let newline = formatLine(prevline.innerText);
        prevline.parentNode.replaceChild(newline, prevline);
    }

    let newline = formatLine(line.innerText);
    line.parentNode.replaceChild(newline, line);
    formatTable(newline, dpwidth());
    ret[0] = newline;
    ret[2] = newline;
    loadSelection(ret);
    console.log('onedit fin');
}

function onkeydown(e) {
    if (e.key != 'Tab') {
        return true;
    }

    e.preventDefault();
    let key = '&emsp;';
    insertTextAtCaret(key);
    onedit(e);
    return false;
}

function onkeyup(e) {
    if (e.key !== 'Escape') {
        return true;
    }

    e.preventDefault();
    document.getElementById('cheezenotes').blur();
    if (saveButton.disabled == false) {
        onsave();
    }
    return false;
}

function onkeypress(e) {
    if (e.key !== 'Escape') {
        return true;
    }

    e.preventDefault();
    document.getElementById('cheezenotes').blur();
    if (saveButton.disabled == false) {
        onsave();
    }
    return false;
}

function onpaste(e) {
    e.preventDefault();
    timeoutSave();
    let data = e.clipboardData.getData('text/plain');
    appendData(document.getElementById('cheezenotes'), data);
    saveButton.disabled = false;
    return false;
}

function oncopy(e) {
    //alert(e.clipboardData.getData('text/plain'));
}

function ondrag(e) {
    // alert('drag');
}

function ondragenter(e) {
    // alert('enter');
}

function ondragleave(e) {
    // alert('leave')
}

function addButton(id, icon, onclick) {
    let buttons = document.getElementById('buttons');
    let button = document.createElement('button');
    button.id = id;
    button.classList.add('button');
    if (icon.substring(0, 1) == ':') {
        button.classList.add('material-icons');
    } else {
        button.classList.add('text');
    }
    button.innerText = icon.replace(':', '');
    button.addEventListener('mousedown', onclick);
    buttons.appendChild(button);
    return button;
}

function addOnOffButton(id, icon, alt_icon, onclick, on = false) {
    let button;
    if (on == true) {
        button = addButton(id, icon, onclick);
        button.classList.add('onoffbutton');
        button.classList.add('buttonon');
    } else {
        button = addButton(id, alt_icon, onclick);
        button.classList.add('onoffbutton');
        button.classList.add('buttonoff');
    }
    button.addEventListener('click', function (e) {
        if (button.classList.contains('buttonon')) {
            button.classList.remove('buttonon');
            button.classList.add('buttonoff');
            button.innerText = alt_icon.replace(':', '')
        } else {
            button.classList.remove('buttonoff');
            button.classList.add('buttonon');
            button.innerText = icon.replace(':', '')
        }
    });
    return button;
}

function lastButton(button) {
    button.classList.add('rightborder');
    return button;
}

function floatRight(button) {
    button.classList.add('floatright');
    return button;
}

function addSeparator() {
    let separator = addButton('', ':more_vert', function () { });
    separator.classList.add('separator');
    separator.classList.remove('button');
}

function enableFormatButtons() {
    document.getElementById('boldButton').disabled = false;
    document.getElementById('italicButton').disabled = false;
    document.getElementById('strikeButton').disabled = false;
    document.getElementById('h1Button').disabled = false;
    document.getElementById('h2Button').disabled = false;
    document.getElementById('h3Button').disabled = false;
    document.getElementById('monoButton').disabled = false;
    document.getElementById('bqButton').disabled = false;
}

function disableFormatButtons() {
    document.getElementById('boldButton').disabled = true;
    document.getElementById('italicButton').disabled = true;
    document.getElementById('strikeButton').disabled = true;
    document.getElementById('h1Button').disabled = true;
    document.getElementById('h2Button').disabled = true;
    document.getElementById('h3Button').disabled = true;
    document.getElementById('monoButton').disabled = true;
    document.getElementById('bqButton').disabled = true;
}

function onblur(e) {
    let cheezenotes = document.getElementById('cheezenotes');
    redrawTables(cheezenotes);
    onsave();
    hideTokens();
    disableFormatButtons();
}

function onfocus(e) {
    redrawTables(cheezenotes, dpwidth());
    showTokens();
    enableFormatButtons();
}

function onpopstate(e) {
    let top = 0;
    let left = 0;
    if (e.state.top) {
        top = e.state.top;
    }
    if (e.state.left) {
        left = e.state.left;
    }
    fetch(document.location.href + "?data=").then((response) => {
        let ta = document.getElementById('ta');
        response.text().then((data) => {
            ta.value = data;
            load(document.getElementById('ta'), document.getElementById('cheezenotes'));
            let content = document.getElementById('content');
            content.scrollTop = top;
            content.scrollLeft = left;
        });
    }).catch((error) => { alert(error); });
}

function init(domain, page) {
    let cheezenotes = document.getElementById('cheezenotes');
    window.domain = domain;
    window.page = page;

    dpwidth(cheezenotes);

    window.addEventListener('popstate', onpopstate);
    cheezenotes.addEventListener('input', onedit);
    cheezenotes.addEventListener('keyup', onkeyup);
    cheezenotes.addEventListener('keypress', onkeypress);
    cheezenotes.addEventListener('keydown', onkeydown);
    cheezenotes.addEventListener('paste', onpaste);
    cheezenotes.addEventListener('copy', oncopy);
    cheezenotes.addEventListener('blur', onblur);
    cheezenotes.addEventListener('focus', onfocus);
    cheezenotes.addEventListener('drag', ondrag);
    cheezenotes.addEventListener('dragenter', ondragenter);
    cheezenotes.addEventListener('dragleave', ondragleave);

    let saveButton = addButton('saveButton', ':save', onsave);
    saveButton.disabled = true;
    addSeparator();
    addButton('boldButton', ':format_bold', onboldbutton);
    addButton('italicButton', ':format_italic', onitalicbutton);
    addButton('strikeButton', ':format_strikethrough', onstrikebutton);
    addButton('monoButton', ':code', onmonobutton);
    addSeparator();
    addButton('h1Button', 'H1', onh1button);
    addButton('h2Button', 'H2', onh2button);
    addButton('h3Button', 'H3', onh3button);
    addButton('bqButton', ':format_quote', onbqbutton);
    addSeparator();
    addOnOffButton('editModeButton', ':edit_note', ':visibility',
        function (e) {
            if (editModeButton.classList.contains('buttonon')) {
                cheezenotes.contentEditable = false;
            } else {
                cheezenotes.contentEditable = true;
            }
        }, true);
    lastButton(addOnOffButton('taButton', ':notes', ':notes', ontextarea));

    disableFormatButtons();

    /*if (pagename != null) {
        fetch(pagename + "?data=").then((response) => {
            let ta = document.getElementById('ta');
            response.text().then((data) => { ta.value = data; onload(); });
        }).catch((error) => { alert(error); });
    }*/

    onload();
}

export { init };