2018-02-04 19:12:24 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
2019-12-30 22:54:13 +02:00
|
|
|
<head id="joplin-container-root-head">
|
2018-03-20 01:04:48 +02:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
2018-02-04 19:12:24 +02:00
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2019-11-07 22:32:11 +02:00
|
|
|
#joplin-container-content {
|
2019-07-14 17:00:02 +02:00
|
|
|
/* Needs this in case the content contains elements with absolute positioning */
|
|
|
|
|
/* Without this they would just stay at a fixed position when scrolling */
|
|
|
|
|
position: relative;
|
2018-02-04 19:12:24 +02:00
|
|
|
overflow-y: auto;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
padding-right: 10px;
|
2019-07-16 23:58:44 +02:00
|
|
|
|
|
|
|
|
/* Note: the height is set via updateBodyHeight(). Setting it here to 100% */
|
|
|
|
|
/* won't work with some pages due to the position: relative */
|
2018-02-04 19:12:24 +02:00
|
|
|
}
|
|
|
|
|
|
2020-08-08 10:55:10 +02:00
|
|
|
#rendered-md {
|
|
|
|
|
/* This is used to enable the scroll-past end behaviour. The same height should */
|
|
|
|
|
/* be applied to the editor. */
|
|
|
|
|
padding-bottom: 400px;
|
|
|
|
|
}
|
|
|
|
|
|
2018-12-09 02:18:10 +02:00
|
|
|
.mark-selected {
|
2018-03-20 01:04:48 +02:00
|
|
|
background: #CF3F00;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
2018-05-19 20:09:27 +02:00
|
|
|
ul ul, ul ol, ol ul, ol ol {
|
|
|
|
|
margin-bottom: 0px;
|
|
|
|
|
}
|
2018-02-04 19:12:24 +02:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
2019-11-07 22:32:11 +02:00
|
|
|
<body id="joplin-container-body">
|
2020-02-12 00:27:34 +02:00
|
|
|
<div id="joplin-container-pluginAssetsContainer"></div>
|
2019-11-07 22:32:11 +02:00
|
|
|
<div id="joplin-container-markScriptContainer"></div>
|
|
|
|
|
<div id="joplin-container-content" ondragstart="return false;" ondrop="return false;"></div>
|
2019-01-17 21:01:35 +02:00
|
|
|
<script src="./lib.js"></script>
|
2018-02-04 19:12:24 +02:00
|
|
|
|
|
|
|
|
<script>
|
2020-12-11 14:00:24 +02:00
|
|
|
// This is function used internally to send message from the webview to
|
|
|
|
|
// the host.
|
2019-05-24 18:34:18 +02:00
|
|
|
const ipcProxySendToHost = (methodName, arg) => {
|
|
|
|
|
window.postMessage({ target: 'main', name: methodName, args: [ arg ] }, '*');
|
|
|
|
|
}
|
|
|
|
|
|
2021-01-12 01:33:10 +02:00
|
|
|
const webviewApiPromises_ = {};
|
|
|
|
|
|
2020-12-11 14:00:24 +02:00
|
|
|
// This function is reserved for plugin, currently only to allow
|
|
|
|
|
// executing a command, but more features could be added to the object
|
|
|
|
|
// later on.
|
|
|
|
|
const webviewApi = {
|
2021-01-12 01:33:10 +02:00
|
|
|
postMessage: function(contentScriptId, message) {
|
|
|
|
|
const messageId = 'noteViewer_' + Date.now() + Math.random();
|
|
|
|
|
|
|
|
|
|
const promise = new Promise((resolve, reject) => {
|
|
|
|
|
webviewApiPromises_[messageId] = { resolve, reject };
|
2020-12-11 14:00:24 +02:00
|
|
|
});
|
2021-01-12 01:33:10 +02:00
|
|
|
|
|
|
|
|
ipcProxySendToHost('postMessageService.message', {
|
|
|
|
|
contentScriptId: contentScriptId,
|
|
|
|
|
viewId: '',
|
|
|
|
|
from: 'contentScript',
|
|
|
|
|
to: 'plugin',
|
|
|
|
|
id: messageId,
|
|
|
|
|
content: message,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return promise;
|
|
|
|
|
},
|
2020-12-11 14:00:24 +02:00
|
|
|
}
|
|
|
|
|
|
2020-02-08 13:11:04 +02:00
|
|
|
let pluginAssetsAdded_ = {};
|
|
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
try {
|
2019-11-07 22:32:11 +02:00
|
|
|
const contentElement = document.getElementById('joplin-container-content');
|
2018-02-04 19:12:24 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
const ipc = {};
|
2018-09-21 19:20:06 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
window.addEventListener('message', webviewLib.logEnabledEventHandler(event => {
|
2021-01-12 01:33:10 +02:00
|
|
|
// Here we only deal with messages that are sent from the main Electron process to the webview.
|
2019-05-24 18:34:18 +02:00
|
|
|
if (!event.data || event.data.target !== 'webview') return;
|
2018-09-21 19:20:06 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
const callName = event.data.name;
|
|
|
|
|
const callData = event.data.data;
|
2018-09-21 19:20:06 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
if (!ipc[callName]) {
|
|
|
|
|
console.warn('Missing IPC function:', event.data);
|
|
|
|
|
} else {
|
|
|
|
|
ipc[callName](callData);
|
|
|
|
|
}
|
|
|
|
|
}));
|
2019-12-30 22:54:13 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
// Note: the scroll position source of truth is "percentScroll_". This is easier to manage than scrollTop because
|
|
|
|
|
// the scrollTop value depends on the images being loaded or not. For example, if the scrollTop is saved while
|
|
|
|
|
// images are being displayed then restored while images are being reloaded, the new scrollTop might be changed
|
|
|
|
|
// so that it is not greater than contentHeight. On the other hand, with percentScroll it is possible to restore
|
|
|
|
|
// it at any time knowing that it's not going to be changed because the content height has changed.
|
|
|
|
|
// To restore percentScroll the "checkScrollIID" interval is used. It constantly resets the scroll position during
|
|
|
|
|
// one second after the content has been updated.
|
|
|
|
|
//
|
|
|
|
|
// ignoreNextScroll is used to differentiate between scroll event from the users and those that are the result
|
|
|
|
|
// of programmatically changing scrollTop. We only want to respond to events initiated by the user.
|
|
|
|
|
|
|
|
|
|
let percentScroll_ = 0;
|
|
|
|
|
let checkScrollIID_ = null;
|
|
|
|
|
|
2020-05-20 01:51:00 +02:00
|
|
|
// This variable provides a way to skip scroll events for a certain duration.
|
|
|
|
|
// In general, it should be set whenever the scroll value is set explicitely (programmatically)
|
|
|
|
|
// so as to differentiate scroll events generated by the user (when scrolling the view) and those
|
|
|
|
|
// generated by the application.
|
|
|
|
|
let lastScrollEventTime = 0;
|
|
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
function setPercentScroll(percent) {
|
|
|
|
|
percentScroll_ = percent;
|
|
|
|
|
contentElement.scrollTop = percentScroll_ * maxScrollTop();
|
2018-02-04 19:12:24 +02:00
|
|
|
}
|
|
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
function percentScroll() {
|
|
|
|
|
return percentScroll_;
|
|
|
|
|
}
|
2018-02-04 19:12:24 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
function restorePercentScroll() {
|
2020-05-20 01:51:00 +02:00
|
|
|
lastScrollEventTime = Date.now();
|
2019-05-24 18:34:18 +02:00
|
|
|
setPercentScroll(percentScroll_);
|
|
|
|
|
}
|
2017-11-07 23:11:14 +02:00
|
|
|
|
2020-02-08 13:11:04 +02:00
|
|
|
// Note that this function keeps track of what's been added so as not to add the same CSS files multiple times
|
|
|
|
|
// It also means that once an asset has been added it is never removed from the view, which in many case is
|
|
|
|
|
// desirable, but still something to keep in mind.
|
|
|
|
|
function addPluginAssets(assets) {
|
|
|
|
|
if (!assets) return;
|
|
|
|
|
|
2020-02-12 00:27:34 +02:00
|
|
|
const pluginAssetsContainer = document.getElementById('joplin-container-pluginAssetsContainer');
|
|
|
|
|
|
2020-02-12 12:17:15 +02:00
|
|
|
for (let i = 0; i < assets.length; i++) {
|
|
|
|
|
const asset = assets[i];
|
2020-05-02 17:41:07 +02:00
|
|
|
|
|
|
|
|
const assetId = asset.name ? asset.name : asset.path;
|
|
|
|
|
if (pluginAssetsAdded_[assetId]) continue;
|
|
|
|
|
pluginAssetsAdded_[assetId] = true;
|
2020-02-12 00:27:34 +02:00
|
|
|
|
|
|
|
|
if (asset.mime === 'application/javascript') {
|
|
|
|
|
const script = document.createElement('script');
|
|
|
|
|
script.src = asset.path;
|
|
|
|
|
pluginAssetsContainer.appendChild(script);
|
|
|
|
|
} else if (asset.mime === 'text/css') {
|
|
|
|
|
const link = document.createElement('link');
|
|
|
|
|
link.rel = 'stylesheet';
|
|
|
|
|
link.href = asset.path;
|
|
|
|
|
pluginAssetsContainer.appendChild(link);
|
|
|
|
|
}
|
2020-02-08 13:11:04 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2019-09-09 19:16:00 +02:00
|
|
|
ipc.scrollToHash = (event) => {
|
|
|
|
|
if (window.scrollToHashIID_) clearInterval(window.scrollToHashIID_);
|
|
|
|
|
window.scrollToHashIID_ = setInterval(() => {
|
|
|
|
|
if (document.readyState !== 'complete') return;
|
|
|
|
|
clearInterval(window.scrollToHashIID_);
|
|
|
|
|
const hash = event.hash.toLowerCase();
|
|
|
|
|
const e = document.getElementById(hash);
|
|
|
|
|
if (!e) {
|
|
|
|
|
console.warn('Cannot find hash', hash);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
e.scrollIntoView();
|
|
|
|
|
|
|
|
|
|
// Make sure the editor pane is also scrolled
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
const percent = currentPercentScroll();
|
|
|
|
|
setPercentScroll(percent);
|
|
|
|
|
ipcProxySendToHost('percentScroll', percent);
|
|
|
|
|
}, 10);
|
|
|
|
|
}, 100);
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-02 17:41:07 +02:00
|
|
|
// https://stackoverflow.com/a/1977898/561309
|
|
|
|
|
function isImageReady(img) {
|
|
|
|
|
if (!img.complete) return false;
|
|
|
|
|
if (!img.naturalWidth || !img.naturalHeight) return false;
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function allImagesLoaded() {
|
|
|
|
|
for (const image of document.images) {
|
|
|
|
|
if (!isImageReady(image)) return false;
|
|
|
|
|
}
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let checkAllImageLoadedIID_ = null;
|
|
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
ipc.setHtml = (event) => {
|
|
|
|
|
const html = event.html;
|
2017-11-28 22:58:07 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
markJsHackMarkerInserted_ = false;
|
2018-09-21 19:20:06 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
updateBodyHeight();
|
2018-12-14 00:57:14 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
contentElement.innerHTML = html;
|
2018-02-04 20:45:52 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
let previousContentHeight = contentElement.scrollHeight;
|
|
|
|
|
let startTime = Date.now();
|
|
|
|
|
restorePercentScroll();
|
2018-02-04 19:12:24 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
if (!checkScrollIID_) {
|
|
|
|
|
checkScrollIID_ = setInterval(() => {
|
|
|
|
|
const h = contentElement.scrollHeight;
|
|
|
|
|
if (h !== previousContentHeight) {
|
|
|
|
|
previousContentHeight = h;
|
|
|
|
|
restorePercentScroll();
|
|
|
|
|
}
|
|
|
|
|
if (Date.now() - startTime >= 1000) {
|
|
|
|
|
clearInterval(checkScrollIID_);
|
|
|
|
|
checkScrollIID_ = null;
|
|
|
|
|
}
|
|
|
|
|
}, 1);
|
|
|
|
|
}
|
2018-02-04 19:12:24 +02:00
|
|
|
|
2020-02-12 00:27:34 +02:00
|
|
|
addPluginAssets(event.options.pluginAssets);
|
2019-12-29 19:58:40 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
if (event.options.downloadResources === 'manual') {
|
|
|
|
|
webviewLib.setupResourceManualDownload();
|
|
|
|
|
}
|
2020-02-12 00:27:34 +02:00
|
|
|
|
|
|
|
|
document.dispatchEvent(new Event('joplin-noteDidUpdate'));
|
2020-05-02 17:41:07 +02:00
|
|
|
|
|
|
|
|
if (checkAllImageLoadedIID_) clearInterval(checkAllImageLoadedIID_);
|
|
|
|
|
|
|
|
|
|
checkAllImageLoadedIID_ = setInterval(() => {
|
|
|
|
|
if (!allImagesLoaded()) return;
|
|
|
|
|
|
|
|
|
|
clearInterval(checkAllImageLoadedIID_);
|
|
|
|
|
ipcProxySendToHost('noteRenderComplete');
|
|
|
|
|
}, 100);
|
2018-02-04 19:12:24 +02:00
|
|
|
}
|
2019-02-18 20:11:53 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
ipc.setPercentScroll = (event) => {
|
|
|
|
|
const percent = event.percent;
|
2018-02-04 19:12:24 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
if (checkScrollIID_) {
|
|
|
|
|
clearInterval(checkScrollIID_);
|
|
|
|
|
checkScrollIID_ = null;
|
|
|
|
|
}
|
2018-09-21 19:20:06 +02:00
|
|
|
|
2019-10-28 20:56:38 +02:00
|
|
|
lastScrollEventTime = Date.now();
|
2019-05-24 18:34:18 +02:00
|
|
|
setPercentScroll(percent);
|
2018-02-04 19:12:24 +02:00
|
|
|
}
|
|
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
// HACK for Mark.js bug - https://github.com/julmot/mark.js/issues/127
|
|
|
|
|
let markJsHackMarkerInserted_ = false;
|
|
|
|
|
function addMarkJsSpaceHack(document) {
|
|
|
|
|
if (markJsHackMarkerInserted_) return;
|
|
|
|
|
|
|
|
|
|
const prepareElementsForMarkJs = (elements, type) => {
|
|
|
|
|
// const markJsHackMarker_ = '​ ​'
|
|
|
|
|
const markJsHackMarker_ = ' ';
|
|
|
|
|
for (let i = 0; i < elements.length; i++) {
|
|
|
|
|
if (!type) {
|
|
|
|
|
elements[i].innerHTML = elements[i].innerHTML + markJsHackMarker_;
|
|
|
|
|
} else if (type === 'insertBefore') {
|
|
|
|
|
elements[i].insertAdjacentHTML('beforeBegin', markJsHackMarker_);
|
|
|
|
|
}
|
2018-12-14 00:57:14 +02:00
|
|
|
}
|
|
|
|
|
}
|
2019-05-24 18:34:18 +02:00
|
|
|
|
|
|
|
|
prepareElementsForMarkJs(document.getElementsByTagName('p'));
|
|
|
|
|
prepareElementsForMarkJs(document.getElementsByTagName('div'));
|
|
|
|
|
prepareElementsForMarkJs(document.getElementsByTagName('br'), 'insertBefore');
|
|
|
|
|
markJsHackMarkerInserted_ = true;
|
2018-12-14 00:57:14 +02:00
|
|
|
}
|
|
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
let mark_ = null;
|
|
|
|
|
let markSelectedElement_ = null;
|
|
|
|
|
function setMarkers(keywords, options = null) {
|
|
|
|
|
if (!options) options = {};
|
|
|
|
|
|
|
|
|
|
// TODO: Add support for scriptType on mobile and CLI
|
2018-12-14 00:57:14 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
if (!mark_) {
|
2019-11-07 22:32:11 +02:00
|
|
|
mark_ = new Mark(document.getElementById('joplin-container-content'), {
|
2019-05-24 18:34:18 +02:00
|
|
|
exclude: ['img'],
|
|
|
|
|
acrossElements: true,
|
|
|
|
|
});
|
|
|
|
|
}
|
2018-12-09 02:18:10 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
addMarkJsSpaceHack(document);
|
2019-01-14 21:11:54 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
mark_.unmark()
|
2018-03-20 01:04:48 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
if (markSelectedElement_) markSelectedElement_.classList.remove('mark-selected');
|
2018-12-14 00:57:14 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
let selectedElement = null;
|
|
|
|
|
let elementIndex = 0;
|
2018-12-09 02:18:10 +02:00
|
|
|
|
2020-09-06 17:28:23 +02:00
|
|
|
const markKeywordOptions = {};
|
2019-06-26 00:09:53 +02:00
|
|
|
|
|
|
|
|
if ('separateWordSearch' in options) markKeywordOptions.separateWordSearch = options.separateWordSearch;
|
|
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
for (let i = 0; i < keywords.length; i++) {
|
|
|
|
|
let keyword = keywords[i];
|
2018-12-14 00:57:14 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
markJsUtils.markKeyword(mark_, keyword, {
|
|
|
|
|
pregQuote: pregQuote,
|
|
|
|
|
replaceRegexDiacritics: replaceRegexDiacritics,
|
2019-06-26 00:09:53 +02:00
|
|
|
}, markKeywordOptions);
|
2018-12-14 00:57:14 +02:00
|
|
|
}
|
2018-12-09 02:18:10 +02:00
|
|
|
}
|
|
|
|
|
|
2020-04-18 13:45:54 +02:00
|
|
|
let markLoader_ = { state: 'idle', whenDone: null };
|
2019-05-24 18:34:18 +02:00
|
|
|
ipc.setMarkers = (event) => {
|
|
|
|
|
const keywords = event.keywords;
|
|
|
|
|
const options = event.options;
|
2018-12-09 02:18:10 +02:00
|
|
|
|
2020-04-18 13:45:54 +02:00
|
|
|
if (!keywords.length && markLoader_.state === 'idle') return;
|
|
|
|
|
|
|
|
|
|
if (markLoader_.state === 'idle') {
|
|
|
|
|
markLoader_ = {
|
|
|
|
|
state: 'loading',
|
|
|
|
|
whenDone: {keywords:keywords, options:options},
|
|
|
|
|
};
|
2018-03-20 01:04:48 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
const script = document.createElement('script');
|
|
|
|
|
script.onload = function() {
|
2020-04-18 13:45:54 +02:00
|
|
|
markLoader_.state = 'ready';
|
|
|
|
|
setMarkers(markLoader_.whenDone.keywords, markLoader_.whenDone.options);
|
2019-05-24 18:34:18 +02:00
|
|
|
};
|
2018-09-21 19:20:06 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
script.src = '../../node_modules/mark.js/dist/mark.min.js';
|
2019-11-07 22:32:11 +02:00
|
|
|
document.getElementById('joplin-container-markScriptContainer').appendChild(script);
|
2020-04-18 13:45:54 +02:00
|
|
|
} else if (markLoader_.state === 'ready') {
|
2018-12-09 02:18:10 +02:00
|
|
|
setMarkers(keywords, options);
|
2020-04-18 13:45:54 +02:00
|
|
|
} else if (markLoader_.state === 'loading') {
|
|
|
|
|
markLoader_.whenDone = {keywords:keywords, options:options};
|
2019-05-24 18:34:18 +02:00
|
|
|
}
|
|
|
|
|
}
|
2018-03-20 01:04:48 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
function maxScrollTop() {
|
|
|
|
|
return Math.max(0, contentElement.scrollHeight - contentElement.clientHeight);
|
2018-03-20 01:04:48 +02:00
|
|
|
}
|
|
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
// The body element needs to have a fixed height for the content to be scrollable
|
|
|
|
|
function updateBodyHeight() {
|
2019-11-07 22:32:11 +02:00
|
|
|
document.getElementById('joplin-container-body').style.height = window.innerHeight + 'px';
|
|
|
|
|
document.getElementById('joplin-container-content').style.height = window.innerHeight + 'px';
|
2019-05-24 18:34:18 +02:00
|
|
|
}
|
2018-02-04 19:12:24 +02:00
|
|
|
|
2019-09-09 19:16:00 +02:00
|
|
|
function currentPercentScroll() {
|
|
|
|
|
const m = maxScrollTop();
|
|
|
|
|
return m ? contentElement.scrollTop / m : 0;
|
|
|
|
|
}
|
|
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
contentElement.addEventListener('scroll', webviewLib.logEnabledEventHandler(e => {
|
2019-10-28 20:56:38 +02:00
|
|
|
// If the last scroll event was done by the user, lastScrollEventTime is set and
|
|
|
|
|
// we can use that to skip the event handling. We skip it because in that case
|
|
|
|
|
// the scroll position has already been updated. Also we add a 200ms interval
|
|
|
|
|
// because otherwise it's most likely a glitch where we called ipc.setPercentScroll
|
|
|
|
|
// but the scroll event listener has not been called.
|
|
|
|
|
if (lastScrollEventTime && Date.now() - lastScrollEventTime < 200) {
|
|
|
|
|
lastScrollEventTime = 0;
|
2019-05-24 18:34:18 +02:00
|
|
|
return;
|
|
|
|
|
}
|
2019-10-28 20:56:38 +02:00
|
|
|
|
|
|
|
|
lastScrollEventTime = 0;
|
|
|
|
|
|
2019-09-09 19:16:00 +02:00
|
|
|
const percent = currentPercentScroll();
|
2019-05-24 18:34:18 +02:00
|
|
|
setPercentScroll(percent);
|
|
|
|
|
|
|
|
|
|
ipcProxySendToHost('percentScroll', percent);
|
|
|
|
|
}));
|
2018-02-04 20:45:52 +02:00
|
|
|
|
2021-01-12 01:33:10 +02:00
|
|
|
ipc['postMessageService.response'] = function(event) {
|
|
|
|
|
const promise = webviewApiPromises_[event.responseId];
|
|
|
|
|
if (!promise) {
|
|
|
|
|
console.warn('postMessageService.response: could not find callback for message', event);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (event.error) {
|
|
|
|
|
promise.reject(event.error);
|
|
|
|
|
} else {
|
|
|
|
|
promise.resolve(event.response);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-02-23 12:59:08 +02:00
|
|
|
window.addEventListener('hashchange', webviewLib.logEnabledEventHandler(e => {
|
|
|
|
|
if (!window.location.hash) return;
|
|
|
|
|
|
|
|
|
|
// The timeout is necessary to prevent a race condition and give time for the window to scroll
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
// Reset the window hash to allow clicking on the same anchor link more than once
|
|
|
|
|
window.location.hash = '';
|
|
|
|
|
}, 100);
|
|
|
|
|
}));
|
|
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
document.addEventListener('contextmenu', webviewLib.logEnabledEventHandler(event => {
|
|
|
|
|
let element = event.target;
|
2018-09-21 19:20:06 +02:00
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
// To handle right clicks on resource icons
|
|
|
|
|
if (element && !element.getAttribute('data-resource-id')) element = element.parentElement;
|
|
|
|
|
|
|
|
|
|
if (element && element.getAttribute('data-resource-id')) {
|
2018-09-21 19:20:06 +02:00
|
|
|
ipcProxySendToHost('contextMenu', {
|
2019-05-24 18:34:18 +02:00
|
|
|
type: element.getAttribute('src') ? 'image' : 'resource',
|
|
|
|
|
resourceId: element.getAttribute('data-resource-id'),
|
2018-06-26 01:52:46 +02:00
|
|
|
});
|
2019-05-24 18:34:18 +02:00
|
|
|
} else {
|
|
|
|
|
const selectedText = window.getSelection().toString();
|
|
|
|
|
|
|
|
|
|
if (selectedText) {
|
2020-10-22 17:32:13 +02:00
|
|
|
const linkToCopy = event.target && event.target.getAttribute('href') ? event.target.getAttribute('href') : null;
|
|
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
ipcProxySendToHost('contextMenu', {
|
|
|
|
|
type: 'text',
|
|
|
|
|
textToCopy: selectedText,
|
2020-10-22 17:32:13 +02:00
|
|
|
linkToCopy: linkToCopy,
|
2019-05-24 18:34:18 +02:00
|
|
|
});
|
|
|
|
|
} else if (event.target.getAttribute('href')) {
|
|
|
|
|
ipcProxySendToHost('contextMenu', {
|
|
|
|
|
type: 'link',
|
|
|
|
|
textToCopy: event.target.getAttribute('href'),
|
|
|
|
|
});
|
|
|
|
|
}
|
2018-06-26 01:52:46 +02:00
|
|
|
}
|
2019-05-24 18:34:18 +02:00
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
webviewLib.initialize({
|
|
|
|
|
postMessage: ipcProxySendToHost,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Disable drag and drop otherwise it's possible to drop a URL
|
|
|
|
|
// on it and it will open in the view as a website.
|
|
|
|
|
document.addEventListener('drop', webviewLib.logEnabledEventHandler(e => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
}));
|
|
|
|
|
document.addEventListener('dragover', webviewLib.logEnabledEventHandler(e => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
}));
|
|
|
|
|
document.addEventListener('dragover', webviewLib.logEnabledEventHandler(e => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
window.addEventListener('resize', webviewLib.logEnabledEventHandler(() => {
|
|
|
|
|
updateBodyHeight();
|
|
|
|
|
}));
|
2018-02-04 20:45:52 +02:00
|
|
|
|
2020-06-03 19:34:00 +02:00
|
|
|
// Prevent middle-click as that would open the URL in an Electron window
|
|
|
|
|
// https://github.com/laurent22/joplin/issues/3287
|
|
|
|
|
window.addEventListener('auxclick', webviewLib.logEnabledEventHandler((event) => {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
}));
|
|
|
|
|
|
2019-05-24 18:34:18 +02:00
|
|
|
updateBodyHeight();
|
|
|
|
|
} catch (error) {
|
|
|
|
|
ipcProxySendToHost('error:' + JSON.stringify(webviewLib.cloneError(error)));
|
|
|
|
|
throw error;
|
|
|
|
|
}
|
2018-02-04 19:12:24 +02:00
|
|
|
</script>
|
|
|
|
|
</body>
|
2018-11-08 00:37:13 +02:00
|
|
|
</html>
|
