Update ImageZoom.plugin.js
This commit is contained in:
Mirco Wittrien
parent
ee70605192
commit
b43c3b36d9
|
|
@ -3,7 +3,7 @@
|
|||
class ImageZoom {
|
||||
getName () {return "ImageZoom";}
|
||||
|
||||
getVersion () {return "1.0.6";}
|
||||
getVersion () {return "1.0.7";}
|
||||
|
||||
getAuthor () {return "DevilBro";}
|
||||
|
||||
|
|
@ -11,32 +11,33 @@ class ImageZoom {
|
|||
|
||||
constructor () {
|
||||
this.changelog = {
|
||||
"fixed":[["Inside Image","Fixed the bug where the zoom settings appeared inside the image"]]
|
||||
"improved":[["New Library Structure & React","Restructured my Library and switched to React rendering instead of DOM manipulation"]]
|
||||
};
|
||||
|
||||
this.patchedModules = {
|
||||
after: {
|
||||
ImageModal: ["componentDidMount","componentWillUnmount"]
|
||||
ImageModal: ["render", "componentDidMount"],
|
||||
LazyImage: "componentDidMount"
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
initConstructor () {
|
||||
this.css = `
|
||||
.image-modal {
|
||||
.image-modal ${BDFDB.dotCN.modalinner} {
|
||||
display: grid;
|
||||
}
|
||||
.image-modal > ${BDFDB.dotCN.imagewrapper} {
|
||||
.image-modal ${BDFDB.dotCN.modalinner} > ${BDFDB.dotCN.imagewrapper} {
|
||||
grid-column: span 20;
|
||||
grid-row: 1;
|
||||
}
|
||||
.image-modal > *:not(img) {
|
||||
.image-modal ${BDFDB.dotCNS.modalinner} > :not(img) {
|
||||
grid-row: 2;
|
||||
}
|
||||
.imagezoom-lense {
|
||||
.image-modal .imagezoom-lense {
|
||||
border: 2px solid rgb(114, 137, 218);
|
||||
}
|
||||
.imagezoom-backdrop {
|
||||
.image-modal .imagezoom-backdrop {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
|
|
@ -47,8 +48,8 @@ class ImageZoom {
|
|||
|
||||
this.defaults = {
|
||||
settings: {
|
||||
zoomlevel: {value:2, digits:1, min:1, max:10, unit:"x", name:"Zoom Level"},
|
||||
lensesize: {value:200, digits:0, min:50, max:1000, unit:"px", name:"Lense Size"}
|
||||
zoomlevel: {value:2, digits:1, edges:[1, 10], unit:"x", label:"ACCESSIBILITY_ZOOM_LEVEL_LABEL"},
|
||||
lensesize: {value:200, digits:0, edges:[50, 1000], unit:"px", label:"context_lensesize_text"}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -91,13 +92,7 @@ class ImageZoom {
|
|||
if (global.BDFDB && typeof BDFDB === "object" && BDFDB.loaded) {
|
||||
this.stopping = true;
|
||||
|
||||
for (let img of document.querySelectorAll(BDFDB.dotCNS.imagewrapper + "img")) if (img.ImageZoomMouseDownListener) {
|
||||
img.removeEventListener("mousedown", img.ImageZoomMouseDownListener);
|
||||
delete img.ImageZoomMouseDownListener;
|
||||
img.removeAttribute("draggable");
|
||||
}
|
||||
|
||||
BDFDB.DOMUtils.remove(".imagezoom-contextmenu", ".imagezoom-separator", ".imagezoom-settings", ".imagezoom-lense", ".imagezoom-backdrop");
|
||||
BDFDB.ModuleUtils.forceAllUpdates(this);
|
||||
|
||||
BDFDB.PluginUtils.clear(this);
|
||||
}
|
||||
|
|
@ -106,99 +101,177 @@ class ImageZoom {
|
|||
|
||||
// begin of own functions
|
||||
|
||||
processImageModal (instance, wrapper, returnvalue, methodnames) {
|
||||
if (methodnames.includes("componentDidMount")) {
|
||||
let modal = BDFDB.DOMUtils.getParent(BDFDB.dotCN.modal, wrapper);
|
||||
if (!modal) return;
|
||||
let inner = modal.querySelector(BDFDB.dotCN.modalinner);
|
||||
if (!inner) return;
|
||||
let start = performance.now();
|
||||
let waitForImg = BDFDB.TimeUtils.interval(() => {
|
||||
let img = modal.querySelector(BDFDB.dotCNS.imagewrapper + "img," + BDFDB.dotCNS.imagewrapper + "video");
|
||||
if (img && img.src && !BDFDB.DOMUtils.containsClass(img, BDFDB.disCN.imageplaceholder)) {
|
||||
BDFDB.TimeUtils.clear(waitForImg);
|
||||
let parent = inner.querySelector(BDFDB.dotCN.downloadlink).parentElement
|
||||
img.setAttribute("draggable", "false");
|
||||
BDFDB.DOMUtils.addClass(inner, "image-modal");
|
||||
parent.appendChild(BDFDB.DOMUtils.create(`<span class="${BDFDB.disCN.downloadlink} imagezoom-separator" style="margin: 0px 5px;"> | </div>`));
|
||||
let settingslink = BDFDB.DOMUtils.create(`<span class="${BDFDB.disCN.downloadlink} imagezoom-settings">Zoom ${BDFDB.LanguageUtils.LanguageStrings.SETTINGS}</div>`);
|
||||
parent.appendChild(settingslink);
|
||||
let openContext = e => {
|
||||
let settings = BDFDB.DataUtils.get(this, "settings");
|
||||
let items = [];
|
||||
for (let type in settings) items.push(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.ContextMenuSliderItem, {
|
||||
label: this.defaults.settings[type].name + ": " + settings[type] + this.defaults.settings[type].unit,
|
||||
type: type,
|
||||
defaultValue: BDFDB.NumberUtils.mapRange([this.defaults.settings[type].min, this.defaults.settings[type].max], [0, 100], settings[type]),
|
||||
onValueChange: value => {
|
||||
BDFDB.DataUtils.save(Math.round(BDFDB.NumberUtils.mapRange([0, 100], [this.defaults.settings[type].min, this.defaults.settings[type].max], value)), this, "settings", type);
|
||||
},
|
||||
onValueRender: value => {
|
||||
BDFDB.TimeUtils.timeout(() => {for (let slider of document.querySelectorAll(BDFDB.dotCN.contextmenuitemslider)) if (BDFDB.ReactUtils.getValue(slider, "return.memoizedProps.type") == type) {
|
||||
value = Math.round(BDFDB.NumberUtils.mapRange([0, 100], [this.defaults.settings[type].min, this.defaults.settings[type].max], value));
|
||||
let label = slider.querySelector(BDFDB.dotCN.contextmenulabel);
|
||||
if (label) label.innerText = this.defaults.settings[type].name + ": " + value + this.defaults.settings[type].unit;
|
||||
let bubble = slider.querySelector(BDFDB.dotCN.sliderbubble);
|
||||
if (bubble) bubble.innerText = value + this.defaults.settings[type].unit;
|
||||
break;
|
||||
}});
|
||||
}
|
||||
}));
|
||||
const itemGroup = BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.ContextMenuItemGroup, {
|
||||
children: items
|
||||
});
|
||||
BDFDB.ContextMenuUtils.open(this, e, itemGroup);
|
||||
};
|
||||
settingslink.addEventListener("click", openContext);
|
||||
settingslink.addEventListener("contextmenu", openContext);
|
||||
img.ImageZoomMouseDownListener = e => {
|
||||
BDFDB.ListenerUtils.stopEvent(e);
|
||||
BDFDB.DOMUtils.appendLocalStyle("ImageZoomCrossHair", "* {cursor: crosshair !important;}");
|
||||
|
||||
let imgrects = BDFDB.DOMUtils.getRects(img);
|
||||
let settings = BDFDB.DataUtils.get(this, "settings");
|
||||
|
||||
let lense = BDFDB.DOMUtils.create(`<div class="imagezoom-lense" 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 class="imagezoom-lense-inner" 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;"><${img.tagName} class="imagezoom-pane" src="${img.src}" style="width: ${imgrects.width * settings.zoomlevel}px; height: ${imgrects.height * settings.zoomlevel}px; position: fixed !important;"${img.tagName == "VIDEO" ? " loop autoplay" : ""}></${img.tagName}></div></div>`);
|
||||
let pane = lense.querySelector(".imagezoom-pane");
|
||||
let backdrop = BDFDB.DOMUtils.create(`<div class="imagezoom-backdrop" style="background: rgba(0,0,0,0.2) !important;"></div>`);
|
||||
document.querySelector(BDFDB.dotCN.appmount).appendChild(lense);
|
||||
document.querySelector(BDFDB.dotCN.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", e.clientX - halfW + "px", "important");
|
||||
lense.style.setProperty("top", e.clientY - halfH + "px", "important");
|
||||
pane.style.setProperty("left", imgrects.left + ((settings.zoomlevel - 1) * (imgrects.left - e.clientX)) + "px", "important");
|
||||
pane.style.setProperty("top", imgrects.top + ((settings.zoomlevel - 1) * (imgrects.top - e.clientY)) + "px", "important");
|
||||
|
||||
let dragging = e2 => {
|
||||
let x = e2.clientX > maxX ? maxX - halfW : e2.clientX < minX ? minX - halfW : e2.clientX - halfW;
|
||||
let y = e2.clientY > maxY ? maxY - halfH : e2.clientY < minY ? minY - halfH : e2.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 = e2 => {
|
||||
BDFDB.DOMUtils.removeLocalStyle('ImageZoomCrossHair');
|
||||
document.removeEventListener("mousemove", dragging);
|
||||
document.removeEventListener("mouseup", releasing);
|
||||
BDFDB.DOMUtils.remove(lense, backdrop);
|
||||
};
|
||||
document.addEventListener("mousemove", dragging);
|
||||
document.addEventListener("mouseup", releasing);
|
||||
};
|
||||
img.addEventListener("mousedown", img.ImageZoomMouseDownListener);
|
||||
}
|
||||
else if (performance.now() - start > 10000) {
|
||||
BDFDB.TimeUtils.clear(waitForImg);
|
||||
}
|
||||
}, 100);
|
||||
processImageModal (e) {
|
||||
if (e.returnvalue) {
|
||||
let [children, index] = BDFDB.ReactUtils.findChildren(e.returnvalue, {props: [["className", BDFDB.disCN.downloadlink]]});
|
||||
if (index > -1) {
|
||||
let openContext = event => {
|
||||
let settings = BDFDB.DataUtils.get(this, "settings"), items = [];
|
||||
for (let type in settings) items.push(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.ContextMenuSliderItem, {
|
||||
defaultValue: settings[type],
|
||||
digits: this.defaults.settings[type].digits,
|
||||
edges: this.defaults.settings[type].edges,
|
||||
renderLabel: value => {
|
||||
return (this.labels[this.defaults.settings[type].label] || BDFDB.LanguageUtils.LanguageStrings[this.defaults.settings[type].label]) + ": " + value + this.defaults.settings[type].unit;
|
||||
},
|
||||
onValueRender: value => {
|
||||
return value + this.defaults.settings[type].unit;
|
||||
},
|
||||
onValueChange: value => {
|
||||
BDFDB.DataUtils.save(value, this, "settings", type);
|
||||
}
|
||||
}));
|
||||
BDFDB.ContextMenuUtils.open(this, event, BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.ContextMenuItemGroup, {
|
||||
children: items
|
||||
}));
|
||||
};
|
||||
children.push(BDFDB.ReactUtils.createElement("span", {
|
||||
className: BDFDB.disCN.downloadlink,
|
||||
children: "|",
|
||||
style: {margin: "0 5px"}
|
||||
}));
|
||||
children.push(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Anchor, {
|
||||
className: BDFDB.disCN.downloadlink,
|
||||
children: `Zoom ${BDFDB.LanguageUtils.LanguageStrings.SETTINGS}`,
|
||||
onClick: openContext,
|
||||
onContextMenu: openContext
|
||||
}));
|
||||
}
|
||||
}
|
||||
else if (methodnames.includes("componentWillUnmount")) {
|
||||
BDFDB.DOMUtils.remove(".imagezoom-contextmenu", ".imagezoom-separator", ".imagezoom-settings", ".imagezoom-lense", ".imagezoom-backdrop");
|
||||
if (e.node) BDFDB.DOMUtils.addClass(BDFDB.DOMUtils.getParent(BDFDB.dotCN.modal, e.node), "image-modal");
|
||||
}
|
||||
|
||||
processLazyImage (e) {
|
||||
if (BDFDB.ReactUtils.findOwner(BDFDB.DOMUtils.getParent(BDFDB.dotCN.modal, e.node), {name: "ImageModal"})) {
|
||||
e.node.addEventListener("mousedown", event => {
|
||||
BDFDB.ListenerUtils.stopEvent(event);
|
||||
BDFDB.DOMUtils.appendLocalStyle("ImageZoomCrossHair", "* {cursor: crosshair !important;}");
|
||||
|
||||
let imgrects = BDFDB.DOMUtils.getRects(e.node.firstElementChild);
|
||||
let settings = BDFDB.DataUtils.get(this, "settings");
|
||||
|
||||
let lense = BDFDB.DOMUtils.create(`<div class="imagezoom-lense" 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 class="imagezoom-lense-inner" 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} class="imagezoom-pane" 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.querySelector(".imagezoom-pane");
|
||||
let backdrop = BDFDB.DOMUtils.create(`<div class="imagezoom-backdrop" style="background: rgba(0,0,0,0.2) !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 = _ => {
|
||||
BDFDB.DOMUtils.removeLocalStyle('ImageZoomCrossHair');
|
||||
document.removeEventListener("mousemove", dragging);
|
||||
document.removeEventListener("mouseup", releasing);
|
||||
BDFDB.DOMUtils.remove(lense, backdrop);
|
||||
};
|
||||
document.addEventListener("mousemove", dragging);
|
||||
document.addEventListener("mouseup", releasing);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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: "Lens Size"
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue