localhost_frssoft/ bloat
1
0
Fork 0
mirror of https://gitea.phreedom.club/localhost_frssoft/bloat.git synced 2024-11-05 04:29:21 +02:00
Code Issues 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

60
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;
} }
var copy = status.cloneNode(true); if (isInView(status)) {
copy.id = "reply-to-popup"; status.classList.add("highlight");
link.appendChild(copy); } 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"); 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;
} }
var copy = status.cloneNode(true); if (isInView(status)) {
copy.id = "reply-popup"; status.classList.add("highlight");
link.appendChild(copy); } 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"); 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;
}