1(function($){ 2 3 $.fn.twentytwenty = function(options) { 4 var options = $.extend({ 5 default_offset_pct: 0.5, 6 orientation: 'horizontal', 7 before_label: 'Before', 8 after_label: 'After', 9 no_overlay: false, 10 move_slider_on_hover: false, 11 move_with_handle_only: true, 12 click_to_move: false 13 }, options); 14 15 return this.each(function() { 16 var sliderPct = options.default_offset_pct; 17 var container = $(this); 18 var sliderOrientation = options.orientation; 19 var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left'; 20 var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right'; 21 22 container.wrap("<div class='twentytwenty-wrapper bafg-twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>"); 23 if(!options.no_overlay) { 24 container.append("<div class='twentytwenty-overlay'></div>"); 25 var overlay = container.find(".twentytwenty-overlay"); 26 27 /* Prepend Overlay Label outside of image */ 28 var labelOutside = $('.bafg-twentytwenty-container').data('label_outside'); 29 if(labelOutside == true && sliderOrientation == 'vertical' ){ 30 var bafgWrapper = $(".twentytwenty-wrapper"); 31 bafgWrapper.wrap("<div class='bafg-outside-label-wrapper twentytwenty-" + sliderOrientation + "'></div>"); 32 var outsideLabel = $(".bafg-outside-label-wrapper"); 33 outsideLabel.prepend("<div class='twentytwenty-after-label' data-content='"+options.after_label+"'></div>"); 34 outsideLabel.prepend("<div class='twentytwenty-before-label' data-content='"+options.before_label+"'></div>"); 35 } 36 /* Prepend Overlay Label outside of image end */ 37 38 overlay.append("<div class='twentytwenty-before-label' data-content='"+options.before_label+"'></div>"); 39 overlay.append("<div class='twentytwenty-after-label' data-content='"+options.after_label+"'></div>"); 40 } 41 var beforeImg = container.find("img:first"); 42 var afterImg = container.find("img:last"); 43 44 //for video slider 45 let sliderMethod = container.data('slider-method'); 46 let bothVideoPlay = container.attr('bafg-both-video-play'); 47 let beforeVdo = container.find("iframe:first"); 48 let afterVdo = container.find("iframe:last"); 49 let beforeSelfVdo = container.find("video:first"); 50 let afterSelfVdo = container.find("video:last"); 51 beforeVdo.addClass('twentytwenty-before'); 52 afterVdo.addClass('twentytwenty-after'); 53 beforeSelfVdo.addClass('twentytwenty-before') 54 afterSelfVdo.addClass('twentytwenty-after') 55 $('.bafg-twentytwenty-container').attr('bafg-both-video-play'); 56 57 container.append("<div class='twentytwenty-handle'></div>"); 58 var slider = container.find(".twentytwenty-handle"); 59 60 if( container.hasClass('design-7') ) { 61 slider.wrap("<div class='bafg-handle-wrapper'></div>"); 62 } 63 64 if(container.hasClass('design-1')){ 65 slider.wrapInner( "<div class='handle-trnasf'></div>" ); 66 } 67 68 slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>"); 69 slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>"); 70 container.addClass("twentytwenty-container"); 71 beforeImg.addClass("twentytwenty-before"); 72 afterImg.addClass("twentytwenty-after"); 73 74 var videoType = container.data('video-type'); 75 var calcOffset = function(dimensionPct) { 76 if(sliderMethod == 'method_4'){ 77 if( videoType != undefined && videoType == 'self' ){ 78 var w = beforeSelfVdo.width(); 79 var h = beforeSelfVdo.height(); 80 }else{ 81 var w = beforeVdo.width(); 82 var h = beforeVdo.height(); 83 } 84 85 if(w == 0 && h == 0){ 86 if( videoType != undefined && videoType == 'self' ){ 87 var videoHeight = container.find('video:first').height(); 88 var videoWidth = container.find('video:last').width(); 89 }else{ 90 var videoHeight = container.find('iframe:first').height(); 91 var videoWidth = container.find('iframe:last').width(); 92 } 93 94 w = videoWidth; 95 h = videoHeight; 96 container.css("height", dimensionPct*h+"px"); 97 }else{ 98 container.css("height", h+"px"); 99 container.find('iframe').css('max-width', w+'px'); 100 let dataWidth = container.find('iframe').attr('data-width'); 101 102 //add a responsive width when in mobile devices for the video 103 const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); 104 if (isMobile) { 105 container.find('iframe').css('height', w/1.77+'px'); 106 } 107 } 108 }else{ 109 var w = beforeImg.width(); 110 var h = beforeImg.height(); 111 112 if(w == 0 && h == 0){ 113 var imageHeight = container.find('img:first').prop('naturalHeight'); 114 var imageWidth = container.find('img:first').prop('naturalWi
114dth'); 115 116 w = imageWidth; 117 h = imageHeight; 118 container.css("height", dimensionPct*h+"px"); 119 }else{ 120 container.css("height", h+"px"); 121 } 122 } 123 container.css('max-width', w+'px'); 124 return { 125 w: w+"px", 126 h: h+"px", 127 cw: (dimensionPct*w)+"px", 128 ch: (dimensionPct*h)+"px" 129 }; 130 }; 131 132 var adjustContainer = function(offset) { 133 if (sliderOrientation === 'vertical') { 134 beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)"); 135 afterImg.css("clip", "rect("+offset.ch+","+offset.w+","+offset.h+",0)"); 136 if( videoType == 'self' ){ 137 beforeSelfVdo.css("clip", "rect(0, "+offset.w + ", " + offset.ch+", 0)"); 138 afterSelfVdo.css("clip", "rect("+offset.ch+", "+offset.w+", "+offset.h+", 0)"); 139 }else{ 140 beforeVdo.css("clip", "rect(0, "+offset.w + ", " + offset.ch+", 0)"); 141 afterVdo.css("clip", "rect("+offset.ch+" ,"+offset.w+", "+offset.h+", 0)"); 142 } 143 } else { 144 beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)"); 145 afterImg.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")"); 146 if( videoType == 'self' ){ 147 beforeSelfVdo.css("clip", "rect(0, "+offset.cw+","+offset.h+",0)"); 148 afterSelfVdo.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")"); 149 }else{ 150 beforeVdo.css("clip", "rect(0, "+offset.cw+","+offset.h+",0)"); 151 afterVdo.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")"); 152 } 153 154 } 155 container.css( "height", offset.h); 156 157 /* 158 * Auto video pause and sound control based on slider handle position 159 * @author : Abu Hena 160 * Modified By : Jewel Hossain 161 **/ 162 if(sliderMethod == 'method_4'){ 163 164 if(bothVideoPlay != '1'){ 165 166 if(container.hasClass('active')){ 167 let sliderVideoType = container.data('video-type'); 168 let totalWidth = offset.w; 169 let totalHeight = offset.h; 170 let sliderCurrentPosition; 171 172 if( sliderOrientation == 'vertical' ){ 173 totalHeight = totalHeight.replace('px', ''); 174 sliderCurrentPosition = offset.ch; 175 sliderCurrentPosition = sliderCurrentPosition.replace('px', ''); 176 sliderPositionPercent = sliderCurrentPosition/totalHeight * 100; 177 }else{ 178 totalWidth = totalWidth.replace('px', ''); 179 sliderCurrentPosition = offset.cw; 180 sliderCurrentPosition = sliderCurrentPosition.replace('px', ''); 181 sliderPositionPercent = sliderCurrentPosition/totalWidth * 100; 182 } 183 sliderPositionPercent = Math.round(sliderPositionPercent); 184 185 let firstVideo = container.children().eq(0).attr('id'); 186 let secondVideo = container.children().eq(1).attr('id'); 187 188 if(sliderVideoType == 'youtube'){ 189 190 if(sliderPositionPercent > 50){ 191 192 if(container.hasClass('muted') != true){ 193 players[firstVideo].setVolume(sliderPositionPercent); 194 players[secondVideo].setVolume(100 - sliderPositionPercent); 195 } 196 players[secondVideo].pauseVideo(); 197 players[firstVideo].playVideo(); 198 199 }else if(sliderPositionPercent < 50){ 200 201 players[firstVideo].pauseVideo(); 202 players[secondVideo].playVideo(); 203 204 if(container.hasClass('muted') != true){ 205 players[firstVideo].setVolume(sliderPositionPercent); 206 players[secondVideo].setVolume(100 - sliderPositionPercent); 207 } 208 209 } 210 211 }else if(sliderVideoType == 'vimeo'){ 212 213 if(sliderPositionPercent > 50){ 214 vimeoPlayers[secondVideo].pause();
215 vimeoPlayers[firstVideo].play(); 216 217 if(container.hasClass('muted') != true){ 218 //vimeo volume scale must be between 0 and 1 219 vimeoPlayers[firstVideo].setVolume(sliderPositionPercent/100); 220 vimeoPlayers[secondVideo].setVolume(1 - sliderPositionPercent/100); 221 } 222 223 }else if(sliderPositionPercent < 50){ 224 vimeoPlayers[firstVideo].pause(); 225 vimeoPlayers[secondVideo].play(); 226 227 if(container.hasClass('muted') != true){ 228 //vimeo volume scale must be between 0 and 1 229 vimeoPlayers[firstVideo].setVolume(sliderPositionPercent/100); 230 vimeoPlayers[secondVideo].setVolume(1 - sliderPositionPercent/100); 231 } 232 } 233 234 }else if(sliderVideoType == 'self'){ 235 236 if(sliderPositionPercent > 50){ 237 beforeSelfVdo[0].play(); 238 afterSelfVdo[0].pause(); 239 240 if(container.hasClass('muted') != true){ 241 beforeSelfVdo[0].volume = sliderPositionPercent/100; 242 afterSelfVdo[0].volume = 1 - sliderPositionPercent/100; 243 } 244 }else if(sliderPositionPercent < 50){ 245 afterSelfVdo[0].play(); 246 beforeSelfVdo[0].pause(); 247 248 if(container.hasClass('muted') != true){ 249 beforeSelfVdo[0].volume = sliderPositionPercent/100; 250 afterSelfVdo[0].volume = 1 - sliderPositionPercent/100; 251 } 252 } 253 254 } 255 } 256 }else{ 257 let sliderPositionPercent; 258 let sliderVideoType = container.data('video-type'); 259 260 if( sliderOrientation == 'vertical' ){ 261 sliderPositionPercent = offset.ch / offset.h * 100; 262 } else { 263 sliderPositionPercent = offset.cw / offset.w * 100; 264 } 265 266 sliderPositionPercent = Math.random(sliderPositionPercent); 267 268 if(sliderVideoType == 'youtube'){ 269 let firstVideoId = container.children().eq(0).attr('id'); 270 let secondVideoId = container.children().eq(1).attr('id'); 271 272 // Play both videos at the same time 273 if (sliderPositionPercent > 0 && sliderPositionPercent <= 100) { 274 players[firstVideoId].playVideo(); 275 players[secondVideoId].playVideo(); 276 277 let firstVolume = sliderPositionPercent / 100; 278 let secondVolume = 1 - firstVolume; 279 280 players[firstVideoId].setVolume(firstVolume * 100); 281 players[secondVideoId].setVolume(secondVolume * 100); 282 } 283 } else if(sliderVideoType == 'vimeo'){ 284 let firstVideoId = container.children().eq(0).attr('id'); 285 let secondVideoId = container.children().eq(1).attr('id'); 286 287 if (sliderPositionPercent > 0 && sliderPositionPercent <= 100) { 288 vimeoPlayers[firstVideoId].play(); 289 vimeoPlayers[secondVideoId].play(); 290 291 vimeoPlayers[firstVideoId].setVolume(sliderPositionPercent / 100); 292 vimeoPlayers[secondVideoId].setVolume(1 - sliderPositionPercent / 100); 293 } 294 } else if(sliderVideoType == 'self'){ 295 if (sliderPositionPercent > 0 && sliderPositionPercent <= 100) { 296 beforeSelfVdo[0].play(); 297 afterSelfVdo[0].play(); 298 299 beforeSelfVdo[0].volume = sliderPositionPercent / 100; 300 afterSelfVdo[0].volume = 1 - sliderPositionPercent / 100; 301 } 302 } 303 304 } 305 306 } 307 }; 308 var adjustSlider = function(pct) { 309 var offset = calcOffset(pct); 310 slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw); 311 adjustContainer(offset); 312 }; 313 314 // Return the number specified or the min/max number if it outside the range given. 315 var minMaxNumber = function(num, min, max) { 316 return Math.max(min, Math.min(max, num)); 317 }; 318 319 // Calculate the slider percentage based on the position. 320 var getSliderPercentage = function(positionX, positionY) { 321 if( sliderMethod === 'method_4' ){ 322 if( videoType == 'self' ){ 323 videoWidth = selfVideoWidth; 324 videoHeight = selfVideoHeight; 325 } 326 var sliderPercentage = (sliderOrientation === 'vertical') ? 327 (positionY-offsetY)/videoHeight : 328 (positionX-offsetX)/videoWidth; 329 330 }else{ 331 var sliderPercentage = (sliderOrientation === 'vertical') ? 332 (positionY-offsetY)/imgHeight :
333 (positionX-offsetX)/imgWidth; 334 } 335 336 return minMaxNumber(sliderPercentage, 0, 1); 337 }; 338 339 $(window).on("resize.twentytwenty", function(e) { 340 adjustSlider(sliderPct); 341 }); 342 343 var offsetX = 0; 344 var offsetY = 0; 345 var imgWidth = 0; 346 var imgHeight = 0; 347 var videoHeight = 0; 348 var videoWidth = 0; 349 var selfVideoWidth = 0; 350 var selfVideoHeight = 0; 351 /** 352 * Handles the start of a move event. 353 * 354 * @param {Object} e - The event object. 355 */ 356 var onMoveStart = function(e) { 357 if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') { 358 e.preventDefault(); 359 } 360 else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') { 361 e.preventDefault(); 362 } 363 container.addClass("active"); 364 offsetX = container.offset().left; 365 offsetY = container.offset().top; 366 imgWidth = beforeImg.width(); 367 imgHeight = beforeImg.height(); 368 videoHeight = beforeVdo.height(); 369 videoWidth = beforeVdo.width(); 370 selfVideoWidth = beforeSelfVdo.width(); 371 selfVideoHeight = beforeSelfVdo.height(); 372 373 }; 374 var onMove = function(e) { 375 if (container.hasClass("active")) { 376 sliderPct = getSliderPercentage(e.pageX, e.pageY); 377 adjustSlider(sliderPct); 378 } 379 }; 380 var onMoveEnd = function() { 381 container.removeClass("active"); 382 }; 383 384 var moveTarget = options.move_with_handle_only ? slider : container; 385 moveTarget.on("movestart",onMoveStart); 386 moveTarget.on("move",onMove); 387 moveTarget.on("moveend",onMoveEnd); 388 389 if (options.move_slider_on_hover) { 390 container.on("mouseenter", onMoveStart); 391 container.on("mousemove", onMove); 392 container.on("mouseleave", onMoveEnd); 393 } 394 395 slider.on("touchmove", function(e) { 396 e.preventDefault(); 397 }); 398 399 container.find("img").on("mousedown", function(event) { 400 event.preventDefault(); 401 }); 402 403 container.find("iframe").on("mousedown", function(event) { 404 event.preventDefault(); 405 }); 406 407 container.find("video").on("mousedown", function(event) { 408 event.preventDefault(); 409 }); 410 411 if (options.click_to_move) { 412 container.on('click', function(e) { 413 offsetX = container.offset().left; 414 offsetY = container.offset().top; 415 imgWidth = beforeImg.width(); 416 imgHeight = beforeImg.height(); 417 418 sliderPct = getSliderPercentage(e.pageX, e.pageY); 419 adjustSlider(sliderPct); 420 }); 421 } 422 423 $(window).trigger("resize.twentytwenty"); 424 425 //on screen orientation change 426 window.addEventListener("orientationchange", function() { 427 let screenOrientation = screen.orientation.type; 428 429 if( screenOrientation == 'portrait-primary' || screenOrientation == 'landscape-primary' ){ 430 $(window).trigger("resize.twentytwenty"); 431 } 432 }); 433 }); 434 }; 435})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.