marionette-modal 1.0.0.8

data/dist/marionette.modal-min.js

@@ -0,0 +1 @@
+(function(){var a=function(a,b){return function(){return a.apply(b,arguments)}},b={}.hasOwnProperty,c=function(a,c){function d(){this.constructor=a}for(var e in c)b.call(c,e)&&(a[e]=c[e]);return d.prototype=c.prototype,a.prototype=new d,a.__super__=c.prototype,a};if("undefined"==typeof Marionette||null===Marionette)throw new Error("Marionette is not defined. Please include the latest version from https://github.com/marionettejs/backbone.marionette");Marionette.Modal=function(b){function d(){this.triggerCancel=a(this.triggerCancel,this),this.triggerSubmit=a(this.triggerSubmit,this),this.triggerView=a(this.triggerView,this),this.clickOutside=a(this.clickOutside,this),this.checkKey=a(this.checkKey,this),this.args=Array.prototype.slice.apply(arguments),Marionette.View.prototype.constructor.apply(this,this.args),this.setUIElements(),this.delegateModalEvents()}return c(d,b),d.prototype.prefix="bbm",d.prototype.render=function(a){var b,c,d=this;return null==a&&(a={}),b=this.serializeData(),this.$el.addClass(""+this.prefix+"-wrapper"),this.modalEl=Marionette.$("<div />").addClass(""+this.prefix+"-modal"),this.template&&this.modalEl.html(this.template(b)),this.$el.html(this.modalEl),Marionette.$("body").on("keyup",this.checkKey),Marionette.$("body").on("click",this.clickOutside),this.viewContainer?(this.viewContainerEl=this.modalEl.find(this.viewContainer),this.viewContainerEl.addClass(""+this.prefix+"-modal__views")):this.viewContainerEl=this.modalEl,this.$el.show(),(null!=(c=this.views)?c.length:void 0)>0&&this.openAt(0),"function"==typeof this.onRender&&this.onRender(),this.modalEl.css({opacity:0}),this.$el.fadeIn({duration:100,complete:function(){return d.modalEl.css({opacity:1}).addClass(""+d.prefix+"-modal--open")}}),this},d.prototype.setUIElements=function(){var a;if(this.template=Marionette.getOption(this,"template"),this.views=Marionette.getOption(this,"views"),null!=(a=this.views)&&(a.length=_.size(this.views)),this.viewContainer=Marionette.getOption(this,"viewContainer"),this.$el.hide(),_.isUndefined(this.template)&&_.isUndefined(this.views))throw new Error("No template or views defined for Backbone.Modal");if(this.template&&this.views&&_.isUndefined(this.viewContainer))throw new Error("No viewContainer defined for Backbone.Modal")},d.prototype.serializeData=function(){var a;return a={},this.model&&(a=_.extend(a,this.model.toJSON())),this.collection&&(a=_.extend(a,{items:this.collection.toJSON()})),a},d.prototype.delegateModalEvents=function(){var a,b,c,d,e,f,g;this.active=!0,a=Marionette.getOption(this,"cancelEl"),e=Marionette.getOption(this,"submitEl"),e&&this.$el.on("click",e,this.triggerSubmit),a&&this.$el.on("click",a,this.triggerCancel),g=[];for(b in this.views)"length"!==b?(c=b.match(/^(\S+)\s*(.*)$/),f=c[1],d=c[2],g.push(this.$el.on(f,d,this.views[b],this.triggerView))):g.push(void 0);return g},d.prototype.undelegateModalEvents=function(){var a,b,c,d,e,f,g;this.active=!1,a=this.getOption("cancelEl"),e=this.getOption("submitEl"),e&&this.$el.off("click",e,this.triggerSubmit),a&&this.$el.off("click",a,this.triggerCancel),g=[];for(b in this.views)"length"!==b?(c=b.match(/^(\S+)\s*(.*)$/),f=c[1],d=c[2],g.push(this.$el.off(f,d,this.views[b],this.triggerView))):g.push(void 0);return g},d.prototype.checkKey=function(a){if(this.active)switch(a.keyCode){case 27:return this.triggerCancel();case 13:return this.triggerSubmit()}},d.prototype.clickOutside=function(a){return Marionette.$(a.target).hasClass(""+this.prefix+"-wrapper")&&this.active?this.triggerCancel(null,!0):void 0},d.prototype.buildView=function(a){var b;if(a)return _.isFunction(a)?(b=new a(this.args[0]),b instanceof Backbone.View?{el:b.render().$el,view:b}:{el:a(this.args[0])}):{view:a,el:a.$el}},d.prototype.triggerView=function(a){var b,c,d,e;null!=a&&"function"==typeof a.preventDefault&&a.preventDefault(),e=a.data,c=this.buildView(e.view),this.currentView&&(this.previousView=this.currentView),this.currentView=c.view||c.el,b=0;for(d in this.views)e.view===this.views[d].view&&(this.currentIndex=b),b++;return e.onActive&&(_.isFunction(e.onActive)?e.onActive(this):_.isString(e.onActive)&&this[e.onActive].call(this,e)),this.shouldAnimate?this.animateToView(c.el):(this.shouldAnimate=!0,this.$(this.viewContainerEl).html(c.el))},d.prototype.animateToView=function(a){var b,c,d,e,f,g,h=this;return e={position:"relative",top:-9999,left:-9999},f=Marionette.$("<tester/>").css(e),f.html(this.$el.clone().css(e)),0!==Marionette.$("tester").length?Marionette.$("tester").replaceWith(f):Marionette.$("body").append(f),b=this.viewContainer?f.find(this.viewContainer):f.find("."+this.prefix+"-modal"),b.removeAttr("style"),d=b.outerHeight(),b.html(a),c=b.outerHeight(),d===c?(this.$(this.viewContainerEl).html(a),null!=(g=this.previousView)?"function"==typeof g.close?g.close():void 0:void 0):(this.$(this.viewContainerEl).css({opacity:0}),this.$(this.viewContainerEl).animate({height:c},100,function(){var b;return h.$(h.viewContainerEl).css({opacity:1}).removeAttr("style"),h.$(h.viewContainerEl).html(a),null!=(b=h.previousView)?"function"==typeof b.close?b.close():void 0:void 0}))},d.prototype.triggerSubmit=function(a){return a&&(null!=a&&a.preventDefault(),!this.beforeSubmit||this.beforeSubmit()!==!1)?("function"==typeof this.submit&&this.submit(),this.regionEnabled?this.trigger("modal:close"):this.close()):void 0},d.prototype.triggerCancel=function(a){return null!=a&&a.preventDefault(),this.beforeCancel&&this.beforeCancel()===!1?void 0:("function"==typeof this.cancel&&this.cancel(),this.regionEnabled?this.triggerMethod("modal:close"):this.close())},d.prototype.close=function(){var a=this;return Marionette.$("body").off("keyup",this.checkKey),Marionette.$("body").off("click",this.clickOutside),"function"==typeof this.onClose&&this.onClose(),this.shouldAnimate=!1,this.modalEl.addClass(""+this.prefix+"-modal--close"),this.$el.fadeOut({duration:200}),_.delay(function(){var b;return null!=(b=a.currentView)&&"function"==typeof b.remove&&b.remove(),a.remove()},200)},d.prototype.openAt=function(a){var b,c,d;b=0;for(c in this.views)"length"!==c&&(b===a&&(d=this.views[c]),b++);return d&&(this.currentIndex=a,this.triggerView({data:d})),this},d.prototype.next=function(){return this.currentIndex+1<this.views.length?this.openAt(this.currentIndex+1):void 0},d.prototype.previous=function(){return this.currentIndex-1<this.views.length-1?this.openAt(this.currentIndex-1):void 0},d}(Marionette.View)}).call(this);

data/dist/marionette.modal.css

@@ -0,0 +1,24 @@
+/* Modal positioning */
+.bbm-wrapper {
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  padding: 50px 10px;
+  overflow-x: auto;
+  overflow-y: scroll; }
+  .bbm-wrapper * {
+    box-sizing: border-box; }
+
+.bbm-modal {
+  border-radius: 3px;
+  margin: auto;
+  width: auto;
+  max-width: 550px; }
+
+.bbm-views {
+  width: 100%;
+  box-sizing: border-box; }

data/dist/marionette.modal.js

@@ -0,0 +1,370 @@
+(function() {
+  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
+    __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  if (typeof Marionette === "undefined" || Marionette === null) {
+    throw new Error("Marionette is not defined. Please include the latest version from https://github.com/marionettejs/backbone.marionette");
+  }
+
+  Marionette.Modal = (function(_super) {
+    __extends(Modal, _super);
+
+    Modal.prototype.prefix = 'bbm';
+
+    function Modal() {
+      this.triggerCancel = __bind(this.triggerCancel, this);
+      this.triggerSubmit = __bind(this.triggerSubmit, this);
+      this.triggerView = __bind(this.triggerView, this);
+      this.clickOutside = __bind(this.clickOutside, this);
+      this.checkKey = __bind(this.checkKey, this);
+      this.args = Array.prototype.slice.apply(arguments);
+      Marionette.View.prototype.constructor.apply(this, this.args);
+      this.setUIElements();
+      this.delegateModalEvents();
+    }
+
+    Modal.prototype.render = function(options) {
+      var data, _ref,
+        _this = this;
+      if (options == null) {
+        options = {};
+      }
+      data = this.serializeData();
+      this.$el.addClass("" + this.prefix + "-wrapper");
+      this.modalEl = Marionette.$('<div />').addClass("" + this.prefix + "-modal");
+      if (this.template) {
+        this.modalEl.html(this.template(data));
+      }
+      this.$el.html(this.modalEl);
+      Marionette.$('body').on('keyup', this.checkKey);
+      Marionette.$('body').on('click', this.clickOutside);
+      if (this.viewContainer) {
+        this.viewContainerEl = this.modalEl.find(this.viewContainer);
+        this.viewContainerEl.addClass("" + this.prefix + "-modal__views");
+      } else {
+        this.viewContainerEl = this.modalEl;
+      }
+      this.$el.show();
+      if (((_ref = this.views) != null ? _ref.length : void 0) > 0) {
+        this.openAt(0);
+      }
+      if (typeof this.onRender === "function") {
+        this.onRender();
+      }
+      this.modalEl.css({
+        opacity: 0
+      });
+      this.$el.fadeIn({
+        duration: 100,
+        complete: function() {
+          return _this.modalEl.css({
+            opacity: 1
+          }).addClass("" + _this.prefix + "-modal--open");
+        }
+      });
+      return this;
+    };
+
+    Modal.prototype.setUIElements = function() {
+      var _ref;
+      this.template = Marionette.getOption(this, 'template');
+      this.views = Marionette.getOption(this, 'views');
+      if ((_ref = this.views) != null) {
+        _ref.length = _.size(this.views);
+      }
+      this.viewContainer = Marionette.getOption(this, 'viewContainer');
+      this.$el.hide();
+      if (_.isUndefined(this.template) && _.isUndefined(this.views)) {
+        throw new Error('No template or views defined for Backbone.Modal');
+      }
+      if (this.template && this.views && _.isUndefined(this.viewContainer)) {
+        throw new Error('No viewContainer defined for Backbone.Modal');
+      }
+    };
+
+    Modal.prototype.serializeData = function() {
+      var data;
+      data = {};
+      if (this.model) {
+        data = _.extend(data, this.model.toJSON());
+      }
+      if (this.collection) {
+        data = _.extend(data, {
+          items: this.collection.toJSON()
+        });
+      }
+      return data;
+    };
+
+    Modal.prototype.delegateModalEvents = function() {
+      var cancelEl, key, match, selector, submitEl, trigger, _results;
+      this.active = true;
+      cancelEl = Marionette.getOption(this, 'cancelEl');
+      submitEl = Marionette.getOption(this, 'submitEl');
+      if (submitEl) {
+        this.$el.on('click', submitEl, this.triggerSubmit);
+      }
+      if (cancelEl) {
+        this.$el.on('click', cancelEl, this.triggerCancel);
+      }
+      _results = [];
+      for (key in this.views) {
+        if (key !== 'length') {
+          match = key.match(/^(\S+)\s*(.*)$/);
+          trigger = match[1];
+          selector = match[2];
+          _results.push(this.$el.on(trigger, selector, this.views[key], this.triggerView));
+        } else {
+          _results.push(void 0);
+        }
+      }
+      return _results;
+    };
+
+    Modal.prototype.undelegateModalEvents = function() {
+      var cancelEl, key, match, selector, submitEl, trigger, _results;
+      this.active = false;
+      cancelEl = this.getOption('cancelEl');
+      submitEl = this.getOption('submitEl');
+      if (submitEl) {
+        this.$el.off('click', submitEl, this.triggerSubmit);
+      }
+      if (cancelEl) {
+        this.$el.off('click', cancelEl, this.triggerCancel);
+      }
+      _results = [];
+      for (key in this.views) {
+        if (key !== 'length') {
+          match = key.match(/^(\S+)\s*(.*)$/);
+          trigger = match[1];
+          selector = match[2];
+          _results.push(this.$el.off(trigger, selector, this.views[key], this.triggerView));
+        } else {
+          _results.push(void 0);
+        }
+      }
+      return _results;
+    };
+
+    Modal.prototype.checkKey = function(e) {
+      if (this.active) {
+        switch (e.keyCode) {
+          case 27:
+            return this.triggerCancel();
+          case 13:
+            return this.triggerSubmit();
+        }
+      }
+    };
+
+    Modal.prototype.clickOutside = function(e) {
+      if (Marionette.$(e.target).hasClass("" + this.prefix + "-wrapper") && this.active) {
+        return this.triggerCancel(null, true);
+      }
+    };
+
+    Modal.prototype.buildView = function(viewType) {
+      var view;
+      if (!viewType) {
+        return;
+      }
+      if (_.isFunction(viewType)) {
+        view = new viewType(this.args[0]);
+        if (view instanceof Backbone.View) {
+          return {
+            el: view.render().$el,
+            view: view
+          };
+        } else {
+          return {
+            el: viewType(this.args[0])
+          };
+        }
+      }
+      return {
+        view: viewType,
+        el: viewType.$el
+      };
+    };
+
+    Modal.prototype.triggerView = function(e) {
+      var index, instance, key, options;
+      if (e != null) {
+        if (typeof e.preventDefault === "function") {
+          e.preventDefault();
+        }
+      }
+      options = e.data;
+      instance = this.buildView(options.view);
+      if (this.currentView) {
+        this.previousView = this.currentView;
+      }
+      this.currentView = instance.view || instance.el;
+      index = 0;
+      for (key in this.views) {
+        if (options.view === this.views[key].view) {
+          this.currentIndex = index;
+        }
+        index++;
+      }
+      if (options.onActive) {
+        if (_.isFunction(options.onActive)) {
+          options.onActive(this);
+        } else if (_.isString(options.onActive)) {
+          this[options.onActive].call(this, options);
+        }
+      }
+      if (this.shouldAnimate) {
+        return this.animateToView(instance.el);
+      } else {
+        this.shouldAnimate = true;
+        return this.$(this.viewContainerEl).html(instance.el);
+      }
+    };
+
+    Modal.prototype.animateToView = function(view) {
+      var container, newHeight, previousHeight, style, tester, _ref,
+        _this = this;
+      style = {
+        position: 'relative',
+        top: -9999,
+        left: -9999
+      };
+      tester = Marionette.$('<tester/>').css(style);
+      tester.html(this.$el.clone().css(style));
+      if (Marionette.$('tester').length !== 0) {
+        Marionette.$('tester').replaceWith(tester);
+      } else {
+        Marionette.$('body').append(tester);
+      }
+      if (this.viewContainer) {
+        container = tester.find(this.viewContainer);
+      } else {
+        container = tester.find("." + this.prefix + "-modal");
+      }
+      container.removeAttr('style');
+      previousHeight = container.outerHeight();
+      container.html(view);
+      newHeight = container.outerHeight();
+      if (previousHeight === newHeight) {
+        this.$(this.viewContainerEl).html(view);
+        return (_ref = this.previousView) != null ? typeof _ref.close === "function" ? _ref.close() : void 0 : void 0;
+      } else {
+        this.$(this.viewContainerEl).css({
+          opacity: 0
+        });
+        return this.$(this.viewContainerEl).animate({
+          height: newHeight
+        }, 100, function() {
+          var _ref1;
+          _this.$(_this.viewContainerEl).css({
+            opacity: 1
+          }).removeAttr('style');
+          _this.$(_this.viewContainerEl).html(view);
+          return (_ref1 = _this.previousView) != null ? typeof _ref1.close === "function" ? _ref1.close() : void 0 : void 0;
+        });
+      }
+    };
+
+    Modal.prototype.triggerSubmit = function(e) {
+      if (!e) {
+        return;
+      }
+      if (e != null) {
+        e.preventDefault();
+      }
+      if (this.beforeSubmit) {
+        if (this.beforeSubmit() === false) {
+          return;
+        }
+      }
+      if (typeof this.submit === "function") {
+        this.submit();
+      }
+      if (this.regionEnabled) {
+        return this.trigger('modal:close');
+      } else {
+        return this.close();
+      }
+    };
+
+    Modal.prototype.triggerCancel = function(e) {
+      if (e != null) {
+        e.preventDefault();
+      }
+      if (this.beforeCancel) {
+        if (this.beforeCancel() === false) {
+          return;
+        }
+      }
+      if (typeof this.cancel === "function") {
+        this.cancel();
+      }
+      if (this.regionEnabled) {
+        return this.triggerMethod('modal:close');
+      } else {
+        return this.close();
+      }
+    };
+
+    Modal.prototype.close = function() {
+      var _this = this;
+      Marionette.$('body').off('keyup', this.checkKey);
+      Marionette.$('body').off('click', this.clickOutside);
+      if (typeof this.onClose === "function") {
+        this.onClose();
+      }
+      this.shouldAnimate = false;
+      this.modalEl.addClass("" + this.prefix + "-modal--close");
+      this.$el.fadeOut({
+        duration: 200
+      });
+      return _.delay(function() {
+        var _ref;
+        if ((_ref = _this.currentView) != null) {
+          if (typeof _ref.remove === "function") {
+            _ref.remove();
+          }
+        }
+        return _this.remove();
+      }, 200);
+    };
+
+    Modal.prototype.openAt = function(index) {
+      var i, key, view;
+      i = 0;
+      for (key in this.views) {
+        if (key !== 'length') {
+          if (i === index) {
+            view = this.views[key];
+          }
+          i++;
+        }
+      }
+      if (view) {
+        this.currentIndex = index;
+        this.triggerView({
+          data: view
+        });
+      }
+      return this;
+    };
+
+    Modal.prototype.next = function() {
+      if (this.currentIndex + 1 < this.views.length) {
+        return this.openAt(this.currentIndex + 1);
+      }
+    };
+
+    Modal.prototype.previous = function() {
+      if (this.currentIndex - 1 < this.views.length - 1) {
+        return this.openAt(this.currentIndex - 1);
+      }
+    };
+
+    return Modal;
+
+  })(Marionette.View);
+
+}).call(this);