Modal

Daryl Hedley edited this page Feb 4, 2015 · 3 revisions
Clone this wiki locally

Description

If a plugin needs a popup modal then the Modal module is the way to go. It provides a popup wrapper around custom views with a top toolbar with a "Done" and "Cancel" button.

API

Origin.trigger('modal:open', view, options, context);

This will trigger a new Modal popup. The view argument should be the view you want to display inside the Modal wrapper. The options object can take the following key/value pairs:

title: String // Title to be displayed in the top modal bar

body: String // Instruction text to be display beneath the top toolbar but above the custom view

doneButtonText: String // Text displayed in the Done button

cancelButtonText: String // Text displayed in the Cancel button

_shouldShowCancelButton: Boolean // Default true - Shows Cancel button

_shouldShowDoneButton: Boolean // Default true - Shows Done button

_shouldDisableCancelButton: Boolean // Default false - Disables Cancel button

_shouldDisableDoneButton: Boolean // Default false - Disables Done button

onCancel: Function // Callback on cancel button clicked

onUpdate: Function // Callback on update button clicked

These arguments also get passed into the custom view which can enable passing of models or collections in the standard way Backbone allows.

Origin.trigger('modal:closed')

This is called when the Modal view is closed by either clicking the "Done" or "Cancel" buttons in the top toolbar. This can be used to clean up extra subviews other than the custom Modal view. (See below on how the main custom Modal view is removed).

Creating a custom Modal view

A custom Modal view needs to have a method that returns any data you want to push back into the onUpdate and onCancel callbacks. Removing of the custom Modal view is handled by the modalView and calls the remove() method.

Origin.trigger('modal:onCancel')

Closes the modal window triggering the onCancel callback passing in the data from the custom Modal view, cleaning up of the custom Modal view and triggers the event 'modal:closed'.

Origin.trigger('modal:onDone')

Closes the modal window triggering the onDone callback passing in the data from the custom Modal view, cleaning up of the custom Modal view and triggers the event 'modal:closed'.

Origin.trigger('modal:disableCancelButton')

Disables the 'Cancel' button

Origin.trigger('modal:disableDoneButton')

Disables the 'Done' button

Origin.trigger('modal:enableCancelButton')

Enables the 'Cancel' button

Origin.trigger('modal:enableDoneButton')

Enables the 'Done' button