CheezeNotes/static/modules/cheezenotes.js

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

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

function ontextarea(e) {
    let ta = document.getElementById('ta');
    if (ta.style.display != 'inline') {
        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 onsave(e) {
    let saveButton = document.getElementById('saveButton');
    saveButton.disabled = true;
    let text = save(document.getElementById('ta'), document.getElementById('cheezenotes'));
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status != 200) {
            saveButton.disabled = false;
            alert(xhttp.responseText);
        }
    }
    xhttp.open("PUT", document.location.href, true);
    xhttp.send(text);
}

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(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 = ' ';
    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 onlockbutton(e) {
    let lockButton = document.getElementById('lockButton');
    let lockButtonLabel = document.getElementById('lockButtonLabel');
    let cheezenotes = document.getElementById('cheezenotes');
    if (lockButton.checked) {
        cheezenotes.contentEditable = false;
        lockButtonLabel.innerText = 'visibility';
    } else {
        cheezenotes.contentEditable = true;
        lockButtonLabel.innerText = 'visibility_off';
    }
}

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

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

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

function init(pagename = null) {
    let cheezenotesdiv = document.getElementById('cheezenotes');

    dpwidth(cheezenotesdiv);

    cheezenotesdiv.addEventListener('input', onedit);
    cheezenotesdiv.addEventListener('keyup', onkeyup);
    cheezenotesdiv.addEventListener('keypress', onkeypress);
    cheezenotesdiv.addEventListener('keydown', onkeydown);
    cheezenotesdiv.addEventListener('paste', onpaste);
    cheezenotesdiv.addEventListener('copy', oncopy);
    cheezenotesdiv.addEventListener('blur', () => { redrawTables(cheezenotesdiv); onsave() });
    cheezenotesdiv.addEventListener('focus', () => { redrawTables(cheezenotesdiv, dpwidth()); });
    cheezenotesdiv.addEventListener('drag', ondrag);
    cheezenotesdiv.addEventListener('dragenter', ondragenter);
    cheezenotesdiv.addEventListener('dragleave', ondragleave);

    let saveButton = document.getElementById('saveButton');
    saveButton.disabled = true;
    saveButton.addEventListener('click', onsave);
    let taButton = document.getElementById('taButton');
    taButton.addEventListener('click', ontextarea);
    let lockButton = document.getElementById('lockButton');
    lockButton.addEventListener('click', onlockbutton);
    let boldButton = document.getElementById('boldButton');
    boldButton.addEventListener('mousedown', onboldbutton);
    let italicButton = document.getElementById('italicButton');
    italicButton.addEventListener('mousedown', onitalicbutton);
    let strikeButton = document.getElementById('strikeButton');
    strikeButton.addEventListener('mousedown', onstrikebutton);
    onload();
}

export { init };