Static Methods

Lens.Components.Modal.alert(options, onDismiss) → {Modal} Components/modal.js, line 360

Shows a modal dialog with a message and a button to dismiss the modal.

Argument	Type	Attributes	Description
options	Object		Object with options. Alternatively, a single string, in which case this string will be used as options.text and all other options will be left as the default. Properties Argument Type Attributes Description text String Body text for the alert. title String <optional> Title of the alert. Default: no title. width String <optional> CSS width of the alert. Default: 50%. height String <optional> CSS height of the alert. Default: None. hideBackdrop Boolean <optional> Optional backdrop of the alert. Default: Shows backdrop. hideBorder Boolean <optional> Optional border of the alert. Default: Shows border. buttonText String <optional> Text for the button to dismiss the alert.
onDismiss	function	<optional>	Function to be called when the alert is dismissed.

Examples

Modal.alert("foo");

Modal.alert({
    title: "Notice",
    text: "A thing happened",
    buttonText: "Yay!"
}, function() {
    // called when the alert is dismissed
});

Lens.Components.Modal.buttons(options) → {Modal} Components/modal.js, line 561

Shows a modal dialog with a message and arbitrary buttons.

Argument	Type	Description
options	Object	Object with options. Properties Argument Type Attributes Description buttons Array.<Object> Array of buttons. Each button is specified as an object with a "text" property (which specifies the text displayed on the button), a "callback" property (which is called when the button is pressed), and an optional "class" property (which specifies a CSS class to give to the button, such as btn-primary). image String <optional> Path to image for the alert. Default: no image. text String <optional> Body text for the alert. Default: no text. title String <optional> Title of the alert. Default: no title. width String <optional> CSS width of the alert. Default: 50%. height String <optional> CSS height of the alert. Default: None. buttonOrder String <optional> Display order of buttons. "vertical" or "horizontal". Default: horizontal. hideBorder Boolean <optional> Optional border of the alert. Default: Shows border. hideBackdrop Boolean <optional> Optional backdrop of the alert. Default: Shows backdrop.

Examples

Modal.confirm("foo", function(response) {
    // response is true or false
});

Modal.buttons({
    title: "Which is best?",
    text:  "Pick a flavor:",
    buttons: [
        {text: "vanilla",    class: "white-button", callback: function(){}},
        {text: "chocolate",  class: "brown-button", callback: function(){}},
        {text: "strawberry", class: "red-button",   callback: function(){}}
    ]
})

Lens.Components.Modal.confirm(options, callback) → {Modal} Components/modal.js, line 457

Shows a modal dialog with a message and affirmative and negative buttons.

Argument	Type	Description
options	Object	Object with options. Alternatively, a single string, in which case this string will be used as options.text and all other options will be left as the default. Properties Argument Type Attributes Description text String Body text for the alert. title String <optional> Title of the alert. Default: no title. width String <optional> CSS width of the alert. Default: 50%. height String <optional> CSS height of the alert. Default: None. hideBorder Boolean <optional> Optional border of the alert. Default: Shows border. hideBackdrop Boolean <optional> Optional backdrop of the alert. Default: Shows backdrop. okText String <optional> Text for the affirmative button. Defaults to "OK". cancelText String <optional> Text for the negative button. Default to "Cancel".
callback	function	Function to be called when the alert is dismissed. Will get a single argument: true if the affirmative button was pressed, or false if the negative button was pressed.

Examples

Modal.confirm("foo", function(response) {
    // response is true or false
});

Modal.confirm({
    title:      "Tell Me",
    text:       "Should I continue?",
    okText:     "sure!",
    cancelText: "nope."
}, function(response) {});

Lens.Components.Modal.images(options) → {Modal} Components/modal.js, line 674

Shows a modal dialog with a selectable images.

Argument	Type	Description
options	Object	Object with options. Properties Argument Type Attributes Description images Array.<Object> Array of images. Each image is specified as an object with a "src" property (which specifies the image that will be displayed), a "callback" property (which is called when the image is pressed and passed the "src" string of the image that was pressed), and an optional "class" property (which specifies a CSS class to give to the image). By default, the images are scaled to fit a scrollable grid three images wide (each 300px by 250px). Note: two classes are used to apply default styles, so CSS styles defined with the "class" may need to be more specific or use "!important" to override the default styling for that image (ex. for width and height). See http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ for an explanation of CSS precedence. text String <optional> Body text for the modal. Default: no text. title String <optional> Title of the modal. Default: no title. width String <optional> CSS width of the alert. Default: 50%. height String <optional> CSS height of the alert. Default: None. hideBorder Boolean <optional> Optional border of the alert. Default: Shows border. hideBackdrop Boolean <optional> Optional backdrop of the alert. Default: Shows backdrop.

Examples

Modal.images({title: "Image",
        images: [{src: "/1.png", callback: function(src) {
    alert("You selected image 1!");
});

Modal.images({
    title: "Image Select",
    text:  "Pick an image to insert:",
    images: [
        {src: "/an-img.jpg", class: "big-img", callback: function(src){}},
        {src: "http://example.com/img.png", class: "med-img", callback: function(src){}},
        {src: "data:image/png;base64,iVBdAAA...", class: "small-img", callback: function(src){}}
    ]
})

Lens.Components.Modal.select(options, callback) → {Modal} Components/modal.js, line 757

Shows a modal dialog with a message and a list of options.

Argument	Type	Description
options	Object	Object with options. Properties Argument Type Attributes Description options Array.<String> Array of selectable options. text String <optional> Body text for the alert. Default: no text. title String <optional> Title of the alert. Default: no title. width String <optional> CSS width of the alert. Default: 50%. height String <optional> CSS height of the alert. Default: None. hideBorder Boolean <optional> Optional border of the alert. Default: Shows border. hideBackdrop Boolean <optional> Optional backdrop of the alert. Default: Shows backdrop.
callback	function	A callback to invoke with the selected option.

Example

Modal.select({
    title:    "Where do you live?",
    text:     "Pick a country:",
    options:  ["US", "UK", "Ireland", "Canada", "Mexico", "France", "Germany"]
}, function(response) { })

Lens.Components.Modal.textEntry(initialText, callback) Components/modal.js, line 816

Brings up the text entry modal.

Argument	Type	Description
initialText	function	The initial text in the text box.
callback	function	Called when the user is done entering text. If the user accepted their text, gets the text as an argument. If the user cancelled, gets initialText as an argument.

Instance Properties

el: Element

The modal element that should be populated with content

Instance Methods

destroy() Components/modal.js, line 262

Removes the modal from the DOM.

destroyed(callback) → {Binding} Components/modal.js, line 303

Registers a function to be called whenever a Modal is destroyed.

Argument	Type	Description
callback	function	The function to call. Gets a Modal as an argument.

Returns:

A Binding that allows this handler to be cleared.

hidden(callback) → {Binding} Components/modal.js, line 290

Registers a function to be called whenever a Modal is hidden.

Argument	Type	Description
callback	function	The function to call. Gets a Modal as an argument.

Returns:

A Binding that allows this handler to be cleared.

hide(onComplete) Components/modal.js, line 236

Hides the modal.

Argument	Type	Attributes	Description
onComplete	function	<optional>	Called when the modal is fully hidden.

show(onComplete) Components/modal.js, line 215

Shows the modal.

Argument	Type	Attributes	Description
onComplete	function	<optional>	Called when the modal is fully shown.

shown(callback) → {Binding} Components/modal.js, line 277

Registers a function to be called whenever a Modal is shown.

Argument	Type	Description
callback	function	The function to call. Gets one Modal as an argument.

Returns:

A Binding that allows this handler to be cleared.