# imagify/1.4.2/assets/js/jquery.twentytwenty.min.js

Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF, version 1.4.2. 23 lines.

- Page: https://pluginprobe.com/plugins/imagify/1.4.2/code/assets/js/jquery.twentytwenty.min.js
- Raw: https://pluginprobe.com/plugins/imagify/1.4.2/raw/assets/js/jquery.twentytwenty.min.js
- Modified: 2016-02-27T17:21:00+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/imagify/1.4.2/code/assets/js/jquery.twentytwenty.min.js#L10-L20`.

```javascript
(function(r,a,l){a.fn.twentytwenty=function(p,e){p=a.extend({handlePosition:.5,orientation:"horizontal",labelBefore:"Before",labelAfter:"After"},p);return this.each(function(){var h=p.handlePosition,c=a(this),f=p.orientation,m="vertical"===f?"down":"left",q="vertical"===f?"up":"right",d=c.find("img:first"),l=c.find("img:last");c.wrap('<div class="twentytwenty-wrapper twentytwenty-'+f+'"></div>');c.append('<div class="twentytwenty-overlay"></div>');c.append('<div class="twentytwenty-handle"></div>');
var b=c.find(".twentytwenty-handle");b.append('<span class="twentytwenty-'+m+'-arrow"></span>');b.append('<span class="twentytwenty-'+q+'-arrow"></span>');c.addClass("twentytwenty-container");d.addClass("twentytwenty-before");l.addClass("twentytwenty-after");m=c.find(".twentytwenty-overlay");m.append('<div class="twentytwenty-labels twentytwenty-before-label"><span class="twentytwenty-label-content">'+p.labelBefore+"</span></div>");m.append('<div class="twentytwenty-labels twentytwenty-after-label"><span class="twentytwenty-label-content">'+
p.labelAfter+"</span></div>");var t=function(a){var t,k,g;g=d.width();var n=d.height();t=g+"px";k=n+"px";g=a*g+"px";a=a*n+"px";b.css("vertical"===f?"top":"left","vertical"===f?a:g);n=c.find(".twentytwenty-before");"vertical"===f?n.css("clip","rect(0,"+t+","+a+",0)"):n.css("clip","rect(0,"+g+","+k+",0)");c.css("height",k);"function"===typeof e&&e()},v=0,g=0,k=0,w=0;a(r).on("resize.twentytwenty",function(a){t(h)});b.on("movestart",function(a){(a.distX>a.distY&&a.distX<-a.distY||a.distX<a.distY&&a.distX>
-a.distY)&&"vertical"!==f?a.preventDefault():(a.distX<a.distY&&a.distX<-a.distY||a.distX>a.distY&&a.distX>-a.distY)&&"vertical"===f&&a.preventDefault();c.addClass("active");v=c.offset().left;g=c.offset().top;k=d.width();w=d.height()});b.on("moveend",function(a){c.removeClass("active")});b.on("move",function(a){c.hasClass("active")&&(h="vertical"===f?(a.pageY-g)/w:(a.pageX-v)/k,0>h&&(h=0),1<h&&(h=1),t(h))});c.find("img").on("mousedown",function(a){a.preventDefault()});a(r).trigger("resize.twentytwenty")})}})(window,
jQuery);
(function(r,a,l){var p=function(b){b.each(function(){var b=parseInt(a(this).closest(".imagify-chart").next(".imagify-chart-value").text()),b=[{value:b,color:"#00B3D3"},{value:100-b,color:"#D8D8D8"}];(new Chart(a(this)[0].getContext("2d"))).Doughnut(b,{segmentStrokeColor:"#2A2E3C",segmentStrokeWidth:1,animateRotate:!0,percentageInnerCutout:60,tooltipEvents:[]})})};a(".imagify-visual-comparison-btn").on("click",function(){if(1!==a(".twentytwenty-wrapper").length&&(a(a(this).data("target")).find(".imagify-modal-content").css("width",.95*
a(r).outerWidth()+"px"),0<a(".twentytwenty-container").length&&800<a(r).outerWidth())){var b=a(".twentytwenty-container"),c=0,f=b.data("loader"),g=b.data("label-original"),k=b.data("label-normal"),e=b.data("label-aggressive"),h=b.data("label-ultra"),d=b.data("original-label").replace(/\*\*/,"<strong>").replace(/\*\*/,"</strong>"),l=b.data("original-alt"),m=b.data("original-img"),n=b.data("original-dim").split("x");b.data("normal-label").replace(/\*\*/,"<strong>").replace(/\*\*/,"</strong>");var q=
b.data("normal-alt"),u=b.data("normal-img"),x=b.data("normal-dim").split("x");b.data("aggressive-label").replace(/\*\*/,"<strong>").replace(/\*\*/,"</strong>");var B=b.data("aggressive-alt"),C=b.data("aggressive-img"),y=b.data("aggressive-dim").split("x"),D=b.data("ultra-label").replace(/\*\*/,"<strong>").replace(/\*\*/,"</strong>"),E=b.data("ultra-alt"),F=b.data("ultra-img"),z=b.data("ultra-dim").split("x"),g='<span class="twentytwenty-duo-buttons twentytwenty-duo-left"><button type="button" class="imagify-comparison-original selected" data-img="original">'+
g+'</button><button type="button" class="imagify-comparison-normal" data-img="normal">'+k+'</button><button type="button" class="imagify-comparison-aggressive" data-img="aggressive">'+e+"</button></span>",k='<span class="twentytwenty-duo-buttons twentytwenty-duo-right"><button type="button" class="imagify-comparison-normal" data-img="normal">'+k+'</button><button type="button" class="imagify-comparison-aggressive" data-img="aggressive">'+e+'</button><button type="button" class="imagify-comparison-ultra selected" data-img="ultra">'+
h+"</button></span>";b.before('<img class="loader" src="'+f+'" alt="Loading\u2026" width="64" height="64">');f=a(".twentytwenty-left-buttons").lenght?g+k:"";a(".twentytwenty-left-buttons").append(g);a(".twentytwenty-right-buttons").append(k);b.closest(".imagify-modal-content").addClass("loading").find(".twentytwenty-container").append('<img class="img-original" alt="'+l+'" width="'+n[0]+'" height="'+n[1]+'"><img class="img-normal" alt="'+q+'" width="'+x[0]+'" height="'+x[1]+'"><img class="img-aggressive" alt="'+
B+'" width="'+y[0]+'" height="'+y[1]+'"><img class="img-ultra" alt="'+E+'" width="'+z[0]+'" height="'+z[1]+'">'+f);a(".img-original").on("load",function(){c++}).attr("src",m);a(".img-normal").on("load",function(){c++}).attr("src",u);a(".img-aggressive").on("load",function(){c++}).attr("src",C);a(".img-ultra").on("load",function(){c++}).attr("src",F);var A=setInterval(function(){4===c&&(b.twentytwenty({handlePosition:.6,orientation:"horizontal",labelBefore:d,labelAfter:D},function(){b.closest(".imagify-modal-content").hasClass("loaded")||
(b.closest(".imagify-modal-content").removeClass("loading").addClass("loaded"),p(a(".imagify-level-ultra").find(".imagify-chart").find("canvas")))}),clearInterval(A),A=null)},75);a(".imagify-comparison-title").on("click",".twentytwenty-duo-buttons button:not(.selected)",function(b){b.stopPropagation();var c=a(this);b=c.closest(".imagify-comparison-title").nextAll(".twentytwenty-wrapper").find(".twentytwenty-container");var g=c.closest(".twentytwenty-duo-buttons").hasClass("twentytwenty-duo-left")?
"left":"right",k="left"===g?c.closest(".imagify-comparison-title").find(".twentytwenty-duo-right"):c.closest(".imagify-comparison-title").find(".twentytwenty-duo-left"),f=c.closest(".twentytwenty-duo-buttons").find("button"),e=b.find(".twentytwenty-before"),h=b.find(".twentytwenty-after"),d=c.data("img");f.removeClass("selected");c.addClass("selected");k.find(".selected").data("img")===d&&k.find("button:not(.selected)").eq(0).trigger("click");"left"===g&&(c=e.css("clip"),e.attr("style",""),e.removeClass("twentytwenty-before"),
b.find(".img-"+d).addClass("twentytwenty-before").css("clip",c),a(".twentytwenty-before-label").find(".twentytwenty-label-content").text(b.data(d+"-label")),a(".imagify-c-level.go-left").attr("aria-hidden","true").removeClass("go-left go-right"),a(".imagify-level-"+d).attr("aria-hidden","false").addClass("go-left"));"right"===g&&(h.removeClass("twentytwenty-after"),b.find(".img-"+d).addClass("twentytwenty-after"),a(".twentytwenty-after-label").find(".twentytwenty-label-content").text(b.data(d+"-label")),
a(".imagify-c-level.go-right").attr("aria-hidden","true").removeClass("go-left go-right"),a(".imagify-level-"+d).attr("aria-hidden","false").addClass("go-right"));p(a(".imagify-level-"+d).find(".imagify-chart").find("canvas"));return!1})}});if(0<a(".post-php").find(".wp_attachment_image").find(".thumbnail").length){l=a(".post-php").find(".wp_attachment_image");var e=l.find(".thumbnail"),h=e.prop("src"),c=e.width(),e=e.height(),f=a("#imagify-full-original").val(),m=a("#imagify-full-original-size").val(),
q=a("#misc-publishing-actions").find(".misc-pub-imagify").find(".button-primary");if(300<c&&0<a("#imagify-full-original").length&&""!==a("#imagify-full-original").val()){var d=0,q=a(".misc-pub-filesize").find("strong").text(),u=a(".imagify-data-item").find(".imagify-chart-value").text();a('[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>");l.append('<div id="imagify-visual-comparison" class="imagify-modal" aria-hidden="true"><div class="imagify-modal-content loading"><div class="twentytwenty-container"><img class="imagify-img-before" alt="" width="'+c+'" height="'+e+'"><img class="imagify-img-after" alt="" width="'+c+'" height="'+e+'"></div><div class="imagify-comparison-levels"><div class="imagify-c-level imagify-level-original go-left"><p class="imagify-c-level-row"><span class="label">'+imagifyTTT.labels.filesize+'</span><span class="value level">'+
m+'</span></p></div><div class="imagify-c-level imagify-level-optimized go-right"><p class="imagify-c-level-row"><span class="label">'+imagifyTTT.labels.filesize+'</span><span class="value level">'+q+'</span></p><p class="imagify-c-level-row"><span class="label">'+imagifyTTT.labels.saving+'</span><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">'+
u+'</span>%</span></p></div></div><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></div></div>");a("#imagify-start-comparison").on("click.imagify",function(){var b=a(a(this).data("target"));b.find(".imagify-modal-content").css({width:.95*a(r).outerWidth()+"px","max-width":c});a(".imagify-img-before").on("load",function(){d++}).attr("src",f);a(".imagify-img-after").on("load",
function(){d++}).attr("src",h);var e=a(".twentytwenty-container"),l=setInterval(function(){2===d&&(e.twentytwenty({handlePosition:.3,orientation:"horizontal",labelBefore:imagifyTTT.labels.original_l,labelAfter:imagifyTTT.labels.optimized_l},function(){var c=a(r).height(),d=a(".twentytwenty-container").height(),f=a(".twentytwenty-wrapper").position().top;e.closest(".imagify-modal-content").hasClass("loaded")||(e.closest(".imagify-modal-content").removeClass("loading").addClass("loaded"),p(a(".imagify-level-optimized").find(".imagify-chart").find("canvas")));
if(c<d&&!b.hasClass("modal-is-too-high")){b.addClass("modal-is-too-high");var h=b.find(".twentytwenty-handle"),l=b.find(".twentytwenty-label-content"),m=b.find(".imagify-comparison-levels"),d=m.outerHeight(),q=(c-f-h.height())/2,n=c-3*f-d;h.css({top:q});l.css({top:n,bottom:"auto"});b.find(".twentytwenty-wrapper").css({paddingBottom:d});b.find(".imagify-modal-content").on("scroll.imagify",function(){h.css({top:q+a(this).scrollTop()});l.css({top:n+a(this).scrollTop()});m.css({bottom:-a(this).scrollTop()})})}}),
clearInterval(l),l=null)},75)})}else 300>c&&0<a("#imagify-full-original").length&&""!==a("#imagify-full-original").val()||0<a("#imagify-full-original").length&&""===a("#imagify-full-original").val()||(a('[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="'+q.attr("href")+'">'+imagifyTTT.labels.optimize+"</a>"),a("#imagify-optimize-trigger").on("click",function(){a(this).prev(".spinner").removeClass("imagify-hidden").addClass("is-active")}))}})(window,
jQuery);
```