Maxwell Modal
Bootstrap and Backbone Powered Modal Views
Install
npm install maxwell-modal
Usage
There are three types of modals available
Modal
This is the basic modal. It has two types of configurations
- Content
- Header, Body, Footer
*/ footer: null, /** * header html * @type */ header: null, /** * content html * @type */ content: null, /** * body html * @type */ body: null, /** * Function that executes on modal show * @type */ onShow: null, /** * Function that executes on modal hide * @type */ onHide: null, /** * whether the modal is able to be dismissed * @type */ dismissable : true, /** * when using the confirm or alert modals, setting the title appropriately * @type */ title: null, yesLabel : 'Yes', /** * what occurs when the user clicks no * @type * @returns if false the hide function won't execute */ onNo : null, noLabel : 'No', /** * what occurs when the user clicks yes/ok * @type * @returns if false the hide function won't execute */ onYes : null}
Content
If the content property is present it will operate in content mode.
var ContentModal = MaxwellModalModal; var contentView = ; ;
This will create a modal that contains the word foo and nothing else.
Content can take a DOM element, rendered html, rendered backbone view, handlebars template output or a function.
Header,Body,Footer
Header,Body,Footer works similarly except it uses 3 different views for each section of the bootstrap modal.
var ContentModal = MaxwellModalModal; var contentView = ; ;
Note the handlebars template for the header, rendered html for the body. These could take a rendered backbone view.
Confirm Modal
A replacement for the confirm box
+========================+
| Title |
+------------------------+
| body |
| |
+------------------------+
| noLabel | yesLabel |
+------------------------+
Options
*/ body: null, /** * Function that executes on modal show * @type */ onShow: null, /** * Function that executes on modal hide * @type */ onHide: null, /** * whether the modal is able to be dismissed * @type */ dismissable : true, /** * when using the confirm or alert modals, setting the title appropriately * @type */ title: null, yesLabel : 'Yes', /** * what occurs when the user clicks no * @type * @returns if false the hide function won't execute */ onNo : null, noLabel : 'No', /** * what occurs when the user clicks yes/ok * @type * @returns if false the hide function won't execute */ onYes : null}
var ContentModal = MaxwellModalConfirmModal;
This produces a modal with two buttons, yes and no. their labels are configurable as well as what occurs on yes and on no.
Alert Modal
A replacement for the alert box
+========================+
| Title |
+------------------------+
| body |
| |
+------------------------+
| yesLabel |
+------------------------+
Options
*/ body: null, /** * Function that executes on modal show * @type */ onShow: null, /** * Function that executes on modal hide * @type */ onHide: null, /** * whether the modal is able to be dismissed * @type */ dismissable : true, /** * when using the confirm or alert modals, setting the title appropriately * @type */ title: null, yesLabel : 'Yes', /** * what occurs when the user clicks yes/ok * @type * @returns if false the hide function won't execute */ onYes : null}
var ContentModal = MaxwellModal.AlertModal.extend({
onShow: onShow,
onHide: onHide,
onYes: onYes,
body: 'Your computer is about to explode.',
title: 'Explosion?',
yesLabel: 'OK'
});
TO TEST:
run npm test
TODO
- better documentation
- tests
- make sure all subviews are destroyed properly
- take react components for sub views