//META{"name":"ImageUtilities","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/ImageUtilities","source":"https://raw.githubusercontent.com/mwittrien/BetterDiscordAddons/master/Plugins/ImageUtilities/ImageUtilities.plugin.js"}*// var ImageUtilities = (_ => { const imgUrlReplaceString = "DEVILBRO_BD_REVERSEIMAGESEARCH_REPLACE_IMAGEURL"; var firedEvents = [], clickedImage; var settings = {}, inputs = {}, amounts = {}, zoomSettings = {}, engines = {}, enabledEngines = {}; const ImageDetails = class ImageDetails extends BdApi.React.Component { componentDidMount() { this.props.attachment = BDFDB.ReactUtils.findValue(BDFDB.ObjectUtils.get(this, "_reactInternalFiber.return"), "attachment", {up: true}); BDFDB.ReactUtils.forceUpdate(this); } componentDidUpdate() { if ((!this.props.attachment || !this.props.attachment.size) && !this.props.loaded) { this.props.loaded = true; this.props.attachment = BDFDB.ReactUtils.findValue(BDFDB.ObjectUtils.get(this, "_reactInternalFiber.return"), "attachment", {up: true}); BDFDB.ReactUtils.forceUpdate(this); } } render() { return !this.props.attachment ? null : BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Flex, { className: BDFDB.disCN._imageutilitiesimagedetails, children: [ BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Flex.Child, { children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Anchor, { title: this.props.original, href: this.props.original, children: this.props.attachment.filename, onClick: event => { BDFDB.ListenerUtils.stopEvent(event); BDFDB.DiscordUtils.openLink(this.props.original); } }) }), BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Flex.Child, { children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TextElement, { children: BDFDB.NumberUtils.formatBytes(this.props.attachment.size) }) }), BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Flex.Child, { children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TextElement, { children: `${this.props.attachment.width}x${this.props.attachment.height}px` }) }) ] }); } }; return class ImageUtilities { getName () {return "ImageUtilities";} getVersion () {return "4.1.6";} getAuthor () {return "DevilBro";} getDescription () {return "Adds a handful of options for images/emotes/avatars (direct download, reverse image search, zoom, copy image link, copy image to clipboard, gallery mode)";} constructor () { this.patchedModules = { after: { ImageModal: ["render", "componentDidMount"], LazyImage: ["render", "componentDidMount"] } }; } initConstructor () { firedEvents = []; clickedImage = null; this.defaults = { settings: { addDetails: {value:true, inner:false, description:"Add image details (name, size, amount) in the image modal"}, showAsHeader: {value:true, inner:false, description:"Show image details as a details header above the image in the chat"}, showOnHover: {value:false, inner:false, description:"Show image details as Tooltip in the chat"}, enableGallery: {value:true, inner:false, description:"Displays previous/next Images in the same message in the image modal"}, enableZoom: {value:true, inner:false, description:"Creates a zoom lense if you press down on an image in the image modal"}, enableCopyImg: {value:true, inner:false, description:"Add a copy image option in the image modal"}, enableSaveImg: {value:true, inner:false, description:"Add a save image as option in the image modal"}, useChromium: {value:false, inner:false, description:"Use an inbuilt browser window instead of opening your default browser"}, addUserAvatarEntry: {value:true, inner:true, description:"User Avatars"}, addGuildIconEntry: {value:true, inner:true, description:"Server Icons"}, addEmojiEntry: {value:true, inner:true, description:"Custom Emojis/Emotes"} }, amounts: { hoverDelay: {value:0, min:0, description:"Image Tooltip delay (in millisec)"} }, inputs: { downloadLocation: {value:"", childProps:{type: "file", searchFolders:true}, description:"Download Location"}, }, zoomSettings: { zoomlevel: {value:2, digits:1, minValue: 1, maxValue: 20, unit:"x", label:"ACCESSIBILITY_ZOOM_LEVEL_LABEL"}, lensesize: {value:200, digits:0, minValue: 50, maxValue: 5000, unit:"px", label:"context_lensesize_text"} }, engines: { _all: {value:true, name:BDFDB.LanguageUtils.LanguageStrings.FORM_LABEL_ALL, url:null}, Baidu: {value:true, name:"Baidu", url:"http://image.baidu.com/pcdutu?queryImageUrl=" + imgUrlReplaceString}, Bing: {value:true, name:"Bing", url:"https://www.bing.com/images/search?q=imgurl:" + imgUrlReplaceString + "&view=detailv2&iss=sbi&FORM=IRSBIQ"}, Google: {value:true, name:"Google", url:"https://images.google.com/searchbyimage?image_url=" + imgUrlReplaceString}, IQDB: {value:true, name:"IQDB", url:"https://iqdb.org/?url=" + imgUrlReplaceString}, Reddit: {value:true, name:"Reddit", url:"http://karmadecay.com/search?q=" + imgUrlReplaceString}, SauceNAO: {value:true, name:"SauceNAO", url:"https://saucenao.com/search.php?db=999&url=" + imgUrlReplaceString}, Sogou: {value:true, name:"Sogou", url:"http://pic.sogou.com/ris?flag=1&drag=0&query=" + imgUrlReplaceString + "&flag=1"}, TinEye: {value:true, name:"TinEye", url:"https://tineye.com/search?url=" + imgUrlReplaceString}, WhatAnime: {value:true, name:"WhatAnime", url:"https://trace.moe/?url=" + imgUrlReplaceString}, Yandex: {value:true, name:"Yandex", url:"https://yandex.com/images/search?url=" + imgUrlReplaceString + "&rpt=imageview"} } }; this.css = ` ${BDFDB.dotCN._imageutilitiesimagedetails} { margin: 5px 0; } ${BDFDB.dotCNS.spoilerhidden + BDFDB.dotCN._imageutilitiesimagedetails} { visibility: hidden; max-width: 1px; } ${BDFDB.dotCN.imagemodal}[style*="opacity: 0;"] > * { display: none !important; } ${BDFDB.dotCN._imageutilitiesgallery}:not([style*="opacity: 0;"]), ${BDFDB.dotCN._imageutilitiesdetailsadded}:not([style*="opacity: 0;"]) { transform: unset !important; } ${BDFDB.dotCN._imageutilitiessibling} { display: flex; align-items: center; position: fixed; top: 50%; bottom: 50%; cursor: pointer; } ${BDFDB.dotCN._imageutilitiesprevious} { justify-content: flex-end; right: 90%; } ${BDFDB.dotCN._imageutilitiesnext} { justify-content: flex-start; left: 90%; } ${BDFDB.dotCN._imageutilitiesswitchicon} { position: absolute; background: rgba(0, 0, 0, 0.3); border-radius: 50%; padding: 15px; transition: all 0.3s ease; } ${BDFDB.dotCNS._imageutilitiesprevious + BDFDB.dotCN._imageutilitiesswitchicon} { right: 10px; } ${BDFDB.dotCNS._imageutilitiesnext + BDFDB.dotCN._imageutilitiesswitchicon} { left: 10px; } ${BDFDB.dotCN._imageutilitiessibling}:hover ${BDFDB.dotCN._imageutilitiesswitchicon} { background: rgba(0, 0, 0, 0.5); } ${BDFDB.dotCN._imageutilitiesdetailswrapper} { position: fixed; bottom: 10px; left: 15px; right: 15px; pointer-events: none; } ${BDFDB.dotCN._imageutilitiesdetails} { margin-top: 5px; font-size: 14px; font-weight: 500; } ${BDFDB.dotCN._imageutilitiesdetailslabel} { font-weight: 600; } ${BDFDB.dotCN._imageutilitieslense} { border: 2px solid rgb(114, 137, 218); } ${BDFDB.dotCN._imageutilitiesoperations} { position: absolute; display: flex; } ${BDFDB.dotCNS._imageutilitiesoperations + BDFDB.dotCN.downloadlink} { position: relative !important; white-space: nowrap !important; } ${BDFDB.dotCNS._imageutilitiesoperations + BDFDB.dotCN.anchor + BDFDB.dotCN.downloadlink} { margin: 0 !important; } `; } getSettingsPanel (collapseStates = {}) { if (!window.BDFDB || typeof BDFDB != "object" || !BDFDB.loaded || !this.started) return; settings = BDFDB.DataUtils.get(this, "settings"); amounts = BDFDB.DataUtils.get(this, "amounts"); inputs = BDFDB.DataUtils.get(this, "inputs"); zoomSettings = BDFDB.DataUtils.get(this, "zoomSettings"); engines = BDFDB.DataUtils.get(this, "engines"); let settingsPanel, settingsItems = []; settingsItems.push(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.CollapseContainer, { title: "Settings", collapseStates: collapseStates, children: Object.keys(settings).map(key => !this.defaults.settings[key].inner && BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsSaveItem, { className: BDFDB.disCN.marginbottom8, type: "Switch", plugin: this, keys: ["settings", key], label: this.defaults.settings[key].description, value: settings[key] })).concat(Object.keys(amounts).map(key => BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsSaveItem, { className: BDFDB.disCN.marginbottom8, type: "TextInput", plugin: this, keys: ["amounts", key], label: this.defaults.amounts[key].description, basis: "50%", childProps: {type: "number"}, min: this.defaults.amounts[key].min, max: this.defaults.amounts[key].max, value: amounts[key] }))).concat(Object.keys(inputs).map(key => BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsSaveItem, { className: BDFDB.disCN.marginbottom8, type: "TextInput", plugin: this, keys: ["inputs", key], label: this.defaults.inputs[key].description, basis: "70%", childProps: this.defaults.inputs[key].childProps, value: key == "downloadLocation" ? this.getDownloadLocation() : inputs[key] }))).filter(n => n) })); settingsItems.push(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.CollapseContainer, { title: "Context Menu Entries", collapseStates: collapseStates, children: [BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.FormComponents.FormTitle, { className: BDFDB.disCN.marginbottom4, tag: BDFDB.LibraryComponents.FormComponents.FormTitle.Tags.H3, children: "Add additional Context Menu Entry for:" })].concat(Object.keys(settings).map(key => this.defaults.settings[key].inner && BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsSaveItem, { className: BDFDB.disCN.marginbottom8, type: "Switch", plugin: this, keys: ["settings", key], label: this.defaults.settings[key].description, value: settings[key] }))) })); settingsItems.push(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.CollapseContainer, { title: "Search Engines", collapseStates: collapseStates, children: Object.keys(engines).filter(n => n && n != "_all").map(key => BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsSaveItem, { className: BDFDB.disCN.marginbottom8, type: "Switch", plugin: this, keys: ["engines", key], label: this.defaults.engines[key].name, value: engines[key] })) })); return settingsPanel = BDFDB.PluginUtils.createSettingsPanel(this, settingsItems); } // Legacy load () { if (window.BDFDB && typeof BDFDB === "object" && BDFDB.loaded) BDFDB.PluginUtils.load(this); } 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); BDFDB.ListenerUtils.add(this, document.body, "click", BDFDB.dotCNS.message + BDFDB.dotCNS.imagewrapper + "img", e => { clickedImage = e.target; BDFDB.TimeUtils.timeout(_ => {clickedImage = null;}); }); BDFDB.PatchUtils.patch(this, (BDFDB.ModuleUtils.findByName("renderImageComponent", false).exports || {}), "renderImageComponent", {after: e => { if (e.returnValue && e.returnValue.type && (e.returnValue.type.displayName == "LazyImageZoomable" || e.returnValue.type.displayName == "LazyImage") && e.methodArguments[0].original && e.methodArguments[0].src.indexOf("https://media.discordapp.net/attachments") == 0 && (e.methodArguments[0].className || "").indexOf(BDFDB.disCN.embedthumbnail) == -1) return this.injectImageDetails(e.methodArguments[0], e.returnValue); }}); 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.cleanupListeners("Gallery"); this.cleanupListeners("Zoom"); this.forceUpdateAll(); BDFDB.PluginUtils.clear(this); } } // Begin of own functions onSettingsClosed () { if (this.SettingsUpdated) { delete this.SettingsUpdated; this.forceUpdateAll(); } } onGuildContextMenu (e) { if (e.instance.props.guild && settings.addGuildIconEntry) { let banner = BDFDB.DOMUtils.getParent(BDFDB.dotCN.guildheader, e.instance.props.target) || BDFDB.DOMUtils.getParent(BDFDB.dotCN.guildchannels, e.instance.props.target) && !e.instance.props.target.className && e.instance.props.target.parentElement.firstElementChild == e.instance.props.target; if (banner) { if (e.instance.props.guild.banner) this.injectItem(e, e.instance.props.guild.banner); } else if (e.type != "GuildChannelListContextMenu") this.injectItem(e, e.instance.props.guild.getIconURL("png"), BDFDB.LibraryModules.IconUtils.hasAnimatedGuildIcon(e.instance.props.guild) && e.instance.props.guild.getIconURL("gif")); } } onUserContextMenu (e) { if (e.instance.props.user && settings.addUserAvatarEntry) this.injectItem(e, e.instance.props.user.getAvatarURL("png"), BDFDB.LibraryModules.IconUtils.hasAnimatedAvatar(e.instance.props.user) && e.instance.props.user.getAvatarURL("gif")) } onNativeContextMenu (e) { if (e.type == "NativeImageContextMenu" && (e.instance.props.href || e.instance.props.src)) { this.injectItem(e, e.instance.props.href || e.instance.props.src); } } onMessageContextMenu (e) { if (e.instance.props.message && e.instance.props.channel && e.instance.props.target) { if (e.instance.props.attachment) this.injectItem(e, e.instance.props.attachment.url); else if (e.instance.props.target.tagName == "A" && e.instance.props.message.embeds && e.instance.props.message.embeds[0] && e.instance.props.message.embeds[0].type == "image") this.injectItem(e, e.instance.props.target.href); else if (e.instance.props.target.tagName == "IMG") { if (BDFDB.DOMUtils.containsClass(e.instance.props.target.parentElement, BDFDB.disCN.imagewrapper)) this.injectItem(e, e.instance.props.target.src); else if (BDFDB.DOMUtils.containsClass(e.instance.props.target, BDFDB.disCN.embedauthoricon) && settings.addUserAvatarEntry) this.injectItem(e, e.instance.props.target.src); else if (BDFDB.DOMUtils.containsClass(e.instance.props.target, BDFDB.disCN.emojiold, "emote", false) && settings.addEmojiEntry) this.injectItem(e, e.instance.props.target.src); } else { let reaction = BDFDB.DOMUtils.getParent(BDFDB.dotCN.messagereaction, e.instance.props.target); if (reaction && settings.addEmojiEntry) this.injectItem(e, reaction.querySelector(BDFDB.dotCN.emojiold).src); } } } injectItem (e, ...urls) { let types = []; let validUrls = urls.filter(n => this.isValidImg(n)).map(n => { let url = n.replace(/^url\(|\)$|"|'/g, "").replace(/\?size\=\d+$/, "?size=4096").replace(/[\?\&](height|width)=\d+/g, ""); if (url.indexOf("https://images-ext-1.discordapp.net/external/") > -1) { if (url.split("/https/").length > 1) url = "https://" + url.split("/https/").pop(); else if (url.split("/http/").length > 1) url = "http://" + url.split("/http/").pop(); } const file = url && (BDFDB.LibraryModules.URLParser.parse(url).pathname || "").toLowerCase(); const type = file && file.split(".").pop(); return url && type && !types.includes(type) && types.push(type) && {url, type}; }).filter(n => n); if (!validUrls.length) return; let [children, index] = BDFDB.ContextMenuUtils.findItem(e.returnvalue, {id: "devmode-copy-id", group: true}); children.splice(index > -1 ? index : children.length, 0, BDFDB.ContextMenuUtils.createItem(BDFDB.LibraryComponents.MenuItems.MenuGroup, { children: BDFDB.ContextMenuUtils.createItem(BDFDB.LibraryComponents.MenuItems.MenuItem, { label: "Image Utilities", id: BDFDB.ContextMenuUtils.createItemId(this.name, "main-subitem"), children: validUrls.length == 1 ? this.createUrlMenu(e, validUrls[0].url) : validUrls.map((urlData, i) => BDFDB.ContextMenuUtils.createItem(BDFDB.LibraryComponents.MenuItems.MenuItem, { label: urlData.type.toUpperCase(), id: BDFDB.ContextMenuUtils.createItemId(this.name, "subitem", i), children: this.createUrlMenu(e, urlData.url) })) }) })); } createUrlMenu (e, url) { let enginesWithoutAll = BDFDB.ObjectUtils.filter(enabledEngines, n => n != "_all", true); let engineKeys = Object.keys(enginesWithoutAll); return [ BDFDB.ContextMenuUtils.createItem(BDFDB.LibraryComponents.MenuItems.MenuItem, { label: this.labels.context_viewimage_text, id: BDFDB.ContextMenuUtils.createItemId(this.name, "view-image"), action: _ => { let img = new Image(); img.onload = function() { BDFDB.LibraryModules.ModalUtils.openModal(modalData => { return BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.ModalComponents.ModalRoot, Object.assign({ className: BDFDB.disCN.imagemodal }, modalData, { size: BDFDB.LibraryComponents.ModalComponents.ModalSize.DYNAMIC, "aria-label": BDFDB.LanguageUtils.LanguageStrings.IMAGE, children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.ImageModal, { src: url, original: url, width: this.width, height: this.height, className: BDFDB.disCN.imagemodalimage, shouldAnimate: true, renderLinkComponent: props => BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Anchor, props) }) }), true); }); }; img.src = url; } }), BDFDB.ContextMenuUtils.createItem(BDFDB.LibraryComponents.MenuItems.MenuItem, { label: this.labels.context_saveimage_text, id: BDFDB.ContextMenuUtils.createItemId(this.name, "download-image"), action: _ => { BDFDB.LibraryRequires.request(url, {encoding: null}, (error, response, body) => { let path = this.getDownloadLocation(); if (error) BDFDB.NotificationUtils.toast(this.labels.toast_saveimage_failed.replace("{{path}}", path), {type:"error"}); else { BDFDB.LibraryRequires.fs.writeFile(this.getFileName(path, url.split("/").pop().split(".").slice(0, -1).join("."), response.headers["content-type"].split("/").pop().split("+")[0], 0), body, error => { if (error) BDFDB.NotificationUtils.toast(this.labels.toast_saveimage_failed.replace("{{path}}", path), {type:"error"}); else BDFDB.NotificationUtils.toast(this.labels.toast_saveimage_success.replace("{{path}}", path), {type:"success"}); }); } }); } }), BDFDB.ContextMenuUtils.createItem(BDFDB.LibraryComponents.MenuItems.MenuItem, { label: this.labels.context_saveimageas_text, id: BDFDB.ContextMenuUtils.createItemId(this.name, "download-image-as"), action: _ => { this.downloadImage(url); } }), !this.isCopyable(url) ? null : BDFDB.ContextMenuUtils.createItem(BDFDB.LibraryComponents.MenuItems.MenuItem, { label: this.labels.context_copyimage_text, id: BDFDB.ContextMenuUtils.createItemId(this.name, "copy-image"), action: _ => { this.copyImage(url); } }), BDFDB.ContextMenuUtils.createItem(BDFDB.LibraryComponents.MenuItems.MenuItem, { label: this.labels.context_copyimagelink_text, id: BDFDB.ContextMenuUtils.createItemId(this.name, "copy-src"), action: _ => { BDFDB.LibraryRequires.electron.clipboard.write({text: url}); BDFDB.NotificationUtils.toast(this.labels.toast_copyimagelink_success, {type: "success"}); } }), !this.isSearchable(url) ? null : engineKeys.length == 1 ? BDFDB.ContextMenuUtils.createItem(BDFDB.LibraryComponents.MenuItems.MenuItem, { label: this.labels.context_reverseimagesearch_text.replace("...", this.defaults.engines[engineKeys[0]].name), id: BDFDB.ContextMenuUtils.createItemId(this.name, "single-search"), persisting: true, action: event => { if (!event.shiftKey) BDFDB.ContextMenuUtils.close(e.instance); BDFDB.DiscordUtils.openLink(this.defaults.engines[engineKeys[0]].url.replace(imgUrlReplaceString, encodeURIComponent(url)), settings.useChromium, event.shiftKey); } }) : BDFDB.ContextMenuUtils.createItem(BDFDB.LibraryComponents.MenuItems.MenuItem, { label: this.labels.context_reverseimagesearch_text, id: BDFDB.ContextMenuUtils.createItemId(this.name, "submenu-search"), children: !engineKeys.length ? BDFDB.ContextMenuUtils.createItem(BDFDB.LibraryComponents.MenuItems.MenuItem, { label: this.labels.submenu_disabled_text, id: BDFDB.ContextMenuUtils.createItemId(this.name, "disabled"), disabled: true }) : Object.keys(enabledEngines).map(key => BDFDB.ContextMenuUtils.createItem(BDFDB.LibraryComponents.MenuItems.MenuItem, { label: this.defaults.engines[key].name, id: BDFDB.ContextMenuUtils.createItemId(this.name, "search", key), color: key == "_all" ? BDFDB.LibraryComponents.MenuItems.Colors.DANGER : BDFDB.LibraryComponents.MenuItems.Colors.DEFAULT, persisting: true, action: event => { if (!event.shiftKey) BDFDB.ContextMenuUtils.close(e.instance); if (key == "_all") { for (let key2 in enginesWithoutAll) BDFDB.DiscordUtils.openLink(this.defaults.engines[key2].url.replace(imgUrlReplaceString, encodeURIComponent(url)), settings.useChromium, event.shiftKey); } else BDFDB.DiscordUtils.openLink(this.defaults.engines[key].url.replace(imgUrlReplaceString, encodeURIComponent(url)), settings.useChromium, event.shiftKey); } })) }) ].filter(n => n); } processImageModal (e) { if (clickedImage) e.instance.props.cachedImage = clickedImage; let url = e.instance.props.cachedImage && e.instance.props.cachedImage.src ? e.instance.props.cachedImage : e.instance.props.src; url = url.src || url; let messages = this.getMessageGroupOfImage(url); if (e.returnvalue) { let [children, index] = BDFDB.ReactUtils.findParent(e.returnvalue, {props: [["className", BDFDB.disCN.downloadlink]]}); if (index > -1) { children[index].props.onClick = event => { return event.shiftKey; }; let openContext = event => { BDFDB.ContextMenuUtils.open(this, event, BDFDB.ContextMenuUtils.createItem(BDFDB.LibraryComponents.MenuItems.MenuGroup, { children: Object.keys(zoomSettings).map(type => BDFDB.ContextMenuUtils.createItem(BDFDB.LibraryComponents.MenuItems.MenuSliderItem, Object.assign({ id: BDFDB.ContextMenuUtils.createItemId(this.name, type), value: zoomSettings[type], renderLabel: value => { return (this.labels[this.defaults.zoomSettings[type].label] || BDFDB.LanguageUtils.LanguageStrings[this.defaults.zoomSettings[type].label]) + ": " + value + this.defaults.zoomSettings[type].unit; }, onValueRender: value => { return value + this.defaults.zoomSettings[type].unit; }, onValueChange: value => { zoomSettings[type] = value; BDFDB.DataUtils.save(zoomSettings, this, "zoomSettings"); } }, BDFDB.ObjectUtils.extract(this.defaults.zoomSettings[type], "digits", "minValue", "maxValue")))) })); }; let isVideo = (typeof e.instance.props.children == "function" && e.instance.props.children(Object.assign({}, e.instance.props, {size: e.instance.props})) || {type:{}}).type.displayName == "Video"; children[index] = BDFDB.ReactUtils.createElement("span", { className: BDFDB.disCN._imageutilitiesoperations, children: [ children[index], settings.enableSaveImg && !isVideo && [ BDFDB.ReactUtils.createElement("span", { className: BDFDB.disCN.downloadlink, children: "|", style: {margin: "0 5px"} }), BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Anchor, { className: BDFDB.disCN.downloadlink, children: this.labels.context_saveimageas_text, onClick: event => { BDFDB.ListenerUtils.stopEvent(event); this.downloadImage(url); } }) ], settings.enableCopyImg && this.isCopyable(url) && !isVideo && [ BDFDB.ReactUtils.createElement("span", { className: BDFDB.disCN.downloadlink, children: "|", style: {margin: "0 5px"} }), BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Anchor, { className: BDFDB.disCN.downloadlink, children: this.labels.context_copyimage_text, onClick: event => { BDFDB.ListenerUtils.stopEvent(event); this.copyImage(url); } }) ], settings.enableZoom && !isVideo && [ 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 }) ] ].flat(10).filter(n => n) }); } let imageIndex = 0, amount = 1; if (messages.length) { let images = messages.map(n => Array.from(n.querySelectorAll(BDFDB.dotCNS.imagewrapper + "img"))).flat().filter(img => !BDFDB.DOMUtils.getParent(BDFDB.dotCN.spoilerhidden, img)); amount = images.length; let next, previous; for (let i = 0; i < amount; i++) if (this.isSameImage(url, images[i])) { imageIndex = i; previous = images[i-1]; next = images[i+1]; break; } if (previous) { if (e.instance.previousRef) e.returnvalue.props.children.push(this.createImageWrapper(e.instance, e.instance.previousRef, "previous", BDFDB.LibraryComponents.SvgIcon.Names.LEFT_CARET)); else this.loadImage(e.instance, previous, "previous"); } if (next) { if (e.instance.nextRef) e.returnvalue.props.children.splice(1, 0, this.createImageWrapper(e.instance, e.instance.nextRef, "next", BDFDB.LibraryComponents.SvgIcon.Names.RIGHT_CARET)); else this.loadImage(e.instance, next, "next"); } } if (settings.addDetails) e.returnvalue.props.children.push(BDFDB.ReactUtils.createElement("div", { className: BDFDB.disCN._imageutilitiesdetailswrapper, children: [ {label: "Source", text: e.instance.props.src}, {label: "Size", text: `${e.instance.props.width} x ${e.instance.props.height}px`}, {label: "Image", text: `${imageIndex + 1} of ${amount}`} ].map(data => BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TextElement, { className: BDFDB.disCN._imageutilitiesdetails, children: [ BDFDB.ReactUtils.createElement("div", { className: BDFDB.disCN._imageutilitiesdetailslabel, children: data.label + ":" }), data.text ] })) })); } if (e.node) { let modal = BDFDB.DOMUtils.getParent(BDFDB.dotCNC.modal + BDFDB.dotCN.layermodal, e.node); if (modal) { modal.className = BDFDB.DOMUtils.formatClassName(modal.className, messages.length && BDFDB.disCN._imageutilitiesgallery, settings.addDetails && BDFDB.disCN._imageutilitiesdetailsadded); this.cleanupListeners("Gallery"); if (messages.length) { document.keydownImageUtilitiesGalleryListener = event => { if (!document.contains(e.node)) this.cleanupListeners("Gallery"); else if (!firedEvents.includes("Gallery")) { firedEvents.push("Gallery"); if (event.keyCode == 37) this.switchImages(e.instance, "previous"); else if (event.keyCode == 39) this.switchImages(e.instance, "next"); } }; document.keyupImageUtilitiesGalleryListener = _ => { BDFDB.ArrayUtils.remove(firedEvents, "Gallery", true); if (!document.contains(e.node)) this.cleanupListeners("Gallery"); }; document.addEventListener("keydown", document.keydownImageUtilitiesGalleryListener); document.addEventListener("keyup", document.keyupImageUtilitiesGalleryListener); } } } } processLazyImage (e) { if (e.node) { if (settings.enableZoom && !e.node.querySelector("video") && !BDFDB.DOMUtils.containsClass(e.node.parentElement, BDFDB.disCN._imageutilitiessibling) && BDFDB.ReactUtils.findOwner(BDFDB.DOMUtils.getParent(BDFDB.dotCNC.modal + BDFDB.dotCN.layermodal, e.node), {name: "ImageModal"})) { e.node.addEventListener("mousedown", event => { if (event.which != 1) return; BDFDB.ListenerUtils.stopEvent(event); let imgRects = BDFDB.DOMUtils.getRects(e.node.firstElementChild); let lense = BDFDB.DOMUtils.create(`