//META{"name":"ShowImageDetails"}*// class ShowImageDetails { initConstructor () { this.css = ` .image-details .image-details-size { margin: 0 10px; } .image-details-tooltip { max-width: 500px; } .image-details-tooltip .image-details-tooltip-size { margin: 10px 0; } `; this.updateDetails = false; this.defaults = { settings: { showOnHover: {value:false, description:"Show the details as Tooltip instead:"} } }; } getName () {return "ShowImageDetails";} getDescription () {return "Display the name, size and dimensions of uploaded images (does not include embed images) in the chat as an header or as a tooltip.";} getVersion () {return "1.0.7";} getAuthor () {return "DevilBro";} getSettingsPanel () { if (!this.started || typeof BDFDB !== "object") return; var settings = BDFDB.getAllData(this, "settings"); var settingshtml = `
${this.getName()}
`; for (let key in settings) { settingshtml += `

${this.defaults.settings[key].description}

`; } settingshtml += `
`; var settingspanel = $(settingshtml)[0]; BDFDB.initElements(settingspanel); $(settingspanel) .on("click", BDFDB.dotCN.switchinner, () => {this.updateSettings(settingspanel);}); return settingspanel; } //legacy load () {} start () { var libraryScript = null; if (typeof BDFDB !== "object" || typeof BDFDB.isLibraryOutdated !== "function" || BDFDB.isLibraryOutdated()) { libraryScript = document.querySelector('head script[src="https://mwittrien.github.io/BetterDiscordAddons/Plugins/BDFDB.js"]'); if (libraryScript) libraryScript.remove(); libraryScript = document.createElement("script"); libraryScript.setAttribute("type", "text/javascript"); libraryScript.setAttribute("src", "https://mwittrien.github.io/BetterDiscordAddons/Plugins/BDFDB.js"); document.head.appendChild(libraryScript); } this.startTimeout = setTimeout(() => {this.initialize();}, 30000); if (typeof BDFDB === "object" && typeof BDFDB.isLibraryOutdated === "function") this.initialize(); else libraryScript.addEventListener("load", () => {this.initialize();}); } initialize () { if (typeof BDFDB === "object") { BDFDB.loadMessage(this); var observer = null; observer = new MutationObserver((changes, _) => { changes.forEach( (change, i) => { if (change.addedNodes) { change.addedNodes.forEach((node) => { if (node && node.tagName && (node.querySelector(BDFDB.dotCN.message) || node.classList.contains(BDFDB.disCN.message))) { this.addDetails(node); } }); } } ); }); BDFDB.addObserver(this, BDFDB.dotCN.messages, {name:"chatWindowObserver",instance:observer}, {childList:true, subtree:true}); observer = new MutationObserver((changes, _) => { changes.forEach( (change, i) => { if (change.removedNodes) { change.removedNodes.forEach((node) => { if (node && $(node).attr("layer-id") == "user-settings" && this.updateDetails) { document.querySelectorAll(".image-details-added").forEach(image => {this.resetImage(image);}); this.addDetails(document); this.updateDetails = false; } }); } } ); }); BDFDB.addObserver(this, BDFDB.dotCN.layers, {name:"settingsWindowObserver",instance:observer}, {childList:true}); this.addDetails(document); } else { console.error(this.getName() + ": Fatal Error: Could not load BD functions!"); } } stop () { if (typeof BDFDB === "object") { document.querySelectorAll(".image-details-added").forEach(image => {this.resetImage(image);}); BDFDB.unloadMessage(this); } } onSwitch () { if (typeof BDFDB === "object") { this.addDetails(document); BDFDB.addObserver(this, BDFDB.dotCN.messages, {name:"chatWindowObserver"}, {childList:true, subtree:true}); } } // begin of own functions updateSettings (settingspanel) { var settings = {}; for (var input of settingspanel.querySelectorAll(BDFDB.dotCN.switchinner)) { settings[input.value] = input.checked; } BDFDB.saveAllData(settings, this, "settings"); this.updateDetails = true; } addDetails (container) { let scroller = document.querySelector(BDFDB.dotCNS.chat + BDFDB.dotCN.messages); if (!container || typeof container.querySelectorAll != "function" || !scroller) return; var settings = BDFDB.getAllData(this, "settings"); container.querySelectorAll(BDFDB.dotCN.messageaccessory + " > " + BDFDB.dotCN.imagewrapper).forEach(image => { var data = this.getImageData(image); if (data) { image.classList.add("image-details-added"); if (!settings.showOnHover) { $(`
${data.filename}
`).insertBefore(image).append(image); scroller.scrollTop += image.parentElement.getBoundingClientRect().height - image.getBoundingClientRect().height; } else { $(image).on("mouseenter." + this.getName(), () => { BDFDB.createTooltip(`
${data.filename}
${BDFDB.formatBytes(data.size)}
${data.width}x${data.height}px
`, image, {type:"right", html:true, selector:"image-details-tooltip"}); }); } } }); } resetImage (image) { image.classList.remove("image-details-added"); $(image).off("." + this.getName()); var wrapper = image.parentElement; if (wrapper.classList.contains("image-details-wrapper")) { wrapper.parentElement.insertBefore(image, wrapper); wrapper.remove(); } } getImageData (attachment) { var messageInfo = BDFDB.getKeyInformation({"node":attachment,"key":"message","up":true,"time":1000}); if (messageInfo) { var message = null, temp = attachment; while (message == null || temp.parentElement) { temp = temp.parentElement; if (temp.classList && temp.classList.contains(BDFDB.disCN.message)) message = temp; } if (message) { var pos = $(message).find(BDFDB.dotCN.imagewrapper).index(attachment); var info = messageInfo.attachments; if (info && pos > -1) info = info[pos]; return info; } } } }