diff --git a/Plugins/ImageUtilities/ImageUtilities.plugin.js b/Plugins/ImageUtilities/ImageUtilities.plugin.js index edc1981d81..3c86f48535 100644 --- a/Plugins/ImageUtilities/ImageUtilities.plugin.js +++ b/Plugins/ImageUtilities/ImageUtilities.plugin.js @@ -2,7 +2,7 @@ * @name ImageUtilities * @author DevilBro * @authorId 278543574059057154 - * @version 5.2.5 + * @version 5.2.6 * @description Adds several Utilities for Images/Videos (Gallery, Download, Reverse Search, Zoom, Copy, etc.) * @invite Jx3TjNS * @donate https://www.paypal.me/MircoWittrien @@ -14,7 +14,9 @@ module.exports = (_ => { const changeLog = { - + "added": { + "Click Zoom Mode": "Added Option to click an Image to Zoom instead of having to hold down the Mouse Button" + } }; return !window.BDFDB_Global || (!window.BDFDB_Global.loaded && !window.BDFDB_Global.started) ? class { @@ -214,6 +216,7 @@ module.exports = (_ => { galleryFilter: {}, zoomSettings: { pixelMode: {value: false, label: "Uses Pixel Lens instead of a Blur Lens"}, + clickMode: {value: false, label: "Click Image to zoom instead of holding the Mouse Button"}, lensSize: {value: 200, digits: 0, minValue: 50, maxValue: 5000, unit: "px", label: "context_lenssize"}, zoomLevel: {value: 2, digits: 1, minValue: 1, maxValue: 20, unit: "x", label: "ACCESSIBILITY_ZOOM_LEVEL_LABEL"}, zoomSpeed: {value: 0.1, digits: 2, minValue: 0.01, maxValue: 1, unit: "", label: "context_zoomspeed"} @@ -1246,7 +1249,8 @@ module.exports = (_ => { if (this.isValid(e.instance.props.src, "gif")) e.node.style.setProperty("pointer-events", "none"); if (this.settings.viewerSettings.zoomMode && typeof e.instance.props.children != "function" && !BDFDB.DOMUtils.containsClass(e.node.parentElement, BDFDB.disCN._imageutilitiessibling)) { e.node.style.setProperty("cursor", "zoom-in"); - e.node.addEventListener("mousedown", event => { + e.node.addEventListener(this.settings.zoomSettings.clickMode ? "click" : "mousedown", event => { + BDFDB.ListenerUtils.stopEvent(event); if (event.which != 1 || e.node.querySelector("video")) return; let vanishObserver; @@ -1255,7 +1259,7 @@ module.exports = (_ => { let imgRects = BDFDB.DOMUtils.getRects(e.node.firstElementChild); let lens = BDFDB.DOMUtils.create(`
<${e.node.firstElementChild.tagName} src="${!this.isValid(e.instance.props.src, "video") ? e.instance.props.src : this.getPosterUrl(e.instance.props.src)}" style="width: ${imgRects.width * zoomLevel}px; height: ${imgRects.height * zoomLevel}px; position: fixed !important;${this.settings.zoomSettings.pixelMode ? " image-rendering: pixelated !important;" : ""}"${e.node.firstElementChild.tagName == "VIDEO" ? " loop autoplay" : ""}>
`); let pane = lens.firstElementChild.firstElementChild; - let backdrop = BDFDB.DOMUtils.create(`
`); + let backdrop = BDFDB.DOMUtils.create(`
`); let appMount = document.querySelector(BDFDB.dotCN.appmount); appMount.appendChild(lens); appMount.appendChild(backdrop); @@ -1282,15 +1286,12 @@ module.exports = (_ => { }; lens.update(); - for (let ele of [e.node, document.querySelector(BDFDB.dotCN.imagemodal)]) if (ele) ele.style.setProperty("pointer-events", "none", "important"); - let dragging = event2 => { event = event2; lens.update(); }; let releasing = event2 => { BDFDB.ListenerUtils.stopEvent(event2); - for (let ele of [e.node, document.querySelector(BDFDB.dotCN.imagemodal)]) if (ele) ele.style.removeProperty("pointer-events"); this.cleanupListeners("Zoom"); document.removeEventListener("mousemove", dragging); document.removeEventListener("mouseup", releasing);