1 2/* 3 * LayerSlider Add-On: Popups 4 * 5 * (c) 2011-2024 George Krupa, John Gera & Kreatura Media 6 * 7 * LayerSlider home: https://layerslider.com/popups/ 8 * Licensing: https://layerslider.com/licensing/ 9*/ 10 11 12 13(function($){ 14 15 window._layerSlider.plugins.popup = function( ls, $slider, sliderUID, userSettings ){ 16 17 var pu = this, 18 forceSliderSettings = { 19 startInViewport: false, 20 playByScroll: false, 21 allowFullscreen: false, 22 insertSelector: null, 23 performanceMode: false, 24 scene: false 25 }, 26 device = window._lsData; 27 28 pu.pluginData = { 29 name: 'Popups Add-On for LayerSlider', 30 version: '2.2', 31 requiredLSVersion: '7.11.1', 32 authorName: 'Kreatura', 33 releaseDate: '2024. 05. 22.' 34 }; 35 36 pu.pluginDefaults = { 37 eventNamespace: 'PU', 38 39 keys: { 40 popupShowOnClick: ['plugin','settings'], 41 popupShowOnScroll: ['plugin','settings'], 42 popupShowOnLeave: ['plugin','settings'], 43 popupShowOnIdle: ['plugin','settings'], 44 popupShowOnTimeout: ['plugin','settings'], 45 popupShowOnce: ['plugin','settings'], 46 47 popupCloseOnScroll: ['plugin','settings'], 48 popupCloseOnTimeout: ['plugin','settings'], 49 popupCloseOnSliderEnd: ['plugin','settings'], 50 popupCloseOnEsc: ['plugin','settings'], 51 popupShowCloseButton: ['plugin','settings'], 52 popupCloseButtonStyle: ['plugin','settings'], 53 popupResetOnClose: ['plugin','settings'], 54 55 popupDisableOverlay: ['plugin','settings'], 56 popupOverlayClickToClose: ['plugin','settings'], 57 popupStartSliderImmediately: ['plugin','settings'], 58 59 popupWidth: ['popup','styleSettings'], 60 popupHeight: ['popup','styleSettings'], 61 popupFitWidth: ['popup','styleSettings'], 62 popupFitHeight: ['popup','styleSettings'], 63 popupCustomStyle: ['popup','styleSettings'], 64 popupPositionHorizontal: ['popup','styleSettings'], 65 popupPositionVertical: ['popup','styleSettings'], 66 popupDistanceLeft: ['popup','styleSettings'], 67 popupDistanceRight: ['popup','styleSettings'], 68 popupDistanceTop: ['popup','styleSettings'], 69 popupDistanceBottom: ['popup','styleSettings'], 70 71 popupDurationIn: ['popup','transitionSettings'], 72 popupDurationOut: ['popup','transitionSettings'], 73 popupDelayIn: ['popup','transitionSettings'], 74 popupEaseIn: ['popup','transitionSettings'], 75 popupEaseOut: ['popup','transitionSettings'], 76 popupTransitionIn: ['popup','transitionSettings'], 77 popupTransitionOut: ['popup','transitionSettings'], 78 popupCustomTransitionIn: ['popup','transitionSettings'], 79 popupCustomTransitionOut: ['popup','transitionSettings'], 80 81 popupOverlayBackground: ['overlay','styleSettings'], 82 83 popupOverlayDurationIn: ['overlay','transitionSettings'], 84 popupOverlayDurationOut: ['overlay','transitionSettings'], 85 popupOverlayEaseIn: ['overlay','transitionSettings'], 86 popupOverlayEaseOut: ['overlay','transitionSettings'], 87 popupOverlayTransitionIn: ['overlay','transitionSettings'], 88 popupOverlayTransitionOut: ['overlay','transitionSettings'] 89 } 90 }; 91 92 pu.state = { 93 initialized: false, 94 openedAtLeastOnce: false, 95 is: null 96 }; 97 98 pu.init = function(){ 99 100 // SET: plugin options 101 var keyPath, 102 keyInside, 103 keyInsideLower; 104 105 for( var key in pu.pluginDefaults.keys ){ 106 keyPath = pu[pu.pluginDefaults.keys[key][0]][pu.pluginDefaults.keys[key][1]]; 107 if( ls.o.hasOwnProperty( key ) ){ 108 keyInside = key.split('popup')[1]; 109 keyInside = keyInside.substr(0,1).toLowerCase() + keyInside.substr(1); 110 111 if( ls.o[key] !== keyPath[keyInside] ){ 112 113 keyInsideLower = keyInside.toLowerCase(); 114 115 if( keyInsideLower.indexOf( 'ease' ) !== -1 ){ 116 ls.o[key] = ls.functions.convert.easing( ls.o[key] ); 117 } 118 if( ( keyInsideLower.indexOf( 'duration' ) !== -1 || keyInsideLower.indexOf( 'delay' ) !== -1 ) && typeof ls.o[key] === 'number' ){ 119 ls.o[key] /= 1000; 120 } 121 keyPath[keyInside] = ls.o[key]; 122 } 123 } 124 } 125 126 pu.plugin.setOptions(); 127 pu.slider.setOptions(); 128 pu.popup.createMarkup(); 129 pu.popup.setStyles(); 130 pu.popup.setTransitions(); 131 pu.slider.setStyles(); 132 pu.overlay.createMarkup(); 133 pu.overlay.setTransitions(); 134 pu.events.set(); 135 136 // Set state 137 pu.state.initialized = true; 138 }; 139 140 pu.plugin = { 141 142 settings: { 143 showOnClick: false, 144 showOnScroll: false, 145 showOnLeave: false,
146 showOnIdle: false, 147 showOnTimeout: false, 148 closeOnScroll: false, 149 closeOnTimeout: false, 150 closeOnSliderEnd: false, 151 closeOnEsc: false, 152 showOnce: true, 153 disableOverlay: false, 154 showCloseButton: true, 155 closeButtonStyle: '', 156 overlayClickToClose: true, 157 startSliderImmediately: false, 158 resetOnClose: 'slide' 159 }, 160 161 setOptions: function(){ 162 163 // SET: trigger elements for click event 164 this.settings.$clickTriggerElements = $( this.settings.showOnClick ).add( '[data-ls-popup-trigger-for="' + $slider.attr( 'id' ) + '"], [href="#' + $slider.attr( 'id' ) + '"], .' + $slider.attr( 'id' ) ); 165 166 $( '[href="#' + $slider.attr( 'id' ) + '"]' ).on( 'click.' + pu.pluginDefaults.eventNamespace + sliderUID, function( e ){ 167 e.preventDefault(); 168 }); 169 170 // SET: popup initial width 171 if( $slider[0].style.width && $slider[0].style.width.indexOf( 'px' ) !== -1 && !ls.o.popupWidth ){ 172 pu.popup.styleSettings.width = parseInt( $slider[0].style.width ); 173 } 174 175 // SET: popup initial height 176 if( $slider[0].style.height && $slider[0].style.height.indexOf( 'px' ) !== -1 && !ls.o.popupHeight ){ 177 pu.popup.styleSettings.height = parseInt( $slider[0].style.height ); 178 } 179 180 // GET: horizontal position from slider user init options 181 if( ls.o.popupPositionHorizontal && 182 ( ls.o.popupPositionHorizontal === 'left' || ls.o.popupPositionHorizontal === 'right' ) 183 ){ 184 // SET: horizontal position 185 pu.popup.styleSettings.positionHorizontal = ls.o.popupPositionHorizontal; 186 } 187 if( ls.o.type === 'fullwidth' ){ 188 pu.popup.styleSettings.positionHorizontal = 'left'; 189 } 190 191 // GET: vertical position from slider user init options 192 if( ls.o.popupPositionVertical && 193 ( ls.o.popupPositionVertical === 'top' || ls.o.popupPositionVertical === 'bottom' ) 194 ){ 195 // SET: vertical position 196 pu.popup.styleSettings.positionVertical = ls.o.popupPositionVertical; 197 } 198 199 // GET: horizontal distances from slider user init options 200 if( ls.o.popupDistanceLeft ){ 201 pu.popup.styleSettings.distanceLeft = ls.o.popupDistanceLeft; 202 } 203 if( ls.o.popupDistanceRight ){ 204 pu.popup.styleSettings.distanceRight = ls.o.popupDistanceRight; 205 } 206 207 // GET: vertical distances from slider user init options 208 if( ls.o.popupDistanceTop ){ 209 pu.popup.styleSettings.distanceTop = ls.o.popupDistanceTop; 210 } 211 if( ls.o.popupDistanceBottom ){ 212 pu.popup.styleSettings.distanceBottom = ls.o.popupDistanceBottom; 213 } 214 215 // SET: popup close on slider end event 216 if( pu.plugin.settings.closeOnSliderEnd ){ 217 $slider.on( 'slideChangeWillStart.layerSlider', function( event, slider ){ 218 if( slider.slides.current.index === slider.slides.count ){ 219 pu.events.hide(); 220 return false; 221 } 222 }); 223 } 224 } 225 }; 226 227 pu.overlay = { 228 229 styleSettings: { 230 overlayBackground: 'rgba(0,0,0,.85)' 231 }, 232 233 transitionSettings: { 234 overlayDurationIn: 0.4, 235 overlayDurationOut: 0.4, 236 overlayEaseIn: ls.gsap.Quint.easeIn, 237 overlayEaseOut: ls.gsap.Quint.easeIn, 238 overlayTransitionIn: 'fade', 239 overlayTransitionOut: 'fade' 240 }, 241 242 createMarkup: function(){ 243 244 // APPEND: overlay element into body 245 pu.$overlay = $( '<div>' ).addClass( 'ls-popup-overlay' ).css({ 246 background: this.styleSettings.overlayBackground 247 }).insertBefore( pu.$popup ); 248 }, 249 250 setTransitions: function(){ 251 252 // SET: transition in 253 this.transitionSettings.styleInFrom = { 254 opacity: 1, 255 display: 'block' 256 }; 257 this.transitionSettings.styleInTo = { 258 ease: this.transitionSettings.overlayEaseIn, 259 opacity: 1, 260 x: 0, 261 y: 0, 262 z: 0, 263 rotation: 0, 264 rotationX: 0, 265 rotationY: 0, 266 scaleX: 1, 267 scaleY: 1, 268 skewX: 0, 269 skewY: 0, 270 borderRadius: 0 271 }; 272 273 // SET: transition out 274 this.transitionSettings.styleOutTo = { 275 ease: this.transitionSettings.overlayEaseOut, 276 onComplete: function(){ 277 ls.gsap.TweenMax.set( pu.$overlay[0], { 278 display: 'none', 279 x: 0, 280 y: 0, 281 opacity: 0 282 }); 283 } 284 }; 285 }, 286 287 show: function(){ 288 289 // SET: transition in 290 switch( this.transitionSettings.overlayTransitionIn.toLowerCase() ){ 291 default: 292 case 'fade': 293 this.transitionSettings.styleInFrom.opacity = 0; 294 break;
295 case 'slidefromtop': 296 this.transitionSettings.styleInFrom.y = -device.viewport.height; 297 break; 298 case 'slidefrombottom': 299 this.transitionSettings.styleInFrom.y = device.viewport.height; 300 break; 301 case 'slidefromleft': 302 this.transitionSettings.styleInFrom.x = -device.viewport.width; 303 break; 304 case 'slidefromright': 305 this.transitionSettings.styleInFrom.x = device.viewport.width; 306 break; 307 case 'fadefromtopleft': 308 this.transitionSettings.styleInFrom.x = -device.viewport.width; 309 this.transitionSettings.styleInFrom.y = -device.viewport.height; 310 this.transitionSettings.styleInFrom.opacity = 0; 311 break; 312 case 'fadefromtopright': 313 this.transitionSettings.styleInFrom.x = device.viewport.width; 314 this.transitionSettings.styleInFrom.y = -device.viewport.height; 315 this.transitionSettings.styleInFrom.opacity = 0; 316 break; 317 case 'fadefrombottomleft': 318 this.transitionSettings.styleInFrom.x = -device.viewport.width; 319 this.transitionSettings.styleInFrom.y = device.viewport.height; 320 this.transitionSettings.styleInFrom.opacity = 0; 321 break; 322 case 'fadefrombottomright': 323 this.transitionSettings.styleInFrom.x = device.viewport.width; 324 this.transitionSettings.styleInFrom.y = device.viewport.height; 325 this.transitionSettings.styleInFrom.opacity = 0; 326 break; 327 case 'scale': 328 this.transitionSettings.styleInFrom.scaleX = 0; 329 this.transitionSettings.styleInFrom.scaleY = 0; 330 break; 331 } 332 333 // START: transition in 334 ls.gsap.TweenMax.fromTo( pu.$overlay[0], this.transitionSettings.overlayDurationIn, this.transitionSettings.styleInFrom, this.transitionSettings.styleInTo ); 335 }, 336 337 hide: function(){ 338 339 // SET: transition out 340 switch( this.transitionSettings.overlayTransitionOut.toLowerCase() ){ 341 default: 342 case 'fade': 343 this.transitionSettings.styleOutTo.opacity = 0; 344 break; 345 case 'slidetotop': 346 this.transitionSettings.styleOutTo.y = -device.viewport.height; 347 break; 348 case 'slidetobottom': 349 this.transitionSettings.styleOutTo.y = device.viewport.height; 350 break; 351 case 'slidetoleft': 352 this.transitionSettings.styleOutTo.x = -device.viewport.width; 353 break; 354 case 'slidetoright': 355 this.transitionSettings.styleOutTo.x = device.viewport.width; 356 break; 357 case 'fadetotopleft': 358 this.transitionSettings.styleOutTo.x = -device.viewport.width; 359 this.transitionSettings.styleOutTo.y = -device.viewport.height; 360 this.transitionSettings.styleOutTo.opacity = 0; 361 break; 362 case 'fadetotopright': 363 this.transitionSettings.styleOutTo.x = device.viewport.width; 364 this.transitionSettings.styleOutTo.y = -device.viewport.height; 365 this.transitionSettings.styleOutTo.opacity = 0; 366 break; 367 case 'fadetobottomleft': 368 this.transitionSettings.styleOutTo.x = -device.viewport.width; 369 this.transitionSettings.styleOutTo.y = device.viewport.height; 370 this.transitionSettings.styleOutTo.opacity = 0; 371 break; 372 case 'fadetobottomright': 373 this.transitionSettings.styleOutTo.x = device.viewport.width; 374 this.transitionSettings.styleOutTo.y = device.viewport.height; 375 this.transitionSettings.styleOutTo.opacity = 0; 376 break; 377 case 'scale': 378 this.transitionSettings.styleOutTo.scaleX = 0; 379 this.transitionSettings.styleOutTo.scaleY = 0; 380 break; 381 } 382 383 // START: transition out 384 ls.gsap.TweenMax.to( pu.$overlay[0], this.transitionSettings.overlayDurationOut, this.transitionSettings.styleOutTo ); 385 } 386 }; 387 388 pu.popup = { 389 390 styleSettings: { 391 width: 640, 392 height: 360, 393 fitWidth: false, 394 fitHeight: false, 395 customStyle: '', 396 positionHorizontal: 'center', 397 positionVertical: 'middle', 398 distanceLeft: 10, 399 distanceRight: 10, 400 distanceTop: 10, 401 distanceBottom: 10 402 }, 403 404 transitionSettings: { 405 durationIn: 1, 406 durationOut: 0.5, 407 delayIn: 0.2, 408 easeIn: ls.gsap.Quint.easeInOut, 409 easeOut: ls.gsap.Quint.easeIn, 410 transitionIn: 'fade', 411 transitionOut: 'fade', 412 customTransitionIn: false, 413 customTransitionOut: false 414 }, 415 416 createMarkup: function(){ 417 418 var $popupMarkup; 419 420 // CREATE: markup 421 if( $slider.parent().is( '.ls-popup' ) ){ 422 $popupMarkup = $slider.parent(); 423 }else{ 424 $popupMarkup = $( '<div class="ls-popup">' ); 425 } 426 427 // APPEND: popup to body 428 $( 'body' ).append( $popupMarkup.append( $( '<div class="ls-popup-inner">' ).append( $slider) ) ); 429 430 $slider.attr( 'style', $slider.attr( 'style' ) + '; ' + pu.popup.styleSettings.customStyle ); 431 pu.$inner = $slider.parent(); 432 pu.$popup = pu.$inner.parent(); 433 434 if( pu.plugin.settings.showCloseButton ){ 435 $slider.append( '<div class="ls-popup-close-button" style="' + pu.plugin.settings.closeButtonStyle + '"></div>' ); 436 } 437 }, 438 439 setStyles: function(){ 440 441 // SET: styles of the .ls-popup element 442 pu.$popup.css({ 443 left: pu.popup.styleSettings.distanceLeft, 444 right: pu.popup.styleSettings.distanceRight, 445 top: pu.popup.styleSettings.distanceTop, 446 bottom: pu.popup.styleSettings.distanceBottom 447 }); 448 449 // SET: styles of the .ls-popup-inner element 450 pu.$inner.css({ 451 maxWidth: ls.slider.initial ? ls.slider.initial.maxWidth : $slider[0].style.maxWidth || $slider.css( 'max-width' ), 452 maxHeight: ls.slider.initial && ls.slider.initial.maxHeight ? ls.slider.initial.maxHeight : $slider[0].style.maxHeight || $slider.css( 'max-height' ), 453 width: pu.popup.styleSettings.width, 454 height: pu.popup.styleSettings.height 455 }); 456 }, 457 458 setTransitions: function(){ 459 460 // SET: transition in 461 this.transitionSettings.styleInFrom = { 462 transformPerspective: 500, 463 transformOrigin: '50% 50%' 464 }; 465 466 if( typeof this.transitionSettings.customTransitionIn === 'object' ){ 467 this.transitionSettings.styleInFrom = $.extend( {}, this.transitionSettings.styleInFrom, this.transitionSettings.customTransitionIn ); 468 } 469 470 this.transitionSettings.styleInTo = { 471 opacity: 1, 472 x: 0, 473 y: 0, 474 z: 0, 475 rotation: 0, 476 rotationX: 0, 477 rotationY: 0, 478 scaleX: 1, 479 scaleY: 1, 480 skewX: 0, 481 skewY: 0, 482 delay: this.transitionSettings.delayIn, 483 ease: this.transitionSettings.easeIn, 484 onStart: function(){ 485 486 // SET: Countdown 487 ls.layers.get('active').filter('[data-countdown]').each(function(){ 488 var $layer = $(this), 489 layerData = $layer.data( ls.defaults.init.dataKey ); 490 491 // START: countdowns 492 if( layerData.is.countdown ){ 493 ls.countdown.startInterval( $layer, layerData.countdownSettings ); 494 } 495 }); 496 497 // Set state 498 pu.state.is = 'opening'; 499 500 // START: slider 501 if( pu.plugin.settings.startSliderImmediately ){ 502 $slider.layerSlider( 'resumePopup' ); 503 } 504 }, 505 onComplete: function(){ 506 507 // API CALL: popupDidOpen 508 if( ls.api.hasEvent( 'popupDidOpen' ) ){ 509 ls.api.triggerEvent( 'popupDidOpen', ls.api.eventData() ); 510 } 511 512 // Set state 513 pu.state.openedAtLeastOnce = true; 514 pu.state.is = 'opened'; 515 516 // START: slider 517 ls.slider.state.popupShouldStart = true; 518 if( !pu.plugin.settings.startSliderImmediately || ( pu.plugin.settings.startSliderImmediately && pu.popup.transitionSettings.durationIn === 0) ){ 519 $slider.layerSlider( 'resumePopup' ); 520 } 521 if( typeof pu.plugin.settings.closeOnTimeout === 'number' ){ 522 setTimeout( function(){ pu.events.hide() }, pu.plugin.settings.closeOnTimeout * 1000 ); 523 } 524 if( pu.plugin.settings.showOnScroll || pu.plugin.settings.closeOnScroll ){ 525 pu.events.checkScrollPositions(); 526 } 527 } 528 }; 529 530 // SET: transition out 531 this.transitionSettings.styleOutTo = { 532 ease: this.transitionSettings.easeOut, 533 transformOrigin: '50% 50%', 534 onStart: function(){ 535 // Set state 536 pu.state.is = 'closing'; 537 }, 538 onComplete: function(){ 539 540 // SET: Countdown 541 ls.layers.get('countdown').each(function(){ 542 var $layer = $(this), 543 layerData = $layer.data( ls.defaults.init.dataKey ); 544 545 // STOP: all countdowns 546 if( layerData.is.countdown ){ 547 ls.countdown.stopInterval( layerData.countdownSettings ); 548 } 549 }); 550 551 if( pu.plugin.settings.startSliderImmediately ){ 552 $slider.layerSlider( 'pause' ); 553 } 554 pu.$popup.removeClass( 'ls-popup-visible' ); 555 ls.slider.state.popupIsVisible = false;
556 ls.slider.state.popupShouldStart = false; 557 558 if( pu.plugin.settings.showOnce ){ 559 // API CALL: popupDidClose 560 if( ls.api.hasEvent( 'popupDidClose' ) ){ 561 ls.api.triggerEvent( 'popupDidClose', ls.api.eventData() ); 562 } 563 // REMOVE: popup & events 564 pu.events.destroy(); 565 }else{ 566 ls.gsap.TweenMax.set( $slider[0], { 567 opacity: 1, 568 x: 0, 569 y: 0, 570 z: 0, 571 rotation: 0, 572 rotationX: 0, 573 rotationY: 0, 574 scaleX: 1, 575 scaleY: 1, 576 skewX: 0, 577 skewY: 0 578 }); 579 // if( typeof pu.plugin.settings.showOnTimeout === 'number' ){ 580 // pu.events.startTimeout(); 581 // } 582 if( pu.plugin.settings.resetOnClose ){ 583 $slider.layerSlider( 'resetSlide' ); 584 } 585 if( pu.plugin.settings.resetOnClose === 'slider' ){ 586 $slider.layerSlider( 'fastChangeTo', 1 ); 587 if( ls.slideshow.state.pausedByLastCycle ){ 588 ls.slideshow.state.pausedByLastCycle = false; 589 ls.slideshow.state.paused = false; 590 ls.slideshow.state.running = true; 591 } 592 } 593 if( pu.plugin.settings.showOnScroll || pu.plugin.settings.closeOnScroll ){ 594 pu.events.checkScrollPositions(); 595 } 596 // API CALL: popupDidClose 597 if( ls.api.hasEvent( 'popupDidClose' ) ){ 598 ls.api.triggerEvent( 'popupDidClose', ls.api.eventData() ); 599 } 600 } 601 602 if( ls.slides[ ls.slides.current.index || 1 ].data.hasSmartBG ){ 603 ls.transitions.layers.timeline.forceRestart = true; 604 } 605 606 // Set state 607 pu.state.is = 'closed'; 608 609 } 610 }; 611 612 if( typeof this.transitionSettings.customTransitionOut === 'object' ){ 613 this.transitionSettings.styleOutTo = $.extend( {}, this.transitionSettings.styleOutTo, this.transitionSettings.customTransitionOut ); 614 } 615 }, 616 617 show: function(){ 618 619 // SET: options, classes 620 ls.slider.shouldResize = true; 621 622 ls.slider.state.popupIsVisible = true; 623 ls.slider.state.popupShouldStart = pu.plugin.settings.startSliderImmediately ? true : false; 624 pu.$popup.addClass( 'ls-popup-visible' ); 625 626 // TRIGGER: resize events 627 $( window ).trigger( 'resize.' + sliderUID ); 628 pu.events.resize(); 629 630 if( typeof this.transitionSettings.customTransitionIn !== 'object' ){ 631 632 // SET: tranition in 633 switch( this.transitionSettings.transitionIn.toLowerCase() ){ 634 default: 635 case 'fade': 636 this.transitionSettings.styleInFrom.opacity = 0; 637 break; 638 case 'slidefromtop': 639 this.transitionSettings.styleInFrom.y = device.scroll.top - ( ls.slider.height + ls.slider.offset.top ); 640 break; 641 case 'slidefrombottom': 642 this.transitionSettings.styleInFrom.y = device.scroll.top + device.viewport.height - ls.slider.offset.top; 643 break; 644 case 'slidefromleft': 645 this.transitionSettings.styleInFrom.x = device.scroll.left - ( ls.slider.width + ls.slider.offset.left ); 646 break; 647 case 'slidefromright': 648 this.transitionSettings.styleInFrom.x = device.scroll.left + device.viewport.width - ls.slider.offset.left; 649 break; 650 case 'rotatefromtop': 651 this.transitionSettings.styleInFrom.opacity = 0; 652 this.transitionSettings.styleInFrom.y = -( ls.slider.height / 2 ); 653 this.transitionSettings.styleInFrom.rotationX = 30; 654 this.transitionSettings.styleInTo.ease = ls.gsap.Quint.easeOut; 655 break; 656 case 'rotatefrombottom': 657 this.transitionSettings.styleInFrom.opacity = 0; 658 this.transitionSettings.styleInFrom.y = ls.slider.height / 2; 659 this.transitionSettings.styleInFrom.rotationX = -30; 660 this.transitionSettings.styleInTo.ease = ls.gsap.Quint.easeOut; 661 break; 662 case 'rotatefromleft': 663 this.transitionSettings.styleInFrom.opacity = 0; 664 this.transitionSettings.styleInFrom.x = -( ls.slider.width / 2 ); 665 this.transitionSettings.styleInFrom.rotationY = -30; 666 this.transitionSettings.styleInTo.ease = ls.gsap.Quint.easeOut; 667 break; 668 case 'rotatefromright': 669 this.transitionSettings.styleInFrom.opacity = 0; 670 this.transitionSettings.styleInFrom.x = ls.slider.width / 2; 671 this.transitionSettings.styleInFrom.rotationY = 30; 672 this.transitionSettings.styleInTo.ease = ls.gsap.Quint.easeOut; 673 break; 674 case 'scalefromtop': 675 this.transitionSettings.styleInFrom.opacity = 0; 676 this.transitionSettings.styleInFrom.scaleY = 1.5; 677 this.transitionSettings.styleInFrom.y = -( ls.slider.height / 4 ); 678 this.transitionSettings.styleInFrom.transformOrigin = '50% 100%'; 679 this.transitionSettings.styleInTo.ease = ls.gsap.Back.easeOut; 680 // this.transitionSettings.durationIn = 0.5; 681 break; 682 case 'scalefrombottom': 683 this.transitionSettings.styleInFrom.opacity = 0; 684 this.transitionSettings.styleInFrom.scaleY = 1.5; 685 this.transitionSettings.styleInFrom.y = ls.slider.height / 4; 686 this.transitionSettings.styleInFrom.transformOrigin = '50% 0'; 687 this.transitionSettings.styleInTo.ease = ls.gsap.Back.easeOut; 688 // this.transitionSettings.durationIn = 0.5; 689 break; 690 case 'scalefromleft': 691 this.transitionSettings.styleInFrom.opacity = 0; 692 this.transitionSettings.styleInFrom.scaleX = 1.5; 693 this.transitionSettings.styleInFrom.x = -( ls.slider.width / 4 ); 694 this.transitionSettings.styleInFrom.transformOrigin = '100% 50%'; 695 this.transitionSettings.styleInTo.ease = ls.gsap.Back.easeOut; 696 // this.transitionSettings.durationIn = 0.5; 697 break; 698 case 'scalefromright': 699 this.transitionSettings.styleInFrom.opacity = 0; 700 this.transitionSettings.styleInFrom.scaleX = 1.5; 701 this.transitionSettings.styleInFrom.x = ls.slider.width / 4; 702 this.transitionSettings.styleInFrom.transformOrigin = '0 50%'; 703 this.transitionSettings.styleInTo.ease = ls.gsap.Back.easeOut; 704 // this.transitionSettings.durationIn = 0.5; 705 break; 706 case 'scale': 707 this.transitionSettings.styleInFrom.opacity = 0; 708 this.transitionSettings.styleInFrom.scaleX = 0.5; 709 this.transitionSettings.styleInFrom.scaleY = 0.5; 710 break; 711 case 'spin': 712 this.transitionSettings.styleInFrom.rotation = 360; 713 this.transitionSettings.styleInFrom.scaleX = 0; 714 this.transitionSettings.styleInFrom.scaleY = 0; 715 this.transitionSettings.styleInTo.ease = ls.gsap.Quart.easeOut; 716 break; 717 case 'spinx': 718 this.transitionSettings.styleInFrom.rotationX = 360; 719 this.transitionSettings.styleInFrom.scaleX = 0; 720 this.transitionSettings.styleInFrom.scaleY = 0; 721 this.transitionSettings.styleInTo.ease = ls.gsap.Quart.easeOut; 722 break; 723 case 'spiny': 724 this.transitionSettings.styleInFrom.rotationY = 360; 725 this.transitionSettings.styleInFrom.scaleX = 0; 726 this.transitionSettings.styleInFrom.scaleY = 0; 727 this.transitionSettings.styleInTo.ease = ls.gsap.Quart.easeOut; 728 break; 729 case 'elastic': 730 this.transitionSettings.styleInFrom.opacity = 0; 731 this.transitionSettings.styleInFrom.scaleX = 1.2; 732 this.transitionSettings.styleInFrom.scaleY = 0.8; 733 this.transitionSettings.styleInTo.ease = ls.gsap.Elastic.easeOut; 734 break; 735 } 736 } 737 738 // MUST DO THIS BECAUSE OF A BUG (possible in current version of GSAP?) 739 $slider.css({ 740 transformOrigin: this.transitionSettings.styleInFrom.transformOrigin 741 }); 742 743 // START: transition in 744 ls.gsap.TweenMax.fromTo( $slider[0], this.transitionSettings.durationIn, this.transitionSettings.styleInFrom, this.transitionSettings.styleInTo ); 745 }, 746 747 hide: function(){ 748 749 if( typeof this.transitionSettings.customTransitionOut !== 'object' ){ 750 751 // SET: transition out 752 switch( this.transitionSettings.transitionOut.toLowerCase() ){ 753 default: 754 case 'fade': 755 this.transitionSettings.styleOutTo.opacity = 0; 756 break; 757 case 'slidetotop': 758 this.transitionSettings.styleOutTo.y = device.scroll.top - ( ls.slider.height + ls.slider.offset.top ); 759 break; 760 case 'slidetobottom': 761 this.transitionSettings.styleOutTo.y = device.scroll.top + device.viewport.height - ls.slider.offset.top; 762 break; 763 case 'slidetoleft': 764 this.transitionSettings.styleOutTo.x = device.scroll.left - ( ls.slider.width + ls.slider.offset.left ); 765 break; 766 case 'slidetoright': 767 this.transitionSettings.styleOutTo.x = device.scroll.left + device.viewport.width - ls.slider.offset.left; 768 break; 769 case 'rotatetotop': 770 this.transitionSettings.styleOutTo.opacity = 0; 771 this.transitionSettings.styleOutTo.y = -( ls.slider.height / 2 ); 772 this.transitionSettings.styleOutTo.rotationX = 30; 773 this.transitionSettings.styleOutTo.ease = ls.gsap.Quint.easeIn; 774 break; 775 case 'rotatetobottom': 776 this.transitionSettings.styleOutTo.opacity = 0; 777 this.transitionSettings.styleOutTo.y = ls.slider.height / 2; 778 this.transitionSettings.styleOutTo.rotationX = -30; 779 this.transitionSettings.styleOutTo.ease = ls.gsap.Quint.easeIn; 780 break; 781 case 'rotatetoleft': 782 this.transitionSettings.styleOutTo.opacity = 0; 783 this.transitionSettings.styleOutTo.x = -( ls.slider.width / 2 ); 784 this.transitionSettings.styleOutTo.rotationY = -30; 785 this.transitionSettings.styleOutTo.ease = ls.gsap.Quint.easeIn; 786 break; 787 case 'rotatetoright': 788 this.transitionSettings.styleOutTo.opacity = 0; 789 this.transitionSettings.styleOutTo.x = ls.slider.width / 2; 790 this.transitionSettings.styleOutTo.rotationY = 30; 791 this.transitionSettings.styleOutTo.ease = ls.gsap.Quint.easeIn; 792 break; 793 case 'scale': 794 this.transitionSettings.styleOutTo.opacity = 0; 795 this.transitionSettings.styleOutTo.scaleX = 0.5; 796 this.transitionSettings.styleOutTo.scaleY = 0.5; 797 break; 798 case 'scaletotop': 799 this.transitionSettings.styleOutTo.opacity = 0; 800 this.transitionSettings.styleOutTo.scaleY = 1.5; 801 this.transitionSettings.styleOutTo.y = -( ls.slider.height / 4 ); 802 this.transitionSettings.styleOutTo.transformOrigin = '50% 100%'; 803 this.transitionSettings.styleOutTo.ease = ls.gsap.Quint.easeIn; 804 break; 805 case 'scaletobottom': 806 this.transitionSettings.styleOutTo.opacity = 0; 807 this.transitionSettings.styleOutTo.scaleY = 1.5; 808 this.transitionSettings.styleOutTo.y = ls.slider.height / 4; 809 this.transitionSettings.styleOutTo.transformOrigin = '50% 0'; 810 this.transitionSettings.styleOutTo.ease = ls.gsap.Quint.easeIn; 811 break; 812 case 'scaletoleft': 813 this.transitionSettings.styleOutTo.opacity = 0; 814 this.transitionSettings.styleOutTo.scaleX = 1.5; 815 this.transitionSettings.styleOutTo.x = -( ls.slider.width / 4 ); 816 this.transitionSettings.styleOutTo.transformOrigin = '100% 50%'; 817 this.transitionSettings.styleOutTo.ease = ls.gsap.Quint.easeIn; 818 break; 819 case 'scaletoright': 820 this.transitionSettings.styleOutTo.opacity = 0; 821 this.transitionSettings.styleOutTo.scaleX = 1.5; 822 this.transitionSettings.styleOutTo.x = ls.slider.width / 4; 823 this.transitionSettings.styleOutTo.transformOrigin = '0 50%'; 824 this.transitionSettings.styleOutTo.ease = ls.gsap.Quint.easeIn; 825 break; 826 case 'spin': 827 this.transitionSettings.styleOutTo.rotation = 360; 828 this.transitionSettings.styleOutTo.scaleX = 0; 829 this.transitionSettings.styleOutTo.scaleY = 0; 830 this.transitionSettings.styleOutTo.ease = ls.gsap.Quart.easeIn; 831 break; 832 case 'spinx': 833 this.transitionSettings.styleOutTo.rotationX = 360; 834 this.transitionSettings.styleOutTo.scaleX = 0; 835 this.transitionSettings.styleOutTo.scaleY = 0; 836 this.transitionSettings.styleOutTo.ease = ls.gsap.Quart.easeIn; 837 break; 838 case 'spiny': 839 this.transitionSettings.styleOutTo.rotationY = 360; 840 this.transitionSettings.styleOutTo.scaleX = 0; 841 this.transitionSettings.styleOutTo.scaleY = 0; 842 this.transitionSettings.styleOutTo.ease = ls.gsap.Quart.easeIn; 843 break; 844 case 'elastic': 845 this.transitionSettings.styleOutTo.opacity = 0; 846 this.transitionSettings.styleOutTo.scaleX = 1.2; 847 this.transitionSettings.styleOutTo.scaleY = 0.8; 848 this.transitionSettings.styleOutTo.ease = ls.gsap.Back.easeInOut; 849 break; 850 } 851 } 852 853 // STOP: slider 854 if( !pu.plugin.settings.startSliderImmediately ){ 855 $slider.layerSlider( 'pause' ); 856 } 857 858 // MUST DO THIS BECAUSE OF A BUG (possible in current version of GSAP?) 859 $slider.css({ 860 transformOrigin: this.transitionSettings.styleOutTo.transformOrigin 861 }); 862 863 // START: transition out 864 ls.gsap.TweenMax.to( $slider[0], this.transitionSettings.durationOut, this.transitionSettings.styleOutTo ); 865 866 ls.slider.shouldResize = false;
867 } 868 }; 869 870 pu.slider = { 871 872 setOptions: function(){ 873 874 if( ls.o.popupFitWidth || ls.o.popupFitHeight ){ 875 ls.o.type = 'fullsize'; 876 ls.o.fullSizeMode = 'fitheight'; 877 878 if( ls.o.popupFitWidth && !ls.o.popupFitHeight ){ 879 $slider.css({ 880 maxHeight: pu.popup.styleSettings.height 881 }); 882 } 883 884 if( ls.o.popupFitHeight && !ls.o.popupFitWidth ){ 885 $slider.css({ 886 maxWidth: pu.popup.styleSettings.width 887 }); 888 } 889 }else{ 890 ls.o.type = 'responsive'; 891 $slider.css({ 892 maxWidth: pu.popup.styleSettings.width, 893 maxHeight: pu.popup.styleSettings.height 894 }); 895 } 896 897 ls.slider.isPopup = true; 898 899 $.extend( ls.o, forceSliderSettings ); 900 901 if( pu.plugin.settings.closeOnEsc ){ 902 window._layerSlider.closePopupsOnEsc[sliderUID] = true; 903 } 904 }, 905 906 setStyles: function(){ 907 908 var sliderStyles = {}; 909 910 // SET: styles of the slider element 911 switch( pu.popup.styleSettings.positionHorizontal ){ 912 case 'left': 913 sliderStyles.left = 0; 914 sliderStyles.right = 'auto'; 915 break; 916 case 'right': 917 sliderStyles.left = 'auto'; 918 sliderStyles.right = 0; 919 break; 920 case 'center': 921 sliderStyles.left = '50%'; 922 sliderStyles.right = 'auto'; 923 break; 924 } 925 switch( pu.popup.styleSettings.positionVertical ){ 926 case 'top': 927 sliderStyles.top = 0; 928 sliderStyles.bottom = 'auto'; 929 break; 930 case 'bottom': 931 sliderStyles.top = 'auto'; 932 sliderStyles.bottom = 0; 933 break; 934 case 'middle': 935 sliderStyles.top = '50%'; 936 sliderStyles.bottom = 'auto'; 937 break; 938 } 939 $slider.css( sliderStyles ); 940 } 941 }; 942 943 pu.events = { 944 945 set: function(){ 946 947 $slider.on( 'sliderDidLoad.layerSlider', function( event, data ){ 948 949 // CLICK EVENT 950 if( pu.plugin.settings.$clickTriggerElements && pu.plugin.settings.$clickTriggerElements.length > 0 ){ 951 952 pu.plugin.settings.$clickTriggerElements.on( 'click.' + pu.pluginDefaults.eventNamespace + sliderUID, function( e ){ 953 e.preventDefault(); 954 if( pu.$popup.hasClass( 'ls-popup-visible' ) ){ 955 pu.events.hide(); 956 }else{ 957 var startWithSlide = $(this).data( 'ls-popup-slide' ); 958 pu.events.show( startWithSlide && $.isNumeric( startWithSlide ) ? startWithSlide : false ); 959 } 960 }); 961 } 962 963 // SCROLL EVENT 964 if( pu.plugin.settings.showOnScroll || pu.plugin.settings.closeOnScroll ){ 965 966 // SET: starting scroll direction & scroll position 967 pu.events.scrollDirection = 'down'; 968 pu.events.lastScrollPosition = device.scroll.top; 969 pu.events.checkScrollPositions(); 970 971 // SET: starting scroll direction 972 $( window ).on( 'scroll.' + pu.pluginDefaults.eventNamespace + sliderUID, function(){ 973 974 if( 975 ( device.scroll.top >= pu.events.lastScrollPosition && pu.events.scrollDirection === 'up' ) || 976 ( device.scroll.top <= pu.events.lastScrollPosition && pu.events.scrollDirection === 'down' && device.scroll.top !== 0 ) 977 ){ 978 pu.events.switchScrollDirection(); 979 } 980 981 pu.events.lastScrollPosition = device.scroll.top; 982 983 if( pu.events.scrollDirection === pu.events.popupShouldShowTriggerAnEventByScrolling ){ 984 if( pu.plugin.settings.scrollPosition === 'auto' ){ 985 if( ls.slider.offset.top > device.scroll.top && ls.slider.offset.top < ( device.scroll.top + device.viewport.height ) ){ 986 if( pu.events.scrollDirection === 'down' ){ 987 if( ls.slider.state.popupIsVisible ){ 988 pu.events.popupShouldHide = true; 989 }else{ 990 pu.events.popupShouldShow = true; 991 } 992 } 993 }else if( pu.events.scrollDirection === 'up' ){ 994 if( ls.slider.state.popupIsVisible ){ 995 pu.events.popupShouldHide = true; 996 }else{ 997 pu.events.popupShouldShow = true; 998 } 999 } 1000 }else if( typeof pu.plugin.settings.scrollPosition === 'number' ){ 1001 if( device.scroll.top >= pu.plugin.settings.scrollPosition ){ 1002 if( pu.events.scrollDirection === 'down' ){ 1003 if( ls.slider.state.popupIsVisible ){ 1004 pu.events.popupShouldHide = true; 1005 }else{ 1006 pu.events.popupShouldShow = true; 1007 } 1008 } 1009 }else if( pu.events.scrollDirection === 'up' ){ 1010 if( ls.slider.state.popupIsVisible ){ 1011 pu.events.popupShouldHide = true; 1012 }else{ 1013 pu.events.popupShouldShow = true; 1014 } 1015 } 1016 }else if( pu.plugin.settings.scrollPosition.indexOf( '%' ) !== -1 ){ 1017 if( parseInt( device.scroll.top / ( ( device.document.height - device.viewport.height ) / 100 ) ) > parseInt( pu.plugin.settings.scrollPosition ) ){ 1018 if( pu.events.scrollDirection === 'down' ){ 1019 if( ls.slider.state.popupIsVisible ){ 1020 pu.events.popupShouldHide = true; 1021 }else{ 1022 pu.events.popupShouldShow = true; 1023 } 1024 } 1025 }else if( pu.events.scrollDirection === 'up' ){ 1026 if( ls.slider.state.popupIsVisible ){ 1027 pu.events.popupShouldHide = true; 1028 }else{ 1029 pu.events.popupShouldShow = true; 1030 } 1031 } 1032 } 1033 } 1034 1035 if( pu.events.popupShouldShow ){ 1036 pu.events.popupShouldShow = false;
1037 pu.events.show(); 1038 pu.events.checkScrollPositions(); 1039 }else if( pu.events.popupShouldHide ){ 1040 pu.events.popupShouldHide = false; 1041 pu.events.hide(); 1042 1043 } 1044 }); 1045 1046 $( window ).trigger( 'scroll.' + pu.pluginDefaults.eventNamespace + sliderUID ); 1047 } 1048 1049 // LEAVE EVENT 1050 if( pu.plugin.settings.showOnLeave ){ 1051 1052 $( document ).on( 'mousemove.' + pu.pluginDefaults.eventNamespace + sliderUID, function( event ) { 1053 pu.events.mousePositionTop = event.pageY - device.scroll.top; 1054 }); 1055 1056 $( 'html' ).on( 'mouseleave.' + pu.pluginDefaults.eventNamespace + sliderUID, function(){ 1057 if( pu.events.mousePositionTop < 100 ){ 1058 pu.events.show(); 1059 } 1060 }); 1061 } 1062 1063 // IDLE EVENT 1064 if( pu.plugin.settings.showOnIdle && typeof pu.plugin.settings.showOnIdle === 'number' ){ 1065 1066 pu.events.idleTime = 0; 1067 pu.events.startIdleTimer(); 1068 1069 $( window ).on( 'load.' + pu.pluginDefaults.eventNamespace + sliderUID, function(){ 1070 pu.events.startIdleTimer(); 1071 }); 1072 1073 $( document ).on( 'mousemove.' + pu.pluginDefaults.eventNamespace + sliderUID + ' keypress.' + pu.pluginDefaults.eventNamespace + sliderUID, function(){ 1074 pu.events.startIdleTimer(); 1075 }); 1076 } 1077 1078 // TIMEOUT EVENT 1079 if( pu.plugin.settings.hasOwnProperty( 'showOnTimeout' ) && typeof pu.plugin.settings.showOnTimeout === 'number' ){ 1080 pu.events.startTimeout(); 1081 } 1082 1083 $( window ).on( 'resize.' + pu.pluginDefaults.eventNamespace + sliderUID, function(){ 1084 if( ls.slider.state.popupIsVisible ){ 1085 pu.events.resize(); 1086 } 1087 }); 1088 1089 $( window ).on( 'orientationchange.' + pu.pluginDefaults.eventNamespace + sliderUID, function(){ 1090 if( ls.slider.state.popupIsVisible ){ 1091 setTimeout(function(){ 1092 ls.resize.all(); 1093 pu.events.resize(); 1094 }, 750 ); 1095 } 1096 }); 1097 }); 1098 1099 if( pu.plugin.settings.overlayClickToClose ){ 1100 pu.$overlay.on( 'click.' + pu.pluginDefaults.eventNamespace + sliderUID, function() { 1101 pu.events.hide(); 1102 }); 1103 } 1104 1105 $slider.on( 'click.' + pu.pluginDefaults.eventNamespace + sliderUID, '[href="#popupclose"], [href="#popupClose"], [href="#closepopup"], [href="#closePopup"], .ls-popup-close, .ls-close-popup, .ls-popup-close-button, .ls-close-popup-button', function( event ) { 1106 event.preventDefault(); 1107 pu.events.hide(); 1108 }); 1109 1110 $( document ).on( 'click.' + pu.pluginDefaults.eventNamespace + sliderUID, '.ls-close-all-popups-button', function( event ){ 1111 event.preventDefault(); 1112 pu.events.hide(); 1113 }); 1114 }, 1115 1116 checkScrollPositions: function(){ 1117 1118 // CHECK: if the slider should show or hide by scrolling 1119 if( pu.plugin.settings.closeOnScroll && ls.slider.state.popupIsVisible ){ 1120 pu.plugin.settings.scrollPosition = pu.plugin.settings.closeOnScroll; 1121 }else if( pu.plugin.settings.showOnScroll && !ls.slider.state.popupIsVisible ){ 1122 pu.plugin.settings.scrollPosition = pu.plugin.settings.showOnScroll; 1123 }else{ 1124 pu.plugin.settings.scrollPosition = ''; 1125 } 1126 1127 // CHECK: the direction of scrolling & position of the slider regarding to the viewport 1128 if( pu.plugin.settings.scrollPosition === 'auto' ){ 1129 if( ls.slider.offset.top > device.scroll.top && ls.slider.offset.top < ( device.scroll.top + device.viewport.height ) ){ 1130 pu.events.popupShouldShowTriggerAnEventByScrolling = 'up'; 1131 }else{ 1132 pu.events.popupShouldShowTriggerAnEventByScrolling = 'down'; 1133 } 1134 }else if( typeof pu.plugin.settings.scrollPosition === 'number' ){ 1135 if( device.scroll.top >= pu.plugin.settings.scrollPosition ){ 1136 pu.events.popupShouldShowTriggerAnEventByScrolling = 'up'; 1137 }else{ 1138 pu.events.popupShouldShowTriggerAnEventByScrolling = 'down'; 1139 } 1140 }else if( pu.plugin.settings.scrollPosition.indexOf( '%' ) !== -1 ){ 1141 if( parseInt( device.scroll.top / ( ( device.document.height - device.viewport.height ) / 100 ) ) > parseInt( pu.plugin.settings.scrollPosition ) ){ 1142 pu.events.popupShouldShowTriggerAnEventByScrolling = 'up'; 1143 }else{ 1144 pu.events.popupShouldShowTriggerAnEventByScrolling = 'down'; 1145 } 1146 } 1147 }, 1148 1149 switchScrollDirection: function(){ 1150 1151 if( pu.plugin.settings.scrollPosition ){ 1152 if( pu.events.scrollDirection === 'up' ){ 1153 pu.events.scrollDirection = 'down'; 1154 }else{ 1155 pu.events.scrollDirection = 'up'; 1156 } 1157 } 1158 }, 1159 1160 startIdleTimer: function(){ 1161 1162 if( pu.events.idleTimer ){ clearTimeout( pu.events.idleTimer ); } 1163 1164 pu.events.idleTimer = setTimeout( function(){ 1165 pu.events.show(); 1166 }
1166, pu.plugin.settings.showOnIdle * 1000 ); 1167 }, 1168 1169 startTimeout: function(){ 1170 1171 if( pu.events.timeout ){ clearTimeout( pu.events.timeout ); } 1172 1173 // BUGFIX: added in popups 1.5 & ls 6.9.5 | if popup has delay, ls.transitions.start(); must call after the timer is ended 1174 ls.slider.state.popupIsWaitingForDelay = true; 1175 1176 pu.events.timeout = setTimeout( function(){ 1177 1178 // BUGFIX: added in popups 1.5 & ls 6.9.5 | if popup has delay, ls.transitions.start(); must call after the timer is ended 1179 ls.slider.state.popupIsWaitingForDelay = false; 1180 if( ls.slider.state.waitingForPopupTimer ){ 1181 ls.slider.state.waitingForPopupTimer = false; 1182 ls.transitions.start(); 1183 } 1184 1185 pu.events.show(); 1186 }, pu.plugin.settings.showOnTimeout * 1000 ); 1187 }, 1188 1189 show: function( startWithSlide ){ 1190 1191 if( !$slider.hasClass( 'ls-forcehide') ){ 1192 1193 if( !ls.slider.state.popupIsVisible ){ 1194 1195 // API CALL: popupWillOpen 1196 if( ls.api.hasEvent( 'popupWillOpen' ) ){ 1197 ls.api.triggerEvent( 'popupWillOpen', ls.api.eventData() ); 1198 } 1199 1200 var showFunction = function(){ 1201 if( !pu.plugin.settings.disableOverlay ){ 1202 pu.overlay.show(); 1203 } 1204 pu.popup.show(); 1205 } 1206 1207 if( startWithSlide ){ 1208 $slider.layerSlider( 'fastChangeTo', startWithSlide, showFunction ); 1209 }else{ 1210 showFunction(); 1211 } 1212 } 1213 } 1214 }, 1215 1216 hide: function(){ 1217 1218 if( ls.slider.state.popupIsVisible ){ 1219 1220 // API CALL: popupWillClose 1221 if( ls.api.hasEvent( 'popupWillClose' ) ){ 1222 ls.api.triggerEvent( 'popupWillClose', ls.api.eventData() ); 1223 } 1224 1225 if( !pu.plugin.settings.disableOverlay ){ 1226 pu.overlay.hide(); 1227 } 1228 pu.popup.hide(); 1229 } 1230 }, 1231 1232 resize: function(){ 1233 1234 var sliderStyles = {}; 1235 1236 if( pu.popup.styleSettings.positionHorizontal === 'center' ){ 1237 sliderStyles.marginLeft = -ls.slider.width / 2; 1238 } 1239 if( pu.popup.styleSettings.positionVertical === 'middle' ){ 1240 sliderStyles.marginTop = -ls.slider.height / 2; 1241 } 1242 1243 $slider.css( sliderStyles ); 1244 1245 // SET: slider offset after positioning it 1246 var sliderOffset = $slider.offset(); 1247 ls.slider.offset.left = sliderOffset.left; 1248 ls.slider.offset.top = sliderOffset.top; 1249 }, 1250 1251 destroy: function(){ 1252 1253 $slider.on( 'sliderDidRemove.layerSlider', function(){ 1254 $( [ window, document, $('body')[0], $('html')[0], pu.plugin.settings.$clickTriggerElements ] ).off( pu.pluginDefaults.eventNamespace + sliderUID ); 1255 pu.$overlay.remove(); 1256 pu.$popup.remove(); 1257 }).layerSlider( 'destroy', true ); 1258 } 1259 }; 1260 }; 1261 1262 // Close on ESC (global event) 1263 $(document).on( 'keydown.lsGlobal', function( e ) { 1264 if ( e.which === 27 ) { 1265 for( var popupUID in window._layerSlider.closePopupsOnEsc ){ 1266 window._layerSliders[popupUID].api.methods( 'closePopup' ); 1267 } 1268 } 1269 }); 1270 1271})( jQuery, undefined );
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.