Change dir

ElectronClient/app/gui/note-viewer/index.html

@@ -0,0 +1,132 @@
+<style>
+body {
+	overflow: hidden;
+}
+
+#content {
+	overflow-y: scroll;
+	height: 100%;
+}
+</style>
+
+<div id="hlScriptContainer"></div>
+<div id="content"></div>
+
+<script>
+const { ipcRenderer } = require('electron');
+const contentElement = document.getElementById('content');
+
+
+// ----------------------------------------------------------------------
+// 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() {
+	var codeElements = document.getElementsByClassName('code');
+	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');
+
+	for (var i = 0; i < codeElements.length; i++) {
+		hljs.highlightBlock(codeElements[i]);
+	}
+}
+
+// ----------------------------------------------------------------------
+// / Handle dynamically loading HLJS when a code element is present
+// ----------------------------------------------------------------------
+
+
+
+ipcRenderer.on('setHtml', (event, html) => {
+	contentElement.innerHTML = html;
+
+	loadAndApplyHljs();
+
+	// 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';
+	}
+});
+
+let ignoreNextScroll = false;
+ipcRenderer.on('setPercentScroll', (event, percent) => {
+	ignoreNextScroll = true;
+	contentElement.scrollTop = percent * maxScrollTop();
+});
+
+// function elementMapCoordinates(element) {
+// 	while (true) {
+// 		if (!element) break;
+
+// 		const m = element.getAttribute('data-map');
+// 		if (m) return m.split(':');
+// 		element = element.parentElement;
+// 	}
+
+// 	return null;
+// }
+
+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);
+});
+</script>