marionette.modal 1.0.0

data/marionette.modal.theme.css

@@ -0,0 +1,324 @@
+.bbm-wrapper {
+  background: rgba(0, 0, 0, 0.75);
+  -webkit-transition: background-color 0.3s; }
+
+.bbm-modal {
+  background: white;
+  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.9); }
+
+/* BLOCKS */
+.bbm-modal__topbar,
+.bbm-modal__bottombar {
+  padding: 0 30px; }
+
+.bbm-modal__topbar {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  margin-bottom: 30px; }
+  .bbm-modal__topbar > ul {
+    list-style: none;
+    text-align: center;
+    padding: 0;
+    margin: 0; }
+
+.bbm-modal__tab {
+  display: inline-block;
+  padding: 15px 10px; }
+  .bbm-modal__tab a {
+    font-size: 16px;
+    font-weight: bold;
+    color: #999999; }
+    .bbm-modal__tab a:hover, .bbm-modal__tab a.active {
+      color: #222222; }
+
+.bbm-modal__title {
+  padding: 20px 0 19px;
+  margin: 0;
+  font-weight: normal;
+  font-size: 22px;
+  line-height: 1em;
+  color: #312d3a; }
+
+.bbm-modal__section {
+  padding: 0 30px;
+  margin-top: 0px;
+  font-size: 16px;
+  line-height: 26px;
+  color: #575656; }
+  .bbm-modal__section p {
+    font-size: 16px;
+    line-height: 26px;
+    color: #575656; }
+    .bbm-modal__section p:last-child {
+      padding: 0;
+      margin-bottom: 0; }
+  .bbm-modal__section a {
+    color: #ff643c; }
+  .bbm-modal__section h3 {
+    margin: 0;
+    font-size: 20px;
+    line-height: 1em; }
+
+.bbm-modal__bottombar {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 18px;
+  text-align: right;
+  margin-top: 30px; }
+
+/* MODULES */
+.bbm-group {
+  content: "";
+  display: table;
+  clear: both; }
+
+.bbm-button {
+  display: inline-block;
+  color: rgba(49, 45, 58, 0.8);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  position: relative;
+  line-height: 1em;
+  padding: 10px 14px;
+  border-radius: 3px;
+  background: #fcfcfc;
+  background-image: -o-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
+  background-image: -moz-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
+  background-image: -webkit-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
+  background-image: -ms-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
+  background-image: linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
+  -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); }
+  .bbm-button.inactive {
+    opacity: 0.5;
+    pointer-events: none; }
+  .bbm-button:active {
+    background-image: -o-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
+    background-image: -moz-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
+    background-image: -webkit-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
+    background-image: -ms-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
+    background-image: linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
+    -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+    -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); }
+
+/* ANIMATIONS */
+/* Open modal */
+@-webkit-keyframes bbm-open {
+  0% {
+    -webkit-transform: matrix(0.99126, 0, 0, 0.99126, 0, 43.8813);
+    opacity: 0.1259; }
+
+  4% {
+    -webkit-transform: matrix(0.99295, 0, 0, 0.99295, 0, 45.06809);
+    opacity: 0.29544; }
+
+  8% {
+    -webkit-transform: matrix(0.99467, 0, 0, 0.99467, 0, 46.26922);
+    opacity: 0.46703; }
+
+  12% {
+    -webkit-transform: matrix(0.99619, 0, 0, 0.99619, 0, 47.33355);
+    opacity: 0.61908; }
+
+  16% {
+    -webkit-transform: matrix(0.99743, 0, 0, 0.99743, 0, 48.19991);
+    opacity: 0.74284; }
+
+  20% {
+    -webkit-transform: matrix(0.99837, 0, 0, 0.99837, 0, 48.86067);
+    opacity: 0.83724; }
+
+  24% {
+    -webkit-transform: matrix(0.99905, 0, 0, 0.99905, 0, 49.33658);
+    opacity: 0.90523; }
+
+  28% {
+    -webkit-transform: matrix(0.99952, 0, 0, 0.99952, 0, 49.66049);
+    opacity: 0.9515; }
+
+  32% {
+    -webkit-transform: matrix(0.99981, 0, 0, 0.99981, 0, 49.8675);
+    opacity: 0.98107; }
+
+  36% {
+    -webkit-transform: matrix(0.99999, 0, 0, 0.99999, 0, 49.98966);
+    opacity: 0.99852; }
+
+  40% {
+    -webkit-transform: matrix(1.00008, 0, 0, 1.00008, 0, 50.05361);
+    opacity: 1.00766; }
+
+  44% {
+    -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.08);
+    opacity: 1.01143; }
+
+  48% {
+    -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08394);
+    opacity: 1.01199; }
+
+  52% {
+    -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.07589);
+    opacity: 1.01084; }
+
+  56% {
+    -webkit-transform: matrix(1.00009, 0, 0, 1.00009, 0, 50.06265);
+    opacity: 1.00895; }
+
+  60% {
+    -webkit-transform: matrix(1.00007, 0, 0, 1.00007, 0, 50.04833);
+    opacity: 1.0069; }
+
+  64% {
+    -webkit-transform: matrix(1.00005, 0, 0, 1.00005, 0, 50.03518);
+    opacity: 1.00503; }
+
+  68% {
+    -webkit-transform: matrix(1.00004, 0, 0, 1.00004, 0, 50.02421);
+    opacity: 1.00346; }
+
+  72% {
+    -webkit-transform: matrix(1.00002, 0, 0, 1.00002, 0, 50.01567);
+    opacity: 1.00224; }
+
+  76% {
+    -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00941);
+    opacity: 1.00134; }
+
+  80% {
+    -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00506);
+    opacity: 1.00072; }
+
+  84% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 50.00223);
+    opacity: 1.00032; }
+
+  88% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 50.0005);
+    opacity: 1.00007; }
+
+  92% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99956);
+    opacity: 0.99994; }
+
+  96% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99913);
+    opacity: 0.99988; }
+
+  100% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 50);
+    opacity: 1; } }
+
+.bbm-modal--open {
+  -webkit-animation-duration: 0.3s;
+  -webkit-animation-name: bbm-open;
+  -webkit-animation-timing-function: linear;
+  -webkit-animation-fill-mode: both;
+  -webkit-transform-origin: 50% 50%;
+  -webkit-backface-visibility: hidden; }
+
+/* Open a stacked modal */
+@-webkit-keyframes bbm-stacked {
+  0% {
+    -webkit-transform: matrix(0.99874, 0, 0, 0.99874, 0, 49.1187);
+    opacity: 0.93705; }
+
+  4% {
+    -webkit-transform: matrix(0.99705, 0, 0, 0.99705, 0, 47.93192);
+    opacity: 0.85228; }
+
+  8% {
+    -webkit-transform: matrix(0.99533, 0, 0, 0.99533, 0, 46.73078);
+    opacity: 0.76648; }
+
+  12% {
+    -webkit-transform: matrix(0.99381, 0, 0, 0.99381, 0, 45.66645);
+    opacity: 0.69046; }
+
+  16% {
+    -webkit-transform: matrix(0.99257, 0, 0, 0.99257, 0, 44.80009);
+    opacity: 0.62858; }
+
+  20% {
+    -webkit-transform: matrix(0.99163, 0, 0, 0.99163, 0, 44.13933);
+    opacity: 0.58138; }
+
+  24% {
+    -webkit-transform: matrix(0.99095, 0, 0, 0.99095, 0, 43.66342);
+    opacity: 0.54739; }
+
+  28% {
+    -webkit-transform: matrix(0.99049, 0, 0, 0.99049, 0, 43.33951);
+    opacity: 0.52425; }
+
+  32% {
+    -webkit-transform: matrix(0.99019, 0, 0, 0.99019, 0, 43.1325);
+    opacity: 0.50946; }
+
+  36% {
+    -webkit-transform: matrix(0.99002, 0, 0, 0.99002, 0, 43.01034);
+    opacity: 0.50074; }
+
+  40% {
+    -webkit-transform: matrix(0.98992, 0, 0, 0.98992, 0, 42.94639);
+    opacity: 0.49617; }
+
+  44% {
+    -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92001);
+    opacity: 0.49429; }
+
+  48% {
+    -webkit-transform: matrix(0.98988, 0, 0, 0.98988, 0, 42.91606);
+    opacity: 0.494; }
+
+  52% {
+    -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92411);
+    opacity: 0.49458; }
+
+  56% {
+    -webkit-transform: matrix(0.98991, 0, 0, 0.98991, 0, 42.93736);
+    opacity: 0.49553; }
+
+  60% {
+    -webkit-transform: matrix(0.98993, 0, 0, 0.98993, 0, 42.95167);
+    opacity: 0.49655; }
+
+  64% {
+    -webkit-transform: matrix(0.98995, 0, 0, 0.98995, 0, 42.96482);
+    opacity: 0.49749; }
+
+  68% {
+    -webkit-transform: matrix(0.98997, 0, 0, 0.98997, 0, 42.97579);
+    opacity: 0.49827; }
+
+  72% {
+    -webkit-transform: matrix(0.98998, 0, 0, 0.98998, 0, 42.98433);
+    opacity: 0.49888; }
+
+  76% {
+    -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99059);
+    opacity: 0.49933; }
+
+  80% {
+    -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99494);
+    opacity: 0.49964; }
+
+  84% {
+    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.99777);
+    opacity: 0.49984; }
+
+  88% {
+    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.9995);
+    opacity: 0.49996; }
+
+  92% {
+    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00044);
+    opacity: 0.50003; }
+
+  96% {
+    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00088);
+    opacity: 0.50006; }
+
+  100% {
+    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43);
+    opacity: 0.5; } }

data/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "Marionette.Modal",
+  "version": "1.0.0",
+  "description": "A plugin for Backbone.js that simplifies creating modals for your application.",
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-coffee": "~0.6.4",
+    "grunt-regarde": "0.1.x",
+    "grunt-contrib-livereload": "0.1.x",
+    "grunt-contrib-jasmine": "~0.4.1",
+    "grunt-contrib-connect": "~0.2.0",
+    "grunt-open": "~0.2.0",
+    "grunt-contrib-uglify": "~0.2.0",
+    "grunt-contrib-sass": "~0.3.0",
+    "grunt-concurrent": "~0.2.0"
+  },
+  "author": "jcsmith1859"
+}

data/src/backbone.marionette.modals.coffee

@@ -0,0 +1,67 @@
+unless Backbone?
+  throw new Error("Backbone is not defined. Please include the latest version from http://documentcloud.github.com/backbone/backbone.js")
+
+class Backbone.Marionette.Modals extends Backbone.Marionette.Region
+  modals: []
+  zIndex: 0
+
+  show: (modal, options = {}) ->
+    @ensureEl()
+
+    if @modals.length > 0
+      lastModal = _.last(@modals)
+      lastModal.modalEl.addClass("#{lastModal.prefix}-modal--stacked")
+      secondLastModal = @modals[@modals.length-1]
+      secondLastModal?.modalEl.removeClass("#{secondLastModal.prefix}-modal--stacked-reverse")
+
+    modal.render()
+    modal.regionEnabled = true
+
+    @$el.show()
+    @$el.append modal.el
+
+    modal.$el.css(background: 'none') if @modals.length > 0
+
+    Marionette.triggerMethod.call(modal, "show")
+    Marionette.triggerMethod.call(this, "show", modal)
+
+    @currentView = modal
+
+    m.undelegateModalEvents() for m in @modals
+
+    modal.on('modal:close', @close)
+
+    @modals.push(modal)
+    @zIndex++
+
+  close: =>
+    modal = @currentView
+    return if !modal or modal.isClosed
+
+    if modal.close
+      modal.close()
+    else if modal.remove
+      modal.remove()
+
+    modal.off('modal:close', @close)
+
+    @modals.splice(_.indexOf(@modals, modal), 1)
+
+    @zIndex--
+
+    @currentView  = @modals[@zIndex-1]
+
+    lastModal     = _.last(@modals)
+
+    if lastModal
+      lastModal.modalEl.addClass("#{lastModal.prefix}-modal--stacked-reverse")
+      _.delay =>
+        lastModal.modalEl.removeClass("#{lastModal.prefix}-modal--stacked")
+      , 300
+
+      lastModal.delegateModalEvents() if @zIndex isnt 0
+
+    Marionette.triggerMethod.call(this, "close")
+
+  closeAll: ->
+    @close() for modal in @modals

data/src/backbone.modal.coffee

@@ -0,0 +1,253 @@
+unless Backbone?
+  throw new Error("Backbone is not defined. Please include the latest version from http://documentcloud.github.com/backbone/backbone.js")
+
+class Backbone.Modal extends Backbone.View
+  prefix: 'bbm'
+  constructor: ->
+    @args = Array::slice.apply(arguments)
+    Backbone.View::constructor.apply(this, @args)
+
+    @setUIElements()
+    @delegateModalEvents()
+
+  render: (options = {}) ->
+    # use openAt or overwrite this with your own functionality
+    data = @serializeData()
+
+    @$el.addClass("#{@prefix}-wrapper")
+    @modalEl = Backbone.$('<div />').addClass("#{@prefix}-modal")
+    @modalEl.html @template(data) if @template
+    @$el.html @modalEl
+
+    # global events for key and click outside the modal
+    Backbone.$('body').on 'keyup', @checkKey
+    Backbone.$('body').on 'click', @clickOutside
+
+    if @viewContainer
+      @viewContainerEl = @modalEl.find(@viewContainer)
+      @viewContainerEl.addClass("#{@prefix}-modal__views")
+    else
+      @viewContainerEl = @modalEl
+
+    @$el.show()
+    @openAt(0) if @views?.length > 0
+    @onRender?()
+
+    @modalEl.css(opacity: 0)
+    @$el.fadeIn
+      duration: 100
+      complete: =>
+        @modalEl.css(opacity: 1).addClass("#{@prefix}-modal--open")
+
+    return this
+
+  setUIElements: ->
+    # get modal options
+    @template       = @getOption('template')
+    @views          = @getOption('views')
+    @views?.length  = _.size(@views)
+    @viewContainer  = @getOption('viewContainer')
+
+    # hide modal
+    @$el.hide()
+
+    throw new Error('No template or views defined for Backbone.Modal') if _.isUndefined(@template) and _.isUndefined(@views)
+    throw new Error('No viewContainer defined for Backbone.Modal') if @template and @views and _.isUndefined(@viewContainer)
+
+  getOption: (option) ->
+    # get class instance property
+    return unless option
+    if @options and option in @options and @options[option]?
+      return @options[option]
+    else
+      return @[option]
+
+  serializeData: ->
+    # return the appropriate data for this view
+    data = {}
+
+    data = _.extend(data, @model.toJSON()) if @model
+    data = _.extend(data, {items: @collection.toJSON()}) if @collection
+
+    return data
+
+  delegateModalEvents: ->
+    @active = true
+
+    # get elements
+    cancelEl = @getOption('cancelEl')
+    submitEl = @getOption('submitEl')
+
+    # set event handlers for submit and cancel
+    @$el.on('click', submitEl, @triggerSubmit) if submitEl
+    @$el.on('click', cancelEl, @triggerCancel) if cancelEl
+
+    # set event handlers for views
+    for key of @views
+      unless key is 'length'
+        match     = key.match(/^(\S+)\s*(.*)$/)
+        trigger   = match[1]
+        selector  = match[2]
+
+        @$el.on trigger, selector, @views[key], @triggerView
+
+  undelegateModalEvents: ->
+    @active = false
+
+    # get elements
+    cancelEl = @getOption('cancelEl')
+    submitEl = @getOption('submitEl')
+
+    # remove event handlers for submit and cancel
+    @$el.off('click', submitEl, @triggerSubmit) if submitEl
+    @$el.off('click', cancelEl, @triggerCancel) if cancelEl
+
+    # remove event handlers for views
+    for key of @views
+      unless key is 'length'
+        match     = key.match(/^(\S+)\s*(.*)$/)
+        trigger   = match[1]
+        selector  = match[2]
+
+        @$el.off trigger, selector, @views[key], @triggerView
+
+  checkKey: (e) =>
+    if @active
+      switch e.keyCode
+        when 27 then @triggerCancel()
+        when 13 then @triggerSubmit()
+
+  clickOutside: (e) =>
+    @triggerCancel(null, true) if Backbone.$(e.target).hasClass("#{@prefix}-wrapper") and @active
+
+  buildView: (viewType) ->
+    # returns a Backbone.View instance, a function or an object
+    return unless viewType
+    if _.isFunction(viewType)
+      view = new viewType(@args[0])
+
+      if view instanceof Backbone.View
+        return {el: view.render().$el, view: view}
+      else
+        return {el: viewType(@args[0])}
+
+    return {view: viewType, el: viewType.$el}
+
+  triggerView: (e) =>
+    # trigger what view should be rendered
+    e?.preventDefault?()
+    options       = e.data
+    instance      = @buildView(options.view)
+
+    @previousView = @currentView if @currentView
+    @currentView  = instance.view || instance.el
+
+    index = 0
+    for key of @views
+      @currentIndex = index if options.view is @views[key].view
+      index++
+
+    if options.onActive
+      if _.isFunction(options.onActive)
+        options.onActive(this)
+      else if _.isString(options.onActive)
+        this[options.onActive].call(this, options)
+
+    if @shouldAnimate
+      @animateToView(instance.el)
+    else
+      @shouldAnimate = true
+      @$(@viewContainerEl).html instance.el
+
+  animateToView: (view) ->
+    style  = position: 'relative', top: -9999, left: -9999
+    tester = Backbone.$('<tester/>').css(style)
+    tester.html @$el.clone().css(style)
+    if Backbone.$('tester').length isnt 0 then Backbone.$('tester').replaceWith tester else Backbone.$('body').append tester
+
+    if @viewContainer
+      container     = tester.find(@viewContainer)
+    else
+      container     = tester.find(".#{@prefix}-modal")
+
+    container.removeAttr('style')
+
+    previousHeight  = container.outerHeight()
+    container.html(view)
+    newHeight       = container.outerHeight()
+
+    if previousHeight is newHeight
+      @$(@viewContainerEl).html view
+      @previousView?.close?()
+    else
+      @$(@viewContainerEl).css(opacity: 0)
+
+      @$(@viewContainerEl).animate {height: newHeight}, 100, =>
+        @$(@viewContainerEl).css(opacity: 1).removeAttr('style')
+        @$(@viewContainerEl).html view
+        @previousView?.close?()
+
+  triggerSubmit: (e) =>
+    return unless e
+    # triggers submit
+    e?.preventDefault()
+
+    if @beforeSubmit
+      return if @beforeSubmit() is false
+
+    @submit?()
+
+    if @regionEnabled
+      @trigger('modal:close')
+    else
+      @close()
+
+  triggerCancel: (e) =>
+    # triggers cancel
+    e?.preventDefault()
+
+    if @beforeCancel
+      return if @beforeCancel() is false
+
+    @cancel?()
+
+    if @regionEnabled
+      @trigger('modal:close')
+    else
+      @close()
+
+  close: ->
+    # closes view
+    Backbone.$('body').off 'keyup', @checkKey
+    Backbone.$('body').off 'click', @clickOutside
+
+    @onClose?()
+
+    @shouldAnimate = false
+    @modalEl.addClass("#{@prefix}-modal--close")
+    @$el.fadeOut(duration: 200)
+
+    _.delay =>
+      @currentView?.remove?()
+      @remove()
+    , 200
+
+  openAt: (index) ->
+    # loop through views and trigger the index
+    i = 0
+    for key of @views
+      unless key is 'length'
+        view = @views[key] if i is index
+        i++
+
+    if view
+      @currentIndex = index
+      @triggerView(data: view)
+
+    return this
+
+  next: ->
+    @openAt(@currentIndex+1) if @currentIndex+1 < @views.length
+
+  previous: ->
+    @openAt(@currentIndex-1) if @currentIndex-1 < @views.length-1