1/* 2 3 JQuery Leaflet Pop Up v1.0.0 4 Copyright © 2014 Artem Loginov 5 http://loginoff.pro/ 6 7 License: 8 GNU General Public License 2 - http://opensource.org/licenses/GPL-2.0 9 10 */ 11 12(function($) { 13 14 'use strict'; 15 16 var LeafletPopup = (function(window, undefined) { 17 18 var leaflet = { 19 20 settings: {}, 21 defaultSettings: { 22 23 url: false, 24 content: false, // text/html string or function, who will return text/html string, or false (boolean) 25 contentType: false, // string: "html", "function", "image", "iframe", "url", "hash" 26 27 animationStyleOfBox: 'fade', // animation style of popup box: "fade", "scale", "drop", "drop3d" 28 animationStyleOfOverlay: 'fade', // animation style of overlay: "fade", "scale" 29 animationStyleOfChange: 'fade', // animation style of change content: "fade", "slide", "pushDown" 30 animateSpeed: 400, 31 32 boxVerticalGutters: 50, // number of pixels 33 boxHorizontalGutters: 50, // number of pixels 34 boxWidth: 800, // number of pixels or string 'auto', 35 36 closeBtnClass: 'i-leaflet i-leaflet-close', 37 closeBtnLocation: 'overlay', // 'overlay', 'box', 38 39 directionBtnClass: [ 40 'i-leaflet i-leaflet-prev', 41 'i-leaflet i-leaflet-next'], 42 directionBtnLocation: 'overlay', // 'overlay', 'box', 43 44 checkCookies: false, 45 cookies: { 46 key: 'jquery.leaflet', 47 value: 'locked', 48 expires: 1, 49 path: '/', 50 }, 51 52 maxHeight: false, 53 54 namespace: 'b-leaflet', // css-prefix for popup layout 55 56 overlay: true, 57 overlayBlur: false, 58 overlayCloseEvent: true, 59 overlayOpacity: 0.65, 60 overlayShowSpeed: 400, 61 overlayLoader: { 62 cx: 26, 63 cy: 26, 64 r: 25, 65 }, 66 67 scrollMode: 'outer', // 'outer' - common scroll mode, 'inner' - popup is fixed behind content 68 scrollLocker: null, 69 70 // Callbacks 71 beforeLoad: function() { 72 }, // this - popup box jquery object 73 afterLoad: function() { 74 }, // this - popup box jquery object 75 76 beforeClose: function() { 77 }, // this - popup container jquery object 78 afterClose: function() { 79 }, // global context 80 81 }, 82 83 states: { 84 isBuilt: false, 85 keycode: 0, 86 scroll: 0, 87 scrollBarWidth: 18, 88 direction: 1, 89 }, 90 elements: {}, 91 group: {}, 92 groupArray: [], 93 94 }, 95 96 KEYCODE_LEFT_ARROW = 37, 97 KEYCODE_RIGHT_ARROW = 39, 98 99 KEYCODE_ESC = 27; 100 101 function App($element, options, method) { 102 103 // Cashing 104 leaflet.elements.body = $('body'); 105 leaflet.elements.document = $('html'); 106 107 leaflet.elements.link = $element; 108 109 // Get settings 110 this.settings = $.extend(leaflet.settings, leaflet.defaultSettings, 111 options); 112 113 this.settings.url = this.settings.url || $element.attr('href') || 114 $element.data('href') || '/'; 115 116 if (!this.settings.contentType) { 117 118 this.setContentType(); 119 120 } 121 122 this.settings.boxWidth = typeof this.settings.boxWidth === 'function' ? 123 this.settings.boxWidth.call(leaflet.elements.link) : 124 this.settings.boxWidth; 125 this.settings.closeBtnLocation = this.settings.overlay ? 126 this.settings.closeBtnLocation : 127 'box'; 128 this.settings.scrollMode = typeof this.settings.scrollMode === 129 'function' ? this.settings.scrollMode() : this.settings.scrollMode; 130 131 // Set states 132 this.states = {}; 133 this.states.pfx = helpers.getPfx(); 134 this.states.loadingTimeout = null; 135 this.states.scroll = document.documentElement.scrollTop || 136 document.body.scrollTop; 137 this.states.scrollBarWidth = helpers.getScrollBarWidth(); 138 139 // Set document classes prefix 140 this.docClassPfx = 'm-leaflet-'; 141 142 switch (method) { 143 144 default: 145 146 return $.error( 147 'Method "' + param + '" is not defined in LeafletPopup'); 148 149 case 'init': 150 151 // Init popup 152 this.init(); 153 154 break; 155 156 case 'show': 157 158 if (!(this.settings.checkCookies && 159 helpers.cookies.get(this.settings.cookies.key) == 160 this.settings.cookies.value)) { 161 162 // Init popup 163 this.init(); 164 helpers.cookies.set(this.settings.cookies); 165 166 } 167 168 break; 169 170 case 'hide': 171 172 // Hide popup 173 this.hideLayout(); 174 175 break; 176 177 case 'destroy': 178 179 leaflet.elements.body.off('click.leafletOpen', $element.selector); 180 181 break; 182 183 } 184 185 } 186 187 App.prototype.init = function() { 188 189 if (!leaflet.states.isBuilt) { 190 191 // Build layout 192 this.buildLayout(); 193 194 // Popup box show 195 this.boxShow(); 196 197 } else { 198 199 // Popup box change 200 this.boxChange(); 201 202 } 203 204 }; 205
206 App.prototype.configureDocClasses = function() { 207 208 var docClasses = this.docClassPfx + 'on ' + this.docClassPfx + 'loading '; 209 210 // Box transition style 211 docClasses += this.docClassPfx + this.settings.animationStyleOfBox + 212 '-transition '; 213 214 // Leaflet mode 215 docClasses += this.docClassPfx + this.settings.scrollMode + '-mode '; 216 217 // Overlay switch 218 docClasses += this.settings.overlay ? this.docClassPfx + 'overlay ' : ''; 219 220 return docClasses; 221 222 }; 223 224 App.prototype.removeDocClasses = function() { 225 226 var mask = this.docClassPfx + '*'; 227 228 leaflet.elements.document.removeClass(function(index, classStr) { 229 230 var replace = mask.replace(/\*/g, '\\S+'); 231 return (classStr.match(new RegExp('\\b' + replace + '', 'g')) || 232 []).join(' '); 233 234 }); 235 236 }; 237 238 App.prototype.setContentType = function() { 239 240 if (!!this.settings.content) { 241 242 switch (typeof leaflet.settings.content) { 243 244 default: 245 case 'string': 246 247 this.settings.contentType = 'html'; 248 249 break; 250 251 case 'function': 252 253 this.settings.contentType = 'function'; 254 255 break; 256 257 case 'boolean': 258 259 this.settings.contentType = 'iframe'; 260 261 break; 262 263 } 264 265 } else { 266 267 var isImage = /\.(gif|png|jp(e|g|eg)|bmp|ico|webp|jxr|svg)((#|\?).*)?$/i.test( 268 this.settings.url), 269 hasHash = !!this.settings.url.match(/#/gi), 270 remoteHash = this.settings.url.indexOf('#') != 0; 271 272 if (isImage) { 273 274 this.settings.contentType = 'image'; 275 276 } 277 278 if (hasHash && !remoteHash) { 279 280 this.settings.contentType = 'hash'; 281 282 } 283 284 if (hasHash && remoteHash) { 285 286 this.settings.contentType = 'hashUrl'; 287 288 } 289 290 if (!isImage && !hasHash) { 291 292 this.settings.contentType = 'url'; 293 294 } 295 296 } 297 298 }; 299 300 App.prototype.buildLayout = function() { 301 302 // Create popUp markup 303 var $leaflet = $( 304 '<div class="' + leaflet.settings.namespace + '"></div>'), 305 306 $leafletCapsule = $( 307 '<div class="' + leaflet.settings.namespace + '_capsule"></div>'). 308 appendTo($leaflet), 309 $leafletWrapper = $('<div class="' + leaflet.settings.namespace + 310 '_capsule_inner"></div>'). 311 css({ 312 padding: leaflet.settings.boxVerticalGutters + 'px ' + 313 leaflet.settings.boxHorizontalGutters + 'px', 314 }). 315 appendTo($leafletCapsule), 316 317 $leafletSources = $('<div class="' + leaflet.settings.namespace + 318 '_inner_sources"></div>').appendTo($leafletWrapper), 319 $leafletPerspective = $('<div class="' + leaflet.settings.namespace + 320 '_perspective"></div>'). 321 css({maxWidth: leaflet.settings.boxWidth}). 322 appendTo($leafletWrapper), 323 324 $leafletBox = $( 325 '<div class="' + leaflet.settings.namespace + '_box"></div>'). 326 css({width: 'auto', maxWidth: leaflet.settings.boxWidth}). 327 appendTo($leafletPerspective), 328 $leafletBoxContent = $('<div class="' + leaflet.settings.namespace + 329 '_box_content"></div>').appendTo($leafletBox), 330 331 $leafletCloseBtn = $( 332 '<div class="' + leaflet.settings.namespace + '_close ' + 333 leaflet.settings.closeBtnClass + '"></div>'), 334 335 $leafletOverlay = $( 336 '<div class="' + leaflet.settings.namespace + '_overlay"></div>'), 337 $leafletOverlayLoader = $( 338 '<div class="' + leaflet.settings.namespace + 339 '_overlay_loader"></div>'), 340 $leafletOverlayLoaderCircle = $( 341 '<svg><circle cx="' + leaflet.settings.overlayLoader.cx + 342 '" cy="' + leaflet.settings.overlayLoader.cy + '" r="' + 343 leaflet.settings.overlayLoader.r + '"></circle></svg>'). 344 appendTo($leafletOverlayLoader), 345 346 $leafletNav = $( 347 '<div class="' + leaflet.settings.namespace + '_nav"></div>'). 348 appendTo(this.settings.directionBtnLocation == 'box' ? 349 $leafletBox : 350 $leafletWrapper), 351 352 $leafletPrevBtn = $( 353 '<div class="' + leaflet.settings.namespace + '_direction ' + 354 leaflet.settings.namespace + '_prev ' + 355 leaflet.settings.directionBtnClass[0] + '"></div>'). 356 appendTo($leafletNav), 357 $leafletNextBtn = $( 358 '<div class="' + leaflet.settings.namespace + '_direction ' + 359 leaflet.settings.namespace + '_next ' + 360 leaflet.settings.directionBtnClass[1] + '"></div>'). 361 appendTo($leafletNav), 362 363 $leafletLocker = $( 364 '<div class="' + leaflet.settings.namespace + '_locker"></div>'); 365 366 // Overlay 367 if (!!leaflet.settings.overlay) { 368 369 $leafletOverlay.appendTo($leafletWrapper); 370 371 } 372 373 if (!!leaflet.settings.overlayLoader) { 374 375 $leafletOverlayLoader.appendTo($leafletOverlay); 376 377 } 378 379 leaflet.elements.sources = $leafletSources; 380 381 // Group 382 this.groupSources(); 383 $leafletNav.toggle(!!leaflet.groupArray.length); 384 385 // Close 386 $leafletCloseBtn.appendTo(this.settings.closeBtnLocation == 'box' ? 387 $leafletBox : 388 $leafletWrapper); 389 390 // Transition settings 391 $leaflet.css(leaflet.pfx + 'transition-duration', 392 leaflet.settings.animateSpeed + 'ms'). 393 css('transition-duration', leaflet.settings.animateSpeed + 'ms'); 394 395 $leafletBox.css(leaflet.pfx + 'transition-duration', 396 leaflet.settings.animateSpeed + 'ms'). 397 css('transition-duration', leaflet.settings.animateSpeed + 'ms'); 398 399 $leafletBoxContent.css(leaflet.pfx + 'transition-duration', 400 leaflet.settings.animateSpeed + 'ms'). 401 css('transition-duration', leaflet.settings.animateSpeed + 'ms'); 402 403 $leafletOverlay.css(leaflet.pfx + 'transition-duration', 404 leaflet.settings.overlayShowSpeed + 'ms'). 405 css('transition-duration', leaflet.settings.overlayShowSpeed + 'ms'); 406 407 // Add document classes 408 leaflet.elements.document.addClass(this.configureDocClasse
408s()); 409 410 // Set leaflet data 411 $leaflet.data('leafletSettings', { 412 animationStyleOfBox: this.settings.animationStyleOfBox, 413 animationStyleOfOverlay: this.settings.animationStyleOfOverlay, 414 animationStyleOfChange: this.settings.animationStyleOfChange, 415 scrollLocker: this.settings.scrollLocker, 416 scrollMode: this.settings.scrollMode, 417 }); 418 419 // Caching jquery objects 420 leaflet.elements.main = $leaflet; 421 leaflet.elements.perspective = $leafletPerspective; 422 leaflet.elements.wrapper = $leafletWrapper; 423 leaflet.elements.box = $leafletBox; 424 leaflet.elements.close = $leafletCloseBtn; 425 leaflet.elements.nav = $leafletNav; 426 leaflet.elements.prev = $leafletPrevBtn; 427 leaflet.elements.next = $leafletNextBtn; 428 leaflet.elements.content = $leafletBoxContent; 429 leaflet.elements.overlay = $leafletOverlay; 430 leaflet.elements.loader = $leafletOverlayLoader; 431 leaflet.elements.locker = !!this.settings.scrollLocker ? 432 this.settings.scrollLocker : 433 $leafletLocker; 434 435 // Caching scroll state 436 leaflet.states.scroll = this.states.scroll; 437 438 // Set layout mode 439 this.setLayoutMode(); 440 441 // Bind events 442 this.bindCloseEvents(); 443 this.bindChangeEvents(); 444 this.bindResizeEvents(); 445 446 // Append markup 447 leaflet.elements.body.prepend($leaflet); 448 449 // Show overlay with micro delay 450 setTimeout($.proxy(function() { 451 452 this.overlayShow(); 453 454 }, this), 0); 455 456 // Switch state 457 leaflet.states.isBuilt = true; 458 459 }; 460 461 App.prototype.hideLayout = function() { 462 463 // Action before closing popup 464 if (!!this.settings.beforeClose) { 465 466 this.settings.beforeClose.call(leaflet.elements.main, leaflet); 467 468 } 469 470 this.overlayHide(); 471 472 // Hide popup box and destroy layout 473 this.boxHide(function() { 474 475 // Unset locker 476 this.unsetLayoutMode(); 477 478 // Destroy layout 479 leaflet.elements.main.remove(); 480 481 // Clear document classes 482 this.removeDocClasses(); 483 484 // Switch state 485 leaflet.states.isBuilt = false; 486 487 leaflet.group = {}; 488 leaflet.groupArray = []; 489 490 // Action after closing popup 491 if (!!this.settings.afterClose) { 492 493 this.settings.afterClose(); 494 495 } 496 497 }); 498 499 }; 500 501 App.prototype.setLayoutMode = function() { 502 503 if (this.settings.scrollMode == 'outer') { 504 505 /*if (!!leaflet.elements.main.data('leafletSettings').scrollLocker) { 506 507 leaflet.elements.main.data('leafletSettings').scrollLocker 508 .addClass(this.settings.namespace + '_locker') 509 .css({ marginTop: -this.states.scroll }); 510 511 // Offset for locker 512 var offset = ($(window).width() - leaflet.elements.locker.outerWidth()) / 2; 513 514 leaflet.elements.locker.css({ left: offset, right: offset }); 515 516 } else { 517 518 leaflet.elements.body.wrapInner(leaflet.elements.locker.css({ marginTop: -this.states.scroll })); 519 520 } 521 522 document.documentElement.scrollTop = 0; 523 document.body.scrollTop = 0; 524 525 window.scrollBy(0, 0);*/ 526 527 $('body').css({ 528 overflow: 'hidden', 529 paddingRight: helpers.getScrollBarWidth(), 530 }); 531 532 } 533 534 }; 535 536 App.prototype.unsetLayoutMode = function() { 537 538 if (leaflet.elements.main.data('leafletSettings').scrollMode == 'outer') { 539 540 /*var $locker = !!this.settings.scrollLocker ? this.settings.scrollLocker : leaflet.elements.locker; 541 542 // Return normal scroll 543 var startPosition = *//*!leaflet.states.scroll ? this.states.scroll : *//*leaflet.states.scroll; 544 545 document.documentElement.scrollTop = startPosition; 546 document.body.scrollTop = startPosition; 547 548 $('html, body').animate({ scrollTop: startPosition }, 1); 549 550 window.scrollBy(0, startPosition); 551 552 setTimeout(function() { 553 554 window.scrollBy(0, startPosition); 555 556 }, 1); 557 558 // Normalize locker 559 $locker 560 .css({ marginTop: '', left: '', right: '' }) 561 .removeClass(this.settings.namespace + '_locker'); 562 563 // Unwrap locker 564 if (!leaflet.elements.main.data('leafletSettings').scrollLocker) { 565 566 helpers.unwrap($('body'), '.' + this.settings.namespace + '_locker'); 567 568 }*/ 569 570 $('body').css({ 571 overflow: '', 572 paddingRight: '', 573 }); 574 575 } 576 577 }; 578 579 App.prototype.groupSources = function() { 580 581 var $group = $( 582 '[data-group="' + leaflet.elements.link.attr('data-group') + '"]'); 583 584 leaflet.group = $group.filter(function() { 585 586 return leaflet.states.isBuilt || !!$(this).data('leaflet'); 587 588 }); 589 590 leaflet.groupCurrent = leaflet.group.length && 591 typeof leaflet.groupCurrent === 'undefined' ? 592 leaflet.group.index(leaflet.elements.link) : 593 leaflet.groupCurrent; 594 595 /* 596 leaflet.elements.sources.empty().append(leaflet.group.clone()); 597 leaflet.group = leaflet.elements.sources.find('[data-group]'); 598 */ 599 600 $group.each(function() { 601 602 if (leaflet.states.isBuilt || !!$(this).data('leaflet')) { 603 604 leaflet.groupArray.push($(this)); 605 606 } 607 608 }); 609 610 }; 611 612 App.prototype.bindCloseEvents = function() { 613 614 leaflet.elements.close.add( 615 this.settings.overlayCloseEvent ? leaflet.elements.overlay : {}). 616 bind('click.leafletClose', $.proxy(function() { 617 618 this.hideLayout(); 619 620 }, this)); 621 622 // Keyboard 623 $(document).bind('keyup.leafletClose', $.proxy(function(e) { 624 625 leaflet.states.keycode = e.keyCode; 626 627 if (leaflet.states.keycode === KEYCODE_ESC) { 628 629 this.hideLayout(); 630 631 } 632 633 }, this)); 634 635 }; 636 637 App.prototype.bindResizeEvents = function() { 638 639 $(window).bind('resize.leafletResize', $.proxy(function() { 640 641 if (leaflet.states.isBuilt) { 642 643 leaflet.elements.box.css(this.states.pfx + 'transition-property', 644 'top, margin, height, transform, opacity'). 645 css('transition-property', 646 'top, margin, height, transform, opacity'); 647 648 this.boxPosition(); 649 650 } 651 652 }, this)); 653 654 }; 655 656 App.prototype.bindChangeEvents = function() { 657 658 $(leaflet.elements.prev).bind('click.leafletChange', $.proxy(function() { 659 660 leaflet.states.direction = -1; 661 this.changeEventHandler(); 662 663 }, this)); 664 665 $(leaflet.elements.next).bind('click.leafletChange', $.proxy(function() { 666 667 console.log(leaflet.settings.boxWidth); 668 669 leaflet.states.direction = 1; 670 this.changeEventHandler(); 671 672 }, this)); 673 674 // Keyboard 675 $(document).bind('keyup.leafletChange', $.proxy(function(e) { 676 677 leaflet.states.keycode = e.keyCode; 678 679 if (!leaflet.elements.document.hasClass(this.docClassPfx + 'loading') && 680 (leaflet.states.keycode === KEYCODE_RIGHT_ARROW || 681 leaflet.states.keycode === KEYCODE_LEFT_ARROW)) { 682 683 leaflet.states.direction = leaflet.states.keycode === 684 KEYCODE_RIGHT_ARROW ? 1 : -1; 685 this.changeEventHandler(); 686 687 } 688 689 }, this)); 690 691 }; 692 693 App.prototype.changeEventHandler = function() { 694 695 var currentIndex = typeof leaflet.groupCurrent === 'undefined' ? 696 leaflet.group.index(leaflet.elements.link) : 697 leaflet.groupCurrent, 698 targetIndex = currentIndex + leaflet.states.direction; 699 700 targetIndex = (targetIndex + 1) > leaflet.group.length ? 701 0 : 702 targetIndex < 0 ? (leaflet.group.length - 1) : targetIndex; 703 704 leaflet.groupCurrent = targetIndex; 705
706 leaflet.elements.main.leafLetPopUp('show', { 707 url: leaflet.groupArray[targetIndex].attr('href'), 708 title: leaflet.groupArray[targetIndex].attr('title'), 709 boxWidth: leaflet.settings.boxWidth, 710 }); 711 712 //leaflet.group.eq(targetIndex).trigger('click.leafletOpen'); 713 714 }; 715 716 App.prototype.overlayShow = function() { 717 718 leaflet.elements.overlay.css(this.states.pfx + 'opacity', 719 this.settings.overlayOpacity). 720 css('opacity', this.settings.overlayOpacity). 721 css('visibility', 'visible'); 722 723 if (this.settings.overlayBlur) { 724 725 leaflet.elements.locker.css(this.states.pfx + 'transition', 726 this.states.pfx + 'filter ' + this.settings.overlayShowSpeed + 727 'ms ease'). 728 css('transition', 729 this.states.pfx + 'filter ' + this.settings.overlayShowSpeed + 730 'ms ease'). 731 css(this.states.pfx + 'filter', 'blur(3px)'). 732 css('filter', 'blur(3px)'); 733 734 } 735 736 }; 737 738 App.prototype.overlayHide = function() { 739 740 leaflet.elements.overlay.add(leaflet.elements.close). 741 add(leaflet.elements.prev). 742 add(leaflet.elements.next). 743 css(leaflet.pfx + 'transition-duration', 744 leaflet.settings.animateSpeed + 'ms'). 745 css('transition-duration', leaflet.settings.animateSpeed + 'ms'). 746 css(this.states.pfx + 'opacity', 0). 747 css('opacity', 0). 748 css('visibility', 'hidden'); 749 750 if (this.settings.overlayBlur) { 751 752 leaflet.elements.locker.css(this.states.pfx + 'filter', ''). 753 css('filter', ''); 754 755 } 756 757 }; 758 759 App.prototype.getContent = function(callback) { 760 761 var app = this; 762 763 // Action before loading of content 764 if (!!this.settings.beforeLoad) { 765 766 this.settings.beforeLoad.call(leaflet.elements.main, this.states.scroll, 767 leaflet); 768 769 } 770 771 // Classes 772 leaflet.elements.main.removeClass($.proxy(function(index, classStr) { 773 774 var replace = this.docClassPfx + 'type-*'.replace(/\*/g, '\\S+'); 775 return (classStr.match(new RegExp('\\b' + replace + '', 'g')) || 776 []).join(' '); 777 778 }, this)). 779 addClass(this.docClassPfx + 'type-' + this.settings.contentType); 780 781 switch (this.settings.contentType) { 782 783 default: 784 case 'html': 785 case 'hash': 786 case 'function': 787 788 var content = this.settings.contentType == 'html' ? 789 this.settings.content : 790 this.settings.contentType == 'function' ? 791 this.settings.content() : 792 $(this.settings.url).clone(true, true); 793 794 leaflet.elements.content.empty(). 795 html(content). 796 css({ 797 maxHeight: !!this.settings.maxHeight ? 798 this.settings.maxHeight() : 799 'none', 800 }); 801 802 setTimeout(function() { 803 804 callback(); 805 806 }, 0); 807 808 break; 809 810 case 'image': 811 812 var $img = $('<img src="' + this.settings.url + '" alt="" />'); 813 814 $img.css({ 815 maxHeight: !!this.settings.maxHeight ? 816 this.settings.maxHeight() : 817 'none', 818 }); 819 820 $img.on('load', function() { 821 822 app.addTitle($img); 823 callback(); 824 825 }); 826 827 leaflet.elements.content.empty().append($img); 828 829 break; 830 831 case 'iframe': 832 833 var $iframe = $('<iframe src="' + this.settings.url + 834 '" frameborder="0" allowfullscreen></iframe>'); 835 836 $iframe.on('load', function() { 837 838 app.addTitle($iframe); 839 callback(); 840 841 }); 842 843 setTimeout(function() { 844 845 leaflet.elements.content.empty().append($iframe); 846 847 $iframe.wrap('<div class="b-leaflet_box_iframe"></div>'); 848 849 }, this.settings.overlayShowSpeed); 850 851 break; 852 853 case 'url': 854 case 'hashUrl': 855 856 var url = this.settings.contentType == 'hashUrl' ? 857 this.settings.url.split('#')[0] + ' #' + 858 this.settings.url.split('#')[1] : 859 this.settings.url; 860 861 leaflet.elements.content.load(url, function() { 862 863 callback(); 864 865 }); 866 867 break; 868 869 } 870 871 }; 872 873 App.prototype.addTitle = function($obj) { 874 875 var $title = $( 876 '<div class="' + leaflet.settings.namespace + '_box_title" />'), 877 title = false; 878 879 if (!!this.settings.title) { 880 881 title = typeof this.settings.title === 'function' ? 882 this.settings.title.call(leaflet) : 883 this.settings.title; 884 885 } else if (!!leaflet.elements.link.attr('title')) { 886 887 title = leaflet.elements.link.attr('title'); 888 889 } 890 891 if (!!title) { 892 893 leaflet.elements.content.append( 894 $title.css({maxWidth: $obj.width()}).html(title)); 895 896 } 897 898 }; 899 900 App.prototype.boxPosition = function() { 901 902 var viewPortHeight = $(window).height(), 903 viewPortInnerHeight = viewPortHeight - 904 (this.settings.boxVerticalGutters * 2), 905 906 boxVerticalPadding = leaflet.elements.box.outerHeight() - 907 leaflet.elements.box.height(), 908 contentHeightMax = viewPortInnerHeight - boxVerticalPadding; 909 910 leaflet.elements.box.css({ 911 maxHeight: (this.settings.scrollMode == 'outer') ? 912 'none' : 913 contentHeightMax, 914 }); 915 916 leaflet.elements.content.css({maxHeight: 'none'}); 917 leaflet.elements.content.css({maxHeight: ''}); 918 919 }; 920 921 App.prototype.boxShow = function() { 922 923 // Get content 924 this.getContent($.proxy(function() { 925 926 // Action when content is loaded 927 if (!!this.settings.afterLoad) { 928 929 this.settings.afterLoad.call(leaflet.elements.box, this.states.scroll, 930 this.settings.contentType); 931 932 } 933 934 this.boxPosition(); 935 this.boxTransitionsIn[leaflet.elements.main.data( 936 'leafletSettings').animationStyleOfBox].call(this); 937 938 }, this)); 939 940 }; 941 942 App.prototype.boxHide = function(callback) { 943 944 this.boxTransitionsOut[leaflet.elements.main.data( 945 'leafletSettings').animationStyleOfBox].call(this); 946 947 setTimeout($.proxy(function() { 948 949 callback.call(this); 950 951 }, this), this.settings.animateSpeed); 952 953 }; 954 955 App.prototype.boxChange = function() { 956 957 if (!leaflet.groupArray.length) { 958 959 this.groupSources(); 960 961 } 962 963 if (leaflet.elements.nav.is(':hidden')) { 964 965 setTimeout(function() { 966 967 leaflet.elements.nav.toggle(!!leaflet.group.length); 968 969 }, this.settings.animateSpeed); 970 971 } 972 973 switch (leaflet.elements.main.data( 974 'leafletSettings').animationStyleOfChange/*leaflet.settings.animationStyleOfChange*/) { 975 976 default: 977 case 'fade': 978 979 leaflet.elements.document.toggleClass(this.docClassPfx + 'loading', 980 true); 981 982 // Set transition properties 983 leaflet.elements.perspective.css(this.states.pfx + 'transition', 984 'width ' + leaflet.settings.animateSpeed + 'ms'). 985 css('transition', 986 'width ' + leaflet.settings.animateSpeed + 'ms'); 987 988 leaflet.elements.box.css(this.states.pfx + 'transition-property', 989 'top, margin, height, transform, opacity'). 990 css('transition-property', 991 'top, margin, height, transform, opacity'); 992 993 // Hide text block 994 leaflet.elements.content.css({overflow: 'hidden', opacity: 0}); 995 996 // Fix box dimensions 997 leaflet.elements.perspective.css({ 998 width: leaflet.elements.perspective.width(), 999 maxWidth: '', 1000 }); 1001 1002 leaflet.elements.box.css({ 1003 height: leaflet.elements.box.height(), 1004 maxWidth: '', 1005 }); 1006 1007 setTimeout($.proxy(function() { 1008 1009 leaflet.elements.content.css({ 1010 width: leaflet.settings.boxWidth - 1011 (leaflet.elements.perspective.width() - 1012 leaflet.elements.content.width()), 1013 }); 1014 1015 // Get content 1016 this.getContent($.proxy(function() { 1017 1018 // Action when content is loaded 1019 if (!!this.settings.afterLoad) { 1020 1021 this.settings.afterLoad.call(leaflet.elements.box); 1022 1023 } 1024 1025 leaflet.elements.perspective.css({ 1026 width: leaflet.settings.boxWidth, 1027 }); 1028 1029 leaflet.elements.box.css({ 1030 height: leaflet.elements.content.height(), 1031 }); 1032 1033 setTimeout($.proxy(function() { 1034 1035 leaflet.elements.perspective.css(this.states.pfx + 'transition', 1036 ''). 1037 css('transition', ''). 1038 css({maxWidth: leaflet.settings.boxWidth, width: ''}); 1039 1040 leaflet.elements.box.css({ 1041 maxWidth: leaflet.settings.boxWidth, 1042 height: '', 1043 width: '', 1044 }); 1045 1046 // Show content block 1047 leaflet.elements.content.css( 1048 {width: '', overflow: '', opacity: ''}); 1049 1050 // Loading class 1051 clearTimeout(leaflet.loadingTimeout); 1052 leaflet.elements.document.toggleClass( 1053 this.docClassPfx + 'loading', false); 1054 1055 this.boxPosition(); 1056 1057 }, this), this.settings.animateSpeed); 1058 1059 }, this)); 1060 1061 }, this), leaflet.settings.animateSpeed); 1062 1063 break; 1064 1065 case 'slide': 1066 1067 leaflet.elements.document.toggleClass(this.docClassPfx + 'loading', 1068 true); 1069 1070 leaflet.elements.box.css(this.states.pfx + 'transform',
1071 'translate(' + (-300 * leaflet.states.direction) + 'px,0)'). 1072 css('transform', 1073 'translate(' + (-300 * leaflet.states.direction) + 'px,0)'). 1074 css(this.states.pfx + 'opacity', 0). 1075 css('opacity', 0); 1076 1077 setTimeout($.proxy(function() { 1078 1079 leaflet.elements.perspective.css( 1080 {maxWidth: leaflet.settings.boxWidth}); 1081 1082 leaflet.elements.box.css({maxWidth: leaflet.settings.boxWidth}). 1083 css(this.states.pfx + 'transition-property', 'zoom'). 1084 css('transition-property', 'zoom'). 1085 css(this.states.pfx + 'transform', 1086 'translate(' + (300 * leaflet.states.direction) + 'px,0)'). 1087 css('transform', 1088 'translate(' + (300 * leaflet.states.direction) + 'px,0)'); 1089 1090 setTimeout($.proxy(function() { 1091 1092 this.getContent($.proxy(function() { 1093 1094 // Action when content is loaded 1095 if (!!this.settings.afterLoad) { 1096 1097 this.settings.afterLoad.call(leaflet.elements.box); 1098 1099 } 1100 1101 leaflet.elements.box.css( 1102 this.states.pfx + 'transition-property', ''). 1103 css('transition-property', ''). 1104 css(this.states.pfx + 'transform', 'translate(0,0)'). 1105 css('transform', 'translate(0,0)'). 1106 css(this.states.pfx + 'opacity', 1). 1107 css('opacity', 1); 1108 1109 // Loading class 1110 clearTimeout(leaflet.loadingTimeout); 1111 leaflet.elements.document.toggleClass( 1112 this.docClassPfx + 'loading', false); 1113 1114 }, this)); 1115 1116 }, this), this.settings.animateSpeed / 1.1); 1117 1118 }, this), this.settings.animateSpeed / 1.1); 1119 1120 break; 1121 1122 case 'pushDown': 1123 1124 leaflet.elements.document.toggleClass(this.docClassPfx + 'loading', 1125 true); 1126 1127 leaflet.elements.box.css(this.states.pfx + 'transform-origin', 1128 '50% 100%'). 1129 css('transform-origin', '50% 100%'). 1130 css(this.states.pfx + 'transform', 1131 'translateY(25%) rotateX(45deg) scale(.85)'). 1132 css('transform', 'translateY(25%) rotateX(45deg) scale(.85)'). 1133 css(this.states.pfx + 'opacity', 0). 1134 css('opacity', 0); 1135 1136 setTimeout($.proxy(function() { 1137 1138 leaflet.elements.perspective.css( 1139 {maxWidth: leaflet.settings.boxWidth}); 1140 1141 leaflet.elements.box.css({maxWidth: leaflet.settings.boxWidth}). 1142 css(this.states.pfx + 'transition-property', 'zoom'). 1143 css('transition-property', 'zoom'). 1144 css(this.states.pfx + 'transform', 1145 'translateY(-100%) rotateX(45deg)'). 1146 css('transform', 'translateY(-100%) rotateX(45deg)'); 1147 1148 setTimeout($.proxy(function() { 1149 1150 this.getContent($.proxy(function() { 1151 1152 // Action when content is loaded 1153 if (!!this.settings.afterLoad) { 1154 1155 this.settings.afterLoad.call(leaflet.elements.box); 1156 1157 } 1158 1159 leaflet.elements.box.css( 1160 this.states.pfx + 'transition-property', ''). 1161 css('transition-property', ''). 1162 css(this.states.pfx + 'transform', 'translateY(0)'). 1163 css('transform', 'translateY(0)'). 1164 css(this.states.pfx + 'opacity', 1). 1165 css('opacity', 1); 1166 1167 // Loading class 1168 clearTimeout(leaflet.loadingTimeout); 1169 leaflet.elements.document.toggleClass( 1170 this.docClassPfx + 'loading', false); 1171 1172 }, this)); 1173 1174 }, this), this.settings.animateSpeed / 1.5); 1175 1176 }, this), this.settings.animateSpeed / 1.5); 1177 1178 break; 1179 1180 } 1181 1182 }; 1183 1184 // Box transition styles 1185 App.prototype.boxTransitionsIn = { 1186 1187 fade: function() { 1188 1189 leaflet.elements.box.css('visibility', 'visible'). 1190 css(this.states.pfx + 'opacity', 1). 1191 css('opacity', 1); 1192 1193 clearTimeout(this.states.loadingTimeout); 1194 leaflet.elements.document.toggleClass(this.docClassPfx + 'loading', 1195 false); 1196 1197 }, 1198 1199 scale: function() { 1200 1201 leaflet.elements.box.css(leaflet.pfx + 'transform', 'scale(1, 1)'). 1202 css('transform', 'scale(1, 1)'); 1203 1204 this.boxTransitionsIn.fade.call(this); 1205 1206 }, 1207 1208 superScale: function() { 1209 1210 leaflet.elements.box.css(leaflet.pfx + 'transform', 'scale(1, 1)'). 1211 css('transform', 'scale(1, 1)'); 1212 1213 this.boxTransitionsIn.fade.call(this); 1214 1215 }, 1216 1217 drop: function() { 1218 1219 leaflet.elements.box.css(leaflet.pfx + 'transform', 'translate(0, 0)'). 1220 css('transform', 'translate(0, 0)'); 1221 1222 this.boxTransitionsIn.fade.call(this); 1223 1224 }, 1225 1226 drop3d: function() { 1227 1228 leaflet.elements.box.css(leaflet.pfx + 'transform',
1229 'translate3d(0, 0, 0) rotateX(0deg)'). 1230 css('transform', 'translate3d(0, 0, 0) rotateX(0deg)'); 1231 1232 this.boxTransitionsIn.fade.call(this); 1233 1234 }, 1235 1236 flip3d: function() { 1237 1238 leaflet.elements.box.css(this.states.pfx + 'transform', 1239 'rotateY(0deg)').css('transform', 'rotateY(0deg)'); 1240 1241 this.boxTransitionsIn.fade.call(this); 1242 1243 }, 1244 1245 flip3dVertical: function() { 1246 1247 leaflet.elements.box.css(leaflet.pfx + 'transform', 'rotateX(0deg)'). 1248 css('transform', 'rotateX(0deg)'); 1249 1250 this.boxTransitionsIn.fade.call(this); 1251 1252 }, 1253 1254 newspaper: function() { 1255 1256 leaflet.elements.box.css(leaflet.pfx + 'transform', 1257 'scale(1, 1) rotate(0deg)'). 1258 css('transform', 'scale(1, 1) rotate(0deg)'); 1259 1260 this.boxTransitionsIn.fade.call(this); 1261 1262 }, 1263 1264 sideFall: function() { 1265 1266 leaflet.elements.box.css(leaflet.pfx + 'transform', 1267 'translate(0) translateZ(0) rotate(0deg)'). 1268 css('transform', 'translate(0) translateZ(0) rotate(0deg)'); 1269 1270 this.boxTransitionsIn.fade.call(this); 1271 1272 }, 1273 1274 }; 1275 1276 App.prototype.boxTransitionsOut = { 1277 1278 fade: function() { 1279 1280 leaflet.elements.box.css('visibility', ''). 1281 css(this.states.pfx + 'opacity', ''). 1282 css('opacity', ''). 1283 css(this.states.pfx + 'transform', ''). 1284 css('transform', ''); 1285 1286 }, 1287 1288 scale: function() { 1289 1290 this.boxTransitionsOut.fade.call(this); 1291 1292 }, 1293 1294 superScale: function() { 1295 1296 this.boxTransitionsOut.fade.call(this); 1297 1298 }, 1299 1300 drop: function() { 1301 1302 this.boxTransitionsOut.fade.call(this); 1303 1304 }, 1305 1306 drop3d: function() { 1307 1308 this.boxTransitionsOut.fade.call(this); 1309 1310 }, 1311 1312 flip3d: function() { 1313 1314 this.boxTransitionsOut.fade.call(this); 1315 1316 }, 1317 1318 flip3dVertical: function() { 1319 1320 this.boxTransitionsOut.fade.call(this); 1321 1322 }, 1323 1324 newspaper: function() { 1325 1326 this.boxTransitionsOut.fade.call(this); 1327 1328 }, 1329 1330 sideFall: function() { 1331 1332 this.boxTransitionsOut.fade.call(this); 1333 1334 }, 1335 1336 }; 1337 1338 // Helpers 1339 var helpers = { 1340 1341 getPfx: function() { 1342 1343 var element = document.createElement('div'), 1344 propsArray = [ 1345 'perspectiveProperty', 1346 'WebkitPerspective', 1347 'MozPerspective', 1348 'OPerspective', 1349 'msPerspective'], 1350 pfx = false; 1351 1352 $.each(propsArray, function(key, val) { 1353 1354 if (element.style[propsArray[key]] !== undefined) { 1355 1356 pfx = '-' + 1357 (propsArray[key].replace('Perspective', '').toLowerCase()) + 1358 '-'; 1359 return false; 1360 1361 } 1362 1363 }); 1364 1365 return pfx; 1366 1367 }, 1368 1369 getScrollBarWidth: function() { 1370 1371 var $element = $('<div class="b-scrollBar-test"></div>'). 1372 css({ 1373 position: 'absolute', 1374 left: -99999, 1375 top: -99999, 1376 overflowY: 'scroll', 1377 width: 50, 1378 height: 50, 1379 visibility: 'hidden', 1380 }); 1381 1382 $('body').append($element); 1383 1384 var scrollBarWidth = $element[0].offsetWidth - $element[0].clientWidth; 1385 1386 $element.remove(); 1387 1388 return scrollBarWidth; 1389 1390 }, 1391 1392 unwrap: function($this, selector) { 1393 1394 return $this.each(function() { 1395 var t = this, 1396 c = (typeof selector !== 'undefined') ? 1397 $(t).find(selector) : 1398 $(t).children().first(); 1399 if (c.length === 1) { 1400 c.contents().appendTo(t); 1401 c.remove(); 1402 } 1403 }); 1404 1405 }, 1406 1407 cookies: { 1408 1409 set: function(options) { 1410 1411 var now = new Date, 1412 cookies = options.key + '=' + options.value; 1413 1414 now.setDate(now.getDate() + 1); 1415 1416 cookies += options.expires ? '; expires=' + now.toUTCString() : ''; 1417 cookies += options.path ? '; path=' + options.path : ''; 1418 1419 return document.cookie = cookies; 1420 1421 }, 1422 1423 get: function(key) { 1424 1425 var matches = document.cookie.match(new RegExp( 1426 '(?:^|; )' + key.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + 1427 '=([^;]*)', 1428 )); 1429 1430 return matches ? decodeURIComponent(matches[1]) : false; 1431 1432 }, 1433 1434 remove: function(key) { 1435 1436 leaflet.helpers.cookies.set({key: key, value: '', expires: -1}); 1437 1438 }, 1439 1440 }, 1441 1442 }; 1443 1444 return { 1445 App: App, 1446 }; 1447 1448 })(window); 1449
1450 $.fn.leafLetPopUp = function(param) { 1451 1452 var $body = $('body'), 1453 selector = this.selector; 1454 1455 if (typeof param === 'object' || !param) { 1456 1457 $(selector).data('leaflet', true); 1458 1459 $body.on('click.leafletOpen', selector, function(e) { 1460 1461 e.preventDefault(); 1462 1463 new LeafletPopup.App($(this), param || {}, 'init'); 1464 1465 }); 1466 1467 return this; 1468 1469 } else { 1470 1471 new LeafletPopup.App($(this), 1472 Array.prototype.slice.call(arguments, 1)[0] || {}, param); 1473 return this; 1474 1475 } 1476 1477 }; 1478 1479})(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.