Ubuntu

' ); $container.children( '.twentytwenty-overlay, .twentytwenty-handle' ).remove(); $container.append( '

' ); $container.append( '

' ); $slider = $container.find( '.twentytwenty-handle' ); $slider.append( '' ); $slider.append( '' ); $container.addClass( 'twentytwenty-container' ); $beforeImg.addClass( 'twentytwenty-before' ); $afterImg.addClass( 'twentytwenty-after' ); $overlay = $container.find( '.twentytwenty-overlay' ); $overlay.append( '

' + options.labelBefore + '

' ); $overlay.append( '

' + options.labelAfter + '

' ); $( 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 = ''; 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( /\*\*/, '' ).replace( /\*\*/, '' ); 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( /\*\*/, '' ).replace( /\*\*/, '' ); ultraAlt = $tt.data( 'ultra-alt' ); ultraSrc = $tt.data( 'ultra-img' ); ultraDim = $tt.data( 'ultra-dim' ).split( 'x' ); ttBeforeButtons = ''; /* eslint-disable indent */ ttBeforeButtons += ''; ttBeforeButtons += ''; ttBeforeButtons += ''; /* eslint-enable indent */ ttBeforeButtons += ''; ttAfterButtons = ''; /* eslint-disable indent */ ttAfterButtons += ''; ttAfterButtons += ''; ttAfterButtons += ''; /* eslint-enable indent */ ttAfterButtons += ''; // Loader. $tt.before( '

' ); // Should be more locally integrated... $( '.twentytwenty-left-buttons' ).append( ttBeforeButtons ); $( '.twentytwenty-right-buttons' ).append( ttAfterButtons ); image50 = ' ' + originalAlt + '

'; image50 += ' ' + normalAlt + '

'; image50 += ' ' + aggressiveAlt + '

'; image50 += ' ' + ultraAlt + '

'; // 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( '' ); // 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( '' + imagifyTTT.labels.optimize + '' ); $( '#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( '' ); // 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);