CheezeNotes/static/modules/mdnotes.js

import { getStartPositionInLine, setStartPositionInLine } from './position.js';
import { formatLine, load, save, formatTable, redrawTables } 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 == 'none') {
        ta.style.display = 'inline';
    } else {
        ta.style.display = 'none';
    }
}

function onsave(e) {
    save(document.getElementById('ta'), document.getElementById('mdnotes'));
}

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

function onedit(e) {
    timeoutSave();
    let ret = getStartPositionInLine();
    let line = ret[0];
    let position = ret[1];

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

    let prevline = line.previousSibling;
    if (prevline != null && prevline.innerText == '\n') {
        prevline.className = 'mdnotes_line';
        prevline.classList.add('body');
    }

    let newline = formatLine(line.innerText);
    line.parentNode.replaceChild(newline, line);
    formatTable(newline, dpwidth());
    setStartPositionInLine(newline, position);
}

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

    e.preventDefault();
    let key = ' ';
    let ret = getStartPositionInLine();
    let line = ret[0];
    let position = ret[1];
    let txt = line.innerText;
    if (position == 0) {
        line.innerHTML = key + txt;    // 4 espaces =>  
    } else {
        line.innerHTML = txt.substring(0, position) + key + txt.substring(position, txt.length);
    }
    setStartPositionInLine(line, position + 1);
    onedit(e);
    return false;
}

function onkeypress(e) {
    if (e.key == 'Escape') {
        e.preventDefault();
        document.getElementById('mdnotes').blur();
        onsave();
        return false;
    }
    if (e.key == 'Enter') {

    }
}

function onkeyup(e) {
    if (e.key == 'Escape') {
        e.preventDefault();
        document.getElementById('mdnotes').blur();
        onsave();
        return false;
    }
}

function onpaste(e) {
    timeoutSave();
    let data = e.clipboardData.getData('text/plain');
    if (data.match(/ \w+:\/\/.*/i)) {
        data = '[](' + data + ')';
        e.clipBoard.setData('text/plain', data);
    }
}

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

var _dpwidth = null;
function dpwidth(div) {
    if (_dpwidth != null) {
        return _dpwidth;
    }
    let dp = document.createElement('span');
    dp.classList.add('tokenfictif');
    div.append(dp);
    dp.innerText = ':';
    _dpwidth = dp.getBoundingClientRect().width;
    div.removeChild(dp);
    return _dpwidth;
}

function init(pagename = null) {
    /*if (pagename != null) {
        window.history.replaceState(null, '', '/page/' + pagename);
    }*/
    let mdnotesdiv = document.getElementById('mdnotes');

    dpwidth(mdnotesdiv);

    mdnotesdiv.addEventListener('input', onedit);
    mdnotesdiv.addEventListener('keyup', onkeyup);
    mdnotesdiv.addEventListener('keypress', onkeypress);
    mdnotesdiv.addEventListener('keydown', onkeydown);
    mdnotesdiv.addEventListener('paste', onpaste);
    mdnotesdiv.addEventListener('copy', oncopy);
    mdnotesdiv.addEventListener('blur', () => {redrawTables(mdnotesdiv);});
    mdnotesdiv.addEventListener('focus', () => {redrawTables(mdnotesdiv, dpwidth());});
    let saveButton = document.getElementById('saveButton');
    saveButton.addEventListener('click', onsave);
    taButton.addEventListener('click', ontextarea);

    onload();
}

export { init };