Initial Commit
This commit is contained in:
David Stone
450
assets/js/wubox.js
Normal file
450
assets/js/wubox.js
Normal file
@ -0,0 +1,450 @@
|
||||
(() => {
|
||||
"use strict";
|
||||
const createImageBox = (boxWindow, loaded, url, caption, imageGroup) => {
|
||||
let prevCaption = "", prevURL = "", prevHTML = "", nextCaption = "", nextURL = "", nextHTML = "", imageCount = "", foundURL = false;
|
||||
if (imageGroup) {
|
||||
const tempArray = document.querySelectorAll(`a[rel="${imageGroup}"]`);
|
||||
for (let index = 0; index < tempArray.length && nextHTML === ""; index++) {
|
||||
if (tempArray[index].href !== url) {
|
||||
if (foundURL) {
|
||||
nextCaption = tempArray[index].title;
|
||||
nextURL = tempArray[index].href;
|
||||
nextHTML = "<span id='WUB_next'> <a href='#'>" + wuboxL10n.next + "</a></span>";
|
||||
} else {
|
||||
prevCaption = tempArray[index].title;
|
||||
prevURL = tempArray[index].href;
|
||||
prevHTML = "<span id='WUB_prev'> <a href='#'>" + wuboxL10n.prev + "</a></span>";
|
||||
}
|
||||
} else {
|
||||
foundURL = true;
|
||||
imageCount = wuboxL10n.image + " " + (index + 1) + " " + wuboxL10n.of + " " + tempArray.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
const imgPreloader = new Image();
|
||||
imgPreloader.onload = () => {
|
||||
var _a, _b, _c, _d;
|
||||
imgPreloader.onload = null;
|
||||
const pagesize = getPageSize();
|
||||
const x = pagesize.width - 150;
|
||||
const y = pagesize.height - 150;
|
||||
let imageWidth = imgPreloader.width;
|
||||
let imageHeight = imgPreloader.height;
|
||||
if (imageWidth > x) {
|
||||
imageHeight = imageHeight * (x / imageWidth);
|
||||
imageWidth = x;
|
||||
if (imageHeight > y) {
|
||||
imageWidth = imageWidth * (y / imageHeight);
|
||||
imageHeight = y;
|
||||
}
|
||||
} else if (imageHeight > y) {
|
||||
imageWidth = imageWidth * (y / imageHeight);
|
||||
imageHeight = y;
|
||||
if (imageWidth > x) {
|
||||
imageHeight = imageHeight * (x / imageWidth);
|
||||
imageWidth = x;
|
||||
}
|
||||
}
|
||||
setBoxPosition(boxWindow, imageWidth, imageHeight);
|
||||
boxWindow.insertAdjacentHTML("beforeend", `
|
||||
<a href='' id='WUB_ImageOff'>
|
||||
<span class='screen-reader-text'>${wuboxL10n.close}</span>
|
||||
<img id='WUB_Image' src='${url}' width='${imageWidth}' height='${imageHeight}' alt='${caption}'/>
|
||||
</a>
|
||||
<div id='WUB_caption'>
|
||||
${caption}
|
||||
<div id='WUB_secondLine'>
|
||||
${imageCount + prevHTML + nextHTML}
|
||||
</div>
|
||||
</div>
|
||||
<div id='WUB_closeWindow'>
|
||||
<button type='button' id='WUB_closeWindowButton'>
|
||||
<span class='screen-reader-text'>${wuboxL10n.close}</span>
|
||||
<span class='wutb-close-icon'></span>
|
||||
</button>
|
||||
</div>
|
||||
`);
|
||||
(_a = document.getElementById("WUB_closeWindowButton")) == null ? void 0 : _a.addEventListener("click", removeBox);
|
||||
const goPrev = () => {
|
||||
boxWindow.innerHTML = "";
|
||||
unloadKeydownEvent();
|
||||
showBox(prevCaption, prevURL, imageGroup);
|
||||
};
|
||||
const goNext = () => {
|
||||
boxWindow.innerHTML = "";
|
||||
unloadKeydownEvent();
|
||||
showBox(nextCaption, nextURL, imageGroup);
|
||||
};
|
||||
(_b = document.getElementById("WUB_prev")) == null ? void 0 : _b.addEventListener("click", goPrev);
|
||||
(_c = document.getElementById("WUB_next")) == null ? void 0 : _c.addEventListener("click", goNext);
|
||||
const keydownEvent = (e) => {
|
||||
if (e.key === "Escape") {
|
||||
removeBox();
|
||||
} else if (e.key === "ArrowRight" && nextHTML) {
|
||||
goNext();
|
||||
} else if (e.key === "ArrowLeft" && prevHTML) {
|
||||
goPrev();
|
||||
}
|
||||
};
|
||||
const unloadKeydownEvent = () => {
|
||||
window.removeEventListener("keydown", keydownEvent);
|
||||
document.body.removeEventListener("wubox:unload", unloadKeydownEvent);
|
||||
};
|
||||
window.addEventListener("keydown", keydownEvent);
|
||||
document.body.addEventListener("wubox:unload", unloadKeydownEvent);
|
||||
(_d = document.getElementById("WUB_ImageOff")) == null ? void 0 : _d.addEventListener("click", removeBox);
|
||||
loaded();
|
||||
};
|
||||
imgPreloader.src = url;
|
||||
};
|
||||
const createIframeBox = (boxWindow, boxOverlay, loaded, url, caption, params) => {
|
||||
var _a, _b, _c;
|
||||
const urlNoQuery = url.split("WUB_");
|
||||
(_a = document.getElementById("WUB_load")) == null ? void 0 : _a.remove();
|
||||
if (params.modal) {
|
||||
boxOverlay.removeEventListener("click", removeBox);
|
||||
boxWindow.insertAdjacentHTML("beforeend", `
|
||||
<iframe
|
||||
id='WUB_iframeContent'
|
||||
frameborder='0'
|
||||
hspace='0'
|
||||
allowtransparency='true'
|
||||
src='${urlNoQuery[0]}'
|
||||
name='WUB_iframeContent${Math.round(Math.random() * 1e3)}'
|
||||
style='width:${params.width + 29}px; height:${params.height + 17}px;'>${wuboxL10n.noiframes}
|
||||
</iframe>`);
|
||||
(_b = document.getElementById("WUB_iframeContent")) == null ? void 0 : _b.addEventListener("load", showBoxIframe);
|
||||
} else {
|
||||
boxWindow.insertAdjacentHTML("beforeend", `
|
||||
<div id='WUB_title'>
|
||||
<div id='WUB_ajaxWindowTitle'>${caption}</div>
|
||||
<div id='WUB_closeAjaxWindow'>
|
||||
<button type='button' id='WUB_closeWindowButton'>
|
||||
<span class='screen-reader-text'>${wuboxL10n.close}</span><span class='wutb-close-icon'></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<iframe
|
||||
id='WUB_iframeContent'
|
||||
frameborder='0'
|
||||
hspace='0'
|
||||
allowtransparency='true'
|
||||
src='${urlNoQuery[0]}'
|
||||
name='WUB_iframeContent${Math.round(Math.random() * 1e3)}'
|
||||
style='width:${params.width + 29}px; height:${params.height + 17}px;'
|
||||
>
|
||||
${wuboxL10n.noiframes}
|
||||
</iframe>`);
|
||||
(_c = document.getElementById("WUB_iframeContent")) == null ? void 0 : _c.addEventListener("load", showBoxIframe);
|
||||
}
|
||||
setBoxPosition(boxWindow, params.width, params.height);
|
||||
loaded();
|
||||
};
|
||||
const baseAjaxElement = (boxWindow, boxOverlay, caption, params) => {
|
||||
if (boxWindow.style.visibility !== "visible") {
|
||||
if (params.modal) {
|
||||
boxOverlay.removeEventListener("click", removeBox);
|
||||
boxWindow.insertAdjacentHTML("beforeend", `<div id='WUB_ajaxContent' class='WUB_modal' style='width:${params.width}px; height:${params.height}px;'></div>`);
|
||||
} else {
|
||||
boxWindow.insertAdjacentHTML("beforeend", `
|
||||
<div id='WUB_title'>
|
||||
<div id='WUB_ajaxWindowTitle'>${caption}</div>
|
||||
<div id='WUB_closeAjaxWindow'>
|
||||
<button type='button' id='WUB_closeWindowButton'>
|
||||
<span class='screen-reader-text'>${wuboxL10n.close}</span>
|
||||
<span class='wutb-close-icon'></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id='WUB_ajaxContent' style='width:${params.width}px; height:${params.height}px;'></div>`);
|
||||
}
|
||||
} else {
|
||||
const ajaxContent = document.getElementById("WUB_ajaxContent");
|
||||
ajaxContent.style.width = params.width + "px";
|
||||
ajaxContent.style.height = params.height + "px";
|
||||
ajaxContent.scrollTop = 0;
|
||||
ajaxContent.innerHTML = caption;
|
||||
}
|
||||
return document.getElementById("WUB_ajaxContent");
|
||||
};
|
||||
const createAjaxBox = (boxWindow, boxOverlay, loaded, url, caption, params) => {
|
||||
const ajaxContent = baseAjaxElement(boxWindow, boxOverlay, caption, params);
|
||||
const load_url = url + (url.includes("?") ? "&" : "?") + "random=" + (/* @__PURE__ */ new Date()).getTime();
|
||||
fetch(load_url, {
|
||||
headers: {
|
||||
"X-Requested-With": "XMLHttpRequest"
|
||||
}
|
||||
}).then((response) => response.text()).then((html) => {
|
||||
ajaxContent.innerHTML = html;
|
||||
setBoxPosition(boxWindow, params.width, params.height);
|
||||
loaded();
|
||||
});
|
||||
};
|
||||
const createInlineBox = (boxWindow, boxOverlay, loaded, caption, params) => {
|
||||
const ajaxContent = baseAjaxElement(boxWindow, boxOverlay, caption, params);
|
||||
const element = document.getElementById(params.inlineId);
|
||||
ajaxContent.insertAdjacentElement("beforeend", element == null ? void 0 : element.children[0]);
|
||||
const unloadAction = () => {
|
||||
element == null ? void 0 : element.insertAdjacentElement("afterbegin", ajaxContent.children[0]);
|
||||
document.body.removeEventListener("wubox:unload", unloadAction);
|
||||
};
|
||||
document.body.addEventListener("wubox:unload", unloadAction);
|
||||
setBoxPosition(boxWindow, params.width, params.height);
|
||||
loaded();
|
||||
};
|
||||
const formSubmit = (form) => async (event) => {
|
||||
event.preventDefault();
|
||||
const textArea = form.querySelector("textarea[data-editor]");
|
||||
const textAreaInput = textArea ? form.querySelector('input[name="' + textArea.id + '"]') : null;
|
||||
if (textArea && textAreaInput) {
|
||||
textAreaInput.value = textArea.value;
|
||||
}
|
||||
const blocked_form = wu_block_ui(form);
|
||||
if (window["wu_" + form.getAttribute("id") + "_errors"]) {
|
||||
window["wu_" + form.getAttribute("id") + "_errors"].errors = [];
|
||||
}
|
||||
const submitButton = event.submitter.value;
|
||||
const formData = new FormData(form);
|
||||
formData.append("submit", submitButton);
|
||||
const response = await fetch(form.getAttribute("action"), {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
headers: {
|
||||
"X-Requested-With": "XMLHttpRequest"
|
||||
}
|
||||
}).then((response2) => response2.text()).then((txt) => txt ? JSON.parse(txt) : null);
|
||||
if (response === null || response.data === null) {
|
||||
blocked_form.unblock();
|
||||
removeBox();
|
||||
return;
|
||||
}
|
||||
if (!response.success) {
|
||||
blocked_form.unblock();
|
||||
const formId = form.getAttribute("id");
|
||||
if (window["wu_" + formId + "_errors"]) {
|
||||
window["wu_" + formId + "_errors"].errors = response.data;
|
||||
}
|
||||
const formApp = document.querySelector('[data-wu-app="' + formId + '_errors"]');
|
||||
formApp == null ? void 0 : formApp.setAttribute("tabindex", "-1");
|
||||
formApp == null ? void 0 : formApp.focus();
|
||||
}
|
||||
if (typeof response.data.tables === "object") {
|
||||
blocked_form.unblock();
|
||||
removeBox();
|
||||
Object.keys(response.data.tables).forEach((key) => {
|
||||
window[key].update();
|
||||
});
|
||||
}
|
||||
if (typeof response.data.redirect_url === "string") {
|
||||
window.location.href = response.data.redirect_url;
|
||||
}
|
||||
if (typeof response.data.send === "object") {
|
||||
window[response.data.send.scope][response.data.send.function_name](response.data.send.data, removeBox);
|
||||
}
|
||||
};
|
||||
function getPageSize() {
|
||||
const de = document.documentElement;
|
||||
const width = window.innerWidth || self.innerWidth || de && de.clientWidth || document.body.clientWidth;
|
||||
const height = window.innerHeight || self.innerHeight || de && de.clientHeight || document.body.clientHeight;
|
||||
return { width, height };
|
||||
}
|
||||
function setBoxPosition(boxWindow, width, height) {
|
||||
boxWindow.style.marginLeft = "-" + width / 2 + "px";
|
||||
boxWindow.style.marginTop = "-" + height / 2 + "px";
|
||||
}
|
||||
function fadeOutEffect(element, duration, callback) {
|
||||
const startOpacity = parseFloat(getComputedStyle(element).opacity);
|
||||
let startTime = null;
|
||||
function step(timestamp) {
|
||||
if (!startTime)
|
||||
startTime = timestamp;
|
||||
const progress = timestamp - startTime;
|
||||
const opacity = Math.max(startOpacity - progress / duration, 0);
|
||||
element.style.opacity = opacity.toString();
|
||||
if (progress < duration) {
|
||||
requestAnimationFrame(step);
|
||||
} else {
|
||||
element.style.display = "none";
|
||||
if (callback)
|
||||
callback();
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(step);
|
||||
}
|
||||
function showBoxIframe() {
|
||||
var _a;
|
||||
(_a = document.getElementById("WUB_load")) == null ? void 0 : _a.remove();
|
||||
const boxWindow = document.getElementById("WUB_window");
|
||||
boxWindow.style.visibility = "visible";
|
||||
document.body.dispatchEvent(new Event("wubox:iframe:loaded"));
|
||||
}
|
||||
function showBox(caption, url, imageGroup) {
|
||||
var _a;
|
||||
const boxOverlay = document.getElementById("WUB_overlay") || document.createElement("div");
|
||||
boxOverlay.id = "WUB_overlay";
|
||||
const boxWindow = document.getElementById("WUB_window") || document.createElement("div");
|
||||
boxWindow.id = "WUB_window";
|
||||
document.body.insertAdjacentElement("beforeend", boxOverlay);
|
||||
document.body.insertAdjacentElement("beforeend", boxWindow);
|
||||
boxOverlay.addEventListener("click", removeBox);
|
||||
document.body.classList.add("modal-open");
|
||||
const loader = document.createElement("div");
|
||||
loader.id = "WUB_load";
|
||||
loader.style.display = "block";
|
||||
const loaded = () => {
|
||||
boxWindow.style.visibility = "visible";
|
||||
document.body.dispatchEvent(new Event("wubox:load"));
|
||||
loader.remove();
|
||||
refreshBox();
|
||||
};
|
||||
document.body.insertAdjacentElement("beforeend", loader);
|
||||
const baseURL = url.split("?")[0];
|
||||
const urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;
|
||||
const isImage = !!baseURL.toLowerCase().match(urlString);
|
||||
if (isImage) {
|
||||
createImageBox(boxWindow, loaded, url, caption, imageGroup);
|
||||
} else {
|
||||
const queryString = url.replace(/^[^\?]+\??/, "");
|
||||
const searchParams = new URLSearchParams(queryString);
|
||||
const params = {
|
||||
width: parseInt(searchParams.get("width") || "") || 630,
|
||||
height: parseInt(searchParams.get("height") || "") || 440,
|
||||
modal: !!searchParams.get("modal") || false,
|
||||
inlineId: searchParams.get("inlineId") || ""
|
||||
};
|
||||
if (url.includes("WUB_iframe")) {
|
||||
createIframeBox(boxWindow, boxOverlay, loaded, url, caption, params);
|
||||
} else if (url.includes("WUB_inline")) {
|
||||
createInlineBox(boxWindow, boxOverlay, loaded, caption, params);
|
||||
} else {
|
||||
createAjaxBox(boxWindow, boxOverlay, loaded, url, caption, params);
|
||||
}
|
||||
(_a = document.getElementById("WUB_closeWindowButton")) == null ? void 0 : _a.addEventListener("click", removeBox);
|
||||
}
|
||||
const closeBoxWindowButton = document.getElementById("WUB_closeWindowButton");
|
||||
const closeIcon = closeBoxWindowButton == null ? void 0 : closeBoxWindowButton.querySelector(".wutb-close-icon");
|
||||
if (closeIcon && !!(closeIcon.offsetWidth || closeIcon.offsetHeight || closeIcon.getClientRects().length)) {
|
||||
closeBoxWindowButton.focus();
|
||||
}
|
||||
}
|
||||
function initForm(form) {
|
||||
form.addEventListener("submit", formSubmit(form));
|
||||
}
|
||||
const setBodyListeners = (domChunk) => {
|
||||
document.body.addEventListener("wubox:iframe:loaded", () => {
|
||||
var _a;
|
||||
(_a = document.getElementById("WUB_window")) == null ? void 0 : _a.classList.remove("wubox-loading");
|
||||
});
|
||||
document.body.addEventListener("wubox:load", () => {
|
||||
const form = document.querySelector("#WUB_ajaxContent .wu_form");
|
||||
if (!form) {
|
||||
return;
|
||||
}
|
||||
initForm(form);
|
||||
wu_initialize_editors();
|
||||
});
|
||||
};
|
||||
const onClickEvent = (event) => {
|
||||
event.preventDefault();
|
||||
const target = event.currentTarget;
|
||||
const caption = target.title || target.name || "", url = target.href || target.alt, imageGroup = target.rel || false;
|
||||
showBox(caption, url, imageGroup);
|
||||
target.blur();
|
||||
};
|
||||
const initBox = (domChunk, addGlobalListeners = false, addMutationObserver = false) => {
|
||||
document.querySelectorAll(domChunk).forEach((el) => {
|
||||
el.removeEventListener("click", onClickEvent);
|
||||
el.addEventListener("click", onClickEvent);
|
||||
});
|
||||
if (addGlobalListeners) {
|
||||
setBodyListeners();
|
||||
}
|
||||
if (addMutationObserver) {
|
||||
const observerOptions = {
|
||||
childList: true,
|
||||
subtree: true
|
||||
};
|
||||
const observer = new MutationObserver(() => {
|
||||
initBox(domChunk, false, false);
|
||||
});
|
||||
observer.observe(document.body, observerOptions);
|
||||
}
|
||||
};
|
||||
const removeBox = () => {
|
||||
var _a, _b, _c;
|
||||
(_a = document.getElementById("WUB_ImageOff")) == null ? void 0 : _a.removeEventListener("click", removeBox);
|
||||
(_b = document.getElementById("WUB_closeWindowButton")) == null ? void 0 : _b.removeEventListener("click", removeBox);
|
||||
document.body.classList.remove("modal-open");
|
||||
(_c = document.getElementById("WUB_load")) == null ? void 0 : _c.remove();
|
||||
fadeOutEffect(document.getElementById("WUB_window"), 200);
|
||||
fadeOutEffect(document.getElementById("WUB_overlay"), 150, () => {
|
||||
document.body.dispatchEvent(new Event("wubox:unload"));
|
||||
document.querySelectorAll("#WUB_window, #WUB_overlay, #WUB_HideSelect").forEach((el) => el.remove());
|
||||
document.body.dispatchEvent(new Event("wubox:removed"));
|
||||
});
|
||||
};
|
||||
const refreshBox = () => {
|
||||
const form = document.querySelector("#WUB_ajaxContent .wu_form");
|
||||
if (!form) {
|
||||
return;
|
||||
}
|
||||
wu_initialize_editors();
|
||||
const content = document.getElementById("WUB_ajaxContent");
|
||||
const boxWindow = document.getElementById("WUB_window");
|
||||
content.style.height = "100vh";
|
||||
const max_height = window.innerHeight - 120;
|
||||
const height = form.offsetHeight >= max_height ? max_height : form.offsetHeight + 1;
|
||||
boxWindow.style.transition = "margin 200ms";
|
||||
content.style.height = height + "px";
|
||||
boxWindow.style.marginTop = "-" + height / 2 + "px";
|
||||
};
|
||||
const setBoxWidth = (width) => {
|
||||
const content = document.getElementById("WUB_ajaxContent");
|
||||
const boxWindow = document.getElementById("WUB_window");
|
||||
if (!content) {
|
||||
return;
|
||||
}
|
||||
content.style.transition = "width 150ms";
|
||||
boxWindow.style.transition = "margin 150ms";
|
||||
content.style.width = width + "px";
|
||||
boxWindow.style.marginLeft = "-" + width / 2 + "px";
|
||||
boxWindow.style.width = width + "px";
|
||||
setTimeout(() => {
|
||||
refreshBox();
|
||||
}, 150);
|
||||
};
|
||||
window.wubox = {
|
||||
/**
|
||||
* Initializes the box.
|
||||
*
|
||||
* @param domChunk The DOM chunk to be used as the box content.
|
||||
* @param addGlobalListeners Whether or not to add global listeners.
|
||||
*/
|
||||
init: initBox,
|
||||
/**
|
||||
* Progarmmatically shows the box.
|
||||
*
|
||||
* @param caption The title of the box.
|
||||
* @param url The URL to be loaded in the box.
|
||||
* @param imageGroup The image group to be used in the box.
|
||||
*/
|
||||
show: showBox,
|
||||
/**
|
||||
* Removes the current opened box.
|
||||
*
|
||||
*/
|
||||
remove: removeBox,
|
||||
/**
|
||||
* Refreshes the current opened box.
|
||||
*/
|
||||
refresh: refreshBox,
|
||||
/**
|
||||
* set the box width.
|
||||
* @param width
|
||||
*/
|
||||
width: setBoxWidth
|
||||
};
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
window.wubox.init(".wubox", true, true);
|
||||
});
|
||||
})()
|
||||
Reference in New Issue
Block a user