Browse Source

flash current anchor in read mode when jumping into it

Le Tan 8 years ago
parent
commit
d01996288f
2 changed files with 33 additions and 0 deletions
  1. 16 0
      src/resources/markdown_template.html
  2. 17 0
      src/resources/markdown_template.js

+ 16 - 0
src/resources/markdown_template.html

@@ -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>

+ 17 - 0
src/resources/markdown_template.js

@@ -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);