Przeglądaj źródła

Add highlight to the element specified in the anchor

Visman 2 lat temu
rodzic
commit
4f0c9c639f
2 zmienionych plików z 35 dodań i 1 usunięć
  1. 18 1
      public/js/common.js
  2. 17 0
      public/style/ForkBB/style.css

+ 18 - 1
public/js/common.js

@@ -5,7 +5,9 @@ if (typeof ForkBB === "undefined" || !ForkBB) {
 ForkBB.common = (function (doc, win) {
     'use strict';
 
-    var selectorBack = ".f-go-back";
+    var selectorBack = ".f-go-back",
+        hlClass = "f-highlighted";
+
 
     function initGoBack()
     {
@@ -20,9 +22,24 @@ ForkBB.common = (function (doc, win) {
         }
     }
 
+    function initAnchorHL()
+    {
+        var target,
+            hash = (win.location.hash || "").replace(/^#/, "");
+
+        if (hash && (target = doc.getElementById(hash))) {
+            target.classList.add(hlClass);
+
+            setTimeout(function() {
+                target.classList.remove(hlClass);
+            }, 1500);
+        }
+    }
+
     return {
         init : function () {
             initGoBack();
+            initAnchorHL();
         },
     };
 }(document, window));

+ 17 - 0
public/style/ForkBB/style.css

@@ -2925,3 +2925,20 @@ body,
   color: #ffffff;
   background-color: #4285f4;
 }
+
+/************/
+/* Анимация */
+/************/
+#fork .f-highlighted,
+#fork .f-highlighted .f-post-body {
+  animation: highlightedAnim 0.5s linear 0s 2 normal none;
+}
+
+@keyframes highlightedAnim {
+  0%, 100% {
+    box-shadow: 0 0 0 0 transparent inset;
+  }
+  50% {
+    box-shadow: 0 0 0 0.25rem #AA7939 inset;
+  }
+}