| @@ -1,66 +1,53 @@ | ||
| 1 | -(function(window, $, undefined){ | |
| 1 | +(function($, d, w, undefined) { // eslint-disable-line no-unused-vars, no-shadow, no-shadow-restricted-names | |
| 2 | 2 | |
| 3 | - $.fn.twentytwenty = function(options, callback) { | |
| 4 | - var options = $.extend({ | |
| 5 | - handlePosition : 0.5, | |
| 6 | - orientation : 'horizontal', | |
| 7 | - labelBefore : 'Before', | |
| 8 | - labelAfter : 'After' | |
| 9 | - } | |
| 10 | - , options); | |
| 11 | - return this.each(function() { | |
| 3 | + $.fn.twentytwenty = function( options, callback ) { | |
| 4 | + options = $.extend( { | |
| 5 | + handlePosition: 0.5, | |
| 6 | + orientation: 'horizontal', | |
| 7 | + labelBefore: 'Before', | |
| 8 | + labelAfter: 'After' | |
| 9 | + }, options ); | |
| 12 | 10 | |
| 13 | - var sliderPct = options.handlePosition, | |
| 14 | - $container = $(this), | |
| 15 | - sliderOrientation = options.orientation, | |
| 16 | - beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left', | |
| 17 | - afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right', | |
| 18 | - $beforeImg = $container.find('img:first'), | |
| 19 | - $afterImg = $container.find('img:last'); | |
| 20 | - | |
| 21 | - | |
| 22 | - $container.wrap('<div class="twentytwenty-wrapper twentytwenty-' + sliderOrientation + '"></div>'); | |
| 23 | - $container.append('<div class="twentytwenty-overlay"></div>'); | |
| 24 | - $container.append('<div class="twentytwenty-handle"></div>'); | |
| 25 | - | |
| 26 | - var $slider = $container.find('.twentytwenty-handle'); | |
| 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 | 27 | |
| 28 | - $slider.append('<span class="twentytwenty-' + beforeDirection + '-arrow"></span>'); | |
| 29 | - $slider.append('<span class="twentytwenty-' + afterDirection + '-arrow"></span>'); | |
| 30 | - $container.addClass('twentytwenty-container'); | |
| 31 | - $beforeImg.addClass('twentytwenty-before'); | |
| 32 | - $afterImg.addClass('twentytwenty-after'); | |
| 33 | - | |
| 34 | - var $overlay = $container.find('.twentytwenty-overlay'); | |
| 28 | + if ( ! width || ! height ) { | |
| 29 | + width = parseInt( $beforeImg.attr( 'width' ), 10 ); | |
| 30 | + height = parseInt( $beforeImg.attr( 'height' ), 10 ); | |
| 31 | + } | |
| 35 | 32 | |
| 36 | - $overlay.append('<div class="twentytwenty-labels twentytwenty-before-label"><span class="twentytwenty-label-content">' + options.labelBefore + '</span></div>'); | |
| 37 | - $overlay.append('<div class="twentytwenty-labels twentytwenty-after-label"><span class="twentytwenty-label-content">' + options.labelAfter + '</span></div>'); | |
| 38 | - | |
| 39 | - | |
| 40 | - // some usefull function and vars declarations | |
| 41 | - | |
| 42 | - var calcOffset = function(dimensionPct) { | |
| 43 | - var w = $beforeImg.width(); | |
| 44 | - var h = $beforeImg.height(); | |
| 45 | 33 | return { |
| 46 | - w: w+"px", | |
| 47 | - h: h+"px", | |
| 48 | - cw: (dimensionPct*w)+"px", | |
| 49 | - ch: (dimensionPct*h)+"px" | |
| 34 | + w: width + "px", | |
| 35 | + h: height + "px", | |
| 36 | + cw: ( dimensionPct * width ) + "px", | |
| 37 | + ch: ( dimensionPct * height ) + "px" | |
| 50 | 38 | }; |
| 51 | 39 | }, |
| 52 | - | |
| 53 | 40 | adjustContainer = function( offset ) { |
| 54 | - // make it dynamic, in case "before" image change | |
| 55 | - var $beforeImg = $container.find('.twentytwenty-before'); | |
| 41 | + // Make it dynamic, in case the "before" image changes. | |
| 42 | + var $beforeImage = $container.find( '.twentytwenty-before' ); | |
| 56 | 43 | |
| 57 | - if ( sliderOrientation === 'vertical' ) { | |
| 58 | - $beforeImg.css( 'clip', 'rect(0,' + offset.w + ',' + offset.ch + ',0)' ); | |
| 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)' ); | |
| 59 | 48 | } |
| 60 | - else { | |
| 61 | - $beforeImg.css( 'clip', 'rect(0,' + offset.cw + ',' + offset.h + ',0)' ); | |
| 62 | - } | |
| 49 | + | |
| 63 | 50 | $container.css( 'height', offset.h ); |
| 64 | 51 | |
| 65 | 52 | if ( typeof callback === 'function' ) { |
| 66 | 53 | callback(); |
| @@ -66,349 +53,656 @@ | ||
| 66 | 53 | callback(); |
| 67 | 54 | } |
| 68 | 55 | }, |
| 69 | 56 | adjustSlider = function( pct ) { |
| 70 | - var offset = calcOffset(pct); | |
| 71 | - $slider.css( ( sliderOrientation === 'vertical' ) ? 'top' : 'left', ( sliderOrientation === 'vertical' ) ? offset.ch : offset.cw ); | |
| 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 | + | |
| 72 | 65 | adjustContainer( offset ); |
| 73 | - }, | |
| 74 | - offsetX = 0, | |
| 75 | - offsetY = 0, | |
| 76 | - imgWidth = 0, | |
| 77 | - imgHeight = 0; | |
| 66 | + }; | |
| 78 | 67 | |
| 79 | - $(window).on('resize.twentytwenty', function(e) { | |
| 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() { | |
| 80 | 92 | adjustSlider( sliderPct ); |
| 81 | - }); | |
| 82 | - | |
| 83 | - $slider.on('movestart', function(e) { | |
| 84 | - if ( ( ( e.distX > e.distY && e.distX < -e.distY ) || ( e.distX < e.distY && e.distX > -e.distY ) ) && sliderOrientation !== 'vertical' ) { | |
| 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 ) ) ) { | |
| 85 | 97 | e.preventDefault(); |
| 86 | - } | |
| 87 | - else if ( ( ( e.distX < e.distY && e.distX < -e.distY ) || ( e.distX > e.distY && e.distX > -e.distY ) ) && sliderOrientation === 'vertical' ) { | |
| 98 | + } else if ( 'vertical' === sliderOrientation && ( ( e.distX < e.distY && e.distX < -e.distY ) || ( e.distX > e.distY && e.distX > -e.distY ) ) ) { | |
| 88 | 99 | e.preventDefault(); |
| 89 | 100 | } |
| 90 | - $container.addClass('active'); | |
| 91 | - offsetX = $container.offset().left; | |
| 92 | - offsetY = $container.offset().top; | |
| 93 | - imgWidth = $beforeImg.width(); | |
| 94 | - imgHeight = $beforeImg.height(); | |
| 95 | - }); | |
| 96 | 101 | |
| 97 | - $slider.on('moveend', function(e) { | |
| 98 | - $container.removeClass('active'); | |
| 99 | - }); | |
| 102 | + $container.addClass( 'active' ); | |
| 100 | 103 | |
| 101 | - $slider.on('move', function(e) { | |
| 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 ) { | |
| 102 | 115 | if ( $container.hasClass('active') ) { |
| 116 | + sliderPct = 'vertical' === sliderOrientation ? ( e.pageY - offsetY ) / imgHeight : ( e.pageX - offsetX ) / imgWidth; | |
| 103 | 117 | |
| 104 | - sliderPct = ( sliderOrientation === 'vertical' ) ? ( e.pageY-offsetY )/imgHeight : ( e.pageX-offsetX )/imgWidth; | |
| 105 | - | |
| 106 | 118 | if ( sliderPct < 0 ) { |
| 107 | 119 | sliderPct = 0; |
| 108 | - } | |
| 109 | - if ( sliderPct > 1 ) { | |
| 120 | + } else if ( sliderPct > 1 ) { | |
| 110 | 121 | sliderPct = 1; |
| 111 | 122 | } |
| 123 | + | |
| 112 | 124 | adjustSlider( sliderPct ); |
| 113 | 125 | } |
| 114 | - }); | |
| 126 | + } ); | |
| 115 | 127 | |
| 116 | - $container.find('img').on('mousedown', function(event) { | |
| 117 | - event.preventDefault(); | |
| 118 | - }); | |
| 128 | + $container.find( 'img' ).on( 'mousedown', function( e ) { | |
| 129 | + e.preventDefault(); | |
| 130 | + } ); | |
| 119 | 131 | |
| 120 | - $(window).trigger('resize.twentytwenty'); | |
| 121 | - }); | |
| 132 | + $( w ).trigger( 'resize.twentytwenty' ); | |
| 133 | + } ); | |
| 122 | 134 | }; |
| 123 | 135 | |
| 124 | -})(window, jQuery); | |
| 136 | +} )(jQuery, document, window); | |
| 125 | 137 | |
| 126 | 138 | /** |
| 127 | 139 | * Twentytwenty Imagify Init |
| 128 | 140 | */ |
| 129 | -(function(window, $, undefined){ | |
| 141 | +(function($, d, w, undefined) { // eslint-disable-line no-unused-vars, no-shadow, no-shadow-restricted-names | |
| 130 | 142 | |
| 131 | 143 | /* |
| 132 | 144 | * Mini chart |
| 133 | 145 | * |
| 134 | 146 | * @param {element} canvas |
| 135 | - */ | |
| 136 | - var draw_me_a_chart = function ( canvas ) { | |
| 137 | - canvas.each(function(){ | |
| 138 | - var the_value = parseInt( $(this).closest('.imagify-chart').next('.imagify-chart-value').text() ), | |
| 139 | - overviewData = [ | |
| 140 | - { | |
| 141 | - value: the_value, | |
| 142 | - color: '#00B3D3' | |
| 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 | |
| 143 | 197 | }, |
| 144 | - { | |
| 145 | - value: 100 - the_value, | |
| 146 | - color: '#D8D8D8' | |
| 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 imagify-original-fize-size">'; | |
| 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 ) ); | |
| 147 | 247 | } |
| 148 | - ], | |
| 149 | - overviewDoughnut = new Chart( $(this)[0].getContext('2d')).Doughnut(overviewData, { | |
| 150 | - segmentStrokeColor : '#2A2E3C', | |
| 151 | - segmentStrokeWidth : 1, | |
| 152 | - animateRotate : true, | |
| 153 | - percentageInnerCutout: 60, | |
| 154 | - tooltipEvents : [] | |
| 155 | - }); | |
| 156 | - }); | |
| 157 | - }; | |
| 158 | 248 | |
| 159 | - $('.imagify-visual-comparison-btn').on('click', function(){ | |
| 249 | + $modal.find( '.imagify-modal-content' ).css( { | |
| 250 | + 'width': ( $( w ).outerWidth() * 0.85 ) + 'px', | |
| 251 | + 'max-width': settings.width | |
| 252 | + } ); | |
| 160 | 253 | |
| 161 | - if ( $('.twentytwenty-wrapper').length === 1) { | |
| 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 ) { | |
| 162 | 344 | return; |
| 163 | 345 | } |
| 164 | - | |
| 165 | - $( $(this).data('target') ).find('.imagify-modal-content').css('width', ($(window).outerWidth()*0.95) + 'px'); | |
| 166 | 346 | |
| 167 | - if ( $('.twentytwenty-container').length > 0 && $(window).outerWidth() > 800 ) { | |
| 347 | + $( $( this ).data( 'target' ) ).find( '.imagify-modal-content' ).css( 'width', ( $( w ).outerWidth() * 0.95 ) + 'px' ); | |
| 168 | 348 | |
| 169 | - var $tt = $('.twentytwenty-container'), | |
| 170 | - imgs_loaded = 0, | |
| 171 | - loader = $tt.data('loader'), | |
| 172 | - label_original = $tt.data('label-original'), | |
| 173 | - label_normal = $tt.data('label-normal'), | |
| 174 | - label_aggressive = $tt.data('label-aggressive'), | |
| 175 | - label_ultra = $tt.data('label-ultra'), | |
| 349 | + if ( $( '.twentytwenty-container' ).length > 0 && $( w ).outerWidth() <= 800 ) { | |
| 350 | + return; | |
| 351 | + } | |
| 176 | 352 | |
| 177 | - original_label = $tt.data('original-label').replace(/\*\*/, '<strong>').replace(/\*\*/, '</strong>'), | |
| 178 | - original_alt = $tt.data('original-alt'), | |
| 179 | - original_src = $tt.data('original-img'), | |
| 180 | - original_dim = $tt.data('original-dim').split('x'), | |
| 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' ); | |
| 181 | 360 | |
| 182 | - normal_label = $tt.data('normal-label').replace(/\*\*/, '<strong>').replace(/\*\*/, '</strong>'), | |
| 183 | - normal_alt = $tt.data('normal-alt'), | |
| 184 | - normal_src = $tt.data('normal-img'), | |
| 185 | - normal_dim = $tt.data('normal-dim').split('x'), | |
| 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' ); | |
| 186 | 365 | |
| 187 | - aggressive_label = $tt.data('aggressive-label').replace(/\*\*/, '<strong>').replace(/\*\*/, '</strong>'), | |
| 188 | - aggressive_alt = $tt.data('aggressive-alt'), | |
| 189 | - aggressive_src = $tt.data('aggressive-img'), | |
| 190 | - aggressive_dim = $tt.data('aggressive-dim').split('x'), | |
| 366 | + normalAlt = $tt.data( 'normal-alt' ); | |
| 367 | + normalSrc = $tt.data( 'normal-img' ); | |
| 368 | + normalDim = $tt.data( 'normal-dim' ).split( 'x' ); | |
| 191 | 369 | |
| 192 | - ultra_label = $tt.data('ultra-label').replace(/\*\*/, '<strong>').replace(/\*\*/, '</strong>'), | |
| 193 | - ultra_alt = $tt.data('ultra-alt'), | |
| 194 | - ultra_src = $tt.data('ultra-img'), | |
| 195 | - ultra_dim = $tt.data('ultra-dim').split('x'), | |
| 370 | + aggressiveAlt = $tt.data( 'aggressive-alt' ); | |
| 371 | + aggressiveSrc = $tt.data( 'aggressive-img' ); | |
| 372 | + aggressiveDim = $tt.data( 'aggressive-dim' ).split( 'x' ); | |
| 196 | 373 | |
| 197 | - tt_before_buttons = '<span class="twentytwenty-duo-buttons twentytwenty-duo-left">' + | |
| 198 | - '<button type="button" class="imagify-comparison-original selected" data-img="original">' + label_original + '</button>' + | |
| 199 | - '<button type="button" class="imagify-comparison-normal" data-img="normal">' + label_normal + '</button>' + | |
| 200 | - '<button type="button" class="imagify-comparison-aggressive" data-img="aggressive">' + label_aggressive + '</button>' + | |
| 201 | - '</span>', | |
| 202 | - tt_after_buttons = '<span class="twentytwenty-duo-buttons twentytwenty-duo-right">' + | |
| 203 | - '<button type="button" class="imagify-comparison-normal" data-img="normal">' + label_normal + '</button>' + | |
| 204 | - '<button type="button" class="imagify-comparison-aggressive" data-img="aggressive">' + label_aggressive + '</button>' + | |
| 205 | - '<button type="button" class="imagify-comparison-ultra selected" data-img="ultra">' + label_ultra + '</button>' + | |
| 206 | - '</span>'; | |
| 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' ); | |
| 207 | 378 | |
| 208 | - // loader | |
| 209 | - $tt.before('<img class="loader" src="' + loader + '" alt="Loading…" width="64" height="64">') | |
| 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>'; | |
| 210 | 393 | |
| 211 | - // add switchers button only if needed | |
| 212 | - // should be more locally integrate... | |
| 213 | - var duo_buttons = ( $('.twentytwenty-left-buttons').lenght ) ? tt_before_buttons + tt_after_buttons : ''; | |
| 214 | - // should be more locally integrate... | |
| 215 | - $('.twentytwenty-left-buttons').append(tt_before_buttons); | |
| 216 | - $('.twentytwenty-right-buttons').append(tt_after_buttons); | |
| 394 | + // Loader. | |
| 395 | + $tt.before( '<img class="loader" src="' + loader + '" alt="Loading…" width="64" height="64">' ); | |
| 217 | 396 | |
| 218 | - // add images to 50/50 area | |
| 219 | - $tt.closest('.imagify-modal-content').addClass('loading').find('.twentytwenty-container').append( | |
| 220 | - '<img class="img-original" alt="' + original_alt + '" width="' + original_dim[0] + '" height="' + original_dim[1] + '">' + | |
| 221 | - '<img class="img-normal" alt="' + normal_alt + '" width="' + normal_dim[0] + '" height="' + normal_dim[1] + '">' + | |
| 222 | - '<img class="img-aggressive" alt="' + aggressive_alt + '" width="' + aggressive_dim[0] + '" height="' + aggressive_dim[1] + '">' + | |
| 223 | - '<img class="img-ultra" alt="' + ultra_alt + '" width="' + ultra_dim[0] + '" height="' + ultra_dim[1] + '">' + | |
| 224 | - duo_buttons | |
| 225 | - ); | |
| 397 | + // Should be more locally integrated... | |
| 398 | + $( '.twentytwenty-left-buttons' ).append( ttBeforeButtons ); | |
| 399 | + $( '.twentytwenty-right-buttons' ).append( ttAfterButtons ); | |
| 226 | 400 | |
| 227 | - // load image original | |
| 228 | - $('.img-original').on('load', function(){ | |
| 229 | - imgs_loaded++; | |
| 230 | - }).attr('src', original_src); | |
| 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 : ''; | |
| 231 | 408 | |
| 232 | - // load image normal | |
| 233 | - $('.img-normal').on('load', function(){ | |
| 234 | - imgs_loaded++; | |
| 235 | - }).attr('src', normal_src); | |
| 409 | + // Add images to 50/50 area. | |
| 410 | + $tt.closest( '.imagify-modal-content' ).addClass( 'loading' ).find( '.twentytwenty-container' ).append( image50 ); | |
| 236 | 411 | |
| 237 | - // load image aggressive | |
| 238 | - $('.img-aggressive').on('load', function(){ | |
| 239 | - imgs_loaded++; | |
| 240 | - }).attr('src', aggressive_src); | |
| 412 | + // Load image original. | |
| 413 | + $( '.img-original' ).on( 'load', function() { | |
| 414 | + imgsLoaded++; | |
| 415 | + } ).attr( 'src', originalSrc ); | |
| 241 | 416 | |
| 242 | - // load image ultra | |
| 243 | - $('.img-ultra').on('load', function(){ | |
| 244 | - imgs_loaded++; | |
| 245 | - }).attr('src', ultra_src); | |
| 417 | + // Load image normal. | |
| 418 | + $( '.img-normal' ).on( 'load', function() { | |
| 419 | + imgsLoaded++; | |
| 420 | + } ).attr( 'src', normalSrc ); | |
| 246 | 421 | |
| 247 | - var twenty_me = setInterval(function(){ | |
| 248 | - if ( imgs_loaded === 4 ) { | |
| 249 | - $tt.twentytwenty({ | |
| 250 | - handlePosition: 0.6, | |
| 251 | - orientation: 'horizontal', | |
| 252 | - labelBefore: original_label, | |
| 253 | - labelAfter: ultra_label | |
| 254 | - }, function(){ | |
| 255 | - // fires on initialisation & each time the handle is moving | |
| 256 | - if ( ! $tt.closest('.imagify-modal-content').hasClass('loaded') ) { | |
| 257 | - $tt.closest('.imagify-modal-content').removeClass('loading').addClass('loaded'); | |
| 258 | - draw_me_a_chart( $('.imagify-level-ultra').find('.imagify-chart').find('canvas') ); | |
| 259 | - } | |
| 260 | - }); | |
| 261 | - clearInterval( twenty_me ); | |
| 262 | - twenty_me = null; | |
| 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' ) ); | |
| 263 | 447 | } |
| 264 | - }, 75); | |
| 448 | + } ); | |
| 265 | 449 | |
| 266 | - // on click on button choices | |
| 267 | - | |
| 268 | - $('.imagify-comparison-title').on('click', '.twentytwenty-duo-buttons button:not(.selected)', function(e){ | |
| 450 | + clearInterval( twentyMe ); | |
| 451 | + twentyMe = null; | |
| 452 | + }, 75); | |
| 269 | 453 | |
| 270 | - e.stopPropagation(); | |
| 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; | |
| 271 | 465 | |
| 272 | - var $_this = $(this), | |
| 273 | - $container = $_this.closest('.imagify-comparison-title').nextAll('.twentytwenty-wrapper').find('.twentytwenty-container'), | |
| 274 | - side = $_this.closest('.twentytwenty-duo-buttons').hasClass('twentytwenty-duo-left') ? 'left' : 'right', | |
| 275 | - $other_side = side === 'left' ? $_this.closest('.imagify-comparison-title').find('.twentytwenty-duo-right') : $_this.closest('.imagify-comparison-title').find('.twentytwenty-duo-left'), | |
| 276 | - $duo = $_this.closest('.twentytwenty-duo-buttons').find('button'), | |
| 277 | - $img_before = $container.find('.twentytwenty-before'), | |
| 278 | - $img_after = $container.find('.twentytwenty-after'), | |
| 279 | - image = $_this.data('img'); | |
| 466 | + e.stopPropagation(); | |
| 467 | + e.preventDefault(); | |
| 280 | 468 | |
| 281 | - // button coloration | |
| 282 | - $duo.removeClass('selected'); | |
| 283 | - $_this.addClass('selected'); | |
| 469 | + // Button coloration. | |
| 470 | + $duo.removeClass( 'selected' ); | |
| 471 | + $this.addClass( 'selected' ); | |
| 284 | 472 | |
| 285 | - // other side action (to not compare same images) | |
| 286 | - if ( $other_side.find('.selected').data('img') === image ) { | |
| 287 | - $other_side.find('button:not(.selected)').eq(0).trigger('click'); | |
| 288 | - } | |
| 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 | + } | |
| 289 | 477 | |
| 290 | - // left buttons | |
| 291 | - if ( side === 'left' ) { | |
| 292 | - var clip_styles = $img_before.css('clip'); | |
| 293 | - $img_before.attr('style', ''); | |
| 294 | - $img_before.removeClass('twentytwenty-before'); | |
| 295 | - $container.find( '.img-' + image ).addClass('twentytwenty-before').css('clip', clip_styles); | |
| 296 | - $('.twentytwenty-before-label').find('.twentytwenty-label-content').text( $container.data( image + '-label' ) ); | |
| 297 | - $('.imagify-c-level.go-left').attr('aria-hidden', 'true').removeClass('go-left go-right'); | |
| 298 | - $('.imagify-level-' + image).attr('aria-hidden', 'false').addClass('go-left'); | |
| 299 | - } | |
| 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 | + } | |
| 300 | 488 | |
| 301 | - // right buttons | |
| 302 | - if ( side === 'right' ) { | |
| 303 | - $img_after.removeClass('twentytwenty-after') | |
| 304 | - $container.find( '.img-' + image ).addClass('twentytwenty-after'); | |
| 305 | - $('.twentytwenty-after-label').find('.twentytwenty-label-content').text( $container.data( image + '-label' ) ); | |
| 306 | - $('.imagify-c-level.go-right').attr('aria-hidden', 'true').removeClass('go-left go-right'); | |
| 307 | - $('.imagify-level-' + image).attr('aria-hidden', 'false').addClass('go-right'); | |
| 308 | - } | |
| 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 | + } | |
| 309 | 497 | |
| 310 | - draw_me_a_chart( $('.imagify-level-' + image).find('.imagify-chart').find('canvas') ); | |
| 498 | + drawMeAChart( $( '.imagify-level-' + image + ' .imagify-chart canvas' ) ); | |
| 499 | + } ); | |
| 500 | + } ); | |
| 311 | 501 | |
| 312 | - return false; | |
| 313 | 502 | |
| 314 | - }); | |
| 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 = $( '#imagify-full-optimized-size' ).val(); | |
| 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 | + } ); | |
| 315 | 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>' ); | |
| 316 | 551 | |
| 317 | - }); | |
| 552 | + $( '#imagify-optimize-trigger' ).on( 'click', function() { | |
| 553 | + $( this ).prev( '.spinner' ).removeClass( 'imagify-hidden' ).addClass( 'is-active' ); | |
| 554 | + } ); | |
| 555 | + } | |
| 556 | + } | |
| 318 | 557 | |
| 319 | - // Imagify comparison inside Media post visualization | |
| 320 | - | |
| 321 | - if ( $('.post-php').find('.wp_attachment_image').find('.thumbnail').length > 0 ) { | |
| 322 | - var $ori_parent = $('.post-php').find('.wp_attachment_image'), | |
| 323 | - $thumbnail = $ori_parent.find('.thumbnail'), | |
| 324 | - thumb = { src: $thumbnail.prop('src'), width: $thumbnail.width(), height: $thumbnail.height() }, | |
| 325 | - ori_source = { src: $('#imagify-full-original').val(), size: $('#imagify-full-original-size').val() }; | |
| 558 | + } | |
| 326 | 559 | |
| 327 | - // if shown image > 300, use twentytwenty | |
| 328 | - if ( thumb.width > 300 && $('#imagify-full-original').length > 0 ) { | |
| 560 | + /** | |
| 561 | + * Images comparison in attachments list page (upload.php). | |
| 562 | + */ | |
| 563 | + if ( $( '.upload-php .imagify-compare-images' ).length > 0 ) { | |
| 329 | 564 | |
| 330 | - var imgs_loaded = 0, | |
| 331 | - filesize = $('.misc-pub-filesize').find('strong').text(), | |
| 332 | - saving = $('.imagify-data-item').find('.imagify-chart-value').text(); | |
| 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' ); | |
| 333 | 569 | |
| 334 | - // create button to trigger | |
| 335 | - $('[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>') | |
| 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_sum .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 | + } | |
| 336 | 585 | |
| 337 | - // create modal box | |
| 338 | - $ori_parent.append('' | |
| 339 | - + '<div id="imagify-visual-comparison" class="imagify-modal" aria-hidden="true">' | |
| 340 | - + '<div class="imagify-modal-content loading">' | |
| 341 | - + '<div class="twentytwenty-container">' | |
| 342 | - + '<img class="imagify-img-before" alt="" width="' + thumb.width + '" height="' + thumb.height + '">' | |
| 343 | - + '<img class="imagify-img-after" alt="" width="' + thumb.width + '" height="' + thumb.height + '">' | |
| 344 | - + '</div>' | |
| 345 | - + '<div class="imagify-comparison-levels">' | |
| 346 | - + '<div class="imagify-c-level imagify-level-original go-left">' | |
| 347 | - + '<p class="imagify-c-level-row">' | |
| 348 | - + '<span class="label">' + imagifyTTT.labels.filesize + '</span>' | |
| 349 | - + '<span class="value level">' + ori_source.size + '</span>' | |
| 350 | - + '</p>' | |
| 351 | - + '</div>' | |
| 352 | - + '<div class="imagify-c-level imagify-level-optimized go-right">' | |
| 353 | - + '<p class="imagify-c-level-row">' | |
| 354 | - + '<span class="label">' + imagifyTTT.labels.filesize + '</span>' | |
| 355 | - + '<span class="value level">' + filesize + '</span>' | |
| 356 | - + '</p>' | |
| 357 | - + '<p class="imagify-c-level-row">' | |
| 358 | - + '<span class="label">' + imagifyTTT.labels.saving + '</span>' | |
| 359 | - + '<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">' + saving + '</span>%</span>' | |
| 360 | - + '</p>' | |
| 361 | - +'</div>' | |
| 362 | - + '</div>' | |
| 363 | - + '<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>' | |
| 364 | - + '</div>' | |
| 365 | - + '</div>' | |
| 366 | - ); | |
| 586 | + /** | |
| 587 | + * Images Comparison in Grid View modal. | |
| 588 | + */ | |
| 589 | + if ( $( '.upload-php' ).length > 0 ) { | |
| 367 | 590 | |
| 368 | - $('#imagify-start-comparison').on('click.imagify', function(){ | |
| 591 | + var getVar = function( param ) { | |
| 592 | + var vars = {}; | |
| 369 | 593 | |
| 370 | - $( $(this).data('target') ).find('.imagify-modal-content').css({ | |
| 371 | - 'width' : ($(window).outerWidth()*0.95) + 'px', | |
| 372 | - 'max-width' : thumb.width | |
| 373 | - }); | |
| 594 | + w.location.href.replace( | |
| 595 | + /[?&]+([^=&]+)=?([^&]*)?/gi, | |
| 596 | + function( m, key, value ) { | |
| 597 | + vars[ key ] = undefined !== value ? value : ''; | |
| 598 | + } | |
| 599 | + ); | |
| 374 | 600 | |
| 375 | - // load before img | |
| 376 | - $('.imagify-img-before').on('load', function(){ | |
| 377 | - imgs_loaded++; | |
| 378 | - }).attr('src', ori_source.src); | |
| 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; | |
| 379 | 609 | |
| 380 | - // load after img | |
| 381 | - $('.imagify-img-after').on('load', function(){ | |
| 382 | - imgs_loaded++; | |
| 383 | - }).attr('src', thumb.src); | |
| 610 | + if ( ! $( '.media-modal .imagify-datas-details' ).length ) { | |
| 611 | + return; | |
| 612 | + } | |
| 384 | 613 | |
| 385 | - var $tt = $('.twentytwenty-container'), | |
| 386 | - check_load = setInterval( function(){ | |
| 614 | + originalSrc = $( '#imagify-original-src' ).val(); | |
| 387 | 615 | |
| 388 | - if ( imgs_loaded === 2 ) { | |
| 389 | - $tt.twentytwenty({ | |
| 390 | - handlePosition: 0.3, | |
| 391 | - orientation: 'horizontal', | |
| 392 | - labelBefore: imagifyTTT.labels.original_l, | |
| 393 | - labelAfter: imagifyTTT.labels.optimized_l | |
| 394 | - }, function(){ | |
| 395 | - if ( ! $tt.closest('.imagify-modal-content').hasClass('loaded') ) { | |
| 396 | - $tt.closest('.imagify-modal-content').removeClass('loading').addClass('loaded'); | |
| 397 | - draw_me_a_chart( $('.imagify-level-optimized').find('.imagify-chart').find('canvas') ); | |
| 398 | - } | |
| 399 | - }); | |
| 400 | - clearInterval( check_load ); | |
| 401 | - check_load = null; | |
| 402 | - } | |
| 403 | - }, 75 ); | |
| 616 | + if ( originalSrc ) { | |
| 617 | + // Trigger creation. | |
| 618 | + $actions = $( '.media-frame-content .attachment-actions' ); | |
| 404 | 619 | |
| 405 | - }); | |
| 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_sum .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(); | |
| 406 | 655 | } |
| 407 | - // else put images next to next | |
| 408 | - else { | |
| 656 | + } | |
| 409 | 657 | |
| 410 | - } | |
| 658 | + /** | |
| 659 | + * Images comparison in custom folders list page. | |
| 660 | + */ | |
| 661 | + if ( $( '#imagify-files-list-form' ).length > 0 ) { | |
| 411 | 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' ); | |
| 412 | 706 | } |
| 413 | 707 | |
| 414 | -})(window, jQuery); | |
| 708 | +} )(jQuery, document, window); | |
