BetterDiscordAddons/Plugins/ImageZoom/ImageZoom.plugin.js

277 lines
11 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

//META{"name":"ImageZoom","authorId":"278543574059057154","invite":"Jx3TjNS","donate":"https://www.paypal.me/MircoWittrien","patreon":"https://www.patreon.com/MircoWittrien","website":"https://github.com/mwittrien/BetterDiscordAddons/tree/master/Plugins/ImageZoom","source":"https://raw.githubusercontent.com/mwittrien/BetterDiscordAddons/master/Plugins/ImageZoom/ImageZoom.plugin.js"}*//
var ImageZoom = (_ => {
var settings = {};
return class ImageZoom {
getName () {return "ImageZoom";}
getVersion () {return "1.1.3";}
getAuthor () {return "DevilBro";}
getDescription () {return "Allows you to zoom in opened Images by holding left clicking on them in the Image Modal.";}
constructor () {
this.changelog = {
"fixed":[["Context Menu Update","Fixes for the context menu update, yaaaaaay"]]
};
this.patchedModules = {
after: {
ImageModal: ["render", "componentDidMount"],
LazyImage: "componentDidMount"
}
};
}
initConstructor () {
this.css = `
${BDFDB.dotCN._imagezoomlense} {
border: 2px solid rgb(114, 137, 218);
}
${BDFDB.dotCN._imagezoomoperations} {
position: absolute;
}
${BDFDB.dotCNS._imagezoomoperations + BDFDB.dotCN.downloadlink} {
position: relative !important;
}
${BDFDB.dotCNS._imagezoomoperations + BDFDB.dotCN.anchor + BDFDB.dotCN.downloadlink} {
margin: 0 !important;
}
`;
this.defaults = {
settings: {
zoomlevel: {value:2, digits:1, minValue: 1, maxValue: 10, unit:"x", label:"ACCESSIBILITY_ZOOM_LEVEL_LABEL"},
lensesize: {value:200, digits:0, minValue: 50, maxValue: 1000, unit:"px", label:"context_lensesize_text"}
}
};
}
// Legacy
load () {}
start () {
if (!window.BDFDB) window.BDFDB = {myPlugins:{}};
if (window.BDFDB && window.BDFDB.myPlugins && typeof window.BDFDB.myPlugins == "object") window.BDFDB.myPlugins[this.getName()] = this;
let libraryScript = document.querySelector("head script#BDFDBLibraryScript");
if (!libraryScript || (performance.now() - libraryScript.getAttribute("date")) > 600000) {
if (libraryScript) libraryScript.remove();
libraryScript = document.createElement("script");
libraryScript.setAttribute("id", "BDFDBLibraryScript");
libraryScript.setAttribute("type", "text/javascript");
libraryScript.setAttribute("src", "https://mwittrien.github.io/BetterDiscordAddons/Plugins/BDFDB.min.js");
libraryScript.setAttribute("date", performance.now());
libraryScript.addEventListener("load", _ => {this.initialize();});
document.head.appendChild(libraryScript);
}
else if (window.BDFDB && typeof BDFDB === "object" && BDFDB.loaded) this.initialize();
this.startTimeout = setTimeout(_ => {
try {return this.initialize();}
catch (err) {console.error(`%c[${this.getName()}]%c`, "color: #3a71c1; font-weight: 700;", "", "Fatal Error: Could not initiate plugin! " + err);}
}, 30000);
}
initialize () {
if (window.BDFDB && typeof BDFDB === "object" && BDFDB.loaded) {
if (this.started) return;
BDFDB.PluginUtils.init(this);
this.forceUpdateAll();
}
else console.error(`%c[${this.getName()}]%c`, "color: #3a71c1; font-weight: 700;", "", "Fatal Error: Could not load BD functions!");
}
stop () {
if (window.BDFDB && typeof BDFDB === "object" && BDFDB.loaded) {
this.stopping = true;
this.forceUpdateAll();
BDFDB.PluginUtils.clear(this);
}
}
// Begin of own functions
processImageModal (e) {
if (e.returnvalue) {
let [children, index] = BDFDB.ReactUtils.findParent(e.returnvalue, {props: [["className", BDFDB.disCN.downloadlink]]});
if (index > -1) {
let openContext = event => {
BDFDB.ContextMenuUtils.open(this, event, BDFDB.ContextMenuUtils.createItem(BDFDB.LibraryComponents.MenuItems.MenuGroup, {
children: Object.keys(settings).map(type => BDFDB.ContextMenuUtils.createItem(BDFDB.LibraryComponents.MenuItems.MenuSliderItem, Object.assign({
id: BDFDB.ContextMenuUtils.createItemId(this.name, type),
value: settings[type],
renderLabel: value => {
return (this.labels[this.defaults.settings[type].label] || BDFDB.LanguageUtils.LanguageStrings[this.defaults.settings[type].label]) + ": " + value + this.defaults.settings[type].unit;
},
onChange: value => {
settings[type] = value;
BDFDB.DataUtils.save(settings, this, "settings");
}
}, BDFDB.ObjectUtils.extract(this.defaults.settings[type], "digits", "minValue", "maxValue"))))
}));
};
children[index] = BDFDB.ReactUtils.createElement("span", {
className: BDFDB.disCN._imagezoomoperations,
children: [
children[index],
BDFDB.ReactUtils.createElement("span", {
className: BDFDB.disCN.downloadlink,
children: "|",
style: {margin: "0 5px"}
}),
BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Anchor, {
className: BDFDB.disCN.downloadlink,
children: `Zoom ${BDFDB.LanguageUtils.LanguageStrings.SETTINGS}`,
onClick: openContext,
onContextMenu: openContext
})
],
});
}
}
if (e.node) BDFDB.DOMUtils.addClass(BDFDB.DOMUtils.getParent(BDFDB.dotCN.modal, e.node), BDFDB.disCN._imagezoomimagemodal);
}
processLazyImage (e) {
if (!BDFDB.DOMUtils.containsClass(e.node.parentElement, BDFDB.disCN._imagegallerysibling) && BDFDB.ReactUtils.findOwner(BDFDB.DOMUtils.getParent(BDFDB.dotCNC.modal + BDFDB.dotCN.layermodal, e.node), {name: "ImageModal"})) {
e.node.addEventListener("mousedown", event => {
BDFDB.ListenerUtils.stopEvent(event);
let imgRects = BDFDB.DOMUtils.getRects(e.node.firstElementChild);
let lense = BDFDB.DOMUtils.create(`<div class="${BDFDB.disCN._imagezoomlense}" style="clip-path: circle(${(settings.lensesize/2) + 2}px at center) !important; border-radius: 50% !important; pointer-events: none !important; z-index: 10000 !important; width: ${settings.lensesize}px !important; height: ${settings.lensesize}px !important; position: fixed !important;"><div style="position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; clip-path: circle(${settings.lensesize/2}px at center) !important;"><${e.node.firstElementChild.tagName} src="${e.instance.props.src}" style="width: ${imgRects.width * settings.zoomlevel}px; height: ${imgRects.height * settings.zoomlevel}px; position: fixed !important;"${e.node.firstElementChild.tagName == "VIDEO" ? " loop autoplay" : ""}></${e.node.firstElementChild.tagName}></div></div>`);
let pane = lense.firstElementChild.firstElementChild;
let backdrop = BDFDB.DOMUtils.create(`<div class="${BDFDB.disCN._imagezoombackdrop}" style="background: rgba(0, 0, 0, 0.3) !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; pointer-events: none !important; z-index: 8000 !important;"></div>`);
let appMount = document.querySelector(BDFDB.dotCN.appmount);
appMount.appendChild(lense);
appMount.appendChild(backdrop);
let lenserects = BDFDB.DOMUtils.getRects(lense), panerects = BDFDB.DOMUtils.getRects(pane);
let halfW = lenserects.width / 2, halfH = lenserects.height / 2;
let minX = imgRects.left, maxX = minX + imgRects.width;
let minY = imgRects.top, maxY = minY + imgRects.height;
lense.style.setProperty("left", event.clientX - halfW + "px", "important");
lense.style.setProperty("top", event.clientY - halfH + "px", "important");
pane.style.setProperty("left", imgRects.left + ((settings.zoomlevel - 1) * (imgRects.left - event.clientX)) + "px", "important");
pane.style.setProperty("top", imgRects.top + ((settings.zoomlevel - 1) * (imgRects.top - event.clientY)) + "px", "important");
let dragging = event2 => {
let x = event2.clientX > maxX ? maxX - halfW : event2.clientX < minX ? minX - halfW : event2.clientX - halfW;
let y = event2.clientY > maxY ? maxY - halfH : event2.clientY < minY ? minY - halfH : event2.clientY - halfH;
lense.style.setProperty("left", x + "px", "important");
lense.style.setProperty("top", y + "px", "important");
pane.style.setProperty("left", imgRects.left + ((settings.zoomlevel - 1) * (imgRects.left - x - halfW)) + "px", "important");
pane.style.setProperty("top", imgRects.top + ((settings.zoomlevel - 1) * (imgRects.top - y - halfH)) + "px", "important");
};
let releasing = _ => {
document.removeEventListener("mousemove", dragging);
document.removeEventListener("mouseup", releasing);
BDFDB.DOMUtils.remove(lense, backdrop);
};
document.addEventListener("mousemove", dragging);
document.addEventListener("mouseup", releasing);
});
}
}
forceUpdateAll () {
settings = BDFDB.DataUtils.get(this, "settings");
BDFDB.ModuleUtils.forceAllUpdates(this);
}
setLabelsByLanguage () {
switch (BDFDB.LanguageUtils.getLanguage().id) {
case "hr": //croatian
return {
context_lensesize_text: "Veličina leće"
};
case "da": //danish
return {
context_lensesize_text: "Linsestørrelse"
};
case "de": //german
return {
context_lensesize_text: "Linsengröße"
};
case "es": //spanish
return {
context_lensesize_text: "Tamaño de la lente"
};
case "fr": //french
return {
context_lensesize_text: "Taille de la lentille"
};
case "it": //italian
return {
context_lensesize_text: "Dimensione dell'obiettivo"
};
case "nl": //dutch
return {
context_lensesize_text: "Lensgrootte"
};
case "no": //norwegian
return {
context_lensesize_text: "Linsestørrelse"
};
case "pl": //polish
return {
context_lensesize_text: "Rozmiar obiektywu"
};
case "pt-BR": //portuguese (brazil)
return {
context_lensesize_text: "Tamanho da lente"
};
case "fi": //finnish
return {
context_lensesize_text: "Linssin koko"
};
case "sv": //swedish
return {
context_lensesize_text: "Linsstorlek"
};
case "tr": //turkish
return {
context_lensesize_text: "Lens boyutu"
};
case "cs": //czech
return {
context_lensesize_text: "Velikost objektivu"
};
case "bg": //bulgarian
return {
context_lensesize_text: "Размер на обектива"
};
case "ru": //russian
return {
context_lensesize_text: "Размер объектива"
};
case "uk": //ukrainian
return {
context_lensesize_text: "Розмір об'єктива"
};
case "ja": //japanese
return {
context_lensesize_text: "Розмір об'єктива"
};
case "zh-TW": //chinese (traditional)
return {
context_lensesize_text: "鏡片尺寸"
};
case "ko": //korean
return {
context_lensesize_text: "렌즈 크기"
};
default: //default: english
return {
context_lensesize_text: "Lense Size"
};
}
}
}
})();