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) {
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");
}
}
}

13
static/main.css
View File

@ -1,6 +1,6 @@
.status-container-container {
margin: 16px 0 16px -4px;
padding: 0 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;
}
@ -468,3 +472,8 @@
background-color: #222222;
border-color: #444444;
}
.dark .status-container-container.highlight {
background-color: #333333;
}