WWL VM Modals

View module (wwl-js-vm) implementation to maintain a stack of modals. The implementation is based on backbone and backbone.marionette.

Each modal requires to get a view object (Backbone.View api compatible) to passed in for each modal. The model will render that view as content.

Example

context = new (require('wwl-js-app-context'))({ root: true })
vm      = new (require('wwl-js-vm-modals'))({ context: context })

vm.getView().render()
$('body').append(vm.getView().$el)

# Create a dummy content view
View = Backbone.View.extend({ template: '<div><h1>Test</h1></div>' })
view = new View()

# Create a modal
modal = vm.addModal({
  view:   view
  title:  'My first Modal'
  closeButton:      true
  backTopButton:    true
  backBottomButton: true
  destroyOnClose:   true
  cancelButton:     'Cancel'
  successButton:    'Save'
})

# Listen to your modal

modal.on 'view:render', ->
  # The modal view itself has been rendered
  null

modal.on 'view:action:click:success', ->
  # The modals success button ("Save") has been pressed
  null

Installation

wwl-js-vm-modals requires sass, coffeescript, browserify, hamlify.

Make sure, that for sass and for browserify, the load paths are set up correctly.

// In your applications stylesheet:

// For cmi version:
@import 'wwl-js-vm-modals/base_cmi'

// For marionette-only version:
@import 'wwl-js-vm-modals/base_no_cmi'

# In your js application:

# For cmi version:
VmClass = require('wwl-js-vm-modals')

# For marionette-only version:
VmClass = require('wwl-js-vm-modals/lib/vm')

Cmi Version

Important: To run the cmi version, you need to install webcomponents and link at least:

%link{ rel: "import", href: "../paper-spinner/paper-spinner.html" }
%link{ rel: "import", href: "../cmi-button/cmi-button.html" }
%link{ rel: "import", href: "../cmi-button/cmi-button-link.html" }
%link{ rel: "import", href: "../cmi-dialog/cmi-dialog-scrollable.html" }
%link{ rel: "import", href: "../cmi-dialog/cmi-dialog.html" }
%link{ rel: "import", href: "../cmi-dialog/cmi-dialog-extended.html" }

Unfortunatly, it's not easy to automate this.

General concept

The modals stack is maintained by a Backbone.Collection with Backbone.Model instances. Each model represents a modal you can see. A modal model requires at least the attribute view on initialization.

Every action happening on your modals view, you can listen to via the model.

The modal won't close or save automatically. You need to maintain this.

The view you're passing in and the modal view itself don't have any knowledge about each other. E.g. if you need to persist form data from your inside view on 'view:action:click:success', pass that information to your inner view by hand!

Modal Model Attributes

| attribute | type | default | description | |-----------|------|---------|-------------| | view | Backbone.View or same api | null | required - The view that will be rendered as content. | | visible | boolean | true | You can add modals to the collection without displaying them. Internally, we're using a Backbone.VirtualCollection to only display modals that got visible true. | | closeButton | boolean | true | If the x close button is visible. | | backTopButton | boolean | false | If the back button on top is visible. | | backBottomButton | boolean | false | If the back button on bottom is visible. | | headline | string | '' | The headline of the modal. | | cancelButton | string | '' | The text of the cancel button. If null, undefined or empty string, it will hide the button. | | doneButton | string | '' | The text of the done button. If null, undefined or empty string, it will hide the button. | | successButton | string | '' | The text of the success button (colored). If null, undefined or empty string, it will hide the button. | | noCancelOnEscKey | boolean | true | If true, you won't get a cancel event when pressing esc. | | disableBackdropClickClose | boolean | false | Fire close event when clicking the backdrop. | | viewId | string | '' | Set an id for the modal view (not your view you're passing in). | | viewClass | string | '' | Set classes for the modal view (not your view you're passing in). | | destroyOnCancel | boolean | false | If to destroy the modal model (close modal), if the cancel event is fired. | | destroyOnBackdrop | boolean | false | If to destroy the modal model (close modal), if the backdrop has been clicked. | | destroyOnClose | boolean | false | If to destroy the modal model (close modal), if the close event has been fired. | | | | | | | cmi modal only: | | | | | entryAnimation | string | 'scale-up-animation' | See https://elements.polymer-project.org/elements/neon-animation?active=scale-up-animation |  | exitAnimation | string | 'fade-in-animation' | See https://elements.polymer-project.org/elements/neon-animation?active=scale-up-animation |

Modal Model Events

| event | description | |-------|-------------| | view:beforeRender | Marionette event on the modal item view | | view:render | Marionette event on the modal item view | | view:beforeAttach | Marionette event on the modal item view | | view:attach | Marionette event on the modal item view | | view:beforeShow | Marionette event on the modal item view | | view:show | Marionette event on the modal item view | | view:domRefresh | Marionette event on the modal item view | | view:beforeDestroy | Marionette event on the modal item view | | view:destroy | Marionette event on the modal item view | | view:action:click:backdrop | When clicked the backdrop. | | view:action:click:cancel | When clicked the cancel button. | | view:action:click:done | When clicked the done button. | | view:action:click:success | When clicked the success button. | | view:action:click:back | When clicked on of the back buttons. | | view:action:click:close | When clicked the close button (x). |

With or without cmi webcomponents

By default the modal is build on base of curo-material-interface.

So you'll get the webcomponents implementation if you call:

require('wwl-js-vm-modals')

Or explicit:

require('wwl-js-vm-modals/lib/vm_cmi')

If you want to have a marionette-only implementation, you would require the following:

require('wwl-js-vm-modals/lib/vm')