Callback Events

jquery.reveal.js

@@ -6,7 +6,6 @@
  * http://www.opensource.org/licenses/mit-license.php
 */
 
-
 (function ($) {
   $('a[data-reveal-id]').live('click', function (event) {
     event.preventDefault();
@@ -16,10 +15,14 @@
 
   $.fn.reveal = function (options) {
     var defaults = {
-      animation: 'fadeAndPop',                // fade, fadeAndPop, none
-      animationSpeed: 300,                    // how fast animtions are
-      closeOnBackgroundClick: true,           // if you click background will modal close?
-      dismissModalClass: 'close-reveal-modal' // the class of a button or element that will close an open modal
+      animation: 'fadeAndPop',                  // fade, fadeAndPop, none
+      animationSpeed: 300,                      // how fast animtions are
+      closeOnBackgroundClick: true,             // if you click background will modal close?
+      dismissModalClass: 'close-reveal-modal',  // the class of a button or element that will close an open modal
+      onOpening:  function(){},                 // Callback when modal is ready to open
+      onOpened:   function(){},                 // Callback when modal is fully opened
+      onClosing:  function(){},                 // Callback when modal is preparing to close
+      onClosed:   function(){}                  // Callback when modal is closed
     };
     var options = $.extend({}, defaults, options);
 
@@ -35,30 +38,81 @@
         modalBg.fadeTo('fast', 0.8);
       }
 
+      function unlockModal() {
+        locked = false;
+      }
+
+      function lockModal() {
+        locked = true;
+      }
+
+      /* ---- Internal callback helpers ---- */      
+
+      /**
+       *  @func: modalOpening
+       *  @desc: calls the lockModal method. Then executes the onOpening callback.
+       */
+      function modalOpening() {
+        lockModal();
+        options.onOpening.call( [], modal ); // Execute the onOpening callback - modal is preparing to open
+      }
+
+      /**
+       *  @func: modalOpened
+       *  @desc: calls the unlockModal method. Then executes the onOpened callback.
+       */
+      function modalOpened() {
+        unlockModal();
+        options.onOpened.call( [], modal ); // Execute the onOpened callback - modal is fully visible
+      }
+
+      /**
+       *  @func: modalClosing
+       *  @desc: calls the lockModal method. Then executes the onClosing callback.
+       */
+      function modalClosing() {
+        lockModal();
+        options.onClosing.call( [], modal ); // Execute the onClosing callback - modal is preparing to close
+      }
+
+      /**
+       *  @func: modalClosed
+       *  @desc: calls the unlockModal method. Then executes the onClosed callback.
+       */
+      function modalClosed() {
+        unlockModal();
+        options.onClosed.call( [], modal ); // Execute the onClosed callback - Modal is closed
+      }
+
+
+
+
       function openAnimation() {
         modalBg.unbind('click.modalEvent');
         $('.' + options.dismissModalClass).unbind('click.modalEvent');
         if (!locked) {
-          lockModal();
+
+          modalOpening(); // Modal is preparing to open
+
           if (options.animation == "fadeAndPop") {
             modal.css({'top': $(document).scrollTop() - topOffset, 'opacity': 0, 'visibility': 'visible'});
             modalBg.fadeIn(options.animationSpeed / 2);
             modal.delay(options.animationSpeed / 2).animate({
               "top": $(document).scrollTop() + topMeasure + 'px',
               "opacity": 1
-            }, options.animationSpeed, unlockModal);
+            }, options.animationSpeed, modalOpened /* Modal has opened */ );
           }
           if (options.animation == "fade") {
             modal.css({'opacity': 0, 'visibility': 'visible', 'top': $(document).scrollTop() + topMeasure});
             modalBg.fadeIn(options.animationSpeed / 2);
             modal.delay(options.animationSpeed / 2).animate({
               "opacity": 1
-            }, options.animationSpeed, unlockModal);
+            }, options.animationSpeed, modalOpened /* Modal has opened */ );
           }
           if (options.animation == "none") {
             modal.css({'visibility': 'visible', 'top': $(document).scrollTop() + topMeasure});
             modalBg.css({"display": "block"});
-            unlockModal();
+            modalOpened(); /* Modal has opened */
           }
         }
         modal.unbind('reveal:open', openAnimation);
@@ -67,15 +121,17 @@
 
       function closeAnimation() {
         if (!locked) {
-          lockModal();
+
+          modalClosing(); // Modal is preparing to close
+
           if (options.animation == "fadeAndPop") {
             modalBg.delay(options.animationSpeed).fadeOut(options.animationSpeed);
             modal.animate({
               "top":  $(document).scrollTop() - topOffset + 'px',
               "opacity": 0
             }, options.animationSpeed / 2, function () {
               modal.css({'top': topMeasure, 'opacity': 1, 'visibility': 'hidden'});
-              unlockModal();
+              modalClosed(); /* Modal has finished closing */
             });
           }
           if (options.animation == "fade") {
@@ -84,12 +140,13 @@
               "opacity" : 0
             }, options.animationSpeed, function () {
               modal.css({'opacity': 1, 'visibility': 'hidden', 'top': topMeasure});
-              unlockModal();
+              modalClosed(); /* Modal has finished closing */
             });
           }
           if (options.animation == "none") {
             modal.css({'visibility': 'hidden', 'top': topMeasure});
             modalBg.css({'display': 'none'});
+            modalClosed(); /* Modal has finished closing */
           }
         }
         modal.unbind('reveal:close', closeAnimation);
@@ -114,13 +171,7 @@
         }
       });
 
-      function unlockModal() {
-        locked = false;
-      }
-
-      function lockModal() {
-        locked = true;
-      }
+
     });
   };
 })(jQuery);