localhost_frssoft/bloat
1
0
Fork 0
mirror of https://gitea.phreedom.club/localhost_frssoft/bloat.git synced 2024-11-22 23:13:00 +00:00
Code Issues Projects Releases Wiki Activity

Add image preview popup

Browse Source
This commit is contained in:
r 2021-04-09 12:28:03 +00:00
parent c7e130e305
commit bd74cb50e7
2 changed files with 69 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
static/fluoride.js
View File

@ -205,6 +205,64 @@ function handleStatusLink(a) {
a.target = "_blank";
}
function setPos(el, cx, cy, mw, mh) {
var h = el.clientHeight;
var w = el.clientWidth;
var left, top;
if (cx < mw/2) {
if (w + cx + 20 < mw) {
left = cx + 20;
} else {
left = (mw - w);
}
} else {
if (cx - w - 20 > 0) {
left = cx - w - 20;
} else {
left = 0;
}
}
top = (cy - (h/2));
if (top < 0) {
top = 0;
} else if (top + h > mh) {
top = (mh - h);
}
el.style.left = left + "px";
el.style.top = top + "px";
}
var imgPrev = null;
function handleImgPreview(a) {
a.onmouseenter = function(e) {
var mw = document.documentElement.clientWidth;
var mh = document.documentElement.clientHeight - 24;
var img = document.createElement("img");
img.id = "img-preview";
img.src = e.target.getAttribute("href");
img.style["max-width"] = mw + "px";
img.style["max-height"] = mh + "px";
img.onload = function(e2) {
setPos(e2.target, e.clientX, e.clientY, mw, mh);
}
document.body.appendChild(img);
imgPrev = img;
}
a.onmouseleave = function(e) {
var img = document.getElementById("img-preview");
if (img)
document.body.removeChild(img);
imgPrev = null;
}
a.onmousemove = function(e) {
if (!imgPrev)
return;
var mw = document.documentElement.clientWidth;
var mh = document.documentElement.clientHeight - 24;
setPos(imgPrev, e.clientX, e.clientY, mw, mh);
}
}
document.addEventListener("DOMContentLoaded", function() {
checkCSRFToken();
checkAntiDopamineMode();
@ -238,6 +296,11 @@ document.addEventListener("DOMContentLoaded", function() {
for (var j = 0; j < links.length; j++) {
links[j].target = "_blank";
}
var links = document.querySelectorAll(".status-media-container .img-link");
for (var j = 0; j < links.length; j++) {
handleImgPreview(links[j]);
}
});
// @license-end

6
static/style.css
View File

@ -560,6 +560,12 @@ kbd {
padding: 2px 4px;
}
#img-preview {
pointer-events: none;
z-index: 2;
position: fixed;
}
.dark {
background-color: #222222;
background-image: none;