mirror of
https://gitee.com/vnotex/vnote.git
synced 2025-07-05 13:59:52 +08:00
146 lines
4.2 KiB
HTML
146 lines
4.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<meta charset="utf-8">
|
|
<head>
|
|
<style type="text/css">
|
|
<!-- BACKGROUND_PLACE_HOLDER -->
|
|
</style>
|
|
<link rel="stylesheet" type="text/css" href="CSS_PLACE_HOLDER">
|
|
<link rel="stylesheet" type="text/css" href="qrc:/utils/highlightjs/styles/default.css">
|
|
<script src="qrc:/resources/qwebchannel.js"></script>
|
|
<script src="qrc:/utils/highlightjs/highlight.pack.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="placeholder"></div>
|
|
<script>
|
|
'use strict';
|
|
var placeholder = document.getElementById('placeholder');
|
|
var content;
|
|
var keyState = 0;
|
|
|
|
var scrollToAnchor = function(anchor) {
|
|
document.getElementById(anchor).scrollIntoView();
|
|
};
|
|
|
|
var updateHtml = function(html) {
|
|
placeholder.innerHTML = html;
|
|
|
|
var codes = document.getElementsByTagName('code');
|
|
for (var i = 0; i < codes.length; ++i) {
|
|
if (codes[i].parentElement.tagName.toLowerCase() == 'pre') {
|
|
hljs.highlightBlock(codes[i]);
|
|
}
|
|
}
|
|
}
|
|
|
|
new QWebChannel(qt.webChannelTransport,
|
|
function(channel) {
|
|
content = channel.objects.content;
|
|
updateHtml(content.html);
|
|
content.htmlChanged.connect(updateHtml);
|
|
content.requestScrollToAnchor.connect(scrollToAnchor);
|
|
}
|
|
);
|
|
|
|
window.onscroll = function() {
|
|
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
|
|
var eles = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
|
|
|
|
if (eles.length == 0) {
|
|
return;
|
|
}
|
|
var curIdx = 0;
|
|
var biaScrollTop = scrollTop + 50;
|
|
for (var i = 0; i < eles.length; ++i) {
|
|
if (biaScrollTop >= eles[i].offsetTop) {
|
|
curIdx = i;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
var curHeader = eles[curIdx].getAttribute("id");
|
|
if (curHeader != null) {
|
|
content.setHeader(curHeader);
|
|
}
|
|
}
|
|
|
|
document.onkeydown = function(e) {
|
|
e = e || window.event;
|
|
var key;
|
|
var shift;
|
|
var ctrl;
|
|
if (e.which) {
|
|
key = e.which;
|
|
} else {
|
|
key = e.keyCode;
|
|
}
|
|
shift = !!e.shiftKey;
|
|
ctrl = !!e.ctrlKey;
|
|
switch (key) {
|
|
case 74: // J
|
|
window.scrollBy(0, 100);
|
|
keyState = 0;
|
|
break;
|
|
|
|
case 75: // K
|
|
window.scrollBy(0, -100);
|
|
keyState = 0;
|
|
break;
|
|
|
|
case 72: // H
|
|
window.scrollBy(-100, 0);
|
|
keyState = 0;
|
|
break;
|
|
|
|
case 76: // L
|
|
window.scrollBy(100, 0);
|
|
keyState = 0;
|
|
break;
|
|
|
|
case 71: // G
|
|
if (shift) {
|
|
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;
|
|
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
|
|
window.scrollTo(scrollLeft, scrollHeight);
|
|
keyState = 0;
|
|
break;
|
|
} else {
|
|
if (keyState == 0) {
|
|
keyState = 1;
|
|
} else if (keyState == 1) {
|
|
keyState = 0;
|
|
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;
|
|
window.scrollTo(scrollLeft, 0);
|
|
}
|
|
break;
|
|
}
|
|
return;
|
|
|
|
case 85: // U
|
|
keyState = 0;
|
|
if (ctrl) {
|
|
var clientHeight = document.documentElement.clientHeight;
|
|
window.scrollBy(0, -clientHeight);
|
|
break;
|
|
}
|
|
return;
|
|
|
|
case 68: // D
|
|
keyState = 0;
|
|
if (ctrl) {
|
|
var clientHeight = document.documentElement.clientHeight;
|
|
window.scrollBy(0, clientHeight);
|
|
break;
|
|
}
|
|
return;
|
|
|
|
default:
|
|
content.keyPressEvent(key);
|
|
keyState = 0;
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
}
|
|
</script>
|