bootstrap_modal_rails 2.0.4 → 2.1.0

data/vendor/assets/javascripts/bootstrap_modal_rails/bootstrap-modalmanager.js

@@ -1,5 +1,5 @@
- /* ===========================================================
- * bootstrap-modalmanager.js v2.0
+/* ===========================================================
+ * bootstrap-modalmanager.js v2.1
  * ===========================================================
  * Copyright 2012 Jordan Schroter.
  *
@@ -18,353 +18,389 @@
 
 !function ($) {
 
-    "use strict"; // jshint ;_;
+  "use strict"; // jshint ;_;
 
-    /* MODAL MANAGER CLASS DEFINITION
-    * ====================== */
+  /* MODAL MANAGER CLASS DEFINITION
+  * ====================== */
 
-    var ModalManager = function (element, options) {
-        this.init(element, options);
-    }
+  var ModalManager = function (element, options) {
+    this.init(element, options);
+  };
 
-    ModalManager.prototype = {
+  ModalManager.prototype = {
 
-        constructor: ModalManager,
+    constructor: ModalManager,
 
-        init: function (element, options) {
-            this.$element = $(element);
-            this.options = $.extend({}, $.fn.modalmanager.defaults, this.$element.data(), typeof options == 'object' && options);
-            this.stack = [];
-            this.backdropCount = 0;
-        },
+    init: function (element, options) {
+      this.$element = $(element);
+      this.options = $.extend({}, $.fn.modalmanager.defaults, this.$element.data(), typeof options == 'object' && options);
+      this.stack = [];
+      this.backdropCount = 0;
 
-        createModal: function (element, options) {
-            $(element).modal($.extend({ manager: this }, options));
-        },
+      if (this.options.resize) {
+        var resizeTimeout,
+          that = this;
 
-        appendModal: function (modal) {
-            this.stack.push(modal);
+        $(window).on('resize.modal', function(){
+          resizeTimeout && clearTimeout(resizeTimeout);
+          resizeTimeout = setTimeout(function(){
+            for (var i = 0; i < that.stack.length; i++){
+              that.stack[i].isShown && that.stack[i].layout();
+            }
+          }, 10);
+        });
+      }
+    },
 
-            var that = this;
+    createModal: function (element, options) {
+      $(element).modal($.extend({ manager: this }, options));
+    },
 
-            modal.$element.on('show.modalmanager', targetIsSelf(function (e) {
-                modal.isShown = true;
+    appendModal: function (modal) {
+      this.stack.push(modal);
 
-                var transition = $.support.transition && modal.$element.hasClass('fade');
-                
-                that.$element
-                    .toggleClass('modal-open', that.hasOpenModal())     
-                    .toggleClass('page-overflow', $(window).height() < that.$element.height());
-            
-                modal.$parent = modal.$element.parent();
-                
-                modal.$container = that.createContainer(modal);
+      var that = this;
 
-                modal.$element.appendTo(modal.$container);
+      modal.$element.on('show.modalmanager', targetIsSelf(function (e) {
 
-                var modalOverflow = $(window).height() < modal.$element.height() || modal.options.modalOverflow;
-                    
-                that.backdrop(modal, function () {
+        var showModal = function(){
+          modal.isShown = true;
 
-                    modal.$element.show();
+          var transition = $.support.transition && modal.$element.hasClass('fade');
 
-                    if (transition) {
-                        modal.$element[0].style.display = 'run-in'; 
-                        modal.$element[0].offsetWidth;
-                        modal.$element.one($.support.transition.end, function () { modal.$element[0].style.display = 'block' });
-                    }
+          that.$element
+            .toggleClass('modal-open', that.hasOpenModal())
+            .toggleClass('page-overflow', $(window).height() < that.$element.height());
 
-                    modal.$element
-                        .toggleClass('modal-overflow', modalOverflow)
-                        .css('margin-top', modalOverflow ? 0 : 0 - modal.$element.height()/2)
-                        .addClass('in')
-                        .attr('aria-hidden', false);
-                    
-                    var complete = function () {
-                        that.setFocus();
-                        modal.$element.triggerHandler('shown');
-                    }
+          modal.$parent = modal.$element.parent();
 
-                    transition ?
-                        modal.$element.one($.support.transition.end, complete) :
-                        complete();
-                });
-            }));
+          modal.$container = that.createContainer(modal);
 
-            modal.$element.on('hidden.modalmanager', targetIsSelf(function (e) {
+          modal.$element.appendTo(modal.$container);
 
-                that.backdrop(modal);
+          that.backdrop(modal, function () {
 
-                if (modal.$backdrop){
-                    $.support.transition && modal.$element.hasClass('fade')?
-                        modal.$backdrop.one($.support.transition.end, function () { that.destroyModal(modal) }) :
-                        that.destroyModal(modal);
-                } else {
-                    that.destroyModal(modal);
-                }
+            modal.$element.show();
 
-            }));
+            modal.layout();
 
-            modal.$element.on('destroy.modalmanager', targetIsSelf(function (e) {
-                that.removeModal(modal);
-            }));
-        },
+            modal.$element
+              .addClass('in')
+              .attr('aria-hidden', false);
 
-        destroyModal: function (modal) {
+            var complete = function () {
+              that.setFocus();
+              modal.$element.triggerHandler('shown');
+            };
 
-            modal.destroy();
+            transition ?
+              modal.$element.one($.support.transition.end, complete) :
+              complete();
+          });
+        };
 
-            var hasOpenModal = this.hasOpenModal();
+        modal.options.replace ?
+          that.replace(showModal) :
+          showModal();
+      }));
 
-            this.$element.toggleClass('modal-open', hasOpenModal);
-            
-            if (!hasOpenModal){
-                this.$element.removeClass('page-overflow');
-            }
+      modal.$element.on('hidden.modalmanager', targetIsSelf(function (e) {
 
-            this.removeContainer(modal);
+        that.backdrop(modal);
 
-            this.setFocus();
-        },
+        if (modal.$backdrop){
+          $.support.transition && modal.$element.hasClass('fade') ?
+            modal.$backdrop.one($.support.transition.end, function () { that.destroyModal(modal) }) :
+            that.destroyModal(modal);
+        } else {
+          that.destroyModal(modal);
+        }
 
-        hasOpenModal: function () {
-            for (var i = 0; i < this.stack.length; i++){
-                if (this.stack[i].isShown) return true;
-            }
+      }));
 
-            return false;
-        },
+      modal.$element.on('destroy.modalmanager', targetIsSelf(function (e) {
+        that.removeModal(modal);
+      }));
 
-        setFocus: function () {
-            var topModal;
+    },
 
-            for (var i = 0; i < this.stack.length; i++){
-                if (this.stack[i].isShown) topModal = this.stack[i];
-            }
+    destroyModal: function (modal) {
 
-            if (!topModal) return;
+      modal.destroy();
 
-            topModal.focus();
+      var hasOpenModal = this.hasOpenModal();
 
-        },
+      this.$element.toggleClass('modal-open', hasOpenModal);
 
-        removeModal: function (modal) {
-            modal.$element.off('.modalmanager');
-            if (modal.$backdrop) this.removeBackdrop.call(modal);
-            this.stack.splice(this.getIndexOfModal(modal), 1);
-        },
+      if (!hasOpenModal){
+        this.$element.removeClass('page-overflow');
+      }
 
-        getModalAt: function (index) {
-            return this.stack[index];
-        },
+      this.removeContainer(modal);
 
-        getIndexOfModal: function (modal) {
-            for (var i = 0; i < this.stack.length; i++){
-                if (modal === this.stack[i]) return i;
-            }
-        },
-
-        removeBackdrop: function (modal) {
-            modal.$backdrop.remove();
-            modal.$backdrop = null;
-        }, 
-
-        createBackdrop: function (animate) {
-            var $backdrop;
-
-            if (!this.isLoading) {
-                $backdrop = $('<div class="modal-backdrop ' + animate + '" />')
-                    .appendTo(this.$element);
-
-            } else {
-                $backdrop = this.$loading;
-                $backdrop.off('.modalmanager');
-                this.$spinner.remove();
-                this.isLoading = false;
-                this.$loading = this.$spinner = null;
-            }
+      this.setFocus();
+    },
 
-            return $backdrop
-        },
-
-        removeContainer: function (modal) {
-            modal.$container.remove();
-            modal.$container = null;
-        }, 
-
-        createContainer: function (modal) {
-            var $container;
-
-            $container = $('<div class="modal-scrollable">')
-                .css('z-index', getzIndex( 'modal', 
-                    modal ? this.getIndexOfModal(modal) : this.stack.length ))
-                .appendTo(this.$element);
-
-            if (modal && modal.options.backdrop != 'static') {
-                $container.on('click.modal', targetIsSelf(function (e) {
-                    modal.hide();
-                }));
-            } else if (modal) {
-                $container.on('click.modal', targetIsSelf(function (e) {
-                    modal.attention();
-                }));
-            }
+    hasOpenModal: function () {
+      for (var i = 0; i < this.stack.length; i++){
+        if (this.stack[i].isShown) return true;
+      }
 
-            return $container;
+      return false;
+    },
 
-        },
+    setFocus: function () {
+      var topModal;
 
-        backdrop: function (modal, callback) {
-            var animate = modal.$element.hasClass('fade') ? 'fade' : '',
-                showBackdrop = modal.options.backdrop && 
-                    this.backdropCount < this.options.backdropLimit;
+      for (var i = 0; i < this.stack.length; i++){
+        if (this.stack[i].isShown) topModal = this.stack[i];
+      }
 
-            if (modal.isShown && showBackdrop) {
-                var doAnimate = $.support.transition && animate && !this.isLoading;
+      if (!topModal) return;
 
+      topModal.focus();
 
-                modal.$backdrop = this.createBackdrop(animate);
+    },
 
-                modal.$backdrop.css('z-index', getzIndex( 'backdrop', this.getIndexOfModal(modal) ))
+    removeModal: function (modal) {
+      modal.$element.off('.modalmanager');
+      if (modal.$backdrop) this.removeBackdrop.call(modal);
+      this.stack.splice(this.getIndexOfModal(modal), 1);
+    },
 
-                if (doAnimate) modal.$backdrop[0].offsetWidth // force reflow
+    getModalAt: function (index) {
+      return this.stack[index];
+    },
 
-                modal.$backdrop.addClass('in')
+    getIndexOfModal: function (modal) {
+      for (var i = 0; i < this.stack.length; i++){
+        if (modal === this.stack[i]) return i;
+      }
+    },
 
-                this.backdropCount += 1;
+    replace: function (callback) {
+      var topModal;
 
-                doAnimate ?
-                    modal.$backdrop.one($.support.transition.end, callback) :
-                    callback();
+      for (var i = 0; i < this.stack.length; i++){
+        if (this.stack[i].isShown) topModal = this.stack[i];
+      }
 
-            } else if (!modal.isShown && modal.$backdrop) {
-                modal.$backdrop.removeClass('in');
+      if (topModal) {
+        this.$backdropHandle = topModal.$backdrop;
+        topModal.$backdrop = null;
 
-                this.backdropCount -= 1;
+        callback && topModal.$element.one('hidden',
+          targetIsSelf( $.proxy(callback, this) ));
 
-                var that = this;
+        topModal.hide();
+      } else if (callback) {
+        callback();
+      }
+    },
 
-                $.support.transition && modal.$element.hasClass('fade')?
-                    modal.$backdrop.one($.support.transition.end, function () { that.removeBackdrop(modal) }) :
-                    that.removeBackdrop(modal);
+    removeBackdrop: function (modal) {
+      modal.$backdrop.remove();
+      modal.$backdrop = null;
+    },
 
-            } else if (callback) {
-                callback();
-            }
-        },
+    createBackdrop: function (animate) {
+      var $backdrop;
 
-        removeLoading: function () {
-            this.$loading && this.$loading.remove();
-            this.$loading = null;
-            this.isLoading = false;
-        },
+      if (!this.$backdropHandle) {
+        $backdrop = $('<div class="modal-backdrop ' + animate + '" />')
+          .appendTo(this.$element);
+      } else {
+        $backdrop = this.$backdropHandle;
+        $backdrop.off('.modalmanager');
+        this.$backdropHandle = null;
+        this.isLoading && this.removeSpinner();
+      }
 
-        loading: function (callback) {
-            callback = callback || function () { };
-            
-            this.$element
-                .toggleClass('modal-open', !this.isLoading || this.hasOpenModal())
-                .toggleClass('page-overflow', $(window).height() < this.$element.height());
-            
-            if (!this.isLoading) {
+      return $backdrop
+    },
 
-                this.$loading = this.createBackdrop('fade');
+    removeContainer: function (modal) {
+      modal.$container.remove();
+      modal.$container = null;
+    },
 
-                this.$loading[0].offsetWidth // force reflow    
+    createContainer: function (modal) {
+      var $container;
 
-                this.$loading
-                    .css('z-index', getzIndex('backdrop', this.stack.length))
-                    .addClass('in');
+      $container = $('<div class="modal-scrollable">')
+        .css('z-index', getzIndex( 'modal',
+          modal ? this.getIndexOfModal(modal) : this.stack.length ))
+        .appendTo(this.$element);
 
-                var $spinner = $(this.options.spinner)
-                    .css('z-index', getzIndex('modal', this.stack.length))
-                    .appendTo(this.$element)
-                    .addClass('in');
+      if (modal && modal.options.backdrop != 'static') {
+        $container.on('click.modal', targetIsSelf(function (e) {
+          modal.hide();
+        }));
+      } else if (modal) {
+        $container.on('click.modal', targetIsSelf(function (e) {
+          modal.attention();
+        }));
+      }
 
-                this.$spinner = $(this.createContainer())
-                    .append($spinner)
-                    .on('click.modalmanager', $.proxy(this.loading, this));
+      return $container;
 
-                this.isLoading = true;
+    },
 
-                $.support.transition ?
-                this.$loading.one($.support.transition.end, callback) :
-                callback();
+    backdrop: function (modal, callback) {
+      var animate = modal.$element.hasClass('fade') ? 'fade' : '',
+        showBackdrop = modal.options.backdrop &&
+          this.backdropCount < this.options.backdropLimit;
 
-            } else if (this.isLoading && this.$loading) {
-                this.$loading.removeClass('in');
+      if (modal.isShown && showBackdrop) {
+        var doAnimate = $.support.transition && animate && !this.$backdropHandle;
 
-                if (this.$spinner) this.$spinner.remove();
+        modal.$backdrop = this.createBackdrop(animate);
 
-                var that = this;
-                $.support.transition ?
-                    this.$loading.one($.support.transition.end, function () { that.removeLoading() }) :
-                    that.removeLoading();
+        modal.$backdrop.css('z-index', getzIndex( 'backdrop', this.getIndexOfModal(modal) ));
 
-            } else if (callback) {
-                callback(this.isLoading);
-            }
-        }
-    }
+        if (doAnimate) modal.$backdrop[0].offsetWidth; // force reflow
 
-    /* PRIVATE METHODS
-    * ======================= */
+        modal.$backdrop.addClass('in');
 
-    // computes and caches the zindexes
-    var getzIndex = (function () {
-        var zIndexFactor, 
-            baseIndex = {};
+        this.backdropCount += 1;
 
-        return function (type, pos) {
+        doAnimate ?
+          modal.$backdrop.one($.support.transition.end, callback) :
+          callback();
 
-            if (typeof zIndexFactor === 'undefined'){
-                var $baseModal = $('<div class="modal hide" />').appendTo('body'),
-                    $baseBackdrop = $('<div class="modal-backdrop hide" />').appendTo('body');
+      } else if (!modal.isShown && modal.$backdrop) {
+        modal.$backdrop.removeClass('in');
 
-                baseIndex['modal'] = +$baseModal.css('z-index'),
-                baseIndex['backdrop'] = +$baseBackdrop.css('z-index'),
-                zIndexFactor = baseIndex['modal'] - baseIndex['backdrop'];
-                
-                $baseModal.remove();
-                $baseBackdrop.remove();
-                $baseBackdrop = $baseModal = null;
-            }
+        this.backdropCount -= 1;
 
-            return baseIndex[type] + (zIndexFactor * pos);
+        var that = this;
 
-        }
-    }())
-
-    // make sure the event target is the modal itself in order to prevent 
-    // other components such as tabsfrom triggering the modal manager. 
-    // if Boostsrap namespaced events, this would not be needed.
-    function targetIsSelf(callback){
-        return function (e) {
-            if (this === e.target){
-                return callback.apply(this, arguments);
-            } 
-        }
-    }
+        $.support.transition && modal.$element.hasClass('fade')?
+          modal.$backdrop.one($.support.transition.end, function () { that.removeBackdrop(modal) }) :
+          that.removeBackdrop(modal);
+
+      } else if (callback) {
+        callback();
+      }
+    },
+
+    removeSpinner: function(){
+      this.$spinner && this.$spinner.remove();
+      this.$spinner = null;
+      this.isLoading = false;
+    },
+
+    removeLoading: function () {
+      this.$backdropHandle && this.$backdropHandle.remove();
+      this.$backdropHandle = null;
+      this.removeSpinner();
+    },
+
+    loading: function (callback) {
+      callback = callback || function () { };
 
+      this.$element
+        .toggleClass('modal-open', !this.isLoading || this.hasOpenModal())
+        .toggleClass('page-overflow', $(window).height() < this.$element.height());
 
-    /* MODAL MANAGER PLUGIN DEFINITION
-    * ======================= */
+      if (!this.isLoading) {
 
-    $.fn.modalmanager = function (option) {
-        return this.each(function () {
-            var $this = $(this), 
-                data = $this.data('modalmanager');
+        this.$backdropHandle = this.createBackdrop('fade');
 
-            if (!data) $this.data('modalmanager', (data = new ModalManager(this, option)))
-            if (typeof option === 'string') data[option]()
-        })
+        this.$backdropHandle[0].offsetWidth; // force reflow
+
+        this.$backdropHandle
+          .css('z-index', getzIndex('backdrop', this.stack.length))
+          .addClass('in');
+
+        var $spinner = $(this.options.spinner)
+          .css('z-index', getzIndex('modal', this.stack.length))
+          .appendTo(this.$element)
+          .addClass('in');
+
+        this.$spinner = $(this.createContainer())
+          .append($spinner)
+          .on('click.modalmanager', $.proxy(this.loading, this));
+
+        this.isLoading = true;
+
+        $.support.transition ?
+          this.$backdropHandle.one($.support.transition.end, callback) :
+          callback();
+
+      } else if (this.isLoading && this.$backdropHandle) {
+        this.$backdropHandle.removeClass('in');
+
+        var that = this;
+        $.support.transition ?
+          this.$backdropHandle.one($.support.transition.end, function () { that.removeLoading() }) :
+          that.removeLoading();
+
+      } else if (callback) {
+        callback(this.isLoading);
+      }
     }
+  };
+
+  /* PRIVATE METHODS
+  * ======================= */
+
+  // computes and caches the zindexes
+  var getzIndex = (function () {
+    var zIndexFactor,
+      baseIndex = {};
+
+    return function (type, pos) {
 
-    $.fn.modalmanager.defaults = {
-        backdropLimit: 999,
-        spinner: '<div class="loading-spinner fade" style="width: 200px; margin-left: -100px;"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div>'
+      if (typeof zIndexFactor === 'undefined'){
+        var $baseModal = $('<div class="modal hide" />').appendTo('body'),
+          $baseBackdrop = $('<div class="modal-backdrop hide" />').appendTo('body');
+
+        baseIndex['modal'] = +$baseModal.css('z-index');
+        baseIndex['backdrop'] = +$baseBackdrop.css('z-index');
+        zIndexFactor = baseIndex['modal'] - baseIndex['backdrop'];
+
+        $baseModal.remove();
+        $baseBackdrop.remove();
+        $baseBackdrop = $baseModal = null;
+      }
+
+      return baseIndex[type] + (zIndexFactor * pos);
+
+    }
+  }());
+
+  // make sure the event target is the modal itself in order to prevent
+  // other components such as tabsfrom triggering the modal manager.
+  // if Boostsrap namespaced events, this would not be needed.
+  function targetIsSelf(callback){
+    return function (e) {
+      if (this === e.target){
+        return callback.apply(this, arguments);
+      }
     }
+  }
+
+
+  /* MODAL MANAGER PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.modalmanager = function (option, args) {
+    return this.each(function () {
+      var $this = $(this),
+        data = $this.data('modalmanager');
+
+      if (!data) $this.data('modalmanager', (data = new ModalManager(this, option)))
+      if (typeof option === 'string') data[option].apply(data, [].concat(args))
+    })
+  };
+
+  $.fn.modalmanager.defaults = {
+    backdropLimit: 999,
+    resize: true,
+    spinner: '<div class="loading-spinner fade" style="width: 200px; margin-left: -100px;"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div>'
+  };
 
-    $.fn.modalmanager.Constructor = ModalManager
+  $.fn.modalmanager.Constructor = ModalManager
 
-}(jQuery);
+}(jQuery);