Edit File by line

import '../../scss/resize-detection.scss';

[0] Fix | Delete

[1] Fix | Delete

/**

[2] Fix | Delete

* Image resize detection (IRD).

[3] Fix | Delete

[4] Fix | Delete

* Show all wrongly scaled images with a highlighted border and resize box.

[5] Fix | Delete

[6] Fix | Delete

* Made in pure JS.

[7] Fix | Delete

* DO NOT ADD JQUERY SUPPORT!!!

[8] Fix | Delete

[9] Fix | Delete

* @since 2.9

[10] Fix | Delete

[11] Fix | Delete

( function() {

[12] Fix | Delete

'use strict';

[13] Fix | Delete

[14] Fix | Delete

const SmushIRS = {

[15] Fix | Delete

bar: document.getElementById( 'smush-image-bar' ),

[16] Fix | Delete

toggle: document.getElementById( 'smush-image-bar-toggle' ),

[17] Fix | Delete

images: {

[18] Fix | Delete

bigger: [],

[19] Fix | Delete

smaller: [],

[20] Fix | Delete

[21] Fix | Delete

strings: window.wp_smush_resize_vars,

[22] Fix | Delete

[23] Fix | Delete

/**

[24] Fix | Delete

* Init scripts.

[25] Fix | Delete

[26] Fix | Delete

init() {

[27] Fix | Delete

/**

[28] Fix | Delete

* Make sure these are set, before we proceed.

[29] Fix | Delete

[30] Fix | Delete

if ( ! this.bar ) {

[31] Fix | Delete

this.bar = document.getElementById( 'smush-image-bar' );

[32] Fix | Delete

}

[33] Fix | Delete

if ( ! this.toggle ) {

[34] Fix | Delete

this.toggle = document.getElementById(

[35] Fix | Delete

'smush-image-bar-toggle'

[36] Fix | Delete

);

[37] Fix | Delete

}

[38] Fix | Delete

[39] Fix | Delete

this.process();

[40] Fix | Delete

[41] Fix | Delete

// Register the event handler after everything is done.

[42] Fix | Delete

this.toggle.addEventListener(

[43] Fix | Delete

'click',

[44] Fix | Delete

this.handleToggleClick.bind( this )

[45] Fix | Delete

);

[46] Fix | Delete

[47] Fix | Delete

[48] Fix | Delete

/**

[49] Fix | Delete

* Do image processing.

[50] Fix | Delete

[51] Fix | Delete

process() {

[52] Fix | Delete

const icon = this.toggle.querySelector( 'i' );

[53] Fix | Delete

[54] Fix | Delete

icon.classList.add( 'sui-icon-loader' );

[55] Fix | Delete

icon.classList.remove( 'sui-icon-info' );

[56] Fix | Delete

[57] Fix | Delete

this.detectImages();

[58] Fix | Delete

[59] Fix | Delete

if ( ! this.images.bigger.length && ! this.images.smaller.length ) {

[60] Fix | Delete

this.toggle.classList.add( 'smush-toggle-success' );

[61] Fix | Delete

document.getElementById(

[62] Fix | Delete

'smush-image-bar-notice'

[63] Fix | Delete

).style.display = 'block';

[64] Fix | Delete

document.getElementById(

[65] Fix | Delete

'smush-image-bar-notice-desc'

[66] Fix | Delete

).style.display = 'none';

[67] Fix | Delete

} else {

[68] Fix | Delete

this.toggle.classList.remove( 'smush-toggle-success' );

[69] Fix | Delete

document.getElementById(

[70] Fix | Delete

'smush-image-bar-notice'

[71] Fix | Delete

).style.display = 'none';

[72] Fix | Delete

document.getElementById(

[73] Fix | Delete

'smush-image-bar-notice-desc'

[74] Fix | Delete

).style.display = 'block';

[75] Fix | Delete

this.generateMarkup( 'bigger' );

[76] Fix | Delete

this.generateMarkup( 'smaller' );

[77] Fix | Delete

}

[78] Fix | Delete

[79] Fix | Delete

this.toggleDivs();

[80] Fix | Delete

[81] Fix | Delete

icon.classList.remove( 'sui-icon-loader' );

[82] Fix | Delete

icon.classList.add( 'sui-icon-info' );

[83] Fix | Delete

[84] Fix | Delete

[85] Fix | Delete

/**

[86] Fix | Delete

* Various checks to see if the image should be processed.

[87] Fix | Delete

[88] Fix | Delete

* @param {Object} image

[89] Fix | Delete

* @return {boolean} Should skip image or not.

[90] Fix | Delete

[91] Fix | Delete

shouldSkipImage( image ) {

[92] Fix | Delete

// Skip avatars.

[93] Fix | Delete

if ( image.classList.contains( 'avatar' ) ) {

[94] Fix | Delete

return true;

[95] Fix | Delete

}

[96] Fix | Delete

[97] Fix | Delete

// Skip images from Smush CDN with auto-resize feature.

[98] Fix | Delete

if (

[99] Fix | Delete

'string' === typeof image.getAttribute( 'no-resize-detection' )

[100] Fix | Delete

) {

[101] Fix | Delete

return true;

[102] Fix | Delete

}

[103] Fix | Delete

[104] Fix | Delete

// Skip 1x1px images.

[105] Fix | Delete

if (

[106] Fix | Delete

image.clientWidth === image.clientHeight &&

[107] Fix | Delete

1 === image.clientWidth

[108] Fix | Delete

) {

[109] Fix | Delete

return true;

[110] Fix | Delete

}

[111] Fix | Delete

[112] Fix | Delete

// Skip 1x1px placeholders.

[113] Fix | Delete

if (

[114] Fix | Delete

image.naturalWidth === image.naturalHeight &&

[115] Fix | Delete

1 === image.naturalWidth

[116] Fix | Delete

) {

[117] Fix | Delete

return true;

[118] Fix | Delete

}

[119] Fix | Delete

[120] Fix | Delete

// If width attribute is not set, do not continue.

[121] Fix | Delete

return null === image.clientWidth || null === image.clientHeight;

[122] Fix | Delete

[123] Fix | Delete

[124] Fix | Delete

/**

[125] Fix | Delete

* Get tooltip text.

[126] Fix | Delete

[127] Fix | Delete

* @param {Object} props

[128] Fix | Delete

* @return {string} Tooltip.

[129] Fix | Delete

[130] Fix | Delete

getTooltipText( props ) {

[131] Fix | Delete

let tooltipText = '';

[132] Fix | Delete

[133] Fix | Delete

if ( props.bigger_width || props.bigger_height ) {

[134] Fix | Delete

/** @param {string} strings.large_image */

[135] Fix | Delete

tooltipText = this.strings.large_image;

[136] Fix | Delete

} else if ( props.smaller_width || props.smaller_height ) {

[137] Fix | Delete

/** @param {string} strings.small_image */

[138] Fix | Delete

tooltipText = this.strings.small_image;

[139] Fix | Delete

}

[140] Fix | Delete

[141] Fix | Delete

return tooltipText

[142] Fix | Delete

.replace( 'width', props.real_width )

[143] Fix | Delete

.replace( 'height', props.real_height );

[144] Fix | Delete

[145] Fix | Delete

[146] Fix | Delete

/**

[147] Fix | Delete

* Generate markup.

[148] Fix | Delete

[149] Fix | Delete

* @param {string} type Accepts: 'bigger' or 'smaller'.

[150] Fix | Delete

[151] Fix | Delete

generateMarkup( type ) {

[152] Fix | Delete

this.images[ type ].forEach( ( image, index ) => {

[153] Fix | Delete

const item = document.createElement( 'div' ),

[154] Fix | Delete

tooltip = this.getTooltipText( image.props );

[155] Fix | Delete

[156] Fix | Delete

item.setAttribute(

[157] Fix | Delete

'class',

[158] Fix | Delete

'smush-resize-box smush-tooltip smush-tooltip-constrained'

[159] Fix | Delete

);

[160] Fix | Delete

item.setAttribute( 'data-tooltip', tooltip );

[161] Fix | Delete

item.setAttribute( 'data-image', image.class );

[162] Fix | Delete

item.addEventListener( 'click', ( e ) =>

[163] Fix | Delete

this.highlightImage( e )

[164] Fix | Delete

);

[165] Fix | Delete

[166] Fix | Delete

item.innerHTML = `

[167] Fix | Delete

[168] Fix | Delete

<span>${ index + 1 }</span>

[169] Fix | Delete

<span class="smush-tag">${ image.props.computed_width } x ${ image.props.computed_height }px</span>

[170] Fix | Delete

[171] Fix | Delete

<span class="smush-tag smush-tag-success">${ image.props.real_width } × ${ image.props.real_height }px</span>

[172] Fix | Delete

</div>

[173] Fix | Delete

<div class="smush-image-description">${ tooltip }</div>

[174] Fix | Delete

[175] Fix | Delete

[176] Fix | Delete

document

[177] Fix | Delete

.getElementById( 'smush-image-bar-items-' + type )

[178] Fix | Delete

.appendChild( item );

[179] Fix | Delete

} );

[180] Fix | Delete

[181] Fix | Delete

[182] Fix | Delete

/**

[183] Fix | Delete

* Show/hide sections based on images.

[184] Fix | Delete

[185] Fix | Delete

toggleDivs() {

[186] Fix | Delete

const types = [ 'bigger', 'smaller' ];

[187] Fix | Delete

types.forEach( ( type ) => {

[188] Fix | Delete

const div = document.getElementById(

[189] Fix | Delete

'smush-image-bar-items-' + type

[190] Fix | Delete

);

[191] Fix | Delete

if ( 0 === this.images[ type ].length ) {

[192] Fix | Delete

div.style.display = 'none';

[193] Fix | Delete

} else {

[194] Fix | Delete

div.style.display = 'block';

[195] Fix | Delete

}

[196] Fix | Delete

} );

[197] Fix | Delete

[198] Fix | Delete

[199] Fix | Delete

/**

[200] Fix | Delete

* Scroll the selected image into view and highlight it.

[201] Fix | Delete

[202] Fix | Delete

* @param {Object} e

[203] Fix | Delete

[204] Fix | Delete

highlightImage( e ) {

[205] Fix | Delete

this.removeSelection();

[206] Fix | Delete

[207] Fix | Delete

const el = document.getElementsByClassName(

[208] Fix | Delete

e.currentTarget.dataset.image

[209] Fix | Delete

);

[210] Fix | Delete

if ( 'undefined' !== typeof el[ 0 ] ) {

[211] Fix | Delete

// Display description box.

[212] Fix | Delete

e.currentTarget.classList.toggle( 'show-description' );

[213] Fix | Delete

[214] Fix | Delete

// Scroll and flash image.

[215] Fix | Delete

el[ 0 ].scrollIntoView( {

[216] Fix | Delete

behavior: 'smooth',

[217] Fix | Delete

block: 'center',

[218] Fix | Delete

inline: 'nearest',

[219] Fix | Delete

} );

[220] Fix | Delete

el[ 0 ].style.opacity = '0.5';

[221] Fix | Delete

setTimeout( () => {

[222] Fix | Delete

el[ 0 ].style.opacity = '1';

[223] Fix | Delete

}, 1000 );

[224] Fix | Delete

}

[225] Fix | Delete

[226] Fix | Delete

[227] Fix | Delete

/**

[228] Fix | Delete

* Handle click on the toggle item.

[229] Fix | Delete

[230] Fix | Delete

handleToggleClick() {

[231] Fix | Delete

this.bar.classList.toggle( 'closed' );

[232] Fix | Delete

this.toggle.classList.toggle( 'closed' );

[233] Fix | Delete

this.removeSelection();

[234] Fix | Delete

[235] Fix | Delete

[236] Fix | Delete

/**

[237] Fix | Delete

* Remove selected items.

[238] Fix | Delete

[239] Fix | Delete

removeSelection() {

[240] Fix | Delete

const items = document.getElementsByClassName( 'show-description' );

[241] Fix | Delete

if ( items.length > 0 ) {

[242] Fix | Delete

Array.from( items ).forEach( ( div ) =>

[243] Fix | Delete

div.classList.remove( 'show-description' )

[244] Fix | Delete

);

[245] Fix | Delete

}

[246] Fix | Delete

[247] Fix | Delete

[248] Fix | Delete

/**

[249] Fix | Delete

* Function to highlight all scaled images.

[250] Fix | Delete

[251] Fix | Delete

* Add yellow border and then show one small box to

[252] Fix | Delete

* resize the images as per the required size, on fly.

[253] Fix | Delete

[254] Fix | Delete

detectImages() {

[255] Fix | Delete

const images = document.getElementsByTagName( 'img' );

[256] Fix | Delete

for ( const image of images ) {

[257] Fix | Delete

if ( this.shouldSkipImage( image ) ) {

[258] Fix | Delete

continue;

[259] Fix | Delete

}

[260] Fix | Delete

[261] Fix | Delete

// Get defined width and height.

[262] Fix | Delete

const props = {

[263] Fix | Delete

real_width: image.clientWidth,

[264] Fix | Delete

real_height: image.clientHeight,

[265] Fix | Delete

computed_width: image.naturalWidth,

[266] Fix | Delete

computed_height: image.naturalHeight,

[267] Fix | Delete

bigger_width: image.clientWidth * 1.5 < image.naturalWidth,

[268] Fix | Delete

bigger_height:

[269] Fix | Delete

image.clientHeight * 1.5 < image.naturalHeight,

[270] Fix | Delete

smaller_width: image.clientWidth > image.naturalWidth,

[271] Fix | Delete

smaller_height: image.clientHeight > image.naturalHeight,

[272] Fix | Delete

};

[273] Fix | Delete

[274] Fix | Delete

// In case image is in correct size, do not continue.

[275] Fix | Delete

if (

[276] Fix | Delete

! props.bigger_width &&

[277] Fix | Delete

! props.bigger_height &&

[278] Fix | Delete

! props.smaller_width &&

[279] Fix | Delete

! props.smaller_height

[280] Fix | Delete

) {

[281] Fix | Delete

continue;

[282] Fix | Delete

}

[283] Fix | Delete

[284] Fix | Delete

const imgType =

[285] Fix | Delete

props.bigger_width || props.bigger_height

[286] Fix | Delete

? 'bigger'

[287] Fix | Delete

: 'smaller',

[288] Fix | Delete

imageClass =

[289] Fix | Delete

'smush-image-' + ( this.images[ imgType ].length + 1 );

[290] Fix | Delete

[291] Fix | Delete

// Fill the images arrays.

[292] Fix | Delete

this.images[ imgType ].push( {

[293] Fix | Delete

src: image,

[294] Fix | Delete

props,

[295] Fix | Delete

class: imageClass,

[296] Fix | Delete

} );

[297] Fix | Delete

[298] Fix | Delete

/**

[299] Fix | Delete

* Add class to original image.

[300] Fix | Delete

* Can't add two classes in single add(), because no support in IE11.

[301] Fix | Delete

* image.classList.add('smush-detected-img', imageClass);

[302] Fix | Delete

[303] Fix | Delete

image.classList.add( 'smush-detected-img' );

[304] Fix | Delete

image.classList.add( imageClass );

[305] Fix | Delete

}

[306] Fix | Delete

}, // End detectImages()

[307] Fix | Delete

[308] Fix | Delete

/**

[309] Fix | Delete

* Allows refreshing the list. A good way is to refresh on lazyload actions.

[310] Fix | Delete

[311] Fix | Delete

* @since 3.6.0

[312] Fix | Delete

[313] Fix | Delete

refresh() {

[314] Fix | Delete

// Clear out classes on DOM.

[315] Fix | Delete

for ( let id in this.images.bigger ) {

[316] Fix | Delete

if ( this.images.bigger.hasOwnProperty( id ) ) {

[317] Fix | Delete

this.images.bigger[ id ].src.classList.remove(

[318] Fix | Delete

'smush-detected-img'

[319] Fix | Delete

);

[320] Fix | Delete

this.images.bigger[ id ].src.classList.remove(

[321] Fix | Delete

'smush-image-' + ++id

[322] Fix | Delete

);

[323] Fix | Delete

}

[324] Fix | Delete

}

[325] Fix | Delete

[326] Fix | Delete

for ( let id in this.images.smaller ) {

[327] Fix | Delete

if ( this.images.smaller.hasOwnProperty( id ) ) {

[328] Fix | Delete

this.images.smaller[ id ].src.classList.remove(

[329] Fix | Delete

'smush-detected-img'

[330] Fix | Delete

);

[331] Fix | Delete

this.images.smaller[ id ].src.classList.remove(

[332] Fix | Delete

'smush-image-' + ++id

[333] Fix | Delete

);

[334] Fix | Delete

}

[335] Fix | Delete

}

[336] Fix | Delete

[337] Fix | Delete

this.images = {

[338] Fix | Delete

bigger: [],

[339] Fix | Delete

smaller: [],

[340] Fix | Delete

};

[341] Fix | Delete

[342] Fix | Delete

// This might be overkill - there will probably never be a situation when there are less images than on

[343] Fix | Delete

// initial page load.

[344] Fix | Delete

const elements = document.getElementsByClassName(

[345] Fix | Delete

'smush-resize-box'

[346] Fix | Delete

);

[347] Fix | Delete

while ( elements.length > 0 ) {

[348] Fix | Delete

elements[ 0 ].remove();

[349] Fix | Delete

}

[350] Fix | Delete

[351] Fix | Delete

this.process();

[352] Fix | Delete

[353] Fix | Delete

}; // End WP_Smush_IRS

[354] Fix | Delete

[355] Fix | Delete

/**

[356] Fix | Delete

* After page load, initialize toggle event.

[357] Fix | Delete

[358] Fix | Delete

window.addEventListener( 'DOMContentLoaded', () => SmushIRS.init() );

[359] Fix | Delete

window.addEventListener( 'lazyloaded', () => SmushIRS.refresh() );

[360] Fix | Delete

}() );

[361] Fix | Delete

[362] Fix | Delete