leilukin-tumbleblog/modules/lightbox/javascript.php

204 lines
6.1 KiB
PHP
Raw Permalink Normal View History

2024-06-20 14:10:42 +00:00
<?php
if (!defined('CHYRP_VERSION'))
exit;
?>
var ChyrpLightbox = {
background: "<?php esce($config->module_lightbox["background"]); ?>",
protect: <?php esce($config->module_lightbox["protect"]); ?>,
busy: false,
styles: {
fg: {
"box-sizing": "border-box",
"display": "block",
"width": "100%",
"height": "100%",
"padding": "0px",
"margin": "0px",
"aspect-ratio": "auto",
"object-fit": "contain",
"background-color": "transparent"
},
bg: {
"box-sizing": "border-box",
"display": "block",
"position": "fixed",
"top": "0px",
"right": "0px",
"bottom": "0px",
"left": "0px",
"opacity": 0,
"z-index": 2147483646,
"padding": "3rem",
"cursor": "wait",
"background-repeat": "no-repeat",
"background-size": "1.5rem",
"background-position": "right 0.75rem top 0.75rem",
"background-image": "url('" + Site.chyrp_url + "/modules/lightbox/images/close.svg')"
},
show: {
"opacity": 1,
"cursor": "pointer"
},
images: {
"cursor": "pointer"
},
spacing: {
"padding": Math.abs("<?php esce($config->module_lightbox["spacing"]); ?>") + "px"
},
black: {
"background-color": "#000000",
"background-blend-mode": "difference"
},
grey: {
"background-color": "#7f7f7f",
"background-blend-mode": "luminosity"
},
white: {
"background-color": "#ffffff",
"background-blend-mode": "difference"
},
inherit: {
"background-color": "inherit",
"background-blend-mode": "difference"
},
},
init: function() {
$.extend(
ChyrpLightbox.styles.fg,
ChyrpLightbox.styles.spacing
);
$.extend(
ChyrpLightbox.styles.bg,
ChyrpLightbox.styles[ChyrpLightbox.background]
);
$("section img").not(".suppress_lightbox").each(
function() {
$(this).on(
"click",
ChyrpLightbox.load
).css(
ChyrpLightbox.styles.images
);
if (ChyrpLightbox.protect) {
if (!$(this).hasClass("suppress_protect"))
$(this).on(
"contextmenu",
ChyrpLightbox.prevent
);
}
}
);
$(window).on("popstate", ChyrpLightbox.hide);
ChyrpLightbox.watch();
},
prevent: function(e) {
e.preventDefault();
},
watch: function() {
// Watch for DOM additions on blog pages.
if (!!window.MutationObserver && $(".post").length) {
var target = $(".post").last().parent()[0];
var observer = new MutationObserver(
function(mutations) {
mutations.forEach(
function(mutation) {
for (var i = 0; i < mutation.addedNodes.length; ++i) {
var item = mutation.addedNodes[i];
$(item).find("section img").not(".suppress_lightbox").each(
function() {
$(this).on(
"click",
ChyrpLightbox.load
).css(
ChyrpLightbox.styles.images
);
if (ChyrpLightbox.protect) {
if (!$(this).hasClass("suppress_protect"))
$(this).on(
"contextmenu",
ChyrpLightbox.prevent
);
}
}
);
}
}
);
}
);
var config = {
childList: true,
subtree: true
};
observer.observe(target, config);
}
},
load: function(e) {
if (ChyrpLightbox.busy)
return;
ChyrpLightbox.busy = true;
e.preventDefault();
var src = e.target.currentSrc;
var alt = e.target.alt;
$(
"<div>",
{
"id": "ChyrpLightbox-bg",
"role": "button",
"tabindex": "0",
"accesskey": "x",
"aria-label": '<?php esce(__("Stop displaying this image", "lightbox")); ?>'
}
).css(
ChyrpLightbox.styles.bg
).on(
"click",
ChyrpLightbox.hide
).append(
$(
"<img>",
{
"id": "ChyrpLightbox-fg",
"src": src,
"alt": alt
}
).css(
ChyrpLightbox.styles.fg
).on(
"load",
ChyrpLightbox.show
)
).appendTo("body");
},
show: function() {
var fg = $("#ChyrpLightbox-fg");
var bg = $("#ChyrpLightbox-bg");
if (ChyrpLightbox.protect)
$(fg).on(
"contextmenu",
ChyrpLightbox.prevent
);
bg.css(
ChyrpLightbox.styles.show
);
bg.focus();
},
hide: function() {
$("#ChyrpLightbox-bg").remove();
ChyrpLightbox.busy = false;
}
}
$(document).ready(ChyrpLightbox.init);