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