From 48de11cdfb41e988d8598fd58ea1b66828934479 Mon Sep 17 00:00:00 2001 From: Git I Hate You Date: Thu, 12 Oct 2017 13:29:40 +0200 Subject: [PATCH] Hotfix TwentyTwenty: the `load` JS event not being reliable (thank you Webkit), use the image width, height, and source from the database. It allows us not to use another 3rd party JS library. Also, casting values as integers seems to solve some issues. --- assets/js/jquery.twentytwenty.js | 111 +++++++++++++-------------- assets/js/jquery.twentytwenty.min.js | 2 +- inc/admin/media.php | 2 +- inc/functions/i18n.php | 17 +++- 4 files changed, 71 insertions(+), 61 deletions(-) diff --git a/assets/js/jquery.twentytwenty.js b/assets/js/jquery.twentytwenty.js index 6b499c678..cab166cb4 100755 --- a/assets/js/jquery.twentytwenty.js +++ b/assets/js/jquery.twentytwenty.js @@ -483,62 +483,59 @@ /** - * Imagify comparison inside Media post visualization. + * Imagify comparison inside Media post edition. */ - if ( $( '.post-php .wp_attachment_image .thumbnail' ).length > 0 ) { - - $( '.post-php .wp_attachment_image .thumbnail' ).on( 'load', function() { - var $oriParent = $( '.post-php .wp_attachment_image' ), - $thumbnail = $oriParent.find( '.thumbnail' ), - thumb = { src: $thumbnail.prop( 'src' ), width: $thumbnail.width(), height: $thumbnail.height() }, - oriSource = { src: $( '#imagify-full-original' ).val(), size: $( '#imagify-full-original-size' ).val() }, - $optimizeBtn = $( '#misc-publishing-actions' ).find( '.misc-pub-imagify .button-primary' ), - widthLimit = 360, - filesize, saving; - - // If shown image > 360, use twentytwenty. - if ( thumb.width > 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: thumb.width, - height: thumb.height, - originalUrl: oriSource.src, - optimizedUrl: thumb.src, - originalSize: oriSource.size, - optimizedSize: filesize, - saving: saving, - modalAppendTo: $oriParent, - trigger: $( '#imagify-start-comparison' ), - modalId: 'imagify-visual-comparison' + 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' ); } ); } - // Else put images next to next. - else if ( thumb.width < 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' ); - } ); - } - } - } ); + } } @@ -554,8 +551,8 @@ // Modal and trigger event creation. imagifyTwentyModal( { - width: $this.data( 'full-width' ), - height: $this.data( 'full-height' ), + 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(), @@ -607,8 +604,8 @@ // Modal and trigger event creation. imagifyTwentyModal( { - width: $( '#imagify-full-width' ).val(), - height: $( '#imagify-full-height' ).val(), + 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(), diff --git a/assets/js/jquery.twentytwenty.min.js b/assets/js/jquery.twentytwenty.min.js index 0a80fe4da..99282464c 100755 --- a/assets/js/jquery.twentytwenty.min.js +++ b/assets/js/jquery.twentytwenty.min.js @@ -1 +1 @@ -!function(a,b,c,d){a.fn.twentytwenty=function(b,d){return b=a.extend({handlePosition:.5,orientation:"horizontal",labelBefore:"Before",labelAfter:"After"},b),this.each(function(){var e=b.handlePosition,f=a(this),g=b.orientation,h="vertical"===g?"down":"left",i="vertical"===g?"up":"right",j=f.find("img:first"),k=f.find("img:last");f.wrap('
'),f.append('
'),f.append('
');var l=f.find(".twentytwenty-handle");l.append(''),l.append(''),f.addClass("twentytwenty-container"),j.addClass("twentytwenty-before"),k.addClass("twentytwenty-after");var m=f.find(".twentytwenty-overlay");m.append('
'+b.labelBefore+"
"),m.append('
'+b.labelAfter+"
");var n=function(a){var b=j.width(),c=j.height();return{w:b+"px",h:c+"px",cw:a*b+"px",ch:a*c+"px"}},o=function(a){var b=f.find(".twentytwenty-before");"vertical"===g?b.css("clip","rect(0,"+a.w+","+a.ch+",0)"):b.css("clip","rect(0,"+a.cw+","+a.h+",0)"),f.css("height",a.h),"function"==typeof d&&d()},p=function(a){var b=n(a);l.css("vertical"===g?"top":"left","vertical"===g?b.ch:b.cw),o(b)},q=0,r=0,s=0,t=0;a(c).on("resize.twentytwenty",function(){p(e)}),l.on("movestart",function(a){(a.distX>a.distY&&a.distX<-a.distY||a.distX-a.distY)&&"vertical"!==g?a.preventDefault():(a.distXa.distY&&a.distX>-a.distY)&&"vertical"===g&&a.preventDefault(),f.addClass("active"),q=f.offset().left,r=f.offset().top,s=j.width(),t=j.height()}),l.on("moveend",function(){f.removeClass("active")}),l.on("move",function(a){f.hasClass("active")&&(e="vertical"===g?(a.pageY-r)/t:(a.pageX-q)/s,e<0&&(e=0),e>1&&(e=1),p(e))}),f.find("img").on("mousedown",function(a){a.preventDefault()}),a(c).trigger("resize.twentytwenty")})}}(jQuery,document,window),function(a,b,c,d){var e=function(b){b.each(function(){var b=a(this),c=parseInt(b.closest(".imagify-chart").next(".imagify-chart-value").text(),10),d=[{value:c,color:"#00B3D3"},{value:100-c,color:"#D8D8D8"}];new Chart(b[0].getContext("2d")).Doughnut(d,{segmentStrokeColor:"#2A2E3C",segmentStrokeWidth:1,animateRotate:!0,percentageInnerCutout:60,tooltipEvents:[]})})},f=function(b){var d,f={width:0,height:0,originalUrl:"",optimizedUrl:"",originalSize:0,optimizedSize:0,saving:0,modalAppendTo:a("body"),trigger:a('[data-target="imagify-visual-comparison"]'),modalId:"imagify-visual-comparison",openModal:!1},g=a.extend({},f,b);if(0===g.width||0===g.height||""===g.originalUrl||""===g.optimizedUrl||0===g.originalSize||0===g.optimizedSize||0===g.saving)return"error";d='",g.modalAppendTo.append(d),g.trigger.on("click.imagify",function(b){var d,f,h=a(a(this).data("target")),i=0;b.preventDefault(),g.openModal&&c.imagify.openModal(a(this)),h.find(".imagify-modal-content").css({width:.85*a(c).outerWidth()+"px","max-width":g.width}),h.find(".imagify-img-before").on("load",function(){i++}).attr("src",g.originalUrl),h.find(".imagify-img-after").on("load",function(){i++}).attr("src",g.optimizedUrl+(g.optimizedUrl.indexOf("?")>0?"&":"?")+"v="+Date.now()),d=h.find(".twentytwenty-container"),f=setInterval(function(){if(2===i)return d.twentytwenty({handlePosition:.3,orientation:"horizontal",labelBefore:imagifyTTT.labels.originalL,labelAfter:imagifyTTT.labels.optimizedL},function(){var b,f,g,i,j,k,l=a(c).height(),m=h.find(".twentytwenty-container").height(),n=h.find(".twentytwenty-wrapper").position().top;d.closest(".imagify-modal-content").hasClass("loaded")||(d.closest(".imagify-modal-content").removeClass("loading").addClass("loaded"),e(h.find(".imagify-level-optimized .imagify-chart canvas"))),l0&&a(c).outerWidth()<=800||(b=a(".twentytwenty-container"),d=0,f=b.data("loader"),g=b.data("label-original"),h=b.data("label-normal"),i=b.data("label-aggressive"),j=b.data("label-ultra"),k=b.data("original-label").replace(/\*\*/,"").replace(/\*\*/,""),l=b.data("original-alt"),m=b.data("original-img"),n=b.data("original-dim").split("x"),o=b.data("normal-alt"),p=b.data("normal-img"),q=b.data("normal-dim").split("x"),r=b.data("aggressive-alt"),s=b.data("aggressive-img"),t=b.data("aggressive-dim").split("x"),u=b.data("ultra-label").replace(/\*\*/,"").replace(/\*\*/,""),v=b.data("ultra-alt"),w=b.data("ultra-img"),x=b.data("ultra-dim").split("x"),y='',y+='",y+='",y+='",y+="",z='',z+='",z+='",z+='",z+="",b.before('Loading…'),a(".twentytwenty-left-buttons").append(y),a(".twentytwenty-right-buttons").append(z),A=''+l+'',A+=''+o+'',A+=''+r+'',A+=''+v+'',A+=a(".twentytwenty-left-buttons").lenght?y+z:"",b.closest(".imagify-modal-content").addClass("loading").find(".twentytwenty-container").append(A),a(".img-original").on("load",function(){d++}).attr("src",m),a(".img-normal").on("load",function(){d++}).attr("src",p),a(".img-aggressive").on("load",function(){d++}).attr("src",s),a(".img-ultra").on("load",function(){d++}).attr("src",w),B=setInterval(function(){4===d&&(b.twentytwenty({handlePosition:.6,orientation:"horizontal",labelBefore:k,labelAfter:u},function(){b.closest(".imagify-modal-content").hasClass("loaded")||(b.closest(".imagify-modal-content").removeClass("loading").addClass("loaded"),e(a(".imagify-level-ultra .imagify-chart canvas")))}),clearInterval(B),B=null)},75),a(".imagify-comparison-title").on("click",".twentytwenty-duo-buttons button:not(.selected)",function(b){var c,d=a(this),f=d.closest(".imagify-comparison-title").nextAll(".twentytwenty-wrapper").find(".twentytwenty-container"),g=d.closest(".twentytwenty-duo-buttons").hasClass("twentytwenty-duo-left")?"left":"right",h="left"===g?d.closest(".imagify-comparison-title").find(".twentytwenty-duo-right"):d.closest(".imagify-comparison-title").find(".twentytwenty-duo-left"),i=d.closest(".twentytwenty-duo-buttons").find("button"),j=f.find(".twentytwenty-before"),k=f.find(".twentytwenty-after"),l=d.data("img");b.stopPropagation(),b.preventDefault(),i.removeClass("selected"),d.addClass("selected"),h.find(".selected").data("img")===l&&h.find("button:not(.selected)").eq(0).trigger("click"),"left"===g&&(c=j.css("clip"),j.attr("style",""),j.removeClass("twentytwenty-before"),f.find(".img-"+l).addClass("twentytwenty-before").css("clip",c),a(".twentytwenty-before-label .twentytwenty-label-content").text(f.data(l+"-label")),a(".imagify-c-level.go-left").attr("aria-hidden","true").removeClass("go-left go-right"),a(".imagify-level-"+l).attr("aria-hidden","false").addClass("go-left")),"right"===g&&(k.removeClass("twentytwenty-after"),f.find(".img-"+l).addClass("twentytwenty-after"),a(".twentytwenty-after-label .twentytwenty-label-content").text(f.data(l+"-label")),a(".imagify-c-level.go-right").attr("aria-hidden","true").removeClass("go-left go-right"),a(".imagify-level-"+l).attr("aria-hidden","false").addClass("go-right")),e(a(".imagify-level-"+l+" .imagify-chart canvas"))})))}),a(".post-php .wp_attachment_image .thumbnail").length>0&&a(".post-php .wp_attachment_image .thumbnail").on("load",function(){var b,c,d=a(".post-php .wp_attachment_image"),e=d.find(".thumbnail"),g={src:e.prop("src"),width:e.width(),height:e.height()},h={src:a("#imagify-full-original").val(),size:a("#imagify-full-original-size").val()},i=a("#misc-publishing-actions").find(".misc-pub-imagify .button-primary");g.width>360&&h.src?(b=a(".misc-pub-filesize strong").text(),c=a(".imagify-data-item .imagify-chart-value").text(),a('[id^="imgedit-open-btn-"]').before('"),f({width:g.width,height:g.height,originalUrl:h.src,optimizedUrl:g.src,originalSize:h.size,optimizedSize:b,saving:c,modalAppendTo:d,trigger:a("#imagify-start-comparison"),modalId:"imagify-visual-comparison"})):g.width<360&&h.src||a("#imagify-full-original").length>0&&""===h.src||1===a("#misc-publishing-actions").find(".misc-pub-imagify .button-primary").length&&(a('[id^="imgedit-open-btn-"]').before(''+imagifyTTT.labels.optimize+""),a("#imagify-optimize-trigger").on("click",function(){a(this).prev(".spinner").removeClass("imagify-hidden").addClass("is-active")}))}),a(".upload-php .imagify-compare-images").length>0&&a(".imagify-compare-images").each(function(){var b=a(this),c=b.data("id"),d=b.closest("#post-"+c).find(".column-imagify_optimized_file");f({width:b.data("full-width"),height:b.data("full-height"),originalUrl:b.data("backup-src"),optimizedUrl:b.data("full-src"),originalSize:d.find(".original").text(),optimizedSize:d.find(".imagify-data-item .big").text(),saving:d.find(".imagify-chart-value").text(),modalAppendTo:b.closest(".column-primary"),trigger:b,modalId:"imagify-comparison-"+c})}),a(".upload-php").length>0)var g=function(a){var b={};return c.location.href.replace(/[?&]+([^=&]+)=?([^&]*)?/gi,function(a,c,d){b[c]=void 0!==d?d:""}),a?b[a]?b[a]:null:b},h=function(){var b=setInterval(function(){var c,d;a(".media-modal .imagify-datas-details").length&&(d=a("#imagify-original-src").val(),d&&(a(".media-frame-content .attachment-actions").prepend('"),c=a(".media-frame-content .compat-field-imagify"),f({width:a("#imagify-full-width").val(),height:a("#imagify-full-height").val(),originalUrl:d,optimizedUrl:a("#imagify-full-src").val(),originalSize:a("#imagify-original-size").val(),optimizedSize:c.find(".imagify-data-item .big").text(),saving:c.find(".imagify-chart-value").text(),modalAppendTo:a(".media-frame-content .thumbnail-image"),trigger:a("#imagify-media-frame-comparison-btn"),modalId:"imagify-comparison-modal",openModal:!0})),clearInterval(b),b=null)},20)},i=setInterval(function(){a(".upload-php .media-frame.mode-grid .attachments").length&&(a(".upload-php .media-frame.mode-grid").on("click",".attachment",function(){h()}),g("item")&&h(),clearInterval(i),i=null)},100)}(jQuery,document,window); \ No newline at end of file +!function(a,b,c,d){a.fn.twentytwenty=function(b,d){return b=a.extend({handlePosition:.5,orientation:"horizontal",labelBefore:"Before",labelAfter:"After"},b),this.each(function(){var e=b.handlePosition,f=a(this),g=b.orientation,h="vertical"===g?"down":"left",i="vertical"===g?"up":"right",j=f.find("img:first"),k=f.find("img:last");f.wrap('
'),f.append('
'),f.append('
');var l=f.find(".twentytwenty-handle");l.append(''),l.append(''),f.addClass("twentytwenty-container"),j.addClass("twentytwenty-before"),k.addClass("twentytwenty-after");var m=f.find(".twentytwenty-overlay");m.append('
'+b.labelBefore+"
"),m.append('
'+b.labelAfter+"
");var n=function(a){var b=j.width(),c=j.height();return{w:b+"px",h:c+"px",cw:a*b+"px",ch:a*c+"px"}},o=function(a){var b=f.find(".twentytwenty-before");"vertical"===g?b.css("clip","rect(0,"+a.w+","+a.ch+",0)"):b.css("clip","rect(0,"+a.cw+","+a.h+",0)"),f.css("height",a.h),"function"==typeof d&&d()},p=function(a){var b=n(a);l.css("vertical"===g?"top":"left","vertical"===g?b.ch:b.cw),o(b)},q=0,r=0,s=0,t=0;a(c).on("resize.twentytwenty",function(){p(e)}),l.on("movestart",function(a){(a.distX>a.distY&&a.distX<-a.distY||a.distX-a.distY)&&"vertical"!==g?a.preventDefault():(a.distXa.distY&&a.distX>-a.distY)&&"vertical"===g&&a.preventDefault(),f.addClass("active"),q=f.offset().left,r=f.offset().top,s=j.width(),t=j.height()}),l.on("moveend",function(){f.removeClass("active")}),l.on("move",function(a){f.hasClass("active")&&(e="vertical"===g?(a.pageY-r)/t:(a.pageX-q)/s,e<0&&(e=0),e>1&&(e=1),p(e))}),f.find("img").on("mousedown",function(a){a.preventDefault()}),a(c).trigger("resize.twentytwenty")})}}(jQuery,document,window),function(a,b,c,d){var e=function(b){b.each(function(){var b=a(this),c=parseInt(b.closest(".imagify-chart").next(".imagify-chart-value").text(),10),d=[{value:c,color:"#00B3D3"},{value:100-c,color:"#D8D8D8"}];new Chart(b[0].getContext("2d")).Doughnut(d,{segmentStrokeColor:"#2A2E3C",segmentStrokeWidth:1,animateRotate:!0,percentageInnerCutout:60,tooltipEvents:[]})})},f=function(b){var d,f={width:0,height:0,originalUrl:"",optimizedUrl:"",originalSize:0,optimizedSize:0,saving:0,modalAppendTo:a("body"),trigger:a('[data-target="imagify-visual-comparison"]'),modalId:"imagify-visual-comparison",openModal:!1},g=a.extend({},f,b);if(0===g.width||0===g.height||""===g.originalUrl||""===g.optimizedUrl||0===g.originalSize||0===g.optimizedSize||0===g.saving)return"error";d='",g.modalAppendTo.append(d),g.trigger.on("click.imagify",function(b){var d,f,h=a(a(this).data("target")),i=0;b.preventDefault(),g.openModal&&c.imagify.openModal(a(this)),h.find(".imagify-modal-content").css({width:.85*a(c).outerWidth()+"px","max-width":g.width}),h.find(".imagify-img-before").on("load",function(){i++}).attr("src",g.originalUrl),h.find(".imagify-img-after").on("load",function(){i++}).attr("src",g.optimizedUrl+(g.optimizedUrl.indexOf("?")>0?"&":"?")+"v="+Date.now()),d=h.find(".twentytwenty-container"),f=setInterval(function(){if(2===i)return d.twentytwenty({handlePosition:.3,orientation:"horizontal",labelBefore:imagifyTTT.labels.originalL,labelAfter:imagifyTTT.labels.optimizedL},function(){var b,f,g,i,j,k,l=a(c).height(),m=h.find(".twentytwenty-container").height(),n=h.find(".twentytwenty-wrapper").position().top;d.closest(".imagify-modal-content").hasClass("loaded")||(d.closest(".imagify-modal-content").removeClass("loading").addClass("loaded"),e(h.find(".imagify-level-optimized .imagify-chart canvas"))),l0&&a(c).outerWidth()<=800||(b=a(".twentytwenty-container"),d=0,f=b.data("loader"),g=b.data("label-original"),h=b.data("label-normal"),i=b.data("label-aggressive"),j=b.data("label-ultra"),k=b.data("original-label").replace(/\*\*/,"").replace(/\*\*/,""),l=b.data("original-alt"),m=b.data("original-img"),n=b.data("original-dim").split("x"),o=b.data("normal-alt"),p=b.data("normal-img"),q=b.data("normal-dim").split("x"),r=b.data("aggressive-alt"),s=b.data("aggressive-img"),t=b.data("aggressive-dim").split("x"),u=b.data("ultra-label").replace(/\*\*/,"").replace(/\*\*/,""),v=b.data("ultra-alt"),w=b.data("ultra-img"),x=b.data("ultra-dim").split("x"),y='',y+='",y+='",y+='",y+="",z='',z+='",z+='",z+='",z+="",b.before('Loading…'),a(".twentytwenty-left-buttons").append(y),a(".twentytwenty-right-buttons").append(z),A=''+l+'',A+=''+o+'',A+=''+r+'',A+=''+v+'',A+=a(".twentytwenty-left-buttons").lenght?y+z:"",b.closest(".imagify-modal-content").addClass("loading").find(".twentytwenty-container").append(A),a(".img-original").on("load",function(){d++}).attr("src",m),a(".img-normal").on("load",function(){d++}).attr("src",p),a(".img-aggressive").on("load",function(){d++}).attr("src",s),a(".img-ultra").on("load",function(){d++}).attr("src",w),B=setInterval(function(){4===d&&(b.twentytwenty({handlePosition:.6,orientation:"horizontal",labelBefore:k,labelAfter:u},function(){b.closest(".imagify-modal-content").hasClass("loaded")||(b.closest(".imagify-modal-content").removeClass("loading").addClass("loaded"),e(a(".imagify-level-ultra .imagify-chart canvas")))}),clearInterval(B),B=null)},75),a(".imagify-comparison-title").on("click",".twentytwenty-duo-buttons button:not(.selected)",function(b){var c,d=a(this),f=d.closest(".imagify-comparison-title").nextAll(".twentytwenty-wrapper").find(".twentytwenty-container"),g=d.closest(".twentytwenty-duo-buttons").hasClass("twentytwenty-duo-left")?"left":"right",h="left"===g?d.closest(".imagify-comparison-title").find(".twentytwenty-duo-right"):d.closest(".imagify-comparison-title").find(".twentytwenty-duo-left"),i=d.closest(".twentytwenty-duo-buttons").find("button"),j=f.find(".twentytwenty-before"),k=f.find(".twentytwenty-after"),l=d.data("img");b.stopPropagation(),b.preventDefault(),i.removeClass("selected"),d.addClass("selected"),h.find(".selected").data("img")===l&&h.find("button:not(.selected)").eq(0).trigger("click"),"left"===g&&(c=j.css("clip"),j.attr("style",""),j.removeClass("twentytwenty-before"),f.find(".img-"+l).addClass("twentytwenty-before").css("clip",c),a(".twentytwenty-before-label .twentytwenty-label-content").text(f.data(l+"-label")),a(".imagify-c-level.go-left").attr("aria-hidden","true").removeClass("go-left go-right"),a(".imagify-level-"+l).attr("aria-hidden","false").addClass("go-left")),"right"===g&&(k.removeClass("twentytwenty-after"),f.find(".img-"+l).addClass("twentytwenty-after"),a(".twentytwenty-after-label .twentytwenty-label-content").text(f.data(l+"-label")),a(".imagify-c-level.go-right").attr("aria-hidden","true").removeClass("go-left go-right"),a(".imagify-level-"+l).attr("aria-hidden","false").addClass("go-right")),e(a(".imagify-level-"+l+" .imagify-chart canvas"))})))}),imagifyTTT.imageWidth&&a(".post-php .wp_attachment_image .thumbnail").length>0){var g,h,i=a(".post-php .wp_attachment_image"),j={src:a("#imagify-full-original").val(),size:a("#imagify-full-original-size").val()},k=a("#misc-publishing-actions").find(".misc-pub-imagify .button-primary");imagifyTTT.widthLimit=parseInt(imagifyTTT.widthLimit,10),imagifyTTT.imageWidth>imagifyTTT.widthLimit&&j.src?(g=a(".misc-pub-filesize strong").text(),h=a(".imagify-data-item .imagify-chart-value").text(),a('[id^="imgedit-open-btn-"]').before('"),f({width:parseInt(imagifyTTT.imageWidth,10),height:parseInt(imagifyTTT.imageHeight,10),originalUrl:j.src,optimizedUrl:imagifyTTT.imageSrc,originalSize:j.size,optimizedSize:g,saving:h,modalAppendTo:i,trigger:a("#imagify-start-comparison"),modalId:"imagify-visual-comparison"})):imagifyTTT.imageWidth0&&""===j.src||1===a("#misc-publishing-actions").find(".misc-pub-imagify .button-primary").length&&(a('[id^="imgedit-open-btn-"]').before(''+imagifyTTT.labels.optimize+""),a("#imagify-optimize-trigger").on("click",function(){a(this).prev(".spinner").removeClass("imagify-hidden").addClass("is-active")}))}if(a(".upload-php .imagify-compare-images").length>0&&a(".imagify-compare-images").each(function(){var b=a(this),c=b.data("id"),d=b.closest("#post-"+c).find(".column-imagify_optimized_file");f({width:parseInt(b.data("full-width"),10),height:parseInt(b.data("full-height"),10),originalUrl:b.data("backup-src"),optimizedUrl:b.data("full-src"),originalSize:d.find(".original").text(),optimizedSize:d.find(".imagify-data-item .big").text(),saving:d.find(".imagify-chart-value").text(),modalAppendTo:b.closest(".column-primary"),trigger:b,modalId:"imagify-comparison-"+c})}),a(".upload-php").length>0)var l=function(a){var b={};return c.location.href.replace(/[?&]+([^=&]+)=?([^&]*)?/gi,function(a,c,d){b[c]=void 0!==d?d:""}),a?b[a]?b[a]:null:b},m=function(){var b=setInterval(function(){var c,d;a(".media-modal .imagify-datas-details").length&&(d=a("#imagify-original-src").val(),d&&(a(".media-frame-content .attachment-actions").prepend('"),c=a(".media-frame-content .compat-field-imagify"),f({width:parseInt(a("#imagify-full-width").val(),10),height:parseInt(a("#imagify-full-height").val(),10),originalUrl:d,optimizedUrl:a("#imagify-full-src").val(),originalSize:a("#imagify-original-size").val(),optimizedSize:c.find(".imagify-data-item .big").text(),saving:c.find(".imagify-chart-value").text(),modalAppendTo:a(".media-frame-content .thumbnail-image"),trigger:a("#imagify-media-frame-comparison-btn"),modalId:"imagify-comparison-modal",openModal:!0})),clearInterval(b),b=null)},20)},n=setInterval(function(){a(".upload-php .media-frame.mode-grid .attachments").length&&(a(".upload-php .media-frame.mode-grid").on("click",".attachment",function(){m()}),l("item")&&m(),clearInterval(n),n=null)},100)}(jQuery,document,window); \ No newline at end of file diff --git a/inc/admin/media.php b/inc/admin/media.php index b7162722d..e2f45ad13 100755 --- a/inc/admin/media.php +++ b/inc/admin/media.php @@ -73,7 +73,7 @@ function _imagify_add_actions_to_media_list_row( $actions, $post ) { $image = wp_get_attachment_image_src( $post->ID, 'full' ); - // If full image is too small. + // If full image is too small. See get_imagify_localize_script_translations(). if ( ! $image || (int) $image[1] < 360 ) { return $actions; } diff --git a/inc/functions/i18n.php b/inc/functions/i18n.php index 2444315a1..c4d194949 100755 --- a/inc/functions/i18n.php +++ b/inc/functions/i18n.php @@ -4,13 +4,15 @@ /** * Get all translations we can use with wp_localize_script(). * - * @since 1.5 + * @since 1.5 * @author Jonathan Buttigieg * * @param string $context The translation context. * @return array $translations The translations. */ function get_imagify_localize_script_translations( $context ) { + global $post_id; + switch ( $context ) { case 'admin-bar': if ( is_admin() ) { @@ -72,8 +74,19 @@ function get_imagify_localize_script_translations( $context ) { ); case 'twentytwenty': + if ( imagify_is_screen( 'attachment' ) ) { + $image = wp_get_attachment_image_src( $post_id, 'full' ); + $image = $image && is_array( $image ) ? $image : array( '', 0, 0 ); + } else { + $image = array( '', 0, 0 ); + } + return array( - 'labels' => array( + 'imageSrc' => $image[0], + 'imageWidth' => $image[1], + 'imageHeight' => $image[2], + 'widthLimit' => 360, // See _imagify_add_actions_to_media_list_row(). + 'labels' => array( 'filesize' => __( 'File Size:', 'imagify' ), 'saving' => __( 'Original Saving:', 'imagify' ), 'close' => __( 'Close', 'imagify' ),