From 80ea34b0c631c8252de75d5e28ff9d490a894c39 Mon Sep 17 00:00:00 2001 From: Mirco Wittrien Date: Tue, 12 Mar 2019 12:08:37 +0100 Subject: [PATCH] new plugin --- Plugins/ImageZoom/ImageZoom.plugin.js | 253 ++++++++++++++++++++++++++ Plugins/ImageZoom/README.md | 3 + Plugins/PluginRepo/res/PluginList.txt | 1 + Plugins/README.md | 1 + 4 files changed, 258 insertions(+) create mode 100644 Plugins/ImageZoom/ImageZoom.plugin.js create mode 100644 Plugins/ImageZoom/README.md diff --git a/Plugins/ImageZoom/ImageZoom.plugin.js b/Plugins/ImageZoom/ImageZoom.plugin.js new file mode 100644 index 0000000000..3af0383684 --- /dev/null +++ b/Plugins/ImageZoom/ImageZoom.plugin.js @@ -0,0 +1,253 @@ +//META{"name":"ImageZoom","website":"https://github.com/mwittrien/BetterDiscordAddons/tree/master/Plugins/ImageZoom","source":"https://raw.githubusercontent.com/mwittrien/BetterDiscordAddons/master/Plugins/ImageZoom/ImageZoom.plugin.js"}*// + +class ImageZoom { + getName () {return "ImageZoom";} + + getVersion () {return "1.0.0";} + + getAuthor () {return "DevilBro";} + + getDescription () {return "Allows you to zoom in opened Images by holding left clicking on them in the Image Modal.";} + + initConstructor () { + this.patchModules = { + "ImageModal":["componentDidMount","componentWillUnmount"] + } + + this.zoomSettingsContextMarkup = + `
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
`; + + this.css = ` + .imagezoom-lense { + overflow: hidden !important; + pointer-events: none !important; + z-index: 10000 !important; + position: absolute !important; + border-radius: 50% !important; + border: 2px solid rgb(114, 137, 218); + } + .imagezoom-backdrop { + position: absolute !important; + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; + z-index: 8000 !important; + }`; + + this.defaults = { + settings: { + zoomlevel: {value:2}, + lensesize: {value:200} + } + }; + } + + //legacy + load () {} + + start () { + if (!global.BDFDB) global.BDFDB = {myPlugins:{}}; + if (global.BDFDB && global.BDFDB.myPlugins && typeof global.BDFDB.myPlugins == "object") global.BDFDB.myPlugins[this.getName()] = this; + var libraryScript = document.querySelector('head script[src="https://mwittrien.github.io/BetterDiscordAddons/Plugins/BDFDB.js"]'); + if (!libraryScript || performance.now() - libraryScript.getAttribute("date") > 600000) { + if (libraryScript) libraryScript.remove(); + libraryScript = document.createElement("script"); + libraryScript.setAttribute("type", "text/javascript"); + libraryScript.setAttribute("src", "https://mwittrien.github.io/BetterDiscordAddons/Plugins/BDFDB.js"); + libraryScript.setAttribute("date", performance.now()); + libraryScript.addEventListener("load", () => {if (global.BDFDB && typeof BDFDB === "object" && BDFDB.loaded) this.initialize();}); + document.head.appendChild(libraryScript); + } + else if (global.BDFDB && typeof BDFDB === "object" && BDFDB.loaded) this.initialize(); + this.startTimeout = setTimeout(() => {this.initialize();}, 30000); + } + + initialize () { + if (global.BDFDB && typeof BDFDB === "object" && BDFDB.loaded) { + if (this.started) return; + BDFDB.loadMessage(this); + + BDFDB.WebModules.forceAllUpdates(this); + } + else { + console.error(`%c[${this.getName()}]%c`, 'color: #3a71c1; font-weight: 700;', '', 'Fatal Error: Could not load BD functions!'); + } + } + + stop () { + if (global.BDFDB && typeof BDFDB === "object" && BDFDB.loaded) { + 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.removeEles(".imagezoom-contextmenu", ".imagezoom-separator", ".imagezoom-settings", ".imagezoom-lense", ".imagezoom-backdrop"); + + BDFDB.unloadMessage(this); + } + } + + + // begin of own functions + + processImageModal (instance, wrapper, methodnames) { + if (methodnames.includes("componentDidMount")) { + let modal = BDFDB.getParentEle(BDFDB.dotCN.modal, wrapper); + if (!modal) return; + let start = performance.now(); + let waitForImg = setInterval(() => { + let img = modal.querySelector(BDFDB.dotCNS.imagewrapper + "img"); + if (img && img.src) { + clearInterval(waitForImg); + img.setAttribute("draggable", "false"); + img.parentElement.parentElement.appendChild(BDFDB.htmlToElement(` | `)); + let settingslink = BDFDB.htmlToElement(`Zoom ${BDFDB.LanguageStrings.SETTINGS}`); + img.parentElement.parentElement.appendChild(settingslink); + let openContext = e => { + let settings = BDFDB.getAllData(this, "settings"); + let zoomSettingsContext = BDFDB.htmlToElement(this.zoomSettingsContextMarkup); + for (let slideritem of zoomSettingsContext.querySelectorAll(BDFDB.dotCN.contextmenuitemslider)) { + let slider = slideritem.querySelector(BDFDB.dotCN.contextmenuslider); + let value = settings[slider.getAttribute("type")]; + let percent = BDFDB.mapRange([slider.getAttribute("min"), slider.getAttribute("max")], [0, 100], value); + let grabber = slider.querySelector(BDFDB.dotCN.slidergrabber); + grabber.style.setProperty("left", percent + "%"); + grabber.addEventListener("mousedown", e => {this.dragSlider(slider, value, e);}); + slider.querySelector(BDFDB.dotCN.sliderbarfill).style.setProperty("width", percent + "%"); + slider.querySelector(BDFDB.dotCN.sliderinput).value = value; + slider.previousSibling.innerText = slider.getAttribute("name") + ": " + value + slider.getAttribute("unit"); + } + let zoomlevelitem = zoomSettingsContext.querySelector(".zoomlevel-item"); + let lensesizeitem = zoomSettingsContext.querySelector(".lensesize-item"); + BDFDB.appendContextMenu(zoomSettingsContext, e); + }; + settingslink.addEventListener("click", openContext); + settingslink.addEventListener("contextmenu", openContext); + img.ImageZoomMouseDownListener = e => { + let settings = BDFDB.getAllData(this, "settings"); + + BDFDB.appendLocalStyle("ImageZoomCrossHair", "* {cursor: crosshair !important;}"); + let imgrects = BDFDB.getRects(img); + + let lense = BDFDB.htmlToElement(`
`); + let pane = lense.firstElementChild; + let backdrop = BDFDB.htmlToElement(`
`); + document.querySelector(BDFDB.dotCN.appmount).appendChild(lense); + document.querySelector(BDFDB.dotCN.appmount).appendChild(backdrop); + + let lenserects = BDFDB.getRects(lense), panerects = BDFDB.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.removeLocalStyle('ImageZoomCrossHair'); + document.removeEventListener("mousemove", dragging); + document.removeEventListener("mouseup", releasing); + BDFDB.removeEles(lense, backdrop); + }; + document.addEventListener("mousemove", dragging); + document.addEventListener("mouseup", releasing); + }; + img.addEventListener("mousedown", img.ImageZoomMouseDownListener); + } + else if (performance.now() - start > 10000) { + clearInterval(waitForImg); + } + }, 100); + } + else if (methodnames.includes("componentWillUnmount")) { + BDFDB.removeEles(".imagezoom-contextmenu", ".imagezoom-separator", ".imagezoom-settings", ".imagezoom-lense", ".imagezoom-backdrop"); + } + } + + dragSlider (slider, value, e) { + var grabber = e.currentTarget; + var track = grabber.parentNode; + var slider = track.parentNode; + var input = slider.querySelector(BDFDB.dotCN.sliderinput); + var barfill = slider.querySelector(BDFDB.dotCN.sliderbarfill); + var min = slider.getAttribute("min"); + var max = slider.getAttribute("max"); + var unit = slider.getAttribute("unit"); + var type = slider.getAttribute("type"); + + BDFDB.appendLocalStyle("disableTextSelection", `*{user-select: none !important;}`); + + var sY = 0; + var sHalfW = BDFDB.getRects(grabber).width/2; + var sMinX = BDFDB.getRects(track).left; + var sMaxX = sMinX + BDFDB.getRects(track).width; + var bubble = BDFDB.htmlToElement(`${parseInt(value) + unit}`); + grabber.appendChild(bubble); + var mouseup = () => { + document.removeEventListener("mouseup", mouseup); + document.removeEventListener("mousemove", mousemove); + BDFDB.removeEles(bubble); + BDFDB.removeLocalStyle("disableTextSelection"); + BDFDB.saveData(type, value, this, "settings"); + slider.previousSibling.innerText = slider.getAttribute("name") + ": " + value + unit; + }; + var mousemove = e2 => { + sY = e2.clientX > sMaxX ? sMaxX - sHalfW : (e2.clientX < sMinX ? sMinX - sHalfW : e2.clientX - sHalfW); + value = parseInt(BDFDB.mapRange([sMinX - sHalfW, sMaxX - sHalfW], [min, max], sY)); + let percent = BDFDB.mapRange([sMinX - sHalfW, sMaxX - sHalfW], [0, 100], sY); + grabber.style.setProperty("left", percent + "%"); + barfill.style.setProperty("width", percent + "%"); + input.value = value; + bubble.innerText = value + unit; + }; + document.addEventListener("mouseup", mouseup); + document.addEventListener("mousemove", mousemove); + } + + updateSlider () { + var sY = 0; + var sHalfW = BDFDB.getRects(grabber).width/2; + var sMinX = BDFDB.getRects(track).left; + var sMaxX = sMinX + BDFDB.getRects(track).width; + } +} diff --git a/Plugins/ImageZoom/README.md b/Plugins/ImageZoom/README.md new file mode 100644 index 0000000000..ae6abd1f46 --- /dev/null +++ b/Plugins/ImageZoom/README.md @@ -0,0 +1,3 @@ +# Image Zoom - [Download](https://betterdiscord.net/ghdl?url=https://raw.githubusercontent.com/mwittrien/BetterDiscordAddons/master/Plugins/ImageZoom/ImageZoom.plugin.js) + +Allows you to zoom in opened Images by holding left clicking on them in the Image Modal. diff --git a/Plugins/PluginRepo/res/PluginList.txt b/Plugins/PluginRepo/res/PluginList.txt index d3276f01b0..a705a35364 100644 --- a/Plugins/PluginRepo/res/PluginList.txt +++ b/Plugins/PluginRepo/res/PluginList.txt @@ -125,6 +125,7 @@ https://raw.githubusercontent.com/mwittrien/BetterDiscordAddons/master/Plugins/F https://raw.githubusercontent.com/mwittrien/BetterDiscordAddons/master/Plugins/GoogleSearchReplace/GoogleSearchReplace.plugin.js https://raw.githubusercontent.com/mwittrien/BetterDiscordAddons/master/Plugins/GoogleTranslateOption/GoogleTranslateOption.plugin.js https://raw.githubusercontent.com/mwittrien/BetterDiscordAddons/master/Plugins/ImageGallery/ImageGallery.plugin.js +https://raw.githubusercontent.com/mwittrien/BetterDiscordAddons/master/Plugins/ImageZoom/ImageZoom.plugin.js https://raw.githubusercontent.com/mwittrien/BetterDiscordAddons/master/Plugins/JoinedAtDate/JoinedAtDate.plugin.js https://raw.githubusercontent.com/mwittrien/BetterDiscordAddons/master/Plugins/LastMessageDate/LastMessageDate.plugin.js https://raw.githubusercontent.com/mwittrien/BetterDiscordAddons/master/Plugins/MessageUtilities/MessageUtilities.plugin.js diff --git a/Plugins/README.md b/Plugins/README.md index 366c7c6d7a..899fb2c328 100644 --- a/Plugins/README.md +++ b/Plugins/README.md @@ -18,6 +18,7 @@ - [Google Search Replace](https://github.com/mwittrien/BetterDiscordAddons/tree/master/Plugins/GoogleSearchReplace) - Replaces the default Google Text Search with a selection menu of several search engines. - [Google Translate Option](https://github.com/mwittrien/BetterDiscordAddons/tree/master/Plugins/GoogleTranslateOption) - Adds a Google Translate option to your context menu, which will open the selected text in Google Translate. - [Image Gallery](https://github.com/mwittrien/BetterDiscordAddons/tree/master/Plugins/ImageGallery) - Allows the user to browse through images sent inside the same message. + - [Image Zoom](https://github.com/mwittrien/BetterDiscordAddons/tree/master/Plugins/ImageZoom) - Allows you to zoom in opened Images by holding left clicking on them in the Image Modal. - [Joined At Date](https://github.com/mwittrien/BetterDiscordAddons/tree/master/Plugins/JoinedAtDate) - Displays the Joined At Date of a Member in the UserPopout and UserModal. - [Last Message Date](https://github.com/mwittrien/BetterDiscordAddons/tree/master/Plugins/LastMessageDate) - Displays the Date of the last sent Message of a Member for the current Server/DM in the UserPopout and UserModal. - [Message Utilities](https://github.com/mwittrien/BetterDiscordAddons/tree/master/Plugins/MessageUtilities) - Offers a number of useful message options.