aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorr <r@freesoftwareextremist.com>2021-04-09 12:28:03 +0000
committerr <r@freesoftwareextremist.com>2021-04-09 12:28:03 +0000
commitbd74cb50e7e7be61f88687bc2d5f7ac63b45ea70 (patch)
tree547847666cacbaf96ee979338d797d2febd14ded
parentc7e130e305c1071a75ef4bbe01ad39af2343041d (diff)
downloadbloat-bd74cb50e7e7be61f88687bc2d5f7ac63b45ea70.tar.gz
bloat-bd74cb50e7e7be61f88687bc2d5f7ac63b45ea70.zip
Add image preview popup
-rw-r--r--static/fluoride.js63
-rw-r--r--static/style.css6
2 files changed, 69 insertions, 0 deletions
diff --git a/static/fluoride.js b/static/fluoride.js
index 36a374f..f44801b 100644
--- a/static/fluoride.js
+++ b/static/fluoride.js
@@ -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
diff --git a/static/style.css b/static/style.css
index b51b439..50b6fa2 100644
--- a/static/style.css
+++ b/static/style.css
@@ -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;