1/* 2 * jQuery Reveal Plugin 1.1 3 * www.ZURB.com 4 * Copyright 2010, ZURB 5 * Free to use under the MIT license. 6 * http://www.opensource.org/licenses/mit-license.php 7*/ 8/*globals jQuery */ 9 10(function ($) { 11 'use strict'; 12 // 13 // Global variable. 14 // Helps us determine if the current modal is being queued for display. 15 // 16 var modalQueued = false; 17 18 // 19 // Bind the live 'click' event to all anchor elemnets with the data-reveal-id attribute. 20 // 21 $(document).on('click', 'a[data-reveal-id]', function ( event ) { 22 // 23 // Prevent default action of the event. 24 // 25 event.preventDefault(); 26 // 27 // Get the clicked anchor data-reveal-id attribute value. 28 // 29 var modalLocation = $( this ).attr( 'data-reveal-id' ); 30 // 31 // Find the element with that modalLocation id and call the reveal plugin. 32 // 33 $( '#' + modalLocation ).reveal( $( this ).data() ); 34 35 }); 36 37 /** 38 * @module reveal 39 * @property {Object} [options] Reveal options 40 */ 41 $.fn.reveal = function ( options ) { 42 /* 43 * Cache the document object. 44 */ 45 var $doc = $( document ), 46 /* 47 * Default property values. 48 */ 49 defaults = { 50 /** 51 * Possible options: fade, fadeAndPop, none 52 * 53 * @property animation 54 * @type {String} 55 * @default fadeAndPop 56 */ 57 animation: 'fadeAndPop', 58 /** 59 * Speed at which the reveal should show. How fast animtions are. 60 * 61 * @property animationSpeed 62 * @type {Integer} 63 * @default 300 64 */ 65 animationSpeed: 300, 66 /** 67 * Should the modal close when the background is clicked? 68 * 69 * @property closeOnBackgroundClick 70 * @type {Boolean} 71 * @default true 72 */ 73 closeOnBackgroundClick: true, 74 /** 75 * Specify a class name for the 'close modal' element. 76 * This element will close an open modal. 77 * 78 @example 79 <a href='#close' class='close-reveal-modal'>Close Me</a> 80 * 81 * @property dismissModalClass 82 * @type {String} 83 * @default close-reveal-modal 84 */ 85 dismissModalClass: 'close-reveal-modal', 86 /** 87 * Specify a callback function that triggers 'before' the modal opens. 88 * 89 * @property open 90 * @type {Function} 91 * @default function(){} 92 */ 93 open: $.noop, 94 /** 95 * Specify a callback function that triggers 'after' the modal is opened. 96 * 97 * @property opened 98 * @type {Function} 99 * @default function(){} 100 */ 101 opened: $.noop, 102 /** 103 * Specify a callback function that triggers 'before' the modal prepares to close. 104 * 105 * @property close 106 * @type {Function} 107 * @default function(){} 108 */ 109 close: $.noop, 110 /** 111 * Specify a callback function that triggers 'after' the modal is closed. 112 * 113 * @property closed 114 * @type {Function} 115 * @default function(){} 116 */ 117 closed: $.noop 118 } 119 ; 120 // 121 // Extend the default options. 122 // This replaces the passed in option (options) values with default values. 123 // 124 options = $.extend( {}, defaults, options ); 125 126 // 127 // Apply the plugin functionality to each element in the jQuery collection. 128 // 129 return this.each( function () { 130 // 131 // Cache the modal element 132 // 133 var modal = $( this ), 134 // 135 // Get the current css 'top' property value in decimal format. 136 // 137 topMeasure = parseInt( modal.css( 'top' ), 10 ), 138 // 139 // Calculate the top offset. 140 // 141 topOffset = modal.height() + topMeasure, 142 // 143 // Helps determine if the modal is locked. 144 // This way we keep the modal from triggering while it's in the middle of animating. 145 // 146 locked = false, 147 // 148 // Get the modal background element. 149 // 150 modalBg = $( '.reveal-modal-bg' ), 151 // 152 // Show modal properties 153 // 154 cssOpts = { 155 // 156 // Used, when we show the modal. 157 // 158 open : { 159 // 160 // Set the 'top' property to the document scroll minus the calculated top offset. 161 // 162 'top': 0, 163 // 164 // Opacity gets set to 0. 165 // 166 'opacity': 0, 167 // 168 // Show the modal 169 // 170 'visibility': 'visible', 171 // 172 // Ensure it's displayed as a block element. 173 // 174 'display': 'block' 175 }, 176 // 177 // Used, when we hide the modal. 178 // 179 close : { 180 // 181 // Set the default 'top' property value. 182 // 183 'top': topMeasure, 184 // 185 // Has full opacity. 186 // 187 'opacity': 1, 188 // 189 // Hide the modal 190 // 191 'visibility': 'hidden', 192 // 193 // Ensure the elment is hidden. 194 // 195 'display': 'none' 196 } 197 198 }, 199 // 200 // Initial closeButton variable. 201 // 202 $closeButton 203 ; 204 205 // 206 // Do we have a modal background element? 207 // 208 if ( modalBg.length === 0 ) { 209 // 210 // No we don't. So, let's create one. 211 // 212 modalBg = $( '<div />', { 'class' : 'reveal-modal-bg' } ) 213 // 214 // Then insert it after the modal element. 215 // 216 .insertAfter( modal ); 217 // 218 // Now, fade it out a bit. 219 // 220 modalBg.fadeTo( 'fast', 0.8 ); 221 } 222 223 // 224 // Helper Methods 225 // 226 227 /** 228 * Unlock the modal for animation. 229 * 230 * @method unlockModal 231 */ 232 function unlockModal() { 233 locked = false;
234 } 235 236 /** 237 * Lock the modal to prevent further animation. 238 * 239 * @method lockModal 240 */ 241 function lockModal() { 242 locked = true; 243 } 244 245 /** 246 * Closes all open modals. 247 * 248 * @method closeOpenModal 249 */ 250 function closeOpenModals() { 251 // 252 // Get all reveal-modal elements with the .open class. 253 // 254 var $openModals = $( ".reveal-modal.open" ); 255 // 256 // Do we have modals to close? 257 // 258 if ( $openModals.length === 1 ) { 259 // 260 // Set the modals for animation queuing. 261 // 262 modalQueued = true; 263 // 264 // Trigger the modal close event. 265 // 266 $openModals.trigger( "reveal:close" ); 267 } 268 269 } 270 /** 271 * Animates the modal opening. 272 * Handles the modal 'open' event. 273 * 274 * @method openAnimation 275 */ 276 function openAnimation() { 277 // 278 // First, determine if we're in the middle of animation. 279 // 280 if ( !locked ) { 281 // 282 // We're not animating, let's lock the modal for animation. 283 // 284 lockModal(); 285 // 286 // Close any opened modals. 287 // 288 closeOpenModals(); 289 // 290 // Now, add the open class to this modal. 291 // 292 modal.addClass( "open" ); 293 294 // 295 // Are we executing the 'fadeAndPop' animation? 296 // 297 if ( options.animation === "fadeAndPop" ) { 298 // 299 // Yes, we're doing the 'fadeAndPop' animation. 300 // Okay, set the modal css properties. 301 // 302 // 303 // Set the 'top' property to the document scroll minus the calculated top offset. 304 // 305 cssOpts.open.top = $doc.scrollTop() - topOffset; 306 // 307 // Flip the opacity to 0. 308 // 309 cssOpts.open.opacity = 0; 310 // 311 // Set the css options. 312 // 313 modal.css( cssOpts.open ); 314 // 315 // Fade in the background element, at half the speed of the modal element. 316 // So, faster than the modal element. 317 // 318 modalBg.fadeIn( options.animationSpeed / 2 ); 319 320 // 321 // Let's delay the next animation queue. 322 // We'll wait until the background element is faded in. 323 // 324 modal.delay( options.animationSpeed / 2 ) 325 // 326 // Animate the following css properties. 327 // 328 .animate( { 329 // 330 // Set the 'top' property to the document scroll plus the calculated top measure. 331 // 332 "top": $doc.scrollTop() + topMeasure + 'px', 333 // 334 // Set it to full opacity. 335 // 336 "opacity": 1 337 338 }, 339 /* 340 * Fade speed. 341 */ 342 options.animationSpeed, 343 /* 344 * End of animation callback. 345 */ 346 function () { 347 // 348 // Trigger the modal reveal:opened event. 349 // This should trigger the functions set in the options.opened property. 350 // 351 modal.trigger( 'reveal:opened' ); 352 353 }); // end of animate. 354 355 } // end if 'fadeAndPop' 356 357 // 358 // Are executing the 'fade' animation? 359 // 360 if ( options.animation === "fade" ) { 361 // 362 // Yes, were executing 'fade'. 363 // Okay, let's set the modal properties. 364 // 365 cssOpts.open.top = $doc.scrollTop() + topMeasure; 366 // 367 // Flip the opacity to 0. 368 // 369 cssOpts.open.opacity = 0; 370 // 371 // Set the css options. 372 // 373 modal.css( cssOpts.open ); 374 // 375 // Fade in the modal background at half the speed of the modal. 376 // So, faster than modal. 377 //
378 modalBg.fadeIn( options.animationSpeed / 2 ); 379 380 // 381 // Delay the modal animation. 382 // Wait till the modal background is done animating. 383 // 384 modal.delay( options.animationSpeed / 2 ) 385 // 386 // Now animate the modal. 387 // 388 .animate( { 389 // 390 // Set to full opacity. 391 // 392 "opacity": 1 393 }, 394 395 /* 396 * Animation speed. 397 */ 398 options.animationSpeed, 399 400 /* 401 * End of animation callback. 402 */ 403 function () { 404 // 405 // Trigger the modal reveal:opened event. 406 // This should trigger the functions set in the options.opened property. 407 // 408 modal.trigger( 'reveal:opened' ); 409 410 }); 411 412 } // end if 'fade' 413 414 // 415 // Are we not animating? 416 // 417 if ( options.animation === "none" ) { 418 // 419 // We're not animating. 420 // Okay, let's set the modal css properties. 421 // 422 // 423 // Set the top property. 424 // 425 cssOpts.open.top = $doc.scrollTop() + topMeasure; 426 // 427 // Set the opacity property to full opacity, since we're not fading (animating). 428 // 429 cssOpts.open.opacity = 1; 430 // 431 // Set the css property. 432 // 433 modal.css( cssOpts.open ); 434 // 435 // Show the modal Background. 436 // 437 modalBg.css( { "display": "block" } ); 438 // 439 // Trigger the modal opened event. 440 // 441 modal.trigger( 'reveal:opened' ); 442 443 } // end if animating 'none' 444 445 }// end if !locked 446 447 }// end openAnimation 448 449 // 450 // Bind the reveal 'open' event. 451 // When the event is triggered, openAnimation is called 452 // along with any function set in the options.open property. 453 // 454 modal.bind( 'reveal:open.reveal', openAnimation ); 455 456 /** 457 * Closes the modal element(s) 458 * Handles the modal 'close' event. 459 * 460 * @method closeAnimation 461 */ 462 function closeAnimation() { 463 // 464 // First, determine if we're in the middle of animation. 465 // 466 if ( !locked ) { 467 // 468 // We're not animating, let's lock the modal for animation. 469 // 470 lockModal(); 471 // 472 // Clear the modal of the open class. 473 // 474 modal.removeClass( "open" ); 475 476 // 477 // Are we using the 'fadeAndPop' animation? 478 // 479 if ( options.animation === "fadeAndPop" ) { 480 // 481 // Yes, okay, let's set the animation properties. 482 // 483 modal.animate( { 484 // 485 // Set the top property to the document scrollTop minus calculated topOffset. 486 // 487 "top": $doc.scrollTop() - topOffset + 'px', 488 // 489 // Fade the modal out, by using the opacity property. 490 // 491 "opacity": 0 492 493 }, 494 /* 495 * Fade speed. 496 */ 497 options.animationSpeed / 2, 498 /* 499 * End of animation callback. 500 */ 501 function () { 502 // 503 // Set the css hidden options. 504 // 505 modal.css( cssOpts.close ); 506 507 }); 508 // 509 // Is the modal animation queued? 510 // 511 if ( !modalQueued ) { 512 // 513 // Oh, the modal(s) are mid animating. 514 // Let's delay the animation queue. 515 // 516 modalBg.delay( options.animationSpeed ) 517 // 518 // Fade out the modal background. 519 // 520 .fadeOut( 521 /* 522 * Animation speed. 523 */ 524 options.animationSpeed, 525 /* 526 * End of animation callback. 527 */ 528 function () { 529 // 530 // Trigger the modal 'closed' event. 531 // This should trigger any method set in the options.closed property. 532 // 533 modal.trigger( 'reveal:closed' ); 534 535 }); 536 537 } else { 538 // 539 // We're not mid queue. 540 // Trigger the modal 'closed' event. 541 // This should trigger any method set in the options.closed propety. 542 // 543 modal.trigger( 'reveal:closed' ); 544 545 } // end if !modalQueued 546 // 547 // Reset the modalQueued variable. 548 // 549 modalQueued = false;
550 551 } // end if animation 'fadeAndPop' 552 553 // 554 // Are we using the 'fade' animation. 555 // 556 if ( options.animation === "fade" ) { 557 // 558 // Yes, we're using the 'fade' animation. 559 // 560 modal.animate( { "opacity" : 0 }, 561 /* 562 * Animation speed. 563 */ 564 options.animationSpeed, 565 /* 566 * End of animation callback. 567 */ 568 function () { 569 // 570 // Set the css close options. 571 // 572 modal.css( cssOpts.close ); 573 574 }); // end animate 575 576 // 577 // Are we mid animating the modal(s)? 578 // 579 if ( !modalQueued ) { 580 // 581 // Oh, the modal(s) are mid animating. 582 // Let's delay the animation queue. 583 // 584 modalBg.delay( options.animationSpeed ) 585 // 586 // Let's fade out the modal background element. 587 // 588 .fadeOut( 589 /* 590 * Animation speed. 591 */ 592 options.animationSpeed, 593 /* 594 * End of animation callback. 595 */ 596 function () { 597 // 598 // Trigger the modal 'closed' event. 599 // This should trigger any method set in the options.closed propety. 600 // 601 modal.trigger( 'reveal:closed' ); 602 603 }); // end fadeOut 604 605 } else { 606 // 607 // We're not mid queue. 608 // Trigger the modal 'closed' event. 609 // This should trigger any method set in the options.closed propety. 610 // 611 modal.trigger( 'reveal:closed' ); 612 613 } // end if !modalQueued 614 615 } // end if animation 'fade' 616 617 // 618 // Are we not animating? 619 // 620 if ( options.animation === "none" ) { 621 // 622 // We're not animating. 623 // Set the modal close css options. 624 // 625 modal.css( cssOpts.close ); 626 // 627 // Is the modal in the middle of an animation queue? 628 // 629 if ( !modalQueued ) { 630 // 631 // It's not mid queueu. Just hide it. 632 // 633 modalBg.css( { 'display': 'none' } ); 634 } 635 // 636 // Trigger the modal 'closed' event. 637 // This should trigger any method set in the options.closed propety. 638 // 639 modal.trigger( 'reveal:closed' ); 640 641 } // end if not animating 642 643 } // end if !locked 644 645 } // end closeAnimation 646 647 /** 648 * Destroys the modal and it's events. 649 * 650 * @method destroy 651 */ 652 function destroy() { 653 // 654 // Unbind all .reveal events from the modal. 655 // 656 modal.unbind( '.reveal' ); 657 // 658 // Unbind all .reveal events from the modal background. 659 // 660 modalBg.unbind( '.reveal' ); 661 // 662 // Unbind all .reveal events from the modal 'close' button. 663 // 664 $closeButton.unbind( '.reveal' ); 665 // 666 // Unbind all .reveal events from the body. 667 // 668 $( 'body' ).unbind( '.reveal' ); 669 670 } 671 672 // 673 // Bind the modal 'close' event 674 // 675 modal.bind( 'reveal:close.reveal', closeAnimation ); 676 // 677 // Bind the modal 'opened' + 'closed' event 678 // Calls the unlockModal method. 679 // 680 modal.bind( 'reveal:opened.reveal reveal:closed.reveal', unlockModal ); 681 // 682 // Bind the modal 'closed' event. 683 // Calls the destroy method. 684 // 685 modal.bind( 'reveal:closed.reveal', destroy ); 686 // 687 // Bind the modal 'open' event 688 // Handled by the options.open property function. 689 // 690 modal.bind( 'reveal:open.reveal', options.open ); 691 // 692 // Bind the modal 'opened' event. 693 // Handled by the options.opened property function. 694 // 695 modal.bind( 'reveal:opened.reveal', options.opened ); 696 // 697 // Bind the modal 'close' event. 698 // Handled by the options.close property function. 699 // 700 modal.bind( 'reveal:close.reveal', options.close ); 701 // 702 // Bind the modal 'closed' event. 703 // Handled by the options.closed property function. 704 // 705 modal.bind( 'reveal:closed.reveal', options.closed ); 706 707 // 708 // We're running this for the first time. 709 // Trigger the modal 'open' event. 710 // 711 modal.trigger( 'reveal:open' ); 712 713 //
714 // Get the closeButton variable element(s). 715 // 716 $closeButton = $( '.' + options.dismissModalClass ) 717 // 718 // Bind the element 'click' event and handler. 719 // 720 .bind( 'click.reveal', function () { 721 // 722 // Trigger the modal 'close' event. 723 // 724 modal.trigger( 'reveal:close' ); 725 726 }); 727 728 // 729 // Should we close the modal background on click? 730 // 731 if ( options.closeOnBackgroundClick ) { 732 // 733 // Yes, close the modal background on 'click' 734 // Set the modal background css 'cursor' propety to pointer. 735 // Adds a pointer symbol when you mouse over the modal background. 736 // 737 modalBg.css( { "cursor": "pointer" } ); 738 // 739 // Bind a 'click' event handler to the modal background. 740 // 741 modalBg.bind( 'click.reveal', function () { 742 // 743 // Trigger the modal 'close' event. 744 // 745 modal.trigger( 'reveal:close' ); 746 747 }); 748 749 } 750 751 // 752 // Bind keyup functions on the body element. 753 // We'll want to close the modal when the 'escape' key is hit. 754 // 755 $( 'body' ).bind( 'keyup.reveal', function ( event ) { 756 // 757 // Did the escape key get triggered? 758 // 759 if ( event.which === 27 ) { // 27 is the keycode for the Escape key 760 // 761 // Escape key was triggered. 762 // Trigger the modal 'close' event. 763 // 764 modal.trigger( 'reveal:close' ); 765 } 766 767 }); // end $(body) 768 769 }); // end this.each 770 771 }; // end $.fn 772 773} ( 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.