moon
/
bloat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change link hover behaviour 

Highlight div if the target status is inside the viewport
and show popup otherwise.
This commit is contained in:
r 2020-01-26 08:58:15 +00:00
parent ed15e18b69
commit 04934ee643
2 changed files with 53 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
static/fluoride.js
View File

@ -112,47 +112,71 @@ function handleRetweetForm(id, f) {
} }
} }
function handleReplyToLink(link) { function isInView(el) {
if (!link) { var ract = el.getBoundingClientRect();
if (ract.top > 0 && ract.bottom < window.innerHeight) {
return true;
}
return false;
}
function handleReplyToLink(div) {
if (!div) {
return; return;
} }
var id = link.firstElementChild.getAttribute('href'); var id = div.firstElementChild.getAttribute('href');
if (!id || id[0] != '#') { if (!id || id[0] != '#') {
return; return;
} }
link.onmouseenter = function(event) { div.firstElementChild.onmouseenter = function(event) {
var id = event.target.firstElementChild.getAttribute('href'); var id = event.target.getAttribute('href');
var status = document.querySelector(id); var status = document.querySelector(id);
if (!status) { if (!status) {
return; return;
} }
if (isInView(status)) {
status.classList.add("highlight");
} else {
var copy = status.cloneNode(true); var copy = status.cloneNode(true);
copy.id = "reply-to-popup"; copy.id = "reply-to-popup";
link.appendChild(copy); event.target.parentElement.appendChild(copy);
} }
link.onmouseleave = function(event) { }
div.firstElementChild.onmouseleave = function(event) {
var popup = document.getElementById("reply-to-popup"); var popup = document.getElementById("reply-to-popup");
if (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) { function handleReplyLink(div) {
link.onmouseenter = function(event) { div.firstElementChild.onmouseenter = function(event) {
var id = event.target.firstElementChild.getAttribute('href'); var id = event.target.getAttribute('href');
var status = document.querySelector(id); var status = document.querySelector(id);
if (!status) { if (!status) {
return; return;
} }
if (isInView(status)) {
status.classList.add("highlight");
} else {
var copy = status.cloneNode(true); var copy = status.cloneNode(true);
copy.id = "reply-popup"; copy.id = "reply-popup";
link.appendChild(copy); event.target.parentElement.appendChild(copy);
} }
link.onmouseleave = function(event) { }
div.firstElementChild.onmouseleave = function(event) {
var popup = document.getElementById("reply-popup"); var popup = document.getElementById("reply-popup");
if (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");
} }
} }
} }

13
static/main.css
View File

@ -1,6 +1,6 @@
.status-container-container { .status-container-container {
margin: 16px 0 16px -4px; margin: 12px 0 12px -4px;
padding: 0 4px; padding: 4px;
border-left: 4px solid transparent; border-left: 4px solid transparent;
} }
@ -8,6 +8,10 @@
border-color: #777777; border-color: #777777;
} }
.status-container-container.highlight {
background-color: #cccccc;
}
.status-container { .status-container {
display: flex; display: flex;
} }
@ -468,3 +472,8 @@
background-color: #222222; background-color: #222222;
border-color: #444444; border-color: #444444;
} }
.dark .status-container-container.highlight {
background-color: #333333;
}