| 1 |
(function($, d, w, undefined) { // eslint-disable-line no-unused-vars, no-shadow, no-shadow-restricted-names |
| 2 |
|
| 3 |
$.fn.twentytwenty = function( options, callback ) { |
| 4 |
options = $.extend( { |
| 5 |
handlePosition: 0.5, |
| 6 |
orientation: 'horizontal', |
| 7 |
labelBefore: 'Before', |
| 8 |
labelAfter: 'After' |
| 9 |
}, options ); |
| 10 |
|
| 11 |
return this.each( function() { |
| 12 |
var sliderPct = options.handlePosition, |
| 13 |
$container = $( this ), |
| 14 |
sliderOrientation = options.orientation, |
| 15 |
beforeDirection = ( 'vertical' === sliderOrientation ) ? 'down' : 'left', |
| 16 |
afterDirection = ( 'vertical' === sliderOrientation ) ? 'up' : 'right', |
| 17 |
$beforeImg = $container.find( 'img:first' ), |
| 18 |
$afterImg = $container.find( 'img:last' ), |
| 19 |
offsetX = 0, |
| 20 |
offsetY = 0, |
| 21 |
imgWidth = 0, |
| 22 |
imgHeight = 0, |
| 23 |
$slider, $overlay, |
| 24 |
calcOffset = function( dimensionPct ) { |
| 25 |
var width = parseInt( $beforeImg.width(), 10 ), |
| 26 |
height = parseInt( $beforeImg.height(), 10 ); |
| 27 |
|
| 28 |
if ( ! width || ! height ) { |
| 29 |
width = parseInt( $beforeImg.attr( 'width' ), 10 ); |
| 30 |
height = parseInt( $beforeImg.attr( 'height' ), 10 ); |
| 31 |
} |
| 32 |
|
| 33 |
return { |
| 34 |
w: width + "px", |
| 35 |
h: height + "px", |
| 36 |
cw: ( dimensionPct * width ) + "px", |
| 37 |
ch: ( dimensionPct * height ) + "px" |
| 38 |
}; |
| 39 |
}, |
| 40 |
adjustContainer = function( offset ) { |
| 41 |
// Make it dynamic, in case the "before" image changes. |
| 42 |
var $beforeImage = $container.find( '.twentytwenty-before' ); |
| 43 |
|
| 44 |
if ( 'vertical' === sliderOrientation ) { |
| 45 |
$beforeImage.css( 'clip', 'rect(0,' + offset.w + ',' + offset.ch + ',0)' ); |
| 46 |
} else { |
| 47 |
$beforeImage.css( 'clip', 'rect(0,' + offset.cw + ',' + offset.h + ',0)' ); |
| 48 |
} |
| 49 |
|
| 50 |
$container.css( 'height', offset.h ); |
| 51 |
|
| 52 |
if ( typeof callback === 'function' ) { |
| 53 |
callback(); |
| 54 |
} |
| 55 |
}, |
| 56 |
adjustSlider = function( pct ) { |
| 57 |
var offset = calcOffset( pct ); |
| 58 |
|
| 59 |
if ( 'vertical' === sliderOrientation ) { |
| 60 |
$slider.css( 'top', offset.ch ); |
| 61 |
} else { |
| 62 |
$slider.css( 'left', offset.cw ); |
| 63 |
} |
| 64 |
|
| 65 |
adjustContainer( offset ); |
| 66 |
}; |
| 67 |
|
| 68 |
|
| 69 |
if ( $container.parent( '.twentytwenty-wrapper' ).length ) { |
| 70 |
$container.unwrap(); |
| 71 |
} |
| 72 |
$container.wrap( '<div class="twentytwenty-wrapper twentytwenty-' + sliderOrientation + '"></div>' ); |
| 73 |
|
| 74 |
$container.children( '.twentytwenty-overlay, .twentytwenty-handle' ).remove(); |
| 75 |
$container.append( '<div class="twentytwenty-overlay"></div>' ); |
| 76 |
$container.append( '<div class="twentytwenty-handle"></div>' ); |
| 77 |
|
| 78 |
$slider = $container.find( '.twentytwenty-handle' ); |
| 79 |
|
| 80 |
$slider.append( '<span class="twentytwenty-' + beforeDirection + '-arrow"></span>' ); |
| 81 |
$slider.append( '<span class="twentytwenty-' + afterDirection + '-arrow"></span>' ); |
| 82 |
$container.addClass( 'twentytwenty-container' ); |
| 83 |
$beforeImg.addClass( 'twentytwenty-before' ); |
| 84 |
$afterImg.addClass( 'twentytwenty-after' ); |
| 85 |
|
| 86 |
$overlay = $container.find( '.twentytwenty-overlay' ); |
| 87 |
|
| 88 |
$overlay.append( '<div class="twentytwenty-labels twentytwenty-before-label"><span class="twentytwenty-label-content">' + options.labelBefore + '</span></div>' ); |
| 89 |
$overlay.append( '<div class="twentytwenty-labels twentytwenty-after-label"><span class="twentytwenty-label-content">' + options.labelAfter + '</span></div>' ); |
| 90 |
|
| 91 |
$( w ).on( 'resize.twentytwenty', function() { |
| 92 |
adjustSlider( sliderPct ); |
| 93 |
} ); |
| 94 |
|
| 95 |
$slider.on( 'movestart', function( e ) { |
| 96 |
if ( 'vertical' !== sliderOrientation && ( ( e.distX > e.distY && e.distX < -e.distY ) || ( e.distX < e.distY && e.distX > -e.distY ) ) ) { |
| 97 |
e.preventDefault(); |
| 98 |
} else if ( 'vertical' === sliderOrientation && ( ( e.distX < e.distY && e.distX < -e.distY ) || ( e.distX > e.distY && e.distX > -e.distY ) ) ) { |
| 99 |
e.preventDefault(); |
| 100 |
} |
| 101 |
|
| 102 |
$container.addClass( 'active' ); |
| 103 |
|
| 104 |
offsetX = $container.offset().left; |
| 105 |
offsetY = $container.offset().top; |
| 106 |
imgWidth = $beforeImg.width(); |
| 107 |
imgHeight = $beforeImg.height(); |
| 108 |
} ); |
| 109 |
|
| 110 |
$slider.on( 'moveend', function() { |
| 111 |
$container.removeClass( 'active' ); |
| 112 |
} ); |
| 113 |
|
| 114 |
$slider.on( 'move', function( e ) { |
| 115 |
if ( $container.hasClass('active') ) { |
| 116 |
sliderPct = 'vertical' === sliderOrientation ? ( e.pageY - offsetY ) / imgHeight : ( e.pageX - offsetX ) / imgWidth; |
| 117 |
|
| 118 |
if ( sliderPct < 0 ) { |
| 119 |
sliderPct = 0; |
| 120 |
} else if ( sliderPct > 1 ) { |
| 121 |
sliderPct = 1; |
| 122 |
} |
| 123 |
|
| 124 |
adjustSlider( sliderPct ); |
| 125 |
} |
| 126 |
} ); |
| 127 |
|
| 128 |
$container.find( 'img' ).on( 'mousedown', function( e ) { |
| 129 |
e.preventDefault(); |
| 130 |
} ); |
| 131 |
|
| 132 |
$( w ).trigger( 'resize.twentytwenty' ); |
| 133 |
} ); |
| 134 |
}; |
| 135 |
|
| 136 |
} )(jQuery, document, window); |
| 137 |
|
| 138 |
/** |
| 139 |
* Twentytwenty Imagify Init |
| 140 |
*/ |
| 141 |
(function($, d, w, undefined) { // eslint-disable-line no-unused-vars, no-shadow, no-shadow-restricted-names |
| 142 |
|
| 143 |
/* |
| 144 |
* Mini chart |
| 145 |
* |
| 146 |
* @param {element} canvas |
| 147 |
*/ |
| 148 |
var drawMeAChart = function ( canvas ) { |
| 149 |
canvas.each( function() { |
| 150 |
var value = parseInt( $( this ).closest( '.imagify-chart' ).next( '.imagify-chart-value' ).text(), 10 ); |
| 151 |
|
| 152 |
new w.imagify.Chart( this, { // eslint-disable-line no-new |
| 153 |
type: 'doughnut', |
| 154 |
data: { |
| 155 |
datasets: [{ |
| 156 |
data: [ value, 100 - value ], |
| 157 |
backgroundColor: [ '#00B3D3', '#D8D8D8' ], |
| 158 |
borderColor: '#2A2E3C', |
| 159 |
borderWidth: 1 |
| 160 |
}] |
| 161 |
}, |
| 162 |
options: { |
| 163 |
legend: { |
| 164 |
display: false |
| 165 |
}, |
| 166 |
events: [], |
| 167 |
animation: { |
| 168 |
easing: 'easeOutBounce' |
| 169 |
}, |
| 170 |
tooltips: { |
| 171 |
enabled: false |
| 172 |
}, |
| 173 |
responsive: false, |
| 174 |
cutoutPercentage: 60 |
| 175 |
} |
| 176 |
} ); |
| 177 |
} ); |
| 178 |
}, |
| 179 |
/** |
| 180 |
* Dynamic modal |
| 181 |
* |
| 182 |
* @param {object} Parameters to build modal with datas |
| 183 |
*/ |
| 184 |
imagifyTwentyModal = function( options ) { |
| 185 |
var defaults = { |
| 186 |
width: 0, //px |
| 187 |
height: 0, //px |
| 188 |
originalUrl: '', //url |
| 189 |
optimizedUrl: '', //url |
| 190 |
originalSize: 0, //mb |
| 191 |
optimizedSize: 0, // mb |
| 192 |
saving: 0, //percent |
| 193 |
modalAppendTo: $( 'body' ), // jQuery element |
| 194 |
trigger: $( '[data-target="imagify-visual-comparison"]' ), // jQuery element (button, link) with data-target="modalId" |
| 195 |
modalId: 'imagify-visual-comparison', // should be dynamic if multiple modals |
| 196 |
openModal: false |
| 197 |
}, |
| 198 |
settings = $.extend( {}, defaults, options ), |
| 199 |
modalHtml; |
| 200 |
|
| 201 |
if ( 0 === settings.width || 0 === settings.height || '' === settings.originalUrl || '' === settings.optimizedUrl || 0 === settings.originalSize || 0 === settings.optimizedSize || 0 === settings.saving ) { |
| 202 |
return 'error'; |
| 203 |
} |
| 204 |
|
| 205 |
// create modal box |
| 206 |
modalHtml = '<div id="' + settings.modalId + '" class="imagify-modal imagify-visual-comparison" aria-hidden="true">'; |
| 207 |
/* eslint-disable indent */ |
| 208 |
modalHtml += '<div class="imagify-modal-content loading">'; |
| 209 |
modalHtml += '<div class="twentytwenty-container">'; |
| 210 |
modalHtml += '<img class="imagify-img-before" alt="" width="' + settings.width + '" height="' + settings.height + '">'; |
| 211 |
modalHtml += '<img class="imagify-img-after" alt="" width="' + settings.width + '" height="' + settings.height + '">'; |
| 212 |
modalHtml += '</div>'; |
| 213 |
modalHtml += '<div class="imagify-comparison-levels">'; |
| 214 |
modalHtml += '<div class="imagify-c-level imagify-level-original go-left">'; |
| 215 |
modalHtml += '<p class="imagify-c-level-row">'; |
| 216 |
modalHtml += '<span class="label">' + imagifyTTT.labels.filesize + '</span>'; |
| 217 |
modalHtml += '<span class="value level">' + settings.originalSize + '</span>'; |
| 218 |
modalHtml += '</p>'; |
| 219 |
modalHtml += '</div>'; |
| 220 |
modalHtml += '<div class="imagify-c-level imagify-level-optimized go-right">'; |
| 221 |
modalHtml += '<p class="imagify-c-level-row">'; |
| 222 |
modalHtml += '<span class="label">' + imagifyTTT.labels.filesize + '</span>'; |
| 223 |
modalHtml += '<span class="value level">' + settings.optimizedSize + '</span>'; |
| 224 |
modalHtml += '</p>'; |
| 225 |
modalHtml += '<p class="imagify-c-level-row">'; |
| 226 |
modalHtml += '<span class="label">' + imagifyTTT.labels.saving + '</span>'; |
| 227 |
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>'; |
| 228 |
modalHtml += '</p>'; |
| 229 |
modalHtml += '</div>'; |
| 230 |
modalHtml += '</div>'; |
| 231 |
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>'; |
| 232 |
modalHtml += '</div>'; |
| 233 |
/* eslint-enable indent */ |
| 234 |
modalHtml += '</div>'; |
| 235 |
|
| 236 |
settings.modalAppendTo.append( modalHtml ); |
| 237 |
|
| 238 |
settings.trigger.on( 'click.imagify', function( e ) { |
| 239 |
var $modal = $( $( this ).data( 'target' ) ), |
| 240 |
imgsLoaded = 0, |
| 241 |
$tt, checkLoad; |
| 242 |
|
| 243 |
e.preventDefault(); |
| 244 |
|
| 245 |
if ( settings.openModal ) { |
| 246 |
w.imagify.openModal( $( this ) ); |
| 247 |
} |
| 248 |
|
| 249 |
$modal.find( '.imagify-modal-content' ).css( { |
| 250 |
'width': ( $( w ).outerWidth() * 0.85 ) + 'px', |
| 251 |
'max-width': settings.width |
| 252 |
} ); |
| 253 |
|
| 254 |
// Load before img. |
| 255 |
$modal.find( '.imagify-img-before' ).on( 'load', function() { |
| 256 |
imgsLoaded++; |
| 257 |
} ).attr( 'src', settings.originalUrl ); |
| 258 |
|
| 259 |
// Load after img. |
| 260 |
$modal.find( '.imagify-img-after' ).on( 'load', function() { |
| 261 |
imgsLoaded++; |
| 262 |
} ).attr( 'src', settings.optimizedUrl + ( settings.optimizedUrl.indexOf( '?' ) > 0 ? '&' : '?' ) + 'v=' + Date.now() ); |
| 263 |
|
| 264 |
$tt = $modal.find( '.twentytwenty-container' ); |
| 265 |
checkLoad = setInterval( function() { |
| 266 |
if ( 2 !== imgsLoaded ) { |
| 267 |
return; |
| 268 |
} |
| 269 |
|
| 270 |
$tt.twentytwenty( { |
| 271 |
handlePosition: 0.3, |
| 272 |
orientation: 'horizontal', |
| 273 |
labelBefore: imagifyTTT.labels.originalL, |
| 274 |
labelAfter: imagifyTTT.labels.optimizedL |
| 275 |
}, function() { |
| 276 |
var windowH = $( w ).height(), |
| 277 |
ttH = $modal.find( '.twentytwenty-container' ).height(), |
| 278 |
ttTop = $modal.find( '.twentytwenty-wrapper' ).position().top, |
| 279 |
$handle, $labels, $datas, datasH, handlePos, labelsPos; |
| 280 |
|
| 281 |
if ( ! $tt.closest( '.imagify-modal-content' ).hasClass( 'loaded' ) ) { |
| 282 |
$tt.closest( '.imagify-modal-content' ).removeClass( 'loading' ).addClass( 'loaded' ); |
| 283 |
drawMeAChart( $modal.find( '.imagify-level-optimized .imagify-chart canvas' ) ); |
| 284 |
} |
| 285 |
|
| 286 |
// Check if image height is to big. |
| 287 |
if ( windowH < ttH && ! $modal.hasClass( 'modal-is-too-high' ) ) { |
| 288 |
$modal.addClass( 'modal-is-too-high' ); |
| 289 |
|
| 290 |
$handle = $modal.find( '.twentytwenty-handle' ); |
| 291 |
$labels = $modal.find( '.twentytwenty-label-content' ); |
| 292 |
$datas = $modal.find( '.imagify-comparison-levels' ); |
| 293 |
datasH = $datas.outerHeight(); |
| 294 |
handlePos = ( windowH - ttTop - $handle.height() ) / 2; |
| 295 |
labelsPos = ( windowH - ttTop * 3 - datasH ); |
| 296 |
|
| 297 |
$handle.css( { |
| 298 |
top: handlePos |
| 299 |
} ); |
| 300 |
$labels.css( { |
| 301 |
top: labelsPos, |
| 302 |
bottom: 'auto' |
| 303 |
} ); |
| 304 |
$modal.find( '.twentytwenty-wrapper' ).css( { |
| 305 |
paddingBottom: datasH |
| 306 |
} ); |
| 307 |
$modal.find( '.imagify-modal-content' ).on( 'scroll.imagify', function() { |
| 308 |
var scrollTop = $( this ).scrollTop(); |
| 309 |
|
| 310 |
$handle.css( { |
| 311 |
top: handlePos + scrollTop |
| 312 |
} ); |
| 313 |
$labels.css( { |
| 314 |
top: labelsPos + scrollTop |
| 315 |
} ); |
| 316 |
$datas.css( { |
| 317 |
bottom: -scrollTop |
| 318 |
} ); |
| 319 |
} ); |
| 320 |
} |
| 321 |
} ); |
| 322 |
|
| 323 |
clearInterval( checkLoad ); |
| 324 |
checkLoad = null; |
| 325 |
return 'done'; |
| 326 |
}, 75 ); |
| 327 |
} ); |
| 328 |
}; // imagifyTwentyModal( options ); |
| 329 |
|
| 330 |
|
| 331 |
/** |
| 332 |
* The complexe visual comparison |
| 333 |
*/ |
| 334 |
$( '.imagify-visual-comparison-btn' ).on( 'click', function() { |
| 335 |
var $tt, imgsLoaded, loader, |
| 336 |
labelOriginal, labelNormal, labelAggressive, labelUltra, |
| 337 |
originalLabel, originalAlt, originalSrc, originalDim, |
| 338 |
normalAlt, normalSrc, normalDim, |
| 339 |
aggressiveAlt, aggressiveSrc, aggressiveDim, |
| 340 |
ultraLabel, ultraAlt, ultraSrc, ultraDim, |
| 341 |
ttBeforeButtons, ttAfterButtons, image50, twentyMe; |
| 342 |
|
| 343 |
if ( $( '.twentytwenty-wrapper' ).length === 1 ) { |
| 344 |
return; |
| 345 |
} |
| 346 |
|
| 347 |
$( $( this ).data( 'target' ) ).find( '.imagify-modal-content' ).css( 'width', ( $( w ).outerWidth() * 0.95 ) + 'px' ); |
| 348 |
|
| 349 |
if ( $( '.twentytwenty-container' ).length > 0 && $( w ).outerWidth() <= 800 ) { |
| 350 |
return; |
| 351 |
} |
| 352 |
|
| 353 |
$tt = $( '.twentytwenty-container' ); |
| 354 |
imgsLoaded = 0; |
| 355 |
loader = $tt.data( 'loader' ); |
| 356 |
labelOriginal = $tt.data( 'label-original' ); |
| 357 |
labelNormal = $tt.data( 'label-normal' ); |
| 358 |
labelAggressive = $tt.data( 'label-aggressive' ); |
| 359 |
labelUltra = $tt.data( 'label-ultra' ); |
| 360 |
|
| 361 |
originalLabel = $tt.data( 'original-label' ).replace( /\*\*/, '<strong>' ).replace( /\*\*/, '</strong>' ); |
| 362 |
originalAlt = $tt.data( 'original-alt' ); |
| 363 |
originalSrc = $tt.data( 'original-img' ); |
| 364 |
originalDim = $tt.data( 'original-dim' ).split( 'x' ); |
| 365 |
|
| 366 |
normalAlt = $tt.data( 'normal-alt' ); |
| 367 |
normalSrc = $tt.data( 'normal-img' ); |
| 368 |
normalDim = $tt.data( 'normal-dim' ).split( 'x' ); |
| 369 |
|
| 370 |
aggressiveAlt = $tt.data( 'aggressive-alt' ); |
| 371 |
aggressiveSrc = $tt.data( 'aggressive-img' ); |
| 372 |
aggressiveDim = $tt.data( 'aggressive-dim' ).split( 'x' ); |
| 373 |
|
| 374 |
ultraLabel = $tt.data( 'ultra-label' ).replace( /\*\*/, '<strong>' ).replace( /\*\*/, '</strong>' ); |
| 375 |
ultraAlt = $tt.data( 'ultra-alt' ); |
| 376 |
ultraSrc = $tt.data( 'ultra-img' ); |
| 377 |
ultraDim = $tt.data( 'ultra-dim' ).split( 'x' ); |
| 378 |
|
| 379 |
ttBeforeButtons = '<span class="twentytwenty-duo-buttons twentytwenty-duo-left">'; |
| 380 |
/* eslint-disable indent */ |
| 381 |
ttBeforeButtons += '<button type="button" class="imagify-comparison-original selected" data-img="original">' + labelOriginal + '</button>'; |
| 382 |
ttBeforeButtons += '<button type="button" class="imagify-comparison-normal" data-img="normal">' + labelNormal + '</button>'; |
| 383 |
ttBeforeButtons += '<button type="button" class="imagify-comparison-aggressive" data-img="aggressive">' + labelAggressive + '</button>'; |
| 384 |
/* eslint-enable indent */ |
| 385 |
ttBeforeButtons += '</span>'; |
| 386 |
ttAfterButtons = '<span class="twentytwenty-duo-buttons twentytwenty-duo-right">'; |
| 387 |
/* eslint-disable indent */ |
| 388 |
ttAfterButtons += '<button type="button" class="imagify-comparison-normal" data-img="normal">' + labelNormal + '</button>'; |
| 389 |
ttAfterButtons += '<button type="button" class="imagify-comparison-aggressive" data-img="aggressive">' + labelAggressive + '</button>'; |
| 390 |
ttAfterButtons += '<button type="button" class="imagify-comparison-ultra selected" data-img="ultra">' + labelUltra + '</button>'; |
| 391 |
/* eslint-enable indent */ |
| 392 |
ttAfterButtons += '</span>'; |
| 393 |
|
| 394 |
// Loader. |
| 395 |
$tt.before( '<img class="loader" src="' + loader + '" alt="Loading…" width="64" height="64">' ); |
| 396 |
|
| 397 |
// Should be more locally integrated... |
| 398 |
$( '.twentytwenty-left-buttons' ).append( ttBeforeButtons ); |
| 399 |
$( '.twentytwenty-right-buttons' ).append( ttAfterButtons ); |
| 400 |
|
| 401 |
image50 = '<img class="img-original" alt="' + originalAlt + '" width="' + originalDim[0] + '" height="' + originalDim[1] + '">'; |
| 402 |
image50 += '<img class="img-normal" alt="' + normalAlt + '" width="' + normalDim[0] + '" height="' + normalDim[1] + '">'; |
| 403 |
image50 += '<img class="img-aggressive" alt="' + aggressiveAlt + '" width="' + aggressiveDim[0] + '" height="' + aggressiveDim[1] + '">'; |
| 404 |
image50 += '<img class="img-ultra" alt="' + ultraAlt + '" width="' + ultraDim[0] + '" height="' + ultraDim[1] + '">'; |
| 405 |
// Add switchers button only if needed. |
| 406 |
// Should be more locally integrated... |
| 407 |
image50 += $( '.twentytwenty-left-buttons' ).lenght ? ttBeforeButtons + ttAfterButtons : ''; |
| 408 |
|
| 409 |
// Add images to 50/50 area. |
| 410 |
$tt.closest( '.imagify-modal-content' ).addClass( 'loading' ).find( '.twentytwenty-container' ).append( image50 ); |
| 411 |
|
| 412 |
// Load image original. |
| 413 |
$( '.img-original' ).on( 'load', function() { |
| 414 |
imgsLoaded++; |
| 415 |
} ).attr( 'src', originalSrc ); |
| 416 |
|
| 417 |
// Load image normal. |
| 418 |
$( '.img-normal' ).on( 'load', function() { |
| 419 |
imgsLoaded++; |
| 420 |
} ).attr( 'src', normalSrc ); |
| 421 |
|
| 422 |
// Load image aggressive. |
| 423 |
$( '.img-aggressive' ).on( 'load', function() { |
| 424 |
imgsLoaded++; |
| 425 |
} ).attr( 'src', aggressiveSrc ); |
| 426 |
|
| 427 |
// Load image ultra. |
| 428 |
$( '.img-ultra' ).on( 'load', function() { |
| 429 |
imgsLoaded++; |
| 430 |
} ).attr( 'src', ultraSrc ); |
| 431 |
|
| 432 |
twentyMe = setInterval( function() { |
| 433 |
if ( 4 !== imgsLoaded ) { |
| 434 |
return; |
| 435 |
} |
| 436 |
|
| 437 |
$tt.twentytwenty({ |
| 438 |
handlePosition: 0.6, |
| 439 |
orientation: 'horizontal', |
| 440 |
labelBefore: originalLabel, |
| 441 |
labelAfter: ultraLabel |
| 442 |
}, function() { |
| 443 |
// Fires on initialisation & each time the handle is moving. |
| 444 |
if ( ! $tt.closest( '.imagify-modal-content' ).hasClass( 'loaded' ) ) { |
| 445 |
$tt.closest( '.imagify-modal-content' ).removeClass( 'loading' ).addClass( 'loaded' ); |
| 446 |
drawMeAChart( $( '.imagify-level-ultra .imagify-chart canvas' ) ); |
| 447 |
} |
| 448 |
} ); |
| 449 |
|
| 450 |
clearInterval( twentyMe ); |
| 451 |
twentyMe = null; |
| 452 |
}, 75); |
| 453 |
|
| 454 |
// On click on button choices. |
| 455 |
$( '.imagify-comparison-title' ).on( 'click', '.twentytwenty-duo-buttons button:not(.selected)', function( e ) { |
| 456 |
var $this = $( this ), |
| 457 |
$container = $this.closest( '.imagify-comparison-title' ).nextAll( '.twentytwenty-wrapper' ).find( '.twentytwenty-container' ), |
| 458 |
side = $this.closest( '.twentytwenty-duo-buttons' ).hasClass( 'twentytwenty-duo-left' ) ? 'left' : 'right', |
| 459 |
$otherSide = 'left' === side ? $this.closest( '.imagify-comparison-title' ).find( '.twentytwenty-duo-right' ) : $this.closest( '.imagify-comparison-title' ).find( '.twentytwenty-duo-left' ), |
| 460 |
$duo = $this.closest( '.twentytwenty-duo-buttons' ).find( 'button' ), |
| 461 |
$imgBefore = $container.find( '.twentytwenty-before' ), |
| 462 |
$imgAfter = $container.find( '.twentytwenty-after' ), |
| 463 |
image = $this.data( 'img' ), |
| 464 |
clipStyles; |
| 465 |
|
| 466 |
e.stopPropagation(); |
| 467 |
e.preventDefault(); |
| 468 |
|
| 469 |
// Button coloration. |
| 470 |
$duo.removeClass( 'selected' ); |
| 471 |
$this.addClass( 'selected' ); |
| 472 |
|
| 473 |
// Other side action (to not compare same images). |
| 474 |
if ( $otherSide.find( '.selected' ).data( 'img' ) === image ) { |
| 475 |
$otherSide.find( 'button:not(.selected)' ).eq( 0 ).trigger( 'click' ); |
| 476 |
} |
| 477 |
|
| 478 |
// Left buttons. |
| 479 |
if ( 'left' === side ) { |
| 480 |
clipStyles = $imgBefore.css( 'clip' ); |
| 481 |
$imgBefore.attr( 'style', '' ); |
| 482 |
$imgBefore.removeClass( 'twentytwenty-before' ); |
| 483 |
$container.find( '.img-' + image ).addClass( 'twentytwenty-before' ).css( 'clip', clipStyles ); |
| 484 |
$( '.twentytwenty-before-label .twentytwenty-label-content' ).text( $container.data( image + '-label' ) ); |
| 485 |
$( '.imagify-c-level.go-left' ).attr( 'aria-hidden', 'true' ).removeClass( 'go-left go-right' ); |
| 486 |
$( '.imagify-level-' + image ).attr( 'aria-hidden', 'false' ).addClass( 'go-left' ); |
| 487 |
} |
| 488 |
|
| 489 |
// Right buttons. |
| 490 |
if ( 'right' === side ) { |
| 491 |
$imgAfter.removeClass( 'twentytwenty-after' ); |
| 492 |
$container.find( '.img-' + image ).addClass( 'twentytwenty-after' ); |
| 493 |
$( '.twentytwenty-after-label .twentytwenty-label-content' ).text( $container.data( image + '-label' ) ); |
| 494 |
$( '.imagify-c-level.go-right' ).attr( 'aria-hidden', 'true' ).removeClass( 'go-left go-right' ); |
| 495 |
$( '.imagify-level-' + image ).attr( 'aria-hidden', 'false' ).addClass( 'go-right' ); |
| 496 |
} |
| 497 |
|
| 498 |
drawMeAChart( $( '.imagify-level-' + image + ' .imagify-chart canvas' ) ); |
| 499 |
} ); |
| 500 |
} ); |
| 501 |
|
| 502 |
|
| 503 |
/** |
| 504 |
* Imagify comparison inside Media post edition. |
| 505 |
*/ |
| 506 |
if ( imagifyTTT.imageWidth && $( '.post-php .wp_attachment_image .thumbnail' ).length > 0 ) { |
| 507 |
|
| 508 |
var $oriParent = $( '.post-php .wp_attachment_image' ), |
| 509 |
oriSource = { src: $( '#imagify-full-original' ).val(), size: $( '#imagify-full-original-size' ).val() }, |
| 510 |
$optimizeBtn = $( '#misc-publishing-actions' ).find( '.misc-pub-imagify .button-primary' ), |
| 511 |
filesize, saving; |
| 512 |
|
| 513 |
imagifyTTT.widthLimit = parseInt( imagifyTTT.widthLimit, 10 ); |
| 514 |
|
| 515 |
// If shown image > 360, use twentytwenty. |
| 516 |
if ( imagifyTTT.imageWidth > imagifyTTT.widthLimit && oriSource.src ) { |
| 517 |
|
| 518 |
filesize = $( '.misc-pub-filesize strong' ).text(); |
| 519 |
saving = $( '.imagify-data-item .imagify-chart-value' ).text(); |
| 520 |
|
| 521 |
// Create button to trigger. |
| 522 |
$( '[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>' ); |
| 523 |
|
| 524 |
// Modal and trigger event creation. |
| 525 |
imagifyTwentyModal( { |
| 526 |
width: parseInt( imagifyTTT.imageWidth, 10 ), |
| 527 |
height: parseInt( imagifyTTT.imageHeight, 10 ), |
| 528 |
originalUrl: oriSource.src, |
| 529 |
optimizedUrl: imagifyTTT.imageSrc, |
| 530 |
originalSize: oriSource.size, |
| 531 |
optimizedSize: filesize, |
| 532 |
saving: saving, |
| 533 |
modalAppendTo: $oriParent, |
| 534 |
trigger: $( '#imagify-start-comparison' ), |
| 535 |
modalId: 'imagify-visual-comparison' |
| 536 |
} ); |
| 537 |
} |
| 538 |
// Else put images next to next. |
| 539 |
else if ( imagifyTTT.imageWidth < imagifyTTT.widthLimit && oriSource.src ) { |
| 540 |
// TODO |
| 541 |
} |
| 542 |
// If image has no backup. |
| 543 |
else if ( $( '#imagify-full-original' ).length > 0 && '' === oriSource.src ) { |
| 544 |
// do nothing ? |
| 545 |
} |
| 546 |
// In case image is not optimized. |
| 547 |
else { |
| 548 |
// If is not in optimizing process, propose the Optimize button trigger. |
| 549 |
if ( $( '#misc-publishing-actions' ).find( '.misc-pub-imagify .button-primary' ).length === 1 ) { |
| 550 |
$( '[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>' ); |
| 551 |
|
| 552 |
$( '#imagify-optimize-trigger' ).on( 'click', function() { |
| 553 |
$( this ).prev( '.spinner' ).removeClass( 'imagify-hidden' ).addClass( 'is-active' ); |
| 554 |
} ); |
| 555 |
} |
| 556 |
} |
| 557 |
|
| 558 |
} |
| 559 |
|
| 560 |
/** |
| 561 |
* Images comparison in attachments list page (upload.php). |
| 562 |
*/ |
| 563 |
if ( $( '.upload-php .imagify-compare-images' ).length > 0 ) { |
| 564 |
|
| 565 |
$( '.imagify-compare-images' ).each( function() { |
| 566 |
var $this = $( this ), |
| 567 |
id = $this.data( 'id' ), |
| 568 |
$datas = $this.closest( '#post-' + id ).find( '.column-imagify_optimized_file' ); |
| 569 |
|
| 570 |
// Modal and trigger event creation. |
| 571 |
imagifyTwentyModal( { |
| 572 |
width: parseInt( $this.data( 'full-width' ), 10 ), |
| 573 |
height: parseInt( $this.data( 'full-height' ), 10 ), |
| 574 |
originalUrl: $this.data( 'backup-src' ), |
| 575 |
optimizedUrl: $this.data( 'full-src' ), |
| 576 |
originalSize: $datas.find( '.original' ).text(), |
| 577 |
optimizedSize: $datas.find( '.imagify-data-item .big' ).text(), |
| 578 |
saving: $datas.find( '.imagify-chart-value' ).text(), |
| 579 |
modalAppendTo: $this.closest( '.column-primary' ), |
| 580 |
trigger: $this, |
| 581 |
modalId: 'imagify-comparison-' + id |
| 582 |
} ); |
| 583 |
} ); |
| 584 |
} |
| 585 |
|
| 586 |
/** |
| 587 |
* Images Comparison in Grid View modal. |
| 588 |
*/ |
| 589 |
if ( $( '.upload-php' ).length > 0 ) { |
| 590 |
|
| 591 |
var getVar = function( param ) { |
| 592 |
var vars = {}; |
| 593 |
|
| 594 |
w.location.href.replace( |
| 595 |
/[?&]+([^=&]+)=?([^&]*)?/gi, |
| 596 |
function( m, key, value ) { |
| 597 |
vars[ key ] = undefined !== value ? value : ''; |
| 598 |
} |
| 599 |
); |
| 600 |
|
| 601 |
if ( param ) { |
| 602 |
return vars[ param ] ? vars[ param ] : null; |
| 603 |
} |
| 604 |
return vars; |
| 605 |
}, |
| 606 |
imagifyContentInModal = function() { |
| 607 |
var tempTimer = setInterval( function() { |
| 608 |
var $datas, originalSrc, $actions; |
| 609 |
|
| 610 |
if ( ! $( '.media-modal .imagify-datas-details' ).length ) { |
| 611 |
return; |
| 612 |
} |
| 613 |
|
| 614 |
originalSrc = $( '#imagify-original-src' ).val(); |
| 615 |
|
| 616 |
if ( originalSrc ) { |
| 617 |
// Trigger creation. |
| 618 |
$actions = $( '.media-frame-content .attachment-actions' ); |
| 619 |
|
| 620 |
$actions.find( '#imagify-media-frame-comparison-btn' ).remove(); |
| 621 |
$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>' ); |
| 622 |
|
| 623 |
// Get datas. |
| 624 |
$datas = $( '.media-frame-content .compat-field-imagify' ); |
| 625 |
|
| 626 |
// Modal and trigger event creation. |
| 627 |
imagifyTwentyModal( { |
| 628 |
width: parseInt( $( '#imagify-full-width' ).val(), 10 ), |
| 629 |
height: parseInt( $( '#imagify-full-height' ).val(), 10 ), |
| 630 |
originalUrl: originalSrc, |
| 631 |
optimizedUrl: $( '#imagify-full-src' ).val(), |
| 632 |
originalSize: $( '#imagify-original-size' ).val(), |
| 633 |
optimizedSize: $datas.find( '.imagify-data-item .big' ).text(), |
| 634 |
saving: $datas.find( '.imagify-chart-value' ).text(), |
| 635 |
modalAppendTo: $( '.media-frame-content .thumbnail-image' ), |
| 636 |
trigger: $( '#imagify-media-frame-comparison-btn' ), |
| 637 |
modalId: 'imagify-comparison-modal', |
| 638 |
openModal: true |
| 639 |
} ); |
| 640 |
} |
| 641 |
|
| 642 |
clearInterval( tempTimer ); |
| 643 |
tempTimer = null; |
| 644 |
}, 20 ); |
| 645 |
}; |
| 646 |
|
| 647 |
// If attachment is clicked, or the "Previous" and "Next" buttons, build the modal inside the modal. |
| 648 |
$( '.upload-php' ).on( 'click', '.media-frame.mode-grid .attachment, .edit-media-header .left, .edit-media-header .right', function() { |
| 649 |
imagifyContentInModal(); |
| 650 |
} ); |
| 651 |
|
| 652 |
// If attachment is mentionned in URL, build the modal inside the modal. |
| 653 |
if ( getVar( 'item' ) ) { |
| 654 |
imagifyContentInModal(); |
| 655 |
} |
| 656 |
} |
| 657 |
|
| 658 |
/** |
| 659 |
* Images comparison in custom folders list page. |
| 660 |
*/ |
| 661 |
if ( $( '#imagify-files-list-form' ).length > 0 ) { |
| 662 |
|
| 663 |
var buildComparisonModal = function( $buttons ) { |
| 664 |
$buttons.each( function() { |
| 665 |
var $this = $( this ), |
| 666 |
id = $this.data( 'id' ), |
| 667 |
$datas = $this.closest( 'tr' ).find( '.column-optimization .imagify-data-item' ); |
| 668 |
|
| 669 |
$( '#imagify-comparison-' + id ).remove(); |
| 670 |
|
| 671 |
// Modal and trigger event creation. |
| 672 |
imagifyTwentyModal( { |
| 673 |
width: parseInt( $this.data( 'full-width' ), 10 ), |
| 674 |
height: parseInt( $this.data( 'full-height' ), 10 ), |
| 675 |
originalUrl: $this.data( 'backup-src' ), |
| 676 |
optimizedUrl: $this.data( 'full-src' ), |
| 677 |
originalSize: $datas.find( '.original' ).text(), |
| 678 |
optimizedSize: $datas.find( '.optimized' ).text(), |
| 679 |
saving: $datas.find( '.imagify-chart-value' ).text(), |
| 680 |
modalAppendTo: $this.closest( '.column-primary' ), |
| 681 |
trigger: $this, |
| 682 |
modalId: 'imagify-comparison-' + id |
| 683 |
} ); |
| 684 |
} ); |
| 685 |
}; |
| 686 |
|
| 687 |
/** |
| 688 |
* Update the comparison tool window when a file row is updated via ajax, and the ones already printed. |
| 689 |
*/ |
| 690 |
$( w ).on( 'comparisonprinted.imagify', function( e, id ) { |
| 691 |
var $buttons; |
| 692 |
|
| 693 |
id = id || 0; |
| 694 |
|
| 695 |
if ( id ) { |
| 696 |
$buttons = $( '#imagify-files-list-form' ).find( '.imagify-compare-images[data-id="' + id + '"]' ); |
| 697 |
} else { |
| 698 |
$buttons = $( '#imagify-files-list-form' ).find( '.imagify-compare-images' ); |
| 699 |
} |
| 700 |
|
| 701 |
if ( $buttons.length ) { |
| 702 |
buildComparisonModal( $buttons ); |
| 703 |
} |
| 704 |
} ) |
| 705 |
.trigger( 'comparisonprinted.imagify' ); |
| 706 |
} |
| 707 |
|
| 708 |
} )(jQuery, document, window); |
| 709 |
|
