wwl-js-vm-modals

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')