2019-01-31 17:06:48 +01:00
//META{"name":"ShowImageDetails","website":"https://github.com/mwittrien/BetterDiscordAddons/tree/master/Plugins/ShowImageDetails","source":"https://raw.githubusercontent.com/mwittrien/BetterDiscordAddons/master/Plugins/ShowImageDetails/ShowImageDetails.plugin.js"}*//
2018-10-11 10:21:26 +02:00
class ShowImageDetails {
2019-01-17 23:48:29 +01:00
getName ( ) { return "ShowImageDetails" ; }
getVersion ( ) { return "1.1.2" ; }
getAuthor ( ) { return "DevilBro" ; }
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." ; }
2019-01-26 22:45:19 +01:00
2018-10-11 10:21:26 +02:00
initConstructor ( ) {
2019-01-03 12:35:11 +01:00
this . patchModules = {
"LazyImageZoomable" : "componentDidMount" ,
"StandardSidebarView" : "componentWillUnmount"
} ;
2019-01-26 22:45:19 +01:00
2018-10-11 10:21:26 +02:00
this . css = `
. image - details . image - details - size {
margin : 0 10 px ;
}
. image - details - tooltip {
max - width : 500 px ;
}
. image - details - tooltip . image - details - tooltip - size {
margin : 10 px 0 ;
}
` ;
2019-01-26 22:45:19 +01:00
2018-10-11 10:21:26 +02:00
this . defaults = {
settings : {
showOnHover : { value : false , description : "Show the details as Tooltip instead:" }
2018-11-25 11:14:48 +01:00
} ,
amounts : {
hoverDelay : { value : 0 , description : "Tooltip delay in millisec:" }
2018-10-11 10:21:26 +02:00
}
} ;
}
2019-01-26 22:45:19 +01:00
2018-10-11 10:21:26 +02:00
getSettingsPanel ( ) {
2019-01-22 11:28:32 +01:00
if ( ! global . BDFDB || typeof BDFDB != "object" || ! BDFDB . loaded || ! this . started ) return ;
2019-01-03 14:53:32 +01:00
let settings = BDFDB . getAllData ( this , "settings" ) ;
let amounts = BDFDB . getAllData ( this , "amounts" ) ;
2019-01-24 13:37:08 +01:00
let settingshtml = ` <div class=" ${ this . name } -settings DevilBro-settings"><div class=" ${ BDFDB . disCNS . titledefault + BDFDB . disCNS . title + BDFDB . disCNS . size18 + BDFDB . disCNS . height24 + BDFDB . disCNS . weightnormal + BDFDB . disCN . marginbottom8 } "> ${ this . name } </div><div class="DevilBro-settings-inner"> ` ;
2018-10-11 10:21:26 +02:00
for ( let key in settings ) {
2019-01-17 23:48:29 +01:00
settingshtml += ` <div class=" ${ BDFDB . disCNS . flex + BDFDB . disCNS . flex2 + BDFDB . disCNS . horizontal + BDFDB . disCNS . horizontal2 + BDFDB . disCNS . directionrow + BDFDB . disCNS . justifystart + BDFDB . disCNS . aligncenter + BDFDB . disCNS . nowrap + BDFDB . disCN . marginbottom8 } " style="flex: 1 1 auto;"><h3 class=" ${ BDFDB . disCNS . titledefault + BDFDB . disCNS . title + BDFDB . disCNS . marginreset + BDFDB . disCNS . weightmedium + BDFDB . disCNS . size16 + BDFDB . disCNS . height24 + BDFDB . disCN . flexchild } " style="flex: 1 1 auto;"> ${ this . defaults . settings [ key ] . description } </h3><div class=" ${ BDFDB . disCNS . flexchild + BDFDB . disCNS . switchenabled + BDFDB . disCNS . switch + BDFDB . disCNS . switchvalue + BDFDB . disCNS . switchsizedefault + BDFDB . disCNS . switchsize + BDFDB . disCN . switchthemedefault } " style="flex: 0 0 auto;"><input type="checkbox" value="settings ${ key } " class=" ${ BDFDB . disCNS . switchinnerenabled + BDFDB . disCN . switchinner } settings-switch" ${ settings [ key ] ? " checked" : "" } ></div></div> ` ;
2018-10-11 10:21:26 +02:00
}
2018-11-25 11:14:48 +01:00
for ( let key in amounts ) {
2019-01-09 14:09:26 +01:00
settingshtml += ` <div class=" ${ BDFDB . disCNS . flex + BDFDB . disCNS . flex2 + BDFDB . disCNS . horizontal + BDFDB . disCNS . horizontal2 + BDFDB . disCNS . directionrow + BDFDB . disCNS . justifystart + BDFDB . disCNS . aligncenter + BDFDB . disCNS . nowrap + BDFDB . disCN . marginbottom8 } " style="flex: 1 1 auto;"><h3 class=" ${ BDFDB . disCNS . titledefault + BDFDB . disCNS . title + BDFDB . disCNS . weightmedium + BDFDB . disCNS . size16 + BDFDB . disCN . flexchild } " style="flex: 0 0 50%;"> ${ this . defaults . amounts [ key ] . description } </h3><div class=" ${ BDFDB . disCN . inputwrapper } inputNumberWrapper ${ BDFDB . disCNS . vertical + BDFDB . disCNS . flex + BDFDB . disCNS . directioncolumn } " style="flex: 1 1 auto;"><span class="numberinput-buttons-zone"><span class="numberinput-button-up"></span><span class="numberinput-button-down"></span></span><input type="number" min="0" option=" ${ key } " value=" ${ amounts [ key ] } " class=" ${ BDFDB . disCNS . inputdefault + BDFDB . disCNS . input + BDFDB . disCN . size16 } amountInput"></div></div> ` ;
2018-11-25 11:14:48 +01:00
}
2018-10-11 10:21:26 +02:00
settingshtml += ` </div></div> ` ;
2019-01-26 22:45:19 +01:00
2019-01-17 23:48:29 +01:00
let settingspanel = BDFDB . htmlToElement ( settingshtml ) ;
2018-10-11 10:21:26 +02:00
2019-01-17 23:48:29 +01:00
BDFDB . initElements ( settingspanel , this ) ;
2018-10-11 10:21:26 +02:00
2019-01-17 23:48:29 +01:00
BDFDB . addEventListener ( this , settingspanel , "input" , ".amountInput" , e => {
let input = parseInt ( e . currentTarget . value ) ;
if ( ! isNaN ( input ) && input > - 1 ) BDFDB . saveData ( e . currentTarget . getAttribute ( "option" ) , input , this , "amounts" ) ;
} ) ;
2019-01-26 22:45:19 +01:00
2018-10-11 10:21:26 +02:00
return settingspanel ;
}
//legacy
load ( ) { }
start ( ) {
2019-02-04 09:13:15 +01:00
if ( ! global . BDFDB ) global . BDFDB = { myPlugins : { } } ;
if ( global . BDFDB && global . BDFDB . myPlugins && typeof global . BDFDB . myPlugins == "object" ) global . BDFDB . myPlugins [ this . getName ( ) ] = this ;
2019-01-17 23:48:29 +01:00
var libraryScript = document . querySelector ( 'head script[src="https://mwittrien.github.io/BetterDiscordAddons/Plugins/BDFDB.js"]' ) ;
if ( ! libraryScript || performance . now ( ) - libraryScript . getAttribute ( "date" ) > 600000 ) {
2018-10-11 10:21:26 +02:00
if ( libraryScript ) libraryScript . remove ( ) ;
libraryScript = document . createElement ( "script" ) ;
libraryScript . setAttribute ( "type" , "text/javascript" ) ;
libraryScript . setAttribute ( "src" , "https://mwittrien.github.io/BetterDiscordAddons/Plugins/BDFDB.js" ) ;
2019-01-17 23:48:29 +01:00
libraryScript . setAttribute ( "date" , performance . now ( ) ) ;
2019-01-30 21:23:49 +01:00
libraryScript . addEventListener ( "load" , ( ) => { if ( global . BDFDB && typeof BDFDB === "object" && BDFDB . loaded ) this . initialize ( ) ; } ) ;
2018-10-11 10:21:26 +02:00
document . head . appendChild ( libraryScript ) ;
}
2019-01-17 23:48:29 +01:00
else if ( global . BDFDB && typeof BDFDB === "object" && BDFDB . loaded ) this . initialize ( ) ;
2018-10-11 10:21:26 +02:00
this . startTimeout = setTimeout ( ( ) => { this . initialize ( ) ; } , 30000 ) ;
}
initialize ( ) {
2019-01-17 23:48:29 +01:00
if ( global . BDFDB && typeof BDFDB === "object" && BDFDB . loaded ) {
2019-01-22 11:05:54 +01:00
if ( this . started ) return ;
2018-10-11 10:21:26 +02:00
BDFDB . loadMessage ( this ) ;
2019-01-26 22:45:19 +01:00
2019-01-03 12:35:11 +01:00
BDFDB . WebModules . forceAllUpdates ( this ) ;
2018-10-11 10:21:26 +02:00
}
else {
2019-01-24 13:37:08 +01:00
console . error ( ` %c[ ${ this . name } ]%c ` , 'color: #3a71c1; font-weight: 700;' , '' , 'Fatal Error: Could not load BD functions!' ) ;
2018-10-11 10:21:26 +02:00
}
}
stop ( ) {
2019-01-17 23:48:29 +01:00
if ( global . BDFDB && typeof BDFDB === "object" && BDFDB . loaded ) {
2019-01-03 14:53:32 +01:00
document . querySelectorAll ( ".image-details-added" ) . forEach ( image => { this . resetImage ( image ) ; } ) ;
2019-01-26 22:45:19 +01:00
2018-10-11 10:21:26 +02:00
BDFDB . unloadMessage ( this ) ;
}
}
2019-01-26 22:45:19 +01:00
2018-10-11 10:21:26 +02:00
// begin of own functions
2019-01-26 22:45:19 +01:00
2019-01-03 14:53:32 +01:00
resetImage ( image ) {
2019-01-17 23:48:29 +01:00
BDFDB . removeClass ( image , "image-details-added" ) ;
image . removeEventListener ( "mouseenter" , image . mouseenterShowImageDetails ) ;
2019-01-03 14:53:32 +01:00
let wrapper = image . parentElement ;
2019-01-17 23:48:29 +01:00
if ( BDFDB . containsClass ( wrapper , "image-details-wrapper" ) ) {
2019-01-03 14:53:32 +01:00
wrapper . parentElement . insertBefore ( image , wrapper ) ;
2019-01-03 12:35:11 +01:00
wrapper . remove ( ) ;
}
}
2019-01-26 22:45:19 +01:00
2019-01-03 14:53:32 +01:00
processLazyImageZoomable ( instance , image ) {
2019-01-17 23:48:29 +01:00
let attachment = BDFDB . getReactValue ( instance , "_reactInternalFiber.return.return.memoizedProps.attachment" ) ;
if ( attachment && ! attachment . filename . endsWith ( ".bdemote.png" ) && ! attachment . filename . endsWith ( ".bdemote.gif" ) ) {
BDFDB . addClass ( image , "image-details-added" ) ;
image . removeEventListener ( "mouseenter" , image . mouseenterShowImageDetails ) ;
if ( BDFDB . getData ( "showOnHover" , this , "settings" ) ) {
image . mouseenterShowImageDetails = ( ) => {
BDFDB . createTooltip ( ` <div class="image-details-tooltip-name"> ${ attachment . filename } </div><div class="image-details-tooltip-size"> ${ BDFDB . formatBytes ( attachment . size ) } </div><div class="image-details-tooltip-dimensions"> ${ attachment . width } x ${ attachment . height } px</div> ` , image , { type : "right" , html : true , selector : "image-details-tooltip" , delay : BDFDB . getData ( "hoverDelay" , this , "amounts" ) } ) ;
} ;
image . addEventListener ( "mouseenter" , image . mouseenterShowImageDetails ) ;
}
else {
let imagedetailswrapper = BDFDB . htmlToElement ( ` <div class="image-details-wrapper"><div class="image-details"><a class=" ${ BDFDB . disCNS . anchor + BDFDB . disCN . anchorunderlineonhover } image-details-link" title=" ${ attachment . url } " href=" ${ attachment . url } " target="_blank" rel="noreferrer noopener"> ${ attachment . filename } </a><label class="image-details-size ${ BDFDB . disCNS . description + BDFDB . disCNS . formtext + BDFDB . disCNS . note + BDFDB . disCNS . modedefault + BDFDB . disCN . primary } "> ${ BDFDB . formatBytes ( attachment . size ) } </label><label class="image-details-dimensions ${ BDFDB . disCNS . description + BDFDB . disCNS . formtext + BDFDB . disCNS . note + BDFDB . disCNS . modedefault + BDFDB . disCN . primary } "> ${ attachment . width } x ${ attachment . height } px</label></div></div> ` ) ;
image . parentElement . insertBefore ( imagedetailswrapper , image ) ;
imagedetailswrapper . appendChild ( image ) ;
let scroller = BDFDB . getParentEle ( BDFDB . dotCN . messages , image ) ;
if ( scroller ) scroller . scrollTop += BDFDB . getRects ( imagedetailswrapper ) . height - BDFDB . getRects ( image ) . height ;
2018-10-11 10:21:26 +02:00
}
}
}
2019-01-26 22:45:19 +01:00
2019-01-03 14:53:32 +01:00
processStandardSidebarView ( instance ) {
2019-01-17 23:48:29 +01:00
if ( this . SettingsUpdated ) {
delete this . SettingsUpdated ;
2019-01-03 14:53:32 +01:00
document . querySelectorAll ( ".image-details-added" ) . forEach ( image => { this . resetImage ( image ) ; } ) ;
2019-01-03 12:35:11 +01:00
BDFDB . WebModules . forceAllUpdates ( this ) ;
2018-10-11 10:21:26 +02:00
}
}
}