mirror of
https://gitea.phreedom.club/localhost_frssoft/bloat.git
synced 2024-11-10 23:19:19 +02:00
Add image preview popup
This commit is contained in:
parent
c7e130e305
commit
bd74cb50e7
|
@ -205,6 +205,64 @@ function handleStatusLink(a) {
|
||||||
a.target = "_blank";
|
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() {
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
checkCSRFToken();
|
checkCSRFToken();
|
||||||
checkAntiDopamineMode();
|
checkAntiDopamineMode();
|
||||||
|
@ -238,6 +296,11 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||||
for (var j = 0; j < links.length; j++) {
|
for (var j = 0; j < links.length; j++) {
|
||||||
links[j].target = "_blank";
|
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
|
// @license-end
|
||||||
|
|
|
@ -560,6 +560,12 @@ kbd {
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#img-preview {
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 2;
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
background-color: #222222;
|
background-color: #222222;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
|
Loading…
Reference in New Issue