diff options
author | Jayaram Pai | 2013-11-19 17:51:06 +0530 |
---|---|---|
committer | Jayaram Pai | 2013-11-19 17:51:06 +0530 |
commit | 9c50efc99b64350c66c92321b7f9d565e4da611c (patch) | |
tree | a92522f904b41ac9fba070a5c71cc9ee3b85286b /website/static/js/foundation3/jquery.foundation.reveal.js | |
parent | 36228d2bc0d1301775ded964a3fa67f2e844a126 (diff) | |
download | SciPy2013-9c50efc99b64350c66c92321b7f9d565e4da611c.tar.gz SciPy2013-9c50efc99b64350c66c92321b7f9d565e4da611c.tar.bz2 SciPy2013-9c50efc99b64350c66c92321b7f9d565e4da611c.zip |
testing ie8 index
Diffstat (limited to 'website/static/js/foundation3/jquery.foundation.reveal.js')
-rw-r--r-- | website/static/js/foundation3/jquery.foundation.reveal.js | 794 |
1 files changed, 794 insertions, 0 deletions
diff --git a/website/static/js/foundation3/jquery.foundation.reveal.js b/website/static/js/foundation3/jquery.foundation.reveal.js new file mode 100644 index 0000000..739e7a2 --- /dev/null +++ b/website/static/js/foundation3/jquery.foundation.reveal.js @@ -0,0 +1,794 @@ +/* + * jQuery Reveal Plugin 1.1 + * www.ZURB.com + * Copyright 2010, ZURB + * Free to use under the MIT license. + * http://www.opensource.org/licenses/mit-license.php +*/ +/*globals jQuery */ + +(function ($) { + 'use strict'; + // + // Global variable. + // Helps us determine if the current modal is being queued for display. + // + var modalQueued = false; + + // + // Bind the live 'click' event to all anchor elemnets with the data-reveal-id attribute. + // + $(document).on('click', 'a[data-reveal-id]', function ( event ) { + // + // Prevent default action of the event. + // + event.preventDefault(); + // + // Get the clicked anchor data-reveal-id attribute value. + // + var modalLocation = $( this ).attr( 'data-reveal-id' ); + // + // Find the element with that modalLocation id and call the reveal plugin. + // + $( '#' + modalLocation ).reveal( $( this ).data() ); + + }); + + /** + * @module reveal + * @property {Object} [options] Reveal options + */ + $.fn.reveal = function ( options ) { + /* + * Cache the document object. + */ + var $doc = $( document ), + /* + * Default property values. + */ + defaults = { + /** + * Possible options: fade, fadeAndPop, none + * + * @property animation + * @type {String} + * @default fadeAndPop + */ + animation: 'fadeAndPop', + /** + * Speed at which the reveal should show. How fast animtions are. + * + * @property animationSpeed + * @type {Integer} + * @default 300 + */ + animationSpeed: 300, + /** + * Should the modal close when the background is clicked? + * + * @property closeOnBackgroundClick + * @type {Boolean} + * @default true + */ + closeOnBackgroundClick: true, + /** + * Specify a class name for the 'close modal' element. + * This element will close an open modal. + * + @example + <a href='#close' class='close-reveal-modal'>Close Me</a> + * + * @property dismissModalClass + * @type {String} + * @default close-reveal-modal + */ + dismissModalClass: 'close-reveal-modal', + /** + * Specify a callback function that triggers 'before' the modal opens. + * + * @property open + * @type {Function} + * @default function(){} + */ + open: $.noop, + /** + * Specify a callback function that triggers 'after' the modal is opened. + * + * @property opened + * @type {Function} + * @default function(){} + */ + opened: $.noop, + /** + * Specify a callback function that triggers 'before' the modal prepares to close. + * + * @property close + * @type {Function} + * @default function(){} + */ + close: $.noop, + /** + * Specify a callback function that triggers 'after' the modal is closed. + * + * @property closed + * @type {Function} + * @default function(){} + */ + closed: $.noop + } + ; + // + // Extend the default options. + // This replaces the passed in option (options) values with default values. + // + options = $.extend( {}, defaults, options ); + + // + // Apply the plugin functionality to each element in the jQuery collection. + // + return this.not('.reveal-modal.open').each( function () { + // + // Cache the modal element + // + var modal = $( this ), + // + // Get the current css 'top' property value in decimal format. + // + topMeasure = parseInt( modal.css( 'top' ), 10 ), + // + // Calculate the top offset. + // + topOffset = modal.height() + topMeasure, + // + // Helps determine if the modal is locked. + // This way we keep the modal from triggering while it's in the middle of animating. + // + locked = false, + // + // Get the modal background element. + // + modalBg = $( '.reveal-modal-bg' ), + // + // Show modal properties + // + cssOpts = { + // + // Used, when we show the modal. + // + open : { + // + // Set the 'top' property to the document scroll minus the calculated top offset. + // + 'top': 0, + // + // Opacity gets set to 0. + // + 'opacity': 0, + // + // Show the modal + // + 'visibility': 'visible', + // + // Ensure it's displayed as a block element. + // + 'display': 'block' + }, + // + // Used, when we hide the modal. + // + close : { + // + // Set the default 'top' property value. + // + 'top': topMeasure, + // + // Has full opacity. + // + 'opacity': 1, + // + // Hide the modal + // + 'visibility': 'hidden', + // + // Ensure the elment is hidden. + // + 'display': 'none' + } + + }, + // + // Initial closeButton variable. + // + $closeButton + ; + + // + // Do we have a modal background element? + // + if ( modalBg.length === 0 ) { + // + // No we don't. So, let's create one. + // + modalBg = $( '<div />', { 'class' : 'reveal-modal-bg' } ) + // + // Then insert it after the modal element. + // + .insertAfter( modal ); + // + // Now, fade it out a bit. + // + modalBg.fadeTo( 'fast', 0.8 ); + } + + // + // Helper Methods + // + + /** + * Unlock the modal for animation. + * + * @method unlockModal + */ + function unlockModal() { + locked = false; + } + + /** + * Lock the modal to prevent further animation. + * + * @method lockModal + */ + function lockModal() { + locked = true; + } + + /** + * Closes all open modals. + * + * @method closeOpenModal + */ + function closeOpenModals() { + // + // Get all reveal-modal elements with the .open class. + // + var $openModals = $( ".reveal-modal.open" ); + // + // Do we have modals to close? + // + if ( $openModals.length === 1 ) { + // + // Set the modals for animation queuing. + // + modalQueued = true; + // + // Trigger the modal close event. + // + $openModals.trigger( "reveal:close" ); + } + + } + /** + * Animates the modal opening. + * Handles the modal 'open' event. + * + * @method openAnimation + */ + function openAnimation() { + // + // First, determine if we're in the middle of animation. + // + if ( !locked ) { + // + // We're not animating, let's lock the modal for animation. + // + lockModal(); + // + // Close any opened modals. + // + closeOpenModals(); + // + // Now, add the open class to this modal. + // + modal.addClass( "open" ); + + // + // Are we executing the 'fadeAndPop' animation? + // + if ( options.animation === "fadeAndPop" ) { + // + // Yes, we're doing the 'fadeAndPop' animation. + // Okay, set the modal css properties. + // + // + // Set the 'top' property to the document scroll minus the calculated top offset. + // + cssOpts.open.top = $doc.scrollTop() - topOffset; + // + // Flip the opacity to 0. + // + cssOpts.open.opacity = 0; + // + // Set the css options. + // + modal.css( cssOpts.open ); + // + // Fade in the background element, at half the speed of the modal element. + // So, faster than the modal element. + // + modalBg.fadeIn( options.animationSpeed / 2 ); + + // + // Let's delay the next animation queue. + // We'll wait until the background element is faded in. + // + modal.delay( options.animationSpeed / 2 ) + // + // Animate the following css properties. + // + .animate( { + // + // Set the 'top' property to the document scroll plus the calculated top measure. + // + "top": $doc.scrollTop() + topMeasure + 'px', + // + // Set it to full opacity. + // + "opacity": 1 + + }, + /* + * Fade speed. + */ + options.animationSpeed, + /* + * End of animation callback. + */ + function () { + // + // Trigger the modal reveal:opened event. + // This should trigger the functions set in the options.opened property. + // + modal.trigger( 'reveal:opened' ); + + }); // end of animate. + + } // end if 'fadeAndPop' + + // + // Are executing the 'fade' animation? + // + if ( options.animation === "fade" ) { + // + // Yes, were executing 'fade'. + // Okay, let's set the modal properties. + // + cssOpts.open.top = $doc.scrollTop() + topMeasure; + // + // Flip the opacity to 0. + // + cssOpts.open.opacity = 0; + // + // Set the css options. + // + modal.css( cssOpts.open ); + // + // Fade in the modal background at half the speed of the modal. + // So, faster than modal. + // + modalBg.fadeIn( options.animationSpeed / 2 ); + + // + // Delay the modal animation. + // Wait till the modal background is done animating. + // + modal.delay( options.animationSpeed / 2 ) + // + // Now animate the modal. + // + .animate( { + // + // Set to full opacity. + // + "opacity": 1 + }, + + /* + * Animation speed. + */ + options.animationSpeed, + + /* + * End of animation callback. + */ + function () { + // + // Trigger the modal reveal:opened event. + // This should trigger the functions set in the options.opened property. + // + modal.trigger( 'reveal:opened' ); + + }); + + } // end if 'fade' + + // + // Are we not animating? + // + if ( options.animation === "none" ) { + // + // We're not animating. + // Okay, let's set the modal css properties. + // + // + // Set the top property. + // + cssOpts.open.top = $doc.scrollTop() + topMeasure; + // + // Set the opacity property to full opacity, since we're not fading (animating). + // + cssOpts.open.opacity = 1; + // + // Set the css property. + // + modal.css( cssOpts.open ); + // + // Show the modal Background. + // + modalBg.css( { "display": "block" } ); + // + // Trigger the modal opened event. + // + modal.trigger( 'reveal:opened' ); + + } // end if animating 'none' + + }// end if !locked + + }// end openAnimation + + + function openVideos() { + var video = modal.find('.flex-video'), + iframe = video.find('iframe'); + if (iframe.length > 0) { + iframe.attr("src", iframe.data("src")); + video.fadeIn(100); + } + } + + // + // Bind the reveal 'open' event. + // When the event is triggered, openAnimation is called + // along with any function set in the options.open property. + // + modal.bind( 'reveal:open.reveal', openAnimation ); + modal.bind( 'reveal:open.reveal', openVideos); + + /** + * Closes the modal element(s) + * Handles the modal 'close' event. + * + * @method closeAnimation + */ + function closeAnimation() { + // + // First, determine if we're in the middle of animation. + // + if ( !locked ) { + // + // We're not animating, let's lock the modal for animation. + // + lockModal(); + // + // Clear the modal of the open class. + // + modal.removeClass( "open" ); + + // + // Are we using the 'fadeAndPop' animation? + // + if ( options.animation === "fadeAndPop" ) { + // + // Yes, okay, let's set the animation properties. + // + modal.animate( { + // + // Set the top property to the document scrollTop minus calculated topOffset. + // + "top": $doc.scrollTop() - topOffset + 'px', + // + // Fade the modal out, by using the opacity property. + // + "opacity": 0 + + }, + /* + * Fade speed. + */ + options.animationSpeed / 2, + /* + * End of animation callback. + */ + function () { + // + // Set the css hidden options. + // + modal.css( cssOpts.close ); + + }); + // + // Is the modal animation queued? + // + if ( !modalQueued ) { + // + // Oh, the modal(s) are mid animating. + // Let's delay the animation queue. + // + modalBg.delay( options.animationSpeed ) + // + // Fade out the modal background. + // + .fadeOut( + /* + * Animation speed. + */ + options.animationSpeed, + /* + * End of animation callback. + */ + function () { + // + // Trigger the modal 'closed' event. + // This should trigger any method set in the options.closed property. + // + modal.trigger( 'reveal:closed' ); + + }); + + } else { + // + // We're not mid queue. + // Trigger the modal 'closed' event. + // This should trigger any method set in the options.closed propety. + // + modal.trigger( 'reveal:closed' ); + + } // end if !modalQueued + + } // end if animation 'fadeAndPop' + + // + // Are we using the 'fade' animation. + // + if ( options.animation === "fade" ) { + // + // Yes, we're using the 'fade' animation. + // + modal.animate( { "opacity" : 0 }, + /* + * Animation speed. + */ + options.animationSpeed, + /* + * End of animation callback. + */ + function () { + // + // Set the css close options. + // + modal.css( cssOpts.close ); + + }); // end animate + + // + // Are we mid animating the modal(s)? + // + if ( !modalQueued ) { + // + // Oh, the modal(s) are mid animating. + // Let's delay the animation queue. + // + modalBg.delay( options.animationSpeed ) + // + // Let's fade out the modal background element. + // + .fadeOut( + /* + * Animation speed. + */ + options.animationSpeed, + /* + * End of animation callback. + */ + function () { + // + // Trigger the modal 'closed' event. + // This should trigger any method set in the options.closed propety. + // + modal.trigger( 'reveal:closed' ); + + }); // end fadeOut + + } else { + // + // We're not mid queue. + // Trigger the modal 'closed' event. + // This should trigger any method set in the options.closed propety. + // + modal.trigger( 'reveal:closed' ); + + } // end if !modalQueued + + } // end if animation 'fade' + + // + // Are we not animating? + // + if ( options.animation === "none" ) { + // + // We're not animating. + // Set the modal close css options. + // + modal.css( cssOpts.close ); + // + // Is the modal in the middle of an animation queue? + // + if ( !modalQueued ) { + // + // It's not mid queueu. Just hide it. + // + modalBg.css( { 'display': 'none' } ); + } + // + // Trigger the modal 'closed' event. + // This should trigger any method set in the options.closed propety. + // + modal.trigger( 'reveal:closed' ); + + } // end if not animating + // + // Reset the modalQueued variable. + // + modalQueued = false; + } // end if !locked + + } // end closeAnimation + + /** + * Destroys the modal and it's events. + * + * @method destroy + */ + function destroy() { + // + // Unbind all .reveal events from the modal. + // + modal.unbind( '.reveal' ); + // + // Unbind all .reveal events from the modal background. + // + modalBg.unbind( '.reveal' ); + // + // Unbind all .reveal events from the modal 'close' button. + // + $closeButton.unbind( '.reveal' ); + // + // Unbind all .reveal events from the body. + // + $( 'body' ).unbind( '.reveal' ); + + } + + function closeVideos() { + var video = modal.find('.flex-video'), + iframe = video.find('iframe'); + if (iframe.length > 0) { + iframe.data("src", iframe.attr("src")); + iframe.attr("src", ""); + video.fadeOut(100); + } + } + + // + // Bind the modal 'close' event + // + modal.bind( 'reveal:close.reveal', closeAnimation ); + modal.bind( 'reveal:closed.reveal', closeVideos ); + // + // Bind the modal 'opened' + 'closed' event + // Calls the unlockModal method. + // + modal.bind( 'reveal:opened.reveal reveal:closed.reveal', unlockModal ); + // + // Bind the modal 'closed' event. + // Calls the destroy method. + // + modal.bind( 'reveal:closed.reveal', destroy ); + // + // Bind the modal 'open' event + // Handled by the options.open property function. + // + modal.bind( 'reveal:open.reveal', options.open ); + // + // Bind the modal 'opened' event. + // Handled by the options.opened property function. + // + modal.bind( 'reveal:opened.reveal', options.opened ); + // + // Bind the modal 'close' event. + // Handled by the options.close property function. + // + modal.bind( 'reveal:close.reveal', options.close ); + // + // Bind the modal 'closed' event. + // Handled by the options.closed property function. + // + modal.bind( 'reveal:closed.reveal', options.closed ); + + // + // We're running this for the first time. + // Trigger the modal 'open' event. + // + modal.trigger( 'reveal:open' ); + + // + // Get the closeButton variable element(s). + // + $closeButton = $( '.' + options.dismissModalClass ) + // + // Bind the element 'click' event and handler. + // + .bind( 'click.reveal', function () { + // + // Trigger the modal 'close' event. + // + modal.trigger( 'reveal:close' ); + + }); + + // + // Should we close the modal background on click? + // + if ( options.closeOnBackgroundClick ) { + // + // Yes, close the modal background on 'click' + // Set the modal background css 'cursor' propety to pointer. + // Adds a pointer symbol when you mouse over the modal background. + // + modalBg.css( { "cursor": "pointer" } ); + // + // Bind a 'click' event handler to the modal background. + // + modalBg.bind( 'click.reveal', function () { + // + // Trigger the modal 'close' event. + // + modal.trigger( 'reveal:close' ); + + }); + + } + + // + // Bind keyup functions on the body element. + // We'll want to close the modal when the 'escape' key is hit. + // + $( 'body' ).bind( 'keyup.reveal', function ( event ) { + // + // Did the escape key get triggered? + // + if ( event.which === 27 ) { // 27 is the keycode for the Escape key + // + // Escape key was triggered. + // Trigger the modal 'close' event. + // + modal.trigger( 'reveal:close' ); + } + + }); // end $(body) + + }); // end this.each + + }; // end $.fn + +} ( jQuery ) ); |