2019-02-05 04:59:03 +01:00
|
|
|
/* Copyright: Ankitects Pty Ltd and contributors
|
|
|
|
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
|
|
|
|
|
2019-12-18 04:53:31 +01:00
|
|
|
import DragOverEvent = JQuery.DragOverEvent;
|
|
|
|
|
2019-12-20 22:33:15 +01:00
|
|
|
let currentField = null;
|
|
|
|
let changeTimer = null;
|
|
|
|
let dropTarget = null;
|
|
|
|
let currentNoteId = null;
|
2017-07-28 08:19:06 +02:00
|
|
|
|
2019-12-18 04:53:31 +01:00
|
|
|
declare interface String {
|
2019-12-18 07:12:39 +01:00
|
|
|
format(...args): string;
|
2019-12-18 04:53:31 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/* kept for compatibility with add-ons */
|
2019-12-18 07:12:39 +01:00
|
|
|
String.prototype.format = function() {
|
2019-12-21 11:18:58 +01:00
|
|
|
const args = arguments;
|
2019-12-18 07:12:39 +01:00
|
|
|
return this.replace(/\{\d+\}/g, function(m) {
|
2017-07-28 08:19:06 +02:00
|
|
|
return args[m.match(/\d+/)];
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
function setFGButton(col) {
|
|
|
|
$("#forecolor")[0].style.backgroundColor = col;
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
2018-05-28 05:40:35 +02:00
|
|
|
function saveNow(keepFocus) {
|
|
|
|
if (!currentField) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2017-07-28 08:19:06 +02:00
|
|
|
clearChangeTimer();
|
2018-05-28 05:40:35 +02:00
|
|
|
|
|
|
|
if (keepFocus) {
|
|
|
|
saveField("key");
|
|
|
|
} else {
|
2019-02-05 01:46:47 +01:00
|
|
|
// triggers onBlur, which saves
|
2017-07-28 08:19:06 +02:00
|
|
|
currentField.blur();
|
|
|
|
}
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
2018-07-23 04:23:38 +02:00
|
|
|
function triggerKeyTimer() {
|
|
|
|
clearChangeTimer();
|
2019-12-18 07:12:39 +01:00
|
|
|
changeTimer = setTimeout(function() {
|
2018-07-23 04:23:38 +02:00
|
|
|
updateButtonState();
|
|
|
|
saveField("key");
|
|
|
|
}, 600);
|
|
|
|
}
|
|
|
|
|
2019-12-18 04:53:31 +01:00
|
|
|
function onKey(evt: KeyboardEvent) {
|
2017-07-28 08:19:06 +02:00
|
|
|
// esc clears focus, allowing dialog to close
|
2019-12-18 04:53:31 +01:00
|
|
|
if (evt.which === 27) {
|
2017-07-28 08:19:06 +02:00
|
|
|
currentField.blur();
|
|
|
|
return;
|
|
|
|
}
|
2017-08-05 07:15:19 +02:00
|
|
|
// shift+tab goes to previous field
|
2019-12-18 07:12:39 +01:00
|
|
|
if (navigator.platform === "MacIntel" && evt.which === 9 && evt.shiftKey) {
|
2019-12-18 04:53:31 +01:00
|
|
|
evt.preventDefault();
|
2017-08-05 07:15:19 +02:00
|
|
|
focusPrevious();
|
|
|
|
return;
|
|
|
|
}
|
2018-07-23 04:23:38 +02:00
|
|
|
triggerKeyTimer();
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
|
|
|
function insertNewline() {
|
|
|
|
if (!inPreEnvironment()) {
|
2017-07-31 05:22:35 +02:00
|
|
|
setFormat("insertText", "\n");
|
2017-07-28 08:19:06 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// in some cases inserting a newline will not show any changes,
|
|
|
|
// as a trailing newline at the end of a block does not render
|
|
|
|
// differently. so in such cases we note the height has not
|
|
|
|
// changed and insert an extra newline.
|
|
|
|
|
2019-12-20 22:33:15 +01:00
|
|
|
const r = window.getSelection().getRangeAt(0);
|
2017-07-28 08:19:06 +02:00
|
|
|
if (!r.collapsed) {
|
|
|
|
// delete any currently selected text first, making
|
|
|
|
// sure the delete is undoable
|
|
|
|
setFormat("delete");
|
|
|
|
}
|
|
|
|
|
2019-12-20 22:33:15 +01:00
|
|
|
const oldHeight = currentField.clientHeight;
|
2017-07-31 05:22:35 +02:00
|
|
|
setFormat("inserthtml", "\n");
|
2017-07-28 08:48:49 +02:00
|
|
|
if (currentField.clientHeight === oldHeight) {
|
2017-07-31 05:22:35 +02:00
|
|
|
setFormat("inserthtml", "\n");
|
2017-07-28 08:19:06 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// is the cursor in an environment that respects whitespace?
|
|
|
|
function inPreEnvironment() {
|
2019-12-18 04:53:31 +01:00
|
|
|
let n = window.getSelection().anchorNode as Element;
|
2017-07-28 08:48:49 +02:00
|
|
|
if (n.nodeType === 3) {
|
2019-12-18 04:53:31 +01:00
|
|
|
n = n.parentNode as Element;
|
2017-07-28 08:19:06 +02:00
|
|
|
}
|
|
|
|
return window.getComputedStyle(n).whiteSpace.startsWith("pre");
|
|
|
|
}
|
|
|
|
|
2018-07-23 04:23:38 +02:00
|
|
|
function onInput() {
|
2019-04-16 10:58:59 +02:00
|
|
|
// empty field?
|
|
|
|
if (currentField.innerHTML === "") {
|
|
|
|
currentField.innerHTML = "<br>";
|
|
|
|
}
|
|
|
|
|
2018-07-23 04:23:38 +02:00
|
|
|
// make sure IME changes get saved
|
|
|
|
triggerKeyTimer();
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
|
|
|
function updateButtonState() {
|
2019-12-20 22:33:15 +01:00
|
|
|
const buts = ["bold", "italic", "underline", "superscript", "subscript"];
|
|
|
|
for (const name of buts) {
|
2017-07-28 08:19:06 +02:00
|
|
|
if (document.queryCommandState(name)) {
|
|
|
|
$("#" + name).addClass("highlighted");
|
|
|
|
} else {
|
|
|
|
$("#" + name).removeClass("highlighted");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// fixme: forecolor
|
2019-12-18 07:12:39 +01:00
|
|
|
// 'col': document.queryCommandValue("forecolor")
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
|
|
|
function toggleEditorButton(buttonid) {
|
|
|
|
if ($(buttonid).hasClass("highlighted")) {
|
|
|
|
$(buttonid).removeClass("highlighted");
|
|
|
|
} else {
|
|
|
|
$(buttonid).addClass("highlighted");
|
|
|
|
}
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
2019-12-18 04:53:31 +01:00
|
|
|
function setFormat(cmd: string, arg?: any, nosave: boolean = false) {
|
2017-07-28 08:19:06 +02:00
|
|
|
document.execCommand(cmd, false, arg);
|
|
|
|
if (!nosave) {
|
2019-12-18 07:12:39 +01:00
|
|
|
saveField("key");
|
2017-07-28 08:19:06 +02:00
|
|
|
updateButtonState();
|
|
|
|
}
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
|
|
|
function clearChangeTimer() {
|
|
|
|
if (changeTimer) {
|
|
|
|
clearTimeout(changeTimer);
|
|
|
|
changeTimer = null;
|
|
|
|
}
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
|
|
|
function onFocus(elem) {
|
2018-04-30 07:26:54 +02:00
|
|
|
if (currentField === elem) {
|
|
|
|
// anki window refocused; current element unchanged
|
|
|
|
return;
|
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
currentField = elem;
|
2017-08-05 07:15:19 +02:00
|
|
|
pycmd("focus:" + currentFieldOrdinal());
|
2017-07-28 08:19:06 +02:00
|
|
|
enableButtons();
|
|
|
|
// don't adjust cursor on mouse clicks
|
|
|
|
if (mouseDown) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
// do this twice so that there's no flicker on newer versions
|
|
|
|
caretToEnd();
|
|
|
|
// scroll if bottom of element off the screen
|
|
|
|
function pos(obj) {
|
2019-12-20 22:33:15 +01:00
|
|
|
let cur = 0;
|
2017-07-28 08:19:06 +02:00
|
|
|
do {
|
|
|
|
cur += obj.offsetTop;
|
2019-12-18 07:12:39 +01:00
|
|
|
} while ((obj = obj.offsetParent));
|
2017-07-28 08:19:06 +02:00
|
|
|
return cur;
|
|
|
|
}
|
|
|
|
|
2019-12-20 22:33:15 +01:00
|
|
|
const y = pos(elem);
|
2019-12-18 07:12:39 +01:00
|
|
|
if (
|
|
|
|
window.pageYOffset + window.innerHeight < y + elem.offsetHeight ||
|
|
|
|
window.pageYOffset > y
|
|
|
|
) {
|
2017-07-28 08:19:06 +02:00
|
|
|
window.scroll(0, y + elem.offsetHeight - window.innerHeight);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function focusField(n) {
|
2017-08-05 07:15:19 +02:00
|
|
|
if (n === null) {
|
|
|
|
return;
|
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
$("#f" + n).focus();
|
|
|
|
}
|
|
|
|
|
2017-08-05 07:15:19 +02:00
|
|
|
function focusPrevious() {
|
|
|
|
if (!currentField) {
|
|
|
|
return;
|
|
|
|
}
|
2019-12-20 22:33:15 +01:00
|
|
|
const previous = currentFieldOrdinal() - 1;
|
2017-08-05 07:15:19 +02:00
|
|
|
if (previous >= 0) {
|
|
|
|
focusField(previous);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-07-28 08:19:06 +02:00
|
|
|
function onDragOver(elem) {
|
2019-12-21 11:18:58 +01:00
|
|
|
const e = (window.event as unknown) as DragOverEvent;
|
2019-12-18 04:53:31 +01:00
|
|
|
//e.dataTransfer.dropEffect = "copy";
|
2018-05-01 05:24:08 +02:00
|
|
|
e.preventDefault();
|
2017-07-28 08:19:06 +02:00
|
|
|
// if we focus the target element immediately, the drag&drop turns into a
|
|
|
|
// copy, so note it down for later instead
|
|
|
|
dropTarget = elem;
|
|
|
|
}
|
|
|
|
|
2017-08-01 09:40:51 +02:00
|
|
|
function makeDropTargetCurrent() {
|
|
|
|
dropTarget.focus();
|
2017-10-27 10:06:21 +02:00
|
|
|
// the focus event may not fire if the window is not active, so make sure
|
|
|
|
// the current field is set
|
|
|
|
currentField = dropTarget;
|
2017-08-01 09:40:51 +02:00
|
|
|
}
|
|
|
|
|
2017-07-28 08:19:06 +02:00
|
|
|
function onPaste(elem) {
|
|
|
|
pycmd("paste");
|
|
|
|
window.event.preventDefault();
|
|
|
|
}
|
|
|
|
|
|
|
|
function caretToEnd() {
|
2019-12-21 11:18:58 +01:00
|
|
|
const r = document.createRange();
|
2017-07-28 08:19:06 +02:00
|
|
|
r.selectNodeContents(currentField);
|
|
|
|
r.collapse(false);
|
2019-12-21 11:18:58 +01:00
|
|
|
const s = document.getSelection();
|
2017-07-28 08:19:06 +02:00
|
|
|
s.removeAllRanges();
|
|
|
|
s.addRange(r);
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
|
|
|
function onBlur() {
|
2019-02-05 01:46:47 +01:00
|
|
|
if (!currentField) {
|
|
|
|
return;
|
2017-07-28 08:19:06 +02:00
|
|
|
}
|
2019-01-29 00:51:54 +01:00
|
|
|
|
|
|
|
if (document.activeElement === currentField) {
|
|
|
|
// other widget or window focused; current field unchanged
|
2019-02-05 01:46:47 +01:00
|
|
|
saveField("key");
|
|
|
|
} else {
|
|
|
|
saveField("blur");
|
|
|
|
currentField = null;
|
|
|
|
disableButtons();
|
2019-01-29 00:51:54 +01:00
|
|
|
}
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
|
|
|
function saveField(type) {
|
2019-02-05 01:46:47 +01:00
|
|
|
clearChangeTimer();
|
2017-07-28 08:19:06 +02:00
|
|
|
if (!currentField) {
|
|
|
|
// no field has been focused yet
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
// type is either 'blur' or 'key'
|
2019-12-18 07:12:39 +01:00
|
|
|
pycmd(
|
|
|
|
type +
|
|
|
|
":" +
|
|
|
|
currentFieldOrdinal() +
|
|
|
|
":" +
|
|
|
|
currentNoteId +
|
|
|
|
":" +
|
|
|
|
currentField.innerHTML
|
|
|
|
);
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
2017-08-05 07:15:19 +02:00
|
|
|
function currentFieldOrdinal() {
|
|
|
|
return currentField.id.substring(1);
|
|
|
|
}
|
|
|
|
|
2017-07-28 08:19:06 +02:00
|
|
|
function wrappedExceptForWhitespace(text, front, back) {
|
2019-12-20 22:33:15 +01:00
|
|
|
const match = text.match(/^(\s*)([^]*?)(\s*)$/);
|
2017-07-28 08:19:06 +02:00
|
|
|
return match[1] + front + match[2] + back + match[3];
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
|
|
|
function disableButtons() {
|
2017-12-08 12:06:16 +01:00
|
|
|
$("button.linkb:not(.perm)").prop("disabled", true);
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
|
|
|
function enableButtons() {
|
|
|
|
$("button.linkb").prop("disabled", false);
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
|
|
|
// disable the buttons if a field is not currently focused
|
|
|
|
function maybeDisableButtons() {
|
2019-12-18 07:12:39 +01:00
|
|
|
if (
|
|
|
|
!document.activeElement ||
|
|
|
|
document.activeElement.className !== "field"
|
|
|
|
) {
|
2017-07-28 08:19:06 +02:00
|
|
|
disableButtons();
|
|
|
|
} else {
|
|
|
|
enableButtons();
|
|
|
|
}
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
|
|
|
function wrap(front, back) {
|
2019-12-17 09:27:41 +01:00
|
|
|
wrapInternal(front, back, false);
|
|
|
|
}
|
|
|
|
|
2020-01-16 01:33:36 +01:00
|
|
|
/* currently unused */
|
|
|
|
function wrapIntoText(front, back) {
|
2019-12-17 09:27:41 +01:00
|
|
|
wrapInternal(front, back, true);
|
|
|
|
}
|
|
|
|
|
|
|
|
function wrapInternal(front, back, plainText) {
|
2017-07-28 08:48:49 +02:00
|
|
|
if (currentField.dir === "rtl") {
|
2017-07-28 08:39:32 +02:00
|
|
|
front = "‫" + front + "‬";
|
|
|
|
back = "‫" + back + "‬";
|
|
|
|
}
|
2019-12-21 11:18:58 +01:00
|
|
|
const s = window.getSelection();
|
2019-12-20 22:33:15 +01:00
|
|
|
let r = s.getRangeAt(0);
|
2019-12-21 11:18:58 +01:00
|
|
|
const content = r.cloneContents();
|
|
|
|
const span = document.createElement("span");
|
2017-07-28 08:19:06 +02:00
|
|
|
span.appendChild(content);
|
2019-12-17 09:27:41 +01:00
|
|
|
if (plainText) {
|
2019-12-20 22:33:15 +01:00
|
|
|
const new_ = wrappedExceptForWhitespace(span.innerText, front, back);
|
2019-12-17 09:27:41 +01:00
|
|
|
setFormat("inserttext", new_);
|
|
|
|
} else {
|
2019-12-20 22:33:15 +01:00
|
|
|
const new_ = wrappedExceptForWhitespace(span.innerHTML, front, back);
|
2019-12-17 09:27:41 +01:00
|
|
|
setFormat("inserthtml", new_);
|
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
if (!span.innerHTML) {
|
|
|
|
// run with an empty selection; move cursor back past postfix
|
|
|
|
r = s.getRangeAt(0);
|
|
|
|
r.setStart(r.startContainer, r.startOffset - back.length);
|
|
|
|
r.collapse(true);
|
|
|
|
s.removeAllRanges();
|
|
|
|
s.addRange(r);
|
|
|
|
}
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
2017-09-02 05:48:03 +02:00
|
|
|
function onCutOrCopy() {
|
|
|
|
pycmd("cutOrCopy");
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
2017-10-25 11:18:00 +02:00
|
|
|
function setFields(fields) {
|
2019-12-20 22:33:15 +01:00
|
|
|
let txt = "";
|
|
|
|
for (let i = 0; i < fields.length; i++) {
|
2019-12-21 11:18:58 +01:00
|
|
|
const n = fields[i][0];
|
2019-12-20 22:33:15 +01:00
|
|
|
let f = fields[i][1];
|
2019-04-16 10:58:59 +02:00
|
|
|
if (!f) {
|
|
|
|
f = "<br>";
|
|
|
|
}
|
2020-03-23 07:55:48 +01:00
|
|
|
txt += `
|
|
|
|
<tr>
|
2020-03-23 16:52:24 +01:00
|
|
|
<td class=fname id="name${i}">${n}</td>
|
2020-03-23 07:55:48 +01:00
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td width=100%>
|
|
|
|
<div id=f${i}
|
|
|
|
onkeydown='onKey(window.event);'
|
|
|
|
oninput='onInput();'
|
|
|
|
onmouseup='onKey(window.event);'
|
|
|
|
onfocus='onFocus(this);'
|
|
|
|
onblur='onBlur();'
|
|
|
|
class='field clearfix'
|
|
|
|
ondragover='onDragOver(this);'
|
|
|
|
onpaste='onPaste(this);'
|
|
|
|
oncopy='onCutOrCopy(this);'
|
|
|
|
oncut='onCutOrCopy(this);'
|
|
|
|
contentEditable=true
|
|
|
|
class=field
|
|
|
|
>
|
|
|
|
${f}
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
</tr>`;
|
2017-07-28 08:19:06 +02:00
|
|
|
}
|
2020-03-23 07:55:48 +01:00
|
|
|
$("#fields").html(`
|
|
|
|
<table cellpadding=0 width=100% style='table-layout: fixed;'>
|
|
|
|
${txt}
|
|
|
|
</table>`);
|
2017-07-28 08:19:06 +02:00
|
|
|
maybeDisableButtons();
|
2017-07-28 08:48:49 +02:00
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
|
|
|
|
function setBackgrounds(cols) {
|
2019-12-20 22:33:15 +01:00
|
|
|
for (let i = 0; i < cols.length; i++) {
|
2020-01-23 06:08:10 +01:00
|
|
|
if (cols[i] == "dupe") {
|
|
|
|
$("#f" + i).addClass("dupe");
|
|
|
|
} else {
|
|
|
|
$("#f" + i).removeClass("dupe");
|
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function setFonts(fonts) {
|
2019-12-20 22:33:15 +01:00
|
|
|
for (let i = 0; i < fonts.length; i++) {
|
2019-12-21 11:18:58 +01:00
|
|
|
const n = $("#f" + i);
|
2019-12-18 07:12:39 +01:00
|
|
|
n.css("font-family", fonts[i][0]).css("font-size", fonts[i][1]);
|
2017-07-28 08:48:49 +02:00
|
|
|
n[0].dir = fonts[i][2] ? "rtl" : "ltr";
|
2017-07-28 08:19:06 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-04-30 06:51:49 +02:00
|
|
|
function setNoteId(id) {
|
|
|
|
currentNoteId = id;
|
|
|
|
}
|
|
|
|
|
2017-07-28 08:19:06 +02:00
|
|
|
function showDupes() {
|
|
|
|
$("#dupes").show();
|
|
|
|
}
|
|
|
|
|
|
|
|
function hideDupes() {
|
|
|
|
$("#dupes").hide();
|
|
|
|
}
|
|
|
|
|
2020-01-19 07:41:39 +01:00
|
|
|
/// If the field has only an empty br, remove it first.
|
|
|
|
let insertHtmlRemovingInitialBR = function(html: string) {
|
2019-05-17 05:40:23 +02:00
|
|
|
if (html !== "") {
|
2020-01-19 07:41:39 +01:00
|
|
|
// remove <br> in empty field
|
2019-05-17 05:40:23 +02:00
|
|
|
if (currentField && currentField.innerHTML === "<br>") {
|
|
|
|
currentField.innerHTML = "";
|
|
|
|
}
|
|
|
|
setFormat("inserthtml", html);
|
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
};
|
|
|
|
|
2020-01-19 07:41:39 +01:00
|
|
|
let pasteHTML = function(html, internal, extendedMode) {
|
|
|
|
html = filterHTML(html, internal, extendedMode);
|
|
|
|
insertHtmlRemovingInitialBR(html);
|
|
|
|
};
|
|
|
|
|
2019-12-21 11:18:58 +01:00
|
|
|
let filterHTML = function(html, internal, extendedMode) {
|
2017-07-28 08:19:06 +02:00
|
|
|
// wrap it in <top> as we aren't allowed to change top level elements
|
2019-12-18 04:53:31 +01:00
|
|
|
const top = $.parseHTML("<ankitop>" + html + "</ankitop>")[0] as Element;
|
2017-10-25 09:51:22 +02:00
|
|
|
if (internal) {
|
|
|
|
filterInternalNode(top);
|
2019-12-18 07:12:39 +01:00
|
|
|
} else {
|
2017-10-25 12:20:28 +02:00
|
|
|
filterNode(top, extendedMode);
|
2017-10-25 09:51:22 +02:00
|
|
|
}
|
2019-12-18 04:53:31 +01:00
|
|
|
let outHtml = top.innerHTML;
|
2020-01-26 10:13:31 +01:00
|
|
|
if (!extendedMode && !internal) {
|
2018-06-15 03:36:12 +02:00
|
|
|
// collapse whitespace
|
|
|
|
outHtml = outHtml.replace(/[\n\t ]+/g, " ");
|
|
|
|
}
|
|
|
|
outHtml = outHtml.trim();
|
2017-07-28 08:19:06 +02:00
|
|
|
//console.log(`input html: ${html}`);
|
|
|
|
//console.log(`outpt html: ${outHtml}`);
|
|
|
|
return outHtml;
|
|
|
|
};
|
|
|
|
|
2019-12-20 22:33:15 +01:00
|
|
|
let allowedTagsBasic = {};
|
|
|
|
let allowedTagsExtended = {};
|
2017-07-28 08:19:06 +02:00
|
|
|
|
2019-12-20 22:33:15 +01:00
|
|
|
let TAGS_WITHOUT_ATTRS = ["P", "DIV", "BR", "SUB", "SUP"];
|
|
|
|
for (const tag of TAGS_WITHOUT_ATTRS) {
|
|
|
|
allowedTagsBasic[tag] = { attrs: [] };
|
2019-12-18 07:12:39 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
TAGS_WITHOUT_ATTRS = [
|
2020-02-07 08:12:43 +01:00
|
|
|
"B",
|
|
|
|
"BLOCKQUOTE",
|
|
|
|
"CODE",
|
|
|
|
"DD",
|
|
|
|
"DL",
|
|
|
|
"DT",
|
|
|
|
"EM",
|
2019-12-18 07:12:39 +01:00
|
|
|
"H1",
|
|
|
|
"H2",
|
|
|
|
"H3",
|
2020-02-07 08:12:43 +01:00
|
|
|
"I",
|
2019-12-18 07:12:39 +01:00
|
|
|
"LI",
|
|
|
|
"OL",
|
|
|
|
"PRE",
|
2020-02-07 08:12:43 +01:00
|
|
|
"RP",
|
|
|
|
"RT",
|
|
|
|
"RUBY",
|
|
|
|
"STRONG",
|
2019-12-18 07:12:39 +01:00
|
|
|
"TABLE",
|
|
|
|
"U",
|
2020-02-07 08:12:43 +01:00
|
|
|
"UL",
|
2019-12-18 07:12:39 +01:00
|
|
|
];
|
2019-12-20 22:33:15 +01:00
|
|
|
for (const tag of TAGS_WITHOUT_ATTRS) {
|
|
|
|
allowedTagsExtended[tag] = { attrs: [] };
|
2017-10-25 12:20:28 +02:00
|
|
|
}
|
|
|
|
|
2019-12-18 07:12:39 +01:00
|
|
|
allowedTagsBasic["IMG"] = { attrs: ["SRC"] };
|
2017-10-25 12:20:28 +02:00
|
|
|
|
2019-12-18 07:12:39 +01:00
|
|
|
allowedTagsExtended["A"] = { attrs: ["HREF"] };
|
|
|
|
allowedTagsExtended["TR"] = { attrs: ["ROWSPAN"] };
|
|
|
|
allowedTagsExtended["TD"] = { attrs: ["COLSPAN", "ROWSPAN"] };
|
|
|
|
allowedTagsExtended["TH"] = { attrs: ["COLSPAN", "ROWSPAN"] };
|
|
|
|
allowedTagsExtended["FONT"] = { attrs: ["COLOR"] };
|
2017-10-25 12:20:28 +02:00
|
|
|
|
2019-12-06 04:39:05 +01:00
|
|
|
const allowedStyling = {
|
2019-12-18 07:12:39 +01:00
|
|
|
color: true,
|
|
|
|
"background-color": true,
|
|
|
|
"font-weight": true,
|
|
|
|
"font-style": true,
|
|
|
|
"text-decoration-line": true,
|
2019-12-06 04:39:05 +01:00
|
|
|
};
|
|
|
|
|
2020-01-30 23:03:09 +01:00
|
|
|
let isNightMode = function(): boolean {
|
|
|
|
return document.body.classList.contains("nightMode");
|
|
|
|
};
|
|
|
|
|
2019-12-21 11:18:58 +01:00
|
|
|
let filterExternalSpan = function(node) {
|
2019-12-06 04:39:05 +01:00
|
|
|
// filter out attributes
|
2019-12-20 22:33:15 +01:00
|
|
|
let toRemove = [];
|
|
|
|
for (const attr of node.attributes) {
|
|
|
|
const attrName = attr.name.toUpperCase();
|
2019-12-18 07:12:39 +01:00
|
|
|
if (attrName !== "STYLE") {
|
2019-12-06 04:39:05 +01:00
|
|
|
toRemove.push(attr);
|
|
|
|
}
|
|
|
|
}
|
2019-12-20 22:33:15 +01:00
|
|
|
for (const attributeToRemove of toRemove) {
|
|
|
|
node.removeAttributeNode(attributeToRemove);
|
2019-12-06 04:39:05 +01:00
|
|
|
}
|
|
|
|
// filter styling
|
|
|
|
toRemove = [];
|
2019-12-20 22:33:15 +01:00
|
|
|
for (const name of node.style) {
|
2019-12-06 04:39:05 +01:00
|
|
|
if (!allowedStyling.hasOwnProperty(name)) {
|
|
|
|
toRemove.push(name);
|
|
|
|
}
|
2019-12-18 07:12:39 +01:00
|
|
|
if (name === "background-color" && node.style[name] === "transparent") {
|
2019-12-06 05:08:59 +01:00
|
|
|
// google docs adds this unnecessarily
|
|
|
|
toRemove.push(name);
|
|
|
|
}
|
2020-01-30 23:03:09 +01:00
|
|
|
if (isNightMode()) {
|
|
|
|
// ignore coloured text in night mode for now
|
|
|
|
if (name === "background-color" || name == "color") {
|
|
|
|
toRemove.push(name);
|
|
|
|
}
|
|
|
|
}
|
2019-12-06 04:39:05 +01:00
|
|
|
}
|
|
|
|
for (let name of toRemove) {
|
|
|
|
node.style.removeProperty(name);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
allowedTagsExtended["SPAN"] = filterExternalSpan;
|
|
|
|
|
2017-10-25 12:20:28 +02:00
|
|
|
// add basic tags to extended
|
|
|
|
Object.assign(allowedTagsExtended, allowedTagsBasic);
|
2017-07-28 08:19:06 +02:00
|
|
|
|
2017-10-25 09:51:22 +02:00
|
|
|
// filtering from another field
|
2019-12-21 11:18:58 +01:00
|
|
|
let filterInternalNode = function(node) {
|
2018-11-12 06:46:12 +01:00
|
|
|
if (node.style) {
|
2017-10-25 09:51:22 +02:00
|
|
|
node.style.removeProperty("background-color");
|
|
|
|
node.style.removeProperty("font-size");
|
|
|
|
node.style.removeProperty("font-family");
|
|
|
|
}
|
|
|
|
// recurse
|
2019-12-20 22:33:15 +01:00
|
|
|
for (const child of node.childNodes) {
|
|
|
|
filterInternalNode(child);
|
2017-10-25 09:51:22 +02:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// filtering from external sources
|
2019-12-21 11:18:58 +01:00
|
|
|
let filterNode = function(node, extendedMode) {
|
2017-07-28 08:19:06 +02:00
|
|
|
// text node?
|
2017-07-28 08:48:49 +02:00
|
|
|
if (node.nodeType === 3) {
|
2017-07-28 08:19:06 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// descend first, and take a copy of the child nodes as the loop will skip
|
|
|
|
// elements due to node modifications otherwise
|
|
|
|
|
2019-12-21 11:18:58 +01:00
|
|
|
const nodes = [];
|
2019-12-20 22:33:15 +01:00
|
|
|
for (const child of node.childNodes) {
|
|
|
|
nodes.push(child);
|
2017-07-28 08:19:06 +02:00
|
|
|
}
|
2019-12-20 22:33:15 +01:00
|
|
|
for (const child of nodes) {
|
|
|
|
filterNode(child, extendedMode);
|
2017-07-28 08:19:06 +02:00
|
|
|
}
|
|
|
|
|
2017-07-28 08:48:49 +02:00
|
|
|
if (node.tagName === "ANKITOP") {
|
2017-07-28 08:19:06 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2019-12-20 22:33:15 +01:00
|
|
|
let tag;
|
2017-10-25 12:20:28 +02:00
|
|
|
if (extendedMode) {
|
|
|
|
tag = allowedTagsExtended[node.tagName];
|
|
|
|
} else {
|
|
|
|
tag = allowedTagsBasic[node.tagName];
|
|
|
|
}
|
2017-07-28 08:19:06 +02:00
|
|
|
if (!tag) {
|
2019-12-18 07:12:39 +01:00
|
|
|
if (!node.innerHTML || node.tagName === "TITLE") {
|
2017-07-28 08:19:06 +02:00
|
|
|
node.parentNode.removeChild(node);
|
|
|
|
} else {
|
|
|
|
node.outerHTML = node.innerHTML;
|
|
|
|
}
|
|
|
|
} else {
|
2019-12-18 07:12:39 +01:00
|
|
|
if (typeof tag === "function") {
|
2019-12-06 04:39:05 +01:00
|
|
|
// filtering function provided
|
|
|
|
tag(node);
|
|
|
|
} else {
|
|
|
|
// allowed, filter out attributes
|
2019-12-21 11:18:58 +01:00
|
|
|
const toRemove = [];
|
2019-12-20 22:33:15 +01:00
|
|
|
for (const attr of node.attributes) {
|
|
|
|
const attrName = attr.name.toUpperCase();
|
2019-12-06 04:39:05 +01:00
|
|
|
if (tag.attrs.indexOf(attrName) === -1) {
|
|
|
|
toRemove.push(attr);
|
|
|
|
}
|
|
|
|
}
|
2019-12-20 22:33:15 +01:00
|
|
|
for (const attributeToRemove of toRemove) {
|
|
|
|
node.removeAttributeNode(attributeToRemove);
|
2017-07-28 08:19:06 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-12-21 11:18:58 +01:00
|
|
|
let adjustFieldsTopMargin = function() {
|
2019-12-20 22:33:15 +01:00
|
|
|
const topHeight = $("#topbuts").height();
|
|
|
|
const margin = topHeight + 8;
|
2018-12-03 00:54:51 +01:00
|
|
|
document.getElementById("fields").style.marginTop = margin + "px";
|
|
|
|
};
|
|
|
|
|
2019-12-20 22:33:15 +01:00
|
|
|
let mouseDown = 0;
|
2017-07-28 08:19:06 +02:00
|
|
|
|
2019-12-18 07:12:39 +01:00
|
|
|
$(function() {
|
|
|
|
document.body.onmousedown = function() {
|
2017-07-28 08:19:06 +02:00
|
|
|
mouseDown++;
|
2017-07-28 08:48:49 +02:00
|
|
|
};
|
2017-07-28 08:19:06 +02:00
|
|
|
|
2019-12-18 07:12:39 +01:00
|
|
|
document.body.onmouseup = function() {
|
2017-07-28 08:19:06 +02:00
|
|
|
mouseDown--;
|
2017-07-28 08:48:49 +02:00
|
|
|
};
|
2017-07-28 08:19:06 +02:00
|
|
|
|
2019-12-18 07:12:39 +01:00
|
|
|
document.onclick = function(evt: MouseEvent) {
|
2019-12-21 11:18:58 +01:00
|
|
|
const src = evt.target as Element;
|
2017-07-28 08:48:49 +02:00
|
|
|
if (src.tagName === "IMG") {
|
2017-07-28 08:19:06 +02:00
|
|
|
// image clicked; find contenteditable parent
|
2019-12-20 22:33:15 +01:00
|
|
|
let p = src;
|
2019-12-18 07:12:39 +01:00
|
|
|
while ((p = p.parentNode as Element)) {
|
2017-07-28 08:48:49 +02:00
|
|
|
if (p.className === "field") {
|
2017-07-28 08:19:06 +02:00
|
|
|
$("#" + p.id).focus();
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2017-07-28 08:48:49 +02:00
|
|
|
};
|
2017-07-28 08:19:06 +02:00
|
|
|
|
|
|
|
// prevent editor buttons from taking focus
|
2019-12-18 07:12:39 +01:00
|
|
|
$("button.linkb").on("mousedown", function(e) {
|
2017-07-28 08:19:06 +02:00
|
|
|
e.preventDefault();
|
|
|
|
});
|
2018-12-03 00:54:51 +01:00
|
|
|
|
|
|
|
window.onresize = function() {
|
|
|
|
adjustFieldsTopMargin();
|
|
|
|
};
|
|
|
|
|
|
|
|
adjustFieldsTopMargin();
|
2017-07-28 08:19:06 +02:00
|
|
|
});
|