flash current anchor in read mode when jumping into it

This commit is contained in:
Le Tan 2017-08-09 20:45:09 +08:00
parent 7c2f1a8927
commit d01996288f
2 changed files with 33 additions and 0 deletions

View File

@ -5,6 +5,22 @@
<style type="text/css">
<!-- BACKGROUND_PLACE_HOLDER -->
</style>
<style type="text/css">
@keyframes flash {
0% { color: #75C5B5; }
10% { color: #15AE67; }
40% { color: #15AE67; }
50% { color: #75C5B5; }
60% { color: #15AE67; }
90% { color: #15AE67; }
}
.highlighted-anchor {
animation: 1s flash;
}
</style>
<link rel="stylesheet" type="text/css" href="CSS_PLACE_HOLDER">
<link rel="stylesheet" type="text/css" href="qrc:/utils/highlightjs/styles/vnote.css">
<script src="qrc:/resources/qwebchannel.js"></script>

View File

@ -51,6 +51,20 @@ new QWebChannel(qt.webChannelTransport,
}
});
var VHighlightedAnchorClass = 'highlighted-anchor';
var clearHighlightedAnchor = function() {
var headers = document.getElementsByClassName(VHighlightedAnchorClass);
while (headers.length > 0) {
headers[0].classList.remove(VHighlightedAnchorClass);
}
};
var highlightAnchor = function(anchor) {
clearHighlightedAnchor();
anchor.classList.add(VHighlightedAnchorClass);
};
var g_muteScroll = false;
var scrollToAnchor = function(anchor) {
@ -65,6 +79,8 @@ var scrollToAnchor = function(anchor) {
var anc = document.getElementById(anchor);
if (anc != null) {
anc.scrollIntoView();
highlightAnchor(anc);
var headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
for (var i = 0; i < headers.length; ++i) {
if (headers[i] == anc) {
@ -784,6 +800,7 @@ var jumpTitle = function(forward, relativeLevel, repeat) {
// Disable scroll temporarily.
g_muteScroll = true;
headers[targetIdx].scrollIntoView();
highlightAnchor(headers[targetIdx]);
currentHeaderIdx = targetIdx;
content.setHeader(headers[targetIdx].getAttribute("id"));
setTimeout("g_muteScroll = false", 100);