Change link hover behaviour
authorr <r@freesoftwareextremist.com>
Sun, 26 Jan 2020 08:58:15 +0000 (08:58 +0000)
committerr <r@freesoftwareextremist.com>
Sun, 26 Jan 2020 08:58:15 +0000 (08:58 +0000)
Highlight div if the target status is inside the viewport
and show popup otherwise.

static/fluoride.js
static/main.css

index 3c0d7f2b2d17ff7f462c87b935428ed8ff2e34e0..6be61c07a502eaa9d98882e3119e69f21a8bd75e 100644 (file)
@@ -112,47 +112,71 @@ function handleRetweetForm(id, f) {
        }
 }
 
-function handleReplyToLink(link) {
-       if (!link) {
+function isInView(el) {
+       var ract = el.getBoundingClientRect();
+       if (ract.top > 0 && ract.bottom < window.innerHeight) {
+               return true;
+       }
+       return false;
+}
+
+function handleReplyToLink(div) {
+       if (!div) {
                return;
        }
-       var id = link.firstElementChild.getAttribute('href');
+       var id = div.firstElementChild.getAttribute('href');
        if (!id || id[0] != '#') {
                return;
        }
-       link.onmouseenter = function(event) {
-               var id = event.target.firstElementChild.getAttribute('href');
+       div.firstElementChild.onmouseenter = function(event) {
+               var id = event.target.getAttribute('href');
                var status = document.querySelector(id);
                if (!status) {
                        return;
                }
-               var copy = status.cloneNode(true);
-               copy.id = "reply-to-popup";
-               link.appendChild(copy);
+               if (isInView(status)) {
+                       status.classList.add("highlight");
+               } else {
+                       var copy = status.cloneNode(true);
+                       copy.id = "reply-to-popup";
+                       event.target.parentElement.appendChild(copy);
+               }
        }
-       link.onmouseleave = function(event) {
+       div.firstElementChild.onmouseleave = function(event) {
                var popup = document.getElementById("reply-to-popup");
                if (popup) {
-                       event.target.removeChild(popup);    
+                       event.target.parentElement.removeChild(popup);    
+               } else {
+                       var id = event.target.getAttribute('href');
+                       document.querySelector(id)
+                               .classList.remove("highlight");
                }
        }
 }
 
-function handleReplyLink(link) {
-       link.onmouseenter = function(event) {
-               var id = event.target.firstElementChild.getAttribute('href');
+function handleReplyLink(div) {
+       div.firstElementChild.onmouseenter = function(event) {
+               var id = event.target.getAttribute('href');
                var status = document.querySelector(id);
                if (!status) {
                        return;
                }
-               var copy = status.cloneNode(true);
-               copy.id = "reply-popup";
-               link.appendChild(copy);
+               if (isInView(status)) {
+                       status.classList.add("highlight");
+               } else {
+                       var copy = status.cloneNode(true);
+                       copy.id = "reply-popup";
+                       event.target.parentElement.appendChild(copy);
+               }
        }
-       link.onmouseleave = function(event) {
+       div.firstElementChild.onmouseleave = function(event) {
                var popup = document.getElementById("reply-popup");
                if (popup) {
-                       event.target.removeChild(popup);    
+                       event.target.parentElement.removeChild(popup);    
+               } else {
+                       var id = event.target.getAttribute('href');
+                       document.querySelector(id)
+                               .classList.remove("highlight");
                }
        }
 }
index acbca051901fd0e687bca5ae5a4d82824ee56620..602f2ef857593fe7e4a8c47fa9a5e85401b0ead7 100644 (file)
@@ -1,6 +1,6 @@
 .status-container-container {
-       margin: 16px 0 16px -4px;
-       padding: 4px;
+       margin: 12px 0 12px -4px;
+       padding: 4px;
        border-left: 4px solid transparent;
 }
 
@@ -8,6 +8,10 @@
        border-color: #777777;
 }
 
+.status-container-container.highlight {
+       background-color: #cccccc;
+}
+
 .status-container {
        display: flex;
 }
        background-color: #222222;
        border-color: #444444;
 }
+
+.dark .status-container-container.highlight {
+       background-color: #333333;
+}
+