|
|
|
@ -1,6 +1,16 @@
|
|
|
|
import { saveSelection, loadSelection, insertTextAtCaret } from './caret.js';
|
|
|
|
import { saveSelection, loadSelection, insertTextAtCaret } from './caret.js';
|
|
|
|
import { formatLine, load, save, formatTable, redrawTables, appendData, dpwidth } from './md.js';
|
|
|
|
import { formatLine, load, save, formatTable, redrawTables, appendData, dpwidth } from './md.js';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const showtokens = [
|
|
|
|
|
|
|
|
{ fontSize: 0 },
|
|
|
|
|
|
|
|
{ fontSize: '95%' }
|
|
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const hidetokens = [
|
|
|
|
|
|
|
|
{ fontSize: '95%' },
|
|
|
|
|
|
|
|
{ fontSize: 0 }
|
|
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
function timeoutSave() {
|
|
|
|
function timeoutSave() {
|
|
|
|
if (window.tos !== null) {
|
|
|
|
if (window.tos !== null) {
|
|
|
|
window.clearTimeout(window.tos);
|
|
|
|
window.clearTimeout(window.tos);
|
|
|
|
@ -8,9 +18,24 @@ function timeoutSave() {
|
|
|
|
window.tos = window.setTimeout(onsave, 5000);
|
|
|
|
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: 200, iterations: 1 });
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function hideTokens() {
|
|
|
|
|
|
|
|
let tokens = document.getElementsByClassName('token');
|
|
|
|
|
|
|
|
for (let i = 0; i < tokens.length; i++) {
|
|
|
|
|
|
|
|
tokens[i].animate(hidetokens, { duration: 200, iterations: 1 });
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function ontextarea(e) {
|
|
|
|
function ontextarea(e) {
|
|
|
|
let ta = document.getElementById('ta');
|
|
|
|
let ta = document.getElementById('ta');
|
|
|
|
if (ta.style.display != 'inline') {
|
|
|
|
let taButton = document.getElementById('taButton');
|
|
|
|
|
|
|
|
if (taButton.classList.contains('buttonoff')) {
|
|
|
|
ta.style.display = 'inline';
|
|
|
|
ta.style.display = 'inline';
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
ta.style.display = 'none';
|
|
|
|
ta.style.display = 'none';
|
|
|
|
@ -173,36 +198,127 @@ function ondragleave(e) {
|
|
|
|
// alert('leave')
|
|
|
|
// alert('leave')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function init(pagename = null) {
|
|
|
|
function addButton(id, icon, onclick) {
|
|
|
|
let cheezenotesdiv = document.getElementById('cheezenotes');
|
|
|
|
let buttons = document.getElementById('buttons');
|
|
|
|
|
|
|
|
let button = document.createElement('button');
|
|
|
|
dpwidth(cheezenotesdiv);
|
|
|
|
button.id = id;
|
|
|
|
|
|
|
|
button.classList.add('button');
|
|
|
|
cheezenotesdiv.addEventListener('input', onedit);
|
|
|
|
button.classList.add('material-icons');
|
|
|
|
cheezenotesdiv.addEventListener('keyup', onkeyup);
|
|
|
|
button.innerText = icon;
|
|
|
|
cheezenotesdiv.addEventListener('keypress', onkeypress);
|
|
|
|
button.addEventListener('mousedown', onclick);
|
|
|
|
cheezenotesdiv.addEventListener('keydown', onkeydown);
|
|
|
|
buttons.appendChild(button);
|
|
|
|
cheezenotesdiv.addEventListener('paste', onpaste);
|
|
|
|
return button;
|
|
|
|
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');
|
|
|
|
function addOnOffButton(id, icon, alt_icon, onclick, on = false) {
|
|
|
|
saveButton.disabled = true;
|
|
|
|
let button;
|
|
|
|
saveButton.addEventListener('click', onsave);
|
|
|
|
if (on == true) {
|
|
|
|
let taButton = document.getElementById('taButton');
|
|
|
|
button = addButton(id, icon, onclick);
|
|
|
|
taButton.addEventListener('click', ontextarea);
|
|
|
|
button.classList.add('onoffbutton');
|
|
|
|
let lockButton = document.getElementById('lockButton');
|
|
|
|
button.classList.add('buttonon');
|
|
|
|
lockButton.addEventListener('click', onlockbutton);
|
|
|
|
} 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;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
button.classList.remove('buttonoff');
|
|
|
|
|
|
|
|
button.classList.add('buttonon');
|
|
|
|
|
|
|
|
button.innerText = icon;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
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() {
|
|
|
|
|
|
|
|
let boldButton = document.getElementById('boldButton');
|
|
|
|
|
|
|
|
let italicButton = document.getElementById('italicButton');
|
|
|
|
|
|
|
|
let strikeButton = document.getElementById('strikeButton');
|
|
|
|
|
|
|
|
boldButton.disabled = false;
|
|
|
|
|
|
|
|
italicButton.disabled = false;
|
|
|
|
|
|
|
|
strikeButton.disabled = false;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function disableFormatButtons() {
|
|
|
|
let boldButton = document.getElementById('boldButton');
|
|
|
|
let boldButton = document.getElementById('boldButton');
|
|
|
|
boldButton.addEventListener('mousedown', onboldbutton);
|
|
|
|
|
|
|
|
let italicButton = document.getElementById('italicButton');
|
|
|
|
let italicButton = document.getElementById('italicButton');
|
|
|
|
italicButton.addEventListener('mousedown', onitalicbutton);
|
|
|
|
|
|
|
|
let strikeButton = document.getElementById('strikeButton');
|
|
|
|
let strikeButton = document.getElementById('strikeButton');
|
|
|
|
strikeButton.addEventListener('mousedown', onstrikebutton);
|
|
|
|
boldButton.disabled = true;
|
|
|
|
|
|
|
|
italicButton.disabled = true;
|
|
|
|
|
|
|
|
strikeButton.disabled = true;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function onblur(e) {
|
|
|
|
|
|
|
|
let cheezenotes = document.getElementById('cheezenotes');
|
|
|
|
|
|
|
|
redrawTables(cheezenotes);
|
|
|
|
|
|
|
|
onsave();
|
|
|
|
|
|
|
|
hideTokens();
|
|
|
|
|
|
|
|
disableFormatButtons();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function onfocus() {
|
|
|
|
|
|
|
|
redrawTables(cheezenotes, dpwidth());
|
|
|
|
|
|
|
|
showTokens();
|
|
|
|
|
|
|
|
enableFormatButtons();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function init(pagename = null) {
|
|
|
|
|
|
|
|
let cheezenotes = document.getElementById('cheezenotes');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
dpwidth(cheezenotes);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
lastButton(addButton('strikeButton', 'format_strikethrough', onstrikebutton));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
floatRight(lastButton(addOnOffButton('taButton', 'notes', 'notes', ontextarea)));
|
|
|
|
|
|
|
|
floatRight(addOnOffButton('editModeButton', 'edit_note', 'visibility',
|
|
|
|
|
|
|
|
function (e) {
|
|
|
|
|
|
|
|
if (editModeButton.classList.contains('buttonon')) {
|
|
|
|
|
|
|
|
cheezenotes.contentEditable = false;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
cheezenotes.contentEditable = true;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}, true));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
disableFormatButtons();
|
|
|
|
|
|
|
|
|
|
|
|
onload();
|
|
|
|
onload();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|