|
|
@@ -54,6 +54,7 @@
|
|
|
const CUT_OUTER_HOVER_CLASS = "single-file-cut-outer-hover";
|
|
|
const CUT_SELECTED_CLASS = "single-file-cut-selected";
|
|
|
const CUT_OUTER_SELECTED_CLASS = "single-file-cut-outer-selected";
|
|
|
+ const CUT_MODE_CLASS = "single-file-cut-mode";
|
|
|
const NOTE_INITIAL_POSITION_X = 20;
|
|
|
const NOTE_INITIAL_POSITION_Y = 20;
|
|
|
const NOTE_INITIAL_WIDTH = 150;
|
|
|
@@ -975,7 +976,7 @@ pre code {
|
|
|
}`;
|
|
|
|
|
|
let NOTES_WEB_STYLESHEET, MASK_WEB_STYLESHEET, HIGHLIGHTS_WEB_STYLESHEET;
|
|
|
- let selectedNote, anchorElement, maskNoteElement, maskPageElement, highlightSelectionMode, removeHighlightMode, resizingNoteMode, movingNoteMode, highlightColor, collapseNoteTimeout, cuttingOuterMode, cuttingMode, cuttingPath, cuttingPathIndex, previousContent;
|
|
|
+ let selectedNote, anchorElement, maskNoteElement, maskPageElement, highlightSelectionMode, removeHighlightMode, resizingNoteMode, movingNoteMode, highlightColor, collapseNoteTimeout, cuttingOuterMode, cuttingMode, cuttingTouchTarget, cuttingPath, cuttingPathIndex, previousContent;
|
|
|
let removedElements = [], removedElementIndex = 0, initScriptContent;
|
|
|
|
|
|
window.onmessage = async event => {
|
|
|
@@ -1036,24 +1037,19 @@ pre code {
|
|
|
}
|
|
|
if (message.method == "enableCutInnerPage") {
|
|
|
cuttingMode = true;
|
|
|
- document.documentElement.classList.add("single-file-cut-mode");
|
|
|
+ document.documentElement.classList.add(CUT_MODE_CLASS);
|
|
|
}
|
|
|
if (message.method == "enableCutOuterPage") {
|
|
|
cuttingOuterMode = true;
|
|
|
- document.documentElement.classList.add("single-file-cut-mode");
|
|
|
+ document.documentElement.classList.add(CUT_MODE_CLASS);
|
|
|
}
|
|
|
- if (message.method == "disableCutInnerPage") {
|
|
|
- cuttingMode = false;
|
|
|
- document.documentElement.classList.remove("single-file-cut-mode");
|
|
|
- resetSelectedElements();
|
|
|
- if (cuttingPath) {
|
|
|
- unhighlightCutElement();
|
|
|
- cuttingPath = null;
|
|
|
+ if (message.method == "disableCutInnerPage" || message.method == "disableCutOuterPage") {
|
|
|
+ if (message.method == "disableCutInnerPage") {
|
|
|
+ cuttingMode = false;
|
|
|
+ } else {
|
|
|
+ cuttingOuterMode = false;
|
|
|
}
|
|
|
- }
|
|
|
- if (message.method == "disableCutOuterPage") {
|
|
|
- cuttingOuterMode = false;
|
|
|
- document.documentElement.classList.remove("single-file-cut-mode");
|
|
|
+ document.documentElement.classList.remove(CUT_MODE_CLASS);
|
|
|
resetSelectedElements();
|
|
|
if (cuttingPath) {
|
|
|
unhighlightCutElement();
|
|
|
@@ -1139,11 +1135,12 @@ pre code {
|
|
|
document.documentElement.appendChild(getStyleElement(HIGHLIGHTS_WEB_STYLESHEET));
|
|
|
maskPageElement = getMaskElement(PAGE_MASK_CLASS, PAGE_MASK_CONTAINER_CLASS);
|
|
|
maskNoteElement = getMaskElement(NOTE_MASK_CLASS);
|
|
|
- document.documentElement.onmousedown = document.documentElement.ontouchstart = onMouseDown;
|
|
|
+ document.documentElement.onmousedown = onMouseDown;
|
|
|
document.documentElement.onmouseup = document.documentElement.ontouchend = onMouseUp;
|
|
|
document.documentElement.onmouseover = onMouseOver;
|
|
|
document.documentElement.onmouseout = onMouseOut;
|
|
|
document.documentElement.onkeydown = onKeyDown;
|
|
|
+ document.documentElement.ontouchstart = document.documentElement.ontouchmove = onTouchMove;
|
|
|
window.onclick = event => event.preventDefault();
|
|
|
const iconElement = document.querySelector("link[rel*=icon]");
|
|
|
window.parent.postMessage(JSON.stringify({
|
|
|
@@ -1185,7 +1182,7 @@ pre code {
|
|
|
noteShadow.appendChild(noteElement);
|
|
|
const notesElements = Array.from(document.querySelectorAll(NOTE_TAGNAME));
|
|
|
const noteId = Math.max.call(Math, 0, ...notesElements.map(noteElement => Number(noteElement.dataset.noteId))) + 1;
|
|
|
- noteElement.cite = "https://www.w3.org/TR/annotation-model/#selector(type=CssSelector,value=[data-single-file-note-refs~=\"" + noteId + "\"])";
|
|
|
+ blockquoteElement.cite = "https://www.w3.org/TR/annotation-model/#selector(type=CssSelector,value=[data-single-file-note-refs~=\"" + noteId + "\"])";
|
|
|
noteElement.classList.add(NOTE_CLASS);
|
|
|
noteElement.classList.add(NOTE_ANCHORED_CLASS);
|
|
|
noteElement.classList.add(color);
|
|
|
@@ -1409,10 +1406,12 @@ pre code {
|
|
|
|
|
|
function onMouseUp(event) {
|
|
|
if (highlightSelectionMode) {
|
|
|
+ event.preventDefault();
|
|
|
highlightSelection();
|
|
|
onUpdate(false);
|
|
|
}
|
|
|
if (removeHighlightMode) {
|
|
|
+ event.preventDefault();
|
|
|
let element = event.target, done;
|
|
|
while (element && !done) {
|
|
|
if (element.classList.contains(HIGHLIGHT_CLASS)) {
|
|
|
@@ -1426,23 +1425,24 @@ pre code {
|
|
|
}
|
|
|
}
|
|
|
if (resizingNoteMode) {
|
|
|
+ event.preventDefault();
|
|
|
resizingNoteMode = false;
|
|
|
document.documentElement.style.removeProperty("user-select");
|
|
|
maskPageElement.classList.remove(PAGE_MASK_ACTIVE_CLASS);
|
|
|
- document.documentElement.ontouchmove = document.documentElement.onmousemove = null;
|
|
|
+ document.documentElement.ontouchmove = onTouchMove;
|
|
|
+ document.documentElement.onmousemove = null;
|
|
|
onUpdate(false);
|
|
|
}
|
|
|
if (movingNoteMode) {
|
|
|
+ event.preventDefault();
|
|
|
anchorNote(movingNoteMode.event || event, selectedNote, movingNoteMode.deltaX, movingNoteMode.deltaY);
|
|
|
movingNoteMode = null;
|
|
|
- document.documentElement.ontouchmove = document.documentElement.onmousemove = null;
|
|
|
+ document.documentElement.ontouchmove = onTouchMove;
|
|
|
+ document.documentElement.onmousemove = null;
|
|
|
onUpdate(false);
|
|
|
}
|
|
|
- if (collapseNoteTimeout) {
|
|
|
- clearTimeout(collapseNoteTimeout);
|
|
|
- collapseNoteTimeout = null;
|
|
|
- }
|
|
|
if ((cuttingMode || cuttingOuterMode) && cuttingPath) {
|
|
|
+ event.preventDefault();
|
|
|
if (event.ctrlKey) {
|
|
|
const element = cuttingPath[cuttingPathIndex];
|
|
|
element.classList.toggle(cuttingMode ? CUT_SELECTED_CLASS : CUT_OUTER_SELECTED_CLASS);
|
|
|
@@ -1450,6 +1450,10 @@ pre code {
|
|
|
validateCutElement(event.shiftKey);
|
|
|
}
|
|
|
}
|
|
|
+ if (collapseNoteTimeout) {
|
|
|
+ clearTimeout(collapseNoteTimeout);
|
|
|
+ collapseNoteTimeout = null;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
function onMouseOver(event) {
|
|
|
@@ -1482,6 +1486,21 @@ pre code {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ function onTouchMove(event) {
|
|
|
+ if (cuttingMode || cuttingOuterMode) {
|
|
|
+ event.preventDefault();
|
|
|
+ const { clientX, clientY } = getPosition(event);
|
|
|
+ const target = document.elementFromPoint(clientX, clientY);
|
|
|
+ if (cuttingTouchTarget != target) {
|
|
|
+ onMouseOut();
|
|
|
+ if (target) {
|
|
|
+ cuttingTouchTarget = target;
|
|
|
+ onMouseOver({ target });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
function onKeyDown(event) {
|
|
|
if (cuttingMode || cuttingOuterMode) {
|
|
|
if (event.code == "Tab") {
|
|
|
@@ -1593,6 +1612,7 @@ pre code {
|
|
|
resetSelectedElements();
|
|
|
if (elementsRemoved.length) {
|
|
|
elementsRemoved.forEach(element => {
|
|
|
+ unhighlightCutElement();
|
|
|
if (element.tagName.toLowerCase() == NOTE_TAGNAME) {
|
|
|
resetAnchorNote(element);
|
|
|
} else {
|
|
|
@@ -1622,6 +1642,7 @@ pre code {
|
|
|
}
|
|
|
});
|
|
|
elementsKept.forEach(elementKept => {
|
|
|
+ unhighlightCutElement();
|
|
|
const elementKeptRect = elementKept.getBoundingClientRect();
|
|
|
elementKept.querySelectorAll(searchSelector).forEach(descendant => {
|
|
|
const descendantRect = descendant.getBoundingClientRect();
|
|
|
@@ -1880,6 +1901,7 @@ pre code {
|
|
|
resetSelectedElements(doc);
|
|
|
deserializeShadowRoots(doc);
|
|
|
deserializeShadowRoots(document);
|
|
|
+ doc.documentElement.classList.remove(CUT_MODE_CLASS);
|
|
|
doc.querySelectorAll("[" + DISABLED_NOSCRIPT_ATTRIBUTE_NAME + "]").forEach(element => {
|
|
|
element.textContent = element.getAttribute(DISABLED_NOSCRIPT_ATTRIBUTE_NAME);
|
|
|
element.removeAttribute(DISABLED_NOSCRIPT_ATTRIBUTE_NAME);
|
Gildas