2017-11-07 23:11:14 +02:00
|
|
|
<style>
|
|
|
|
body {
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
#content {
|
2017-11-12 01:13:14 +02:00
|
|
|
overflow-y: auto;
|
2017-11-07 23:11:14 +02:00
|
|
|
height: 100%;
|
2017-11-12 01:13:14 +02:00
|
|
|
padding-left: 10px;
|
|
|
|
padding-right: 10px;
|
2017-11-07 23:11:14 +02:00
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
2017-11-10 20:43:54 +02:00
|
|
|
<div id="hlScriptContainer"></div>
|
2017-11-05 18:51:03 +02:00
|
|
|
<div id="content"></div>
|
|
|
|
|
|
|
|
<script>
|
2017-11-07 23:11:14 +02:00
|
|
|
const { ipcRenderer } = require('electron');
|
|
|
|
const contentElement = document.getElementById('content');
|
|
|
|
|
2017-11-10 01:28:08 +02:00
|
|
|
|
2017-11-10 20:43:54 +02:00
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
// Handle dynamically loading HLJS when a code element is present
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
|
|
|
|
let hljsScriptAdded = false;
|
|
|
|
let hljsLoaded = false;
|
|
|
|
|
|
|
|
function loadHljs(callback) {
|
|
|
|
hljsScriptAdded = true;
|
|
|
|
|
|
|
|
const script = document.createElement('script');
|
|
|
|
script.onload = function () {
|
|
|
|
hljsLoaded = true;
|
|
|
|
applyHljs();
|
|
|
|
};
|
|
|
|
script.src = 'highlight/highlight.pack.js';
|
|
|
|
document.getElementById('hlScriptContainer').appendChild(script);
|
|
|
|
|
|
|
|
const link = document.createElement('link');
|
|
|
|
link.rel = 'stylesheet';
|
|
|
|
// https://ace.c9.io/build/kitchen-sink.html
|
|
|
|
// https://highlightjs.org/static/demo/
|
|
|
|
link.href = 'highlight/styles/atom-one-light.css';
|
|
|
|
document.getElementById('hlScriptContainer').appendChild(link);
|
|
|
|
}
|
|
|
|
|
|
|
|
function loadAndApplyHljs() {
|
2017-11-10 01:28:08 +02:00
|
|
|
var codeElements = document.getElementsByClassName('code');
|
2017-11-10 20:43:54 +02:00
|
|
|
if (!codeElements.length) return;
|
|
|
|
|
|
|
|
if (!hljsScriptAdded) {
|
|
|
|
this.loadHljs();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// If HLJS is not loaded yet, no need to do anything. When it loads
|
|
|
|
// it will automatically apply the style to all the code elements.
|
|
|
|
if (hljsLoaded) applyHljs(codeElements);
|
|
|
|
}
|
|
|
|
|
|
|
|
function applyHljs(codeElements) {
|
|
|
|
if (typeof codeElements === 'undefined') codeElements = document.getElementsByClassName('code');
|
|
|
|
|
2017-11-10 01:28:08 +02:00
|
|
|
for (var i = 0; i < codeElements.length; i++) {
|
|
|
|
hljs.highlightBlock(codeElements[i]);
|
|
|
|
}
|
2017-11-10 20:43:54 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
// / Handle dynamically loading HLJS when a code element is present
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ipcRenderer.on('setHtml', (event, html) => {
|
|
|
|
contentElement.innerHTML = html;
|
|
|
|
|
|
|
|
loadAndApplyHljs();
|
2017-11-10 20:20:14 +02:00
|
|
|
|
|
|
|
// A checkbox list is rendered like this by markdown-it:
|
|
|
|
// <ul>
|
|
|
|
// <li>
|
|
|
|
// <p>
|
|
|
|
// [x] some item
|
|
|
|
// </p>
|
|
|
|
// </li>
|
|
|
|
// ...
|
|
|
|
// </ul>
|
|
|
|
// And we need to remove the padding from "p" and the bullet from "ul"
|
|
|
|
const checkboxes = document.getElementsByClassName('checkbox');
|
|
|
|
for (let i = 0; i < checkboxes.length; i++) {
|
|
|
|
const cb = checkboxes[i];
|
|
|
|
cb.parentElement.style.marginBottom = 0;
|
|
|
|
const ul = cb.parentElement.parentElement.parentElement;
|
|
|
|
if (!ul) {
|
|
|
|
console.warn('Unexpected layout for checkbox');
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
ul.style.listStyleType = 'none';
|
|
|
|
}
|
2017-11-05 18:51:03 +02:00
|
|
|
});
|
2017-11-07 23:11:14 +02:00
|
|
|
|
|
|
|
let ignoreNextScroll = false;
|
|
|
|
ipcRenderer.on('setPercentScroll', (event, percent) => {
|
|
|
|
ignoreNextScroll = true;
|
|
|
|
contentElement.scrollTop = percent * maxScrollTop();
|
|
|
|
});
|
|
|
|
|
2017-11-10 20:20:14 +02:00
|
|
|
// function elementMapCoordinates(element) {
|
|
|
|
// while (true) {
|
|
|
|
// if (!element) break;
|
2017-11-07 23:11:14 +02:00
|
|
|
|
2017-11-10 20:20:14 +02:00
|
|
|
// const m = element.getAttribute('data-map');
|
|
|
|
// if (m) return m.split(':');
|
|
|
|
// element = element.parentElement;
|
|
|
|
// }
|
2017-11-07 23:11:14 +02:00
|
|
|
|
2017-11-10 20:20:14 +02:00
|
|
|
// return null;
|
|
|
|
// }
|
2017-11-07 23:11:14 +02:00
|
|
|
|
|
|
|
function maxScrollTop() {
|
|
|
|
return Math.max(0, contentElement.scrollHeight - contentElement.clientHeight);
|
|
|
|
}
|
|
|
|
|
|
|
|
contentElement.addEventListener('scroll', function(e) {
|
|
|
|
if (ignoreNextScroll) {
|
|
|
|
ignoreNextScroll = false;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const m = maxScrollTop();
|
|
|
|
ipcRenderer.sendToHost('percentScroll', m ? contentElement.scrollTop / m : 0);
|
|
|
|
});
|
2017-11-12 19:53:26 +02:00
|
|
|
|
|
|
|
// 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', function(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
|
|
|
});
|
|
|
|
document.addEventListener('dragover', function(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
|
|
|
});
|
|
|
|
webview.addEventListener('dragover', function(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
});
|
2017-11-05 18:51:03 +02:00
|
|
|
</script>
|