Merged in feature/from-pantheon (pull request #16)
code from pantheon * code from pantheon
This commit is contained in:
Tony Volpe
708
wp/wp-content/plugins/imagify/assets/js/jquery.twentytwenty.js
Normal file
708
wp/wp-content/plugins/imagify/assets/js/jquery.twentytwenty.js
Normal file
@@ -0,0 +1,708 @@
|
||||
(function($, d, w, undefined) { // eslint-disable-line no-unused-vars, no-shadow, no-shadow-restricted-names
|
||||
|
||||
$.fn.twentytwenty = function( options, callback ) {
|
||||
options = $.extend( {
|
||||
handlePosition: 0.5,
|
||||
orientation: 'horizontal',
|
||||
labelBefore: 'Before',
|
||||
labelAfter: 'After'
|
||||
}, options );
|
||||
|
||||
return this.each( function() {
|
||||
var sliderPct = options.handlePosition,
|
||||
$container = $( this ),
|
||||
sliderOrientation = options.orientation,
|
||||
beforeDirection = ( 'vertical' === sliderOrientation ) ? 'down' : 'left',
|
||||
afterDirection = ( 'vertical' === sliderOrientation ) ? 'up' : 'right',
|
||||
$beforeImg = $container.find( 'img:first' ),
|
||||
$afterImg = $container.find( 'img:last' ),
|
||||
offsetX = 0,
|
||||
offsetY = 0,
|
||||
imgWidth = 0,
|
||||
imgHeight = 0,
|
||||
$slider, $overlay,
|
||||
calcOffset = function( dimensionPct ) {
|
||||
var width = parseInt( $beforeImg.width(), 10 ),
|
||||
height = parseInt( $beforeImg.height(), 10 );
|
||||
|
||||
if ( ! width || ! height ) {
|
||||
width = parseInt( $beforeImg.attr( 'width' ), 10 );
|
||||
height = parseInt( $beforeImg.attr( 'height' ), 10 );
|
||||
}
|
||||
|
||||
return {
|
||||
w: width + "px",
|
||||
h: height + "px",
|
||||
cw: ( dimensionPct * width ) + "px",
|
||||
ch: ( dimensionPct * height ) + "px"
|
||||
};
|
||||
},
|
||||
adjustContainer = function( offset ) {
|
||||
// Make it dynamic, in case the "before" image changes.
|
||||
var $beforeImage = $container.find( '.twentytwenty-before' );
|
||||
|
||||
if ( 'vertical' === sliderOrientation ) {
|
||||
$beforeImage.css( 'clip', 'rect(0,' + offset.w + ',' + offset.ch + ',0)' );
|
||||
} else {
|
||||
$beforeImage.css( 'clip', 'rect(0,' + offset.cw + ',' + offset.h + ',0)' );
|
||||
}
|
||||
|
||||
$container.css( 'height', offset.h );
|
||||
|
||||
if ( typeof callback === 'function' ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
adjustSlider = function( pct ) {
|
||||
var offset = calcOffset( pct );
|
||||
|
||||
if ( 'vertical' === sliderOrientation ) {
|
||||
$slider.css( 'top', offset.ch );
|
||||
} else {
|
||||
$slider.css( 'left', offset.cw );
|
||||
}
|
||||
|
||||
adjustContainer( offset );
|
||||
};
|
||||
|
||||
|
||||
if ( $container.parent( '.twentytwenty-wrapper' ).length ) {
|
||||
$container.unwrap();
|
||||
}
|
||||
$container.wrap( '<div class="twentytwenty-wrapper twentytwenty-' + sliderOrientation + '"></div>' );
|
||||
|
||||
$container.children( '.twentytwenty-overlay, .twentytwenty-handle' ).remove();
|
||||
$container.append( '<div class="twentytwenty-overlay"></div>' );
|
||||
$container.append( '<div class="twentytwenty-handle"></div>' );
|
||||
|
||||
$slider = $container.find( '.twentytwenty-handle' );
|
||||
|
||||
$slider.append( '<span class="twentytwenty-' + beforeDirection + '-arrow"></span>' );
|
||||
$slider.append( '<span class="twentytwenty-' + afterDirection + '-arrow"></span>' );
|
||||
$container.addClass( 'twentytwenty-container' );
|
||||
$beforeImg.addClass( 'twentytwenty-before' );
|
||||
$afterImg.addClass( 'twentytwenty-after' );
|
||||
|
||||
$overlay = $container.find( '.twentytwenty-overlay' );
|
||||
|
||||
$overlay.append( '<div class="twentytwenty-labels twentytwenty-before-label"><span class="twentytwenty-label-content">' + options.labelBefore + '</span></div>' );
|
||||
$overlay.append( '<div class="twentytwenty-labels twentytwenty-after-label"><span class="twentytwenty-label-content">' + options.labelAfter + '</span></div>' );
|
||||
|
||||
$( w ).on( 'resize.twentytwenty', function() {
|
||||
adjustSlider( sliderPct );
|
||||
} );
|
||||
|
||||
$slider.on( 'movestart', function( e ) {
|
||||
if ( 'vertical' !== sliderOrientation && ( ( e.distX > e.distY && e.distX < -e.distY ) || ( e.distX < e.distY && e.distX > -e.distY ) ) ) {
|
||||
e.preventDefault();
|
||||
} else if ( 'vertical' === sliderOrientation && ( ( e.distX < e.distY && e.distX < -e.distY ) || ( e.distX > e.distY && e.distX > -e.distY ) ) ) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
$container.addClass( 'active' );
|
||||
|
||||
offsetX = $container.offset().left;
|
||||
offsetY = $container.offset().top;
|
||||
imgWidth = $beforeImg.width();
|
||||
imgHeight = $beforeImg.height();
|
||||
} );
|
||||
|
||||
$slider.on( 'moveend', function() {
|
||||
$container.removeClass( 'active' );
|
||||
} );
|
||||
|
||||
$slider.on( 'move', function( e ) {
|
||||
if ( $container.hasClass('active') ) {
|
||||
sliderPct = 'vertical' === sliderOrientation ? ( e.pageY - offsetY ) / imgHeight : ( e.pageX - offsetX ) / imgWidth;
|
||||
|
||||
if ( sliderPct < 0 ) {
|
||||
sliderPct = 0;
|
||||
} else if ( sliderPct > 1 ) {
|
||||
sliderPct = 1;
|
||||
}
|
||||
|
||||
adjustSlider( sliderPct );
|
||||
}
|
||||
} );
|
||||
|
||||
$container.find( 'img' ).on( 'mousedown', function( e ) {
|
||||
e.preventDefault();
|
||||
} );
|
||||
|
||||
$( w ).trigger( 'resize.twentytwenty' );
|
||||
} );
|
||||
};
|
||||
|
||||
} )(jQuery, document, window);
|
||||
|
||||
/**
|
||||
* Twentytwenty Imagify Init
|
||||
*/
|
||||
(function($, d, w, undefined) { // eslint-disable-line no-unused-vars, no-shadow, no-shadow-restricted-names
|
||||
|
||||
/*
|
||||
* Mini chart
|
||||
*
|
||||
* @param {element} canvas
|
||||
*/
|
||||
var drawMeAChart = function ( canvas ) {
|
||||
canvas.each( function() {
|
||||
var value = parseInt( $( this ).closest( '.imagify-chart' ).next( '.imagify-chart-value' ).text(), 10 );
|
||||
|
||||
new w.imagify.Chart( this, { // eslint-disable-line no-new
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [ value, 100 - value ],
|
||||
backgroundColor: [ '#00B3D3', '#D8D8D8' ],
|
||||
borderColor: '#2A2E3C',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
events: [],
|
||||
animation: {
|
||||
easing: 'easeOutBounce'
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false
|
||||
},
|
||||
responsive: false,
|
||||
cutoutPercentage: 60
|
||||
}
|
||||
} );
|
||||
} );
|
||||
},
|
||||
/**
|
||||
* Dynamic modal
|
||||
*
|
||||
* @param {object} Parameters to build modal with datas
|
||||
*/
|
||||
imagifyTwentyModal = function( options ) {
|
||||
var defaults = {
|
||||
width: 0, //px
|
||||
height: 0, //px
|
||||
originalUrl: '', //url
|
||||
optimizedUrl: '', //url
|
||||
originalSize: 0, //mb
|
||||
optimizedSize: 0, // mb
|
||||
saving: 0, //percent
|
||||
modalAppendTo: $( 'body' ), // jQuery element
|
||||
trigger: $( '[data-target="imagify-visual-comparison"]' ), // jQuery element (button, link) with data-target="modalId"
|
||||
modalId: 'imagify-visual-comparison', // should be dynamic if multiple modals
|
||||
openModal: false
|
||||
},
|
||||
settings = $.extend( {}, defaults, options ),
|
||||
modalHtml;
|
||||
|
||||
if ( 0 === settings.width || 0 === settings.height || '' === settings.originalUrl || '' === settings.optimizedUrl || 0 === settings.originalSize || 0 === settings.optimizedSize || 0 === settings.saving ) {
|
||||
return 'error';
|
||||
}
|
||||
|
||||
// create modal box
|
||||
modalHtml = '<div id="' + settings.modalId + '" class="imagify-modal imagify-visual-comparison" aria-hidden="true">';
|
||||
/* eslint-disable indent */
|
||||
modalHtml += '<div class="imagify-modal-content loading">';
|
||||
modalHtml += '<div class="twentytwenty-container">';
|
||||
modalHtml += '<img class="imagify-img-before" alt="" width="' + settings.width + '" height="' + settings.height + '">';
|
||||
modalHtml += '<img class="imagify-img-after" alt="" width="' + settings.width + '" height="' + settings.height + '">';
|
||||
modalHtml += '</div>';
|
||||
modalHtml += '<div class="imagify-comparison-levels">';
|
||||
modalHtml += '<div class="imagify-c-level imagify-level-original go-left">';
|
||||
modalHtml += '<p class="imagify-c-level-row">';
|
||||
modalHtml += '<span class="label">' + imagifyTTT.labels.filesize + '</span>';
|
||||
modalHtml += '<span class="value level">' + settings.originalSize + '</span>';
|
||||
modalHtml += '</p>';
|
||||
modalHtml += '</div>';
|
||||
modalHtml += '<div class="imagify-c-level imagify-level-optimized go-right">';
|
||||
modalHtml += '<p class="imagify-c-level-row">';
|
||||
modalHtml += '<span class="label">' + imagifyTTT.labels.filesize + '</span>';
|
||||
modalHtml += '<span class="value level">' + settings.optimizedSize + '</span>';
|
||||
modalHtml += '</p>';
|
||||
modalHtml += '<p class="imagify-c-level-row">';
|
||||
modalHtml += '<span class="label">' + imagifyTTT.labels.saving + '</span>';
|
||||
modalHtml += '<span class="value"><span class="imagify-chart"><span class="imagify-chart-container"><canvas id="imagify-consumption-chart-normal" width="15" height="15"></canvas></span></span><span class="imagify-chart-value">' + settings.saving + '</span>%</span>';
|
||||
modalHtml += '</p>';
|
||||
modalHtml += '</div>';
|
||||
modalHtml += '</div>';
|
||||
modalHtml += '<button class="close-btn absolute" type="button"><i aria-hidden="true" class="dashicons dashicons-no-alt"></i><span class="screen-reader-text">' + imagifyTTT.labels.close + '</span></button>';
|
||||
modalHtml += '</div>';
|
||||
/* eslint-enable indent */
|
||||
modalHtml += '</div>';
|
||||
|
||||
settings.modalAppendTo.append( modalHtml );
|
||||
|
||||
settings.trigger.on( 'click.imagify', function( e ) {
|
||||
var $modal = $( $( this ).data( 'target' ) ),
|
||||
imgsLoaded = 0,
|
||||
$tt, checkLoad;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if ( settings.openModal ) {
|
||||
w.imagify.openModal( $( this ) );
|
||||
}
|
||||
|
||||
$modal.find( '.imagify-modal-content' ).css( {
|
||||
'width': ( $( w ).outerWidth() * 0.85 ) + 'px',
|
||||
'max-width': settings.width
|
||||
} );
|
||||
|
||||
// Load before img.
|
||||
$modal.find( '.imagify-img-before' ).on( 'load', function() {
|
||||
imgsLoaded++;
|
||||
} ).attr( 'src', settings.originalUrl );
|
||||
|
||||
// Load after img.
|
||||
$modal.find( '.imagify-img-after' ).on( 'load', function() {
|
||||
imgsLoaded++;
|
||||
} ).attr( 'src', settings.optimizedUrl + ( settings.optimizedUrl.indexOf( '?' ) > 0 ? '&' : '?' ) + 'v=' + Date.now() );
|
||||
|
||||
$tt = $modal.find( '.twentytwenty-container' );
|
||||
checkLoad = setInterval( function() {
|
||||
if ( 2 !== imgsLoaded ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$tt.twentytwenty( {
|
||||
handlePosition: 0.3,
|
||||
orientation: 'horizontal',
|
||||
labelBefore: imagifyTTT.labels.originalL,
|
||||
labelAfter: imagifyTTT.labels.optimizedL
|
||||
}, function() {
|
||||
var windowH = $( w ).height(),
|
||||
ttH = $modal.find( '.twentytwenty-container' ).height(),
|
||||
ttTop = $modal.find( '.twentytwenty-wrapper' ).position().top,
|
||||
$handle, $labels, $datas, datasH, handlePos, labelsPos;
|
||||
|
||||
if ( ! $tt.closest( '.imagify-modal-content' ).hasClass( 'loaded' ) ) {
|
||||
$tt.closest( '.imagify-modal-content' ).removeClass( 'loading' ).addClass( 'loaded' );
|
||||
drawMeAChart( $modal.find( '.imagify-level-optimized .imagify-chart canvas' ) );
|
||||
}
|
||||
|
||||
// Check if image height is to big.
|
||||
if ( windowH < ttH && ! $modal.hasClass( 'modal-is-too-high' ) ) {
|
||||
$modal.addClass( 'modal-is-too-high' );
|
||||
|
||||
$handle = $modal.find( '.twentytwenty-handle' );
|
||||
$labels = $modal.find( '.twentytwenty-label-content' );
|
||||
$datas = $modal.find( '.imagify-comparison-levels' );
|
||||
datasH = $datas.outerHeight();
|
||||
handlePos = ( windowH - ttTop - $handle.height() ) / 2;
|
||||
labelsPos = ( windowH - ttTop * 3 - datasH );
|
||||
|
||||
$handle.css( {
|
||||
top: handlePos
|
||||
} );
|
||||
$labels.css( {
|
||||
top: labelsPos,
|
||||
bottom: 'auto'
|
||||
} );
|
||||
$modal.find( '.twentytwenty-wrapper' ).css( {
|
||||
paddingBottom: datasH
|
||||
} );
|
||||
$modal.find( '.imagify-modal-content' ).on( 'scroll.imagify', function() {
|
||||
var scrollTop = $( this ).scrollTop();
|
||||
|
||||
$handle.css( {
|
||||
top: handlePos + scrollTop
|
||||
} );
|
||||
$labels.css( {
|
||||
top: labelsPos + scrollTop
|
||||
} );
|
||||
$datas.css( {
|
||||
bottom: -scrollTop
|
||||
} );
|
||||
} );
|
||||
}
|
||||
} );
|
||||
|
||||
clearInterval( checkLoad );
|
||||
checkLoad = null;
|
||||
return 'done';
|
||||
}, 75 );
|
||||
} );
|
||||
}; // imagifyTwentyModal( options );
|
||||
|
||||
|
||||
/**
|
||||
* The complexe visual comparison
|
||||
*/
|
||||
$( '.imagify-visual-comparison-btn' ).on( 'click', function() {
|
||||
var $tt, imgsLoaded, loader,
|
||||
labelOriginal, labelNormal, labelAggressive, labelUltra,
|
||||
originalLabel, originalAlt, originalSrc, originalDim,
|
||||
normalAlt, normalSrc, normalDim,
|
||||
aggressiveAlt, aggressiveSrc, aggressiveDim,
|
||||
ultraLabel, ultraAlt, ultraSrc, ultraDim,
|
||||
ttBeforeButtons, ttAfterButtons, image50, twentyMe;
|
||||
|
||||
if ( $( '.twentytwenty-wrapper' ).length === 1 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$( $( this ).data( 'target' ) ).find( '.imagify-modal-content' ).css( 'width', ( $( w ).outerWidth() * 0.95 ) + 'px' );
|
||||
|
||||
if ( $( '.twentytwenty-container' ).length > 0 && $( w ).outerWidth() <= 800 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$tt = $( '.twentytwenty-container' );
|
||||
imgsLoaded = 0;
|
||||
loader = $tt.data( 'loader' );
|
||||
labelOriginal = $tt.data( 'label-original' );
|
||||
labelNormal = $tt.data( 'label-normal' );
|
||||
labelAggressive = $tt.data( 'label-aggressive' );
|
||||
labelUltra = $tt.data( 'label-ultra' );
|
||||
|
||||
originalLabel = $tt.data( 'original-label' ).replace( /\*\*/, '<strong>' ).replace( /\*\*/, '</strong>' );
|
||||
originalAlt = $tt.data( 'original-alt' );
|
||||
originalSrc = $tt.data( 'original-img' );
|
||||
originalDim = $tt.data( 'original-dim' ).split( 'x' );
|
||||
|
||||
normalAlt = $tt.data( 'normal-alt' );
|
||||
normalSrc = $tt.data( 'normal-img' );
|
||||
normalDim = $tt.data( 'normal-dim' ).split( 'x' );
|
||||
|
||||
aggressiveAlt = $tt.data( 'aggressive-alt' );
|
||||
aggressiveSrc = $tt.data( 'aggressive-img' );
|
||||
aggressiveDim = $tt.data( 'aggressive-dim' ).split( 'x' );
|
||||
|
||||
ultraLabel = $tt.data( 'ultra-label' ).replace( /\*\*/, '<strong>' ).replace( /\*\*/, '</strong>' );
|
||||
ultraAlt = $tt.data( 'ultra-alt' );
|
||||
ultraSrc = $tt.data( 'ultra-img' );
|
||||
ultraDim = $tt.data( 'ultra-dim' ).split( 'x' );
|
||||
|
||||
ttBeforeButtons = '<span class="twentytwenty-duo-buttons twentytwenty-duo-left">';
|
||||
/* eslint-disable indent */
|
||||
ttBeforeButtons += '<button type="button" class="imagify-comparison-original selected" data-img="original">' + labelOriginal + '</button>';
|
||||
ttBeforeButtons += '<button type="button" class="imagify-comparison-normal" data-img="normal">' + labelNormal + '</button>';
|
||||
ttBeforeButtons += '<button type="button" class="imagify-comparison-aggressive" data-img="aggressive">' + labelAggressive + '</button>';
|
||||
/* eslint-enable indent */
|
||||
ttBeforeButtons += '</span>';
|
||||
ttAfterButtons = '<span class="twentytwenty-duo-buttons twentytwenty-duo-right">';
|
||||
/* eslint-disable indent */
|
||||
ttAfterButtons += '<button type="button" class="imagify-comparison-normal" data-img="normal">' + labelNormal + '</button>';
|
||||
ttAfterButtons += '<button type="button" class="imagify-comparison-aggressive" data-img="aggressive">' + labelAggressive + '</button>';
|
||||
ttAfterButtons += '<button type="button" class="imagify-comparison-ultra selected" data-img="ultra">' + labelUltra + '</button>';
|
||||
/* eslint-enable indent */
|
||||
ttAfterButtons += '</span>';
|
||||
|
||||
// Loader.
|
||||
$tt.before( '<img class="loader" src="' + loader + '" alt="Loading…" width="64" height="64">' );
|
||||
|
||||
// Should be more locally integrated...
|
||||
$( '.twentytwenty-left-buttons' ).append( ttBeforeButtons );
|
||||
$( '.twentytwenty-right-buttons' ).append( ttAfterButtons );
|
||||
|
||||
image50 = '<img class="img-original" alt="' + originalAlt + '" width="' + originalDim[0] + '" height="' + originalDim[1] + '">';
|
||||
image50 += '<img class="img-normal" alt="' + normalAlt + '" width="' + normalDim[0] + '" height="' + normalDim[1] + '">';
|
||||
image50 += '<img class="img-aggressive" alt="' + aggressiveAlt + '" width="' + aggressiveDim[0] + '" height="' + aggressiveDim[1] + '">';
|
||||
image50 += '<img class="img-ultra" alt="' + ultraAlt + '" width="' + ultraDim[0] + '" height="' + ultraDim[1] + '">';
|
||||
// Add switchers button only if needed.
|
||||
// Should be more locally integrated...
|
||||
image50 += $( '.twentytwenty-left-buttons' ).lenght ? ttBeforeButtons + ttAfterButtons : '';
|
||||
|
||||
// Add images to 50/50 area.
|
||||
$tt.closest( '.imagify-modal-content' ).addClass( 'loading' ).find( '.twentytwenty-container' ).append( image50 );
|
||||
|
||||
// Load image original.
|
||||
$( '.img-original' ).on( 'load', function() {
|
||||
imgsLoaded++;
|
||||
} ).attr( 'src', originalSrc );
|
||||
|
||||
// Load image normal.
|
||||
$( '.img-normal' ).on( 'load', function() {
|
||||
imgsLoaded++;
|
||||
} ).attr( 'src', normalSrc );
|
||||
|
||||
// Load image aggressive.
|
||||
$( '.img-aggressive' ).on( 'load', function() {
|
||||
imgsLoaded++;
|
||||
} ).attr( 'src', aggressiveSrc );
|
||||
|
||||
// Load image ultra.
|
||||
$( '.img-ultra' ).on( 'load', function() {
|
||||
imgsLoaded++;
|
||||
} ).attr( 'src', ultraSrc );
|
||||
|
||||
twentyMe = setInterval( function() {
|
||||
if ( 4 !== imgsLoaded ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$tt.twentytwenty({
|
||||
handlePosition: 0.6,
|
||||
orientation: 'horizontal',
|
||||
labelBefore: originalLabel,
|
||||
labelAfter: ultraLabel
|
||||
}, function() {
|
||||
// Fires on initialisation & each time the handle is moving.
|
||||
if ( ! $tt.closest( '.imagify-modal-content' ).hasClass( 'loaded' ) ) {
|
||||
$tt.closest( '.imagify-modal-content' ).removeClass( 'loading' ).addClass( 'loaded' );
|
||||
drawMeAChart( $( '.imagify-level-ultra .imagify-chart canvas' ) );
|
||||
}
|
||||
} );
|
||||
|
||||
clearInterval( twentyMe );
|
||||
twentyMe = null;
|
||||
}, 75);
|
||||
|
||||
// On click on button choices.
|
||||
$( '.imagify-comparison-title' ).on( 'click', '.twentytwenty-duo-buttons button:not(.selected)', function( e ) {
|
||||
var $this = $( this ),
|
||||
$container = $this.closest( '.imagify-comparison-title' ).nextAll( '.twentytwenty-wrapper' ).find( '.twentytwenty-container' ),
|
||||
side = $this.closest( '.twentytwenty-duo-buttons' ).hasClass( 'twentytwenty-duo-left' ) ? 'left' : 'right',
|
||||
$otherSide = 'left' === side ? $this.closest( '.imagify-comparison-title' ).find( '.twentytwenty-duo-right' ) : $this.closest( '.imagify-comparison-title' ).find( '.twentytwenty-duo-left' ),
|
||||
$duo = $this.closest( '.twentytwenty-duo-buttons' ).find( 'button' ),
|
||||
$imgBefore = $container.find( '.twentytwenty-before' ),
|
||||
$imgAfter = $container.find( '.twentytwenty-after' ),
|
||||
image = $this.data( 'img' ),
|
||||
clipStyles;
|
||||
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
// Button coloration.
|
||||
$duo.removeClass( 'selected' );
|
||||
$this.addClass( 'selected' );
|
||||
|
||||
// Other side action (to not compare same images).
|
||||
if ( $otherSide.find( '.selected' ).data( 'img' ) === image ) {
|
||||
$otherSide.find( 'button:not(.selected)' ).eq( 0 ).trigger( 'click' );
|
||||
}
|
||||
|
||||
// Left buttons.
|
||||
if ( 'left' === side ) {
|
||||
clipStyles = $imgBefore.css( 'clip' );
|
||||
$imgBefore.attr( 'style', '' );
|
||||
$imgBefore.removeClass( 'twentytwenty-before' );
|
||||
$container.find( '.img-' + image ).addClass( 'twentytwenty-before' ).css( 'clip', clipStyles );
|
||||
$( '.twentytwenty-before-label .twentytwenty-label-content' ).text( $container.data( image + '-label' ) );
|
||||
$( '.imagify-c-level.go-left' ).attr( 'aria-hidden', 'true' ).removeClass( 'go-left go-right' );
|
||||
$( '.imagify-level-' + image ).attr( 'aria-hidden', 'false' ).addClass( 'go-left' );
|
||||
}
|
||||
|
||||
// Right buttons.
|
||||
if ( 'right' === side ) {
|
||||
$imgAfter.removeClass( 'twentytwenty-after' );
|
||||
$container.find( '.img-' + image ).addClass( 'twentytwenty-after' );
|
||||
$( '.twentytwenty-after-label .twentytwenty-label-content' ).text( $container.data( image + '-label' ) );
|
||||
$( '.imagify-c-level.go-right' ).attr( 'aria-hidden', 'true' ).removeClass( 'go-left go-right' );
|
||||
$( '.imagify-level-' + image ).attr( 'aria-hidden', 'false' ).addClass( 'go-right' );
|
||||
}
|
||||
|
||||
drawMeAChart( $( '.imagify-level-' + image + ' .imagify-chart canvas' ) );
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
/**
|
||||
* Imagify comparison inside Media post edition.
|
||||
*/
|
||||
if ( imagifyTTT.imageWidth && $( '.post-php .wp_attachment_image .thumbnail' ).length > 0 ) {
|
||||
|
||||
var $oriParent = $( '.post-php .wp_attachment_image' ),
|
||||
oriSource = { src: $( '#imagify-full-original' ).val(), size: $( '#imagify-full-original-size' ).val() },
|
||||
$optimizeBtn = $( '#misc-publishing-actions' ).find( '.misc-pub-imagify .button-primary' ),
|
||||
filesize, saving;
|
||||
|
||||
imagifyTTT.widthLimit = parseInt( imagifyTTT.widthLimit, 10 );
|
||||
|
||||
// If shown image > 360, use twentytwenty.
|
||||
if ( imagifyTTT.imageWidth > imagifyTTT.widthLimit && oriSource.src ) {
|
||||
|
||||
filesize = $( '.misc-pub-filesize strong' ).text();
|
||||
saving = $( '.imagify-data-item .imagify-chart-value' ).text();
|
||||
|
||||
// Create button to trigger.
|
||||
$( '[id^="imgedit-open-btn-"]' ).before( '<button type="button" class="imagify-button-primary button-primary imagify-modal-trigger" data-target="#imagify-visual-comparison" id="imagify-start-comparison">' + imagifyTTT.labels.compare + '</button>' );
|
||||
|
||||
// Modal and trigger event creation.
|
||||
imagifyTwentyModal( {
|
||||
width: parseInt( imagifyTTT.imageWidth, 10 ),
|
||||
height: parseInt( imagifyTTT.imageHeight, 10 ),
|
||||
originalUrl: oriSource.src,
|
||||
optimizedUrl: imagifyTTT.imageSrc,
|
||||
originalSize: oriSource.size,
|
||||
optimizedSize: filesize,
|
||||
saving: saving,
|
||||
modalAppendTo: $oriParent,
|
||||
trigger: $( '#imagify-start-comparison' ),
|
||||
modalId: 'imagify-visual-comparison'
|
||||
} );
|
||||
}
|
||||
// Else put images next to next.
|
||||
else if ( imagifyTTT.imageWidth < imagifyTTT.widthLimit && oriSource.src ) {
|
||||
// TODO
|
||||
}
|
||||
// If image has no backup.
|
||||
else if ( $( '#imagify-full-original' ).length > 0 && '' === oriSource.src ) {
|
||||
// do nothing ?
|
||||
}
|
||||
// In case image is not optimized.
|
||||
else {
|
||||
// If is not in optimizing process, propose the Optimize button trigger.
|
||||
if ( $( '#misc-publishing-actions' ).find( '.misc-pub-imagify .button-primary' ).length === 1 ) {
|
||||
$( '[id^="imgedit-open-btn-"]' ).before( '<span class="spinner imagify-hidden"></span><a class="imagify-button-primary button-primary imagify-optimize-trigger" id="imagify-optimize-trigger" href="' + $optimizeBtn.attr( 'href' ) + '">' + imagifyTTT.labels.optimize + '</a>' );
|
||||
|
||||
$( '#imagify-optimize-trigger' ).on( 'click', function() {
|
||||
$( this ).prev( '.spinner' ).removeClass( 'imagify-hidden' ).addClass( 'is-active' );
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Images comparison in attachments list page (upload.php).
|
||||
*/
|
||||
if ( $( '.upload-php .imagify-compare-images' ).length > 0 ) {
|
||||
|
||||
$( '.imagify-compare-images' ).each( function() {
|
||||
var $this = $( this ),
|
||||
id = $this.data( 'id' ),
|
||||
$datas = $this.closest( '#post-' + id ).find( '.column-imagify_optimized_file' );
|
||||
|
||||
// Modal and trigger event creation.
|
||||
imagifyTwentyModal( {
|
||||
width: parseInt( $this.data( 'full-width' ), 10 ),
|
||||
height: parseInt( $this.data( 'full-height' ), 10 ),
|
||||
originalUrl: $this.data( 'backup-src' ),
|
||||
optimizedUrl: $this.data( 'full-src' ),
|
||||
originalSize: $datas.find( '.original' ).text(),
|
||||
optimizedSize: $datas.find( '.imagify-data-item .big' ).text(),
|
||||
saving: $datas.find( '.imagify-chart-value' ).text(),
|
||||
modalAppendTo: $this.closest( '.column-primary' ),
|
||||
trigger: $this,
|
||||
modalId: 'imagify-comparison-' + id
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
/**
|
||||
* Images Comparison in Grid View modal.
|
||||
*/
|
||||
if ( $( '.upload-php' ).length > 0 ) {
|
||||
|
||||
var getVar = function( param ) {
|
||||
var vars = {};
|
||||
|
||||
w.location.href.replace(
|
||||
/[?&]+([^=&]+)=?([^&]*)?/gi,
|
||||
function( m, key, value ) {
|
||||
vars[ key ] = undefined !== value ? value : '';
|
||||
}
|
||||
);
|
||||
|
||||
if ( param ) {
|
||||
return vars[ param ] ? vars[ param ] : null;
|
||||
}
|
||||
return vars;
|
||||
},
|
||||
imagifyContentInModal = function() {
|
||||
var tempTimer = setInterval( function() {
|
||||
var $datas, originalSrc, $actions;
|
||||
|
||||
if ( ! $( '.media-modal .imagify-datas-details' ).length ) {
|
||||
return;
|
||||
}
|
||||
|
||||
originalSrc = $( '#imagify-original-src' ).val();
|
||||
|
||||
if ( originalSrc ) {
|
||||
// Trigger creation.
|
||||
$actions = $( '.media-frame-content .attachment-actions' );
|
||||
|
||||
$actions.find( '#imagify-media-frame-comparison-btn' ).remove();
|
||||
$actions.prepend( '<button type="button" class="imagify-button-primary button-primary imagify-modal-trigger" data-target="#imagify-comparison-modal" id="imagify-media-frame-comparison-btn">' + imagifyTTT.labels.compare + '</button>' );
|
||||
|
||||
// Get datas.
|
||||
$datas = $( '.media-frame-content .compat-field-imagify' );
|
||||
|
||||
// Modal and trigger event creation.
|
||||
imagifyTwentyModal( {
|
||||
width: parseInt( $( '#imagify-full-width' ).val(), 10 ),
|
||||
height: parseInt( $( '#imagify-full-height' ).val(), 10 ),
|
||||
originalUrl: originalSrc,
|
||||
optimizedUrl: $( '#imagify-full-src' ).val(),
|
||||
originalSize: $( '#imagify-original-size' ).val(),
|
||||
optimizedSize: $datas.find( '.imagify-data-item .big' ).text(),
|
||||
saving: $datas.find( '.imagify-chart-value' ).text(),
|
||||
modalAppendTo: $( '.media-frame-content .thumbnail-image' ),
|
||||
trigger: $( '#imagify-media-frame-comparison-btn' ),
|
||||
modalId: 'imagify-comparison-modal',
|
||||
openModal: true
|
||||
} );
|
||||
}
|
||||
|
||||
clearInterval( tempTimer );
|
||||
tempTimer = null;
|
||||
}, 20 );
|
||||
};
|
||||
|
||||
// If attachment is clicked, or the "Previous" and "Next" buttons, build the modal inside the modal.
|
||||
$( '.upload-php' ).on( 'click', '.media-frame.mode-grid .attachment, .edit-media-header .left, .edit-media-header .right', function() {
|
||||
imagifyContentInModal();
|
||||
} );
|
||||
|
||||
// If attachment is mentionned in URL, build the modal inside the modal.
|
||||
if ( getVar( 'item' ) ) {
|
||||
imagifyContentInModal();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Images comparison in custom folders list page.
|
||||
*/
|
||||
if ( $( '#imagify-files-list-form' ).length > 0 ) {
|
||||
|
||||
var buildComparisonModal = function( $buttons ) {
|
||||
$buttons.each( function() {
|
||||
var $this = $( this ),
|
||||
id = $this.data( 'id' ),
|
||||
$datas = $this.closest( 'tr' ).find( '.column-optimization .imagify-data-item' );
|
||||
|
||||
$( '#imagify-comparison-' + id ).remove();
|
||||
|
||||
// Modal and trigger event creation.
|
||||
imagifyTwentyModal( {
|
||||
width: parseInt( $this.data( 'full-width' ), 10 ),
|
||||
height: parseInt( $this.data( 'full-height' ), 10 ),
|
||||
originalUrl: $this.data( 'backup-src' ),
|
||||
optimizedUrl: $this.data( 'full-src' ),
|
||||
originalSize: $datas.find( '.original' ).text(),
|
||||
optimizedSize: $datas.find( '.optimized' ).text(),
|
||||
saving: $datas.find( '.imagify-chart-value' ).text(),
|
||||
modalAppendTo: $this.closest( '.column-primary' ),
|
||||
trigger: $this,
|
||||
modalId: 'imagify-comparison-' + id
|
||||
} );
|
||||
} );
|
||||
};
|
||||
|
||||
/**
|
||||
* Update the comparison tool window when a file row is updated via ajax, and the ones already printed.
|
||||
*/
|
||||
$( w ).on( 'comparisonprinted.imagify', function( e, id ) {
|
||||
var $buttons;
|
||||
|
||||
id = id || 0;
|
||||
|
||||
if ( id ) {
|
||||
$buttons = $( '#imagify-files-list-form' ).find( '.imagify-compare-images[data-id="' + id + '"]' );
|
||||
} else {
|
||||
$buttons = $( '#imagify-files-list-form' ).find( '.imagify-compare-images' );
|
||||
}
|
||||
|
||||
if ( $buttons.length ) {
|
||||
buildComparisonModal( $buttons );
|
||||
}
|
||||
} )
|
||||
.trigger( 'comparisonprinted.imagify' );
|
||||
}
|
||||
|
||||
} )(jQuery, document, window);
|
||||
Reference in New Issue
Block a user