From 439b04ec2c231e7b95b35d85d12eec225a4e63fa Mon Sep 17 00:00:00 2001 From: Mirco Wittrien Date: Fri, 1 May 2020 09:21:01 +0200 Subject: [PATCH] stuff --- Plugins/ImageGallery/ImageGallery.plugin.js | 2 +- Plugins/ImageZoom/ImageZoom.plugin.js | 39 ++++++++++++--------- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/Plugins/ImageGallery/ImageGallery.plugin.js b/Plugins/ImageGallery/ImageGallery.plugin.js index 5081893420..cae67a1b12 100644 --- a/Plugins/ImageGallery/ImageGallery.plugin.js +++ b/Plugins/ImageGallery/ImageGallery.plugin.js @@ -14,7 +14,7 @@ var ImageGallery = (_ => { constructor () { this.changelog = { - "improved":[["Styling","Fixed the style for the new image modal layout"]] + "fixed":[["Styling","Fixed the style for the new image modal layout"]] }; this.patchedModules = { diff --git a/Plugins/ImageZoom/ImageZoom.plugin.js b/Plugins/ImageZoom/ImageZoom.plugin.js index 2340b0d593..004c184d5b 100644 --- a/Plugins/ImageZoom/ImageZoom.plugin.js +++ b/Plugins/ImageZoom/ImageZoom.plugin.js @@ -4,7 +4,7 @@ var ImageZoom = (_ => { return class ImageZoom { getName () {return "ImageZoom";} - getVersion () {return "1.1.1";} + getVersion () {return "1.1.2";} getAuthor () {return "DevilBro";} @@ -12,7 +12,7 @@ var ImageZoom = (_ => { constructor () { this.changelog = { - "fixed":[["Overlapping","Fixed the overlapping of the options in the image modal"]] + "fixed":[["Styling && Functionality","Fixed the style for the new image modal layout"]] }; this.patchedModules = { @@ -28,8 +28,14 @@ var ImageZoom = (_ => { ${BDFDB.dotCN._imagezoomlense} { border: 2px solid rgb(114, 137, 218); } - ${BDFDB.dotCN.downloadlink} { - position: relative; + ${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; } `; @@ -112,6 +118,7 @@ var ImageZoom = (_ => { })); }; children[index] = BDFDB.ReactUtils.createElement("span", { + className: BDFDB.disCN._imagezoomoperations, children: [ children[index], BDFDB.ReactUtils.createElement("span", { @@ -133,36 +140,36 @@ var ImageZoom = (_ => { } processLazyImage (e) { - if (!BDFDB.DOMUtils.containsClass(e.node.parentElement, BDFDB.disCN._imagegallerysibling) && BDFDB.ReactUtils.findOwner(BDFDB.DOMUtils.getParent(BDFDB.dotCN.modal, e.node), {name: "ImageModal"})) { + 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 imgRects = BDFDB.DOMUtils.getRects(e.node.firstElementChild); let settings = BDFDB.DataUtils.get(this, "settings"); - let lense = BDFDB.DOMUtils.create(`
<${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" : ""}>
`); + let lense = BDFDB.DOMUtils.create(`
<${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" : ""}>
`); let pane = lense.firstElementChild.firstElementChild; let backdrop = BDFDB.DOMUtils.create(`
`); - let appmount = document.querySelector(BDFDB.dotCN.appmount); - appmount.appendChild(lense); - appmount.appendChild(backdrop); + 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; + 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"); + 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"); + 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);