Class: Overlay

Overlay(props)

new Overlay(props)

Mobile modal window

Parameters:
Name Type Description
props Object
Properties
Name Type Attributes Description
events Object

custom events to be bound to the overlay.
headerChrome boolean <optional>

Whether the header has chrome.
headerActions Array.<View> <optional>

children (usually buttons or icons) that should be placed in the header actions. Ignored when headers used.
heading string <optional>

heading for the overlay header. Use headers where overlays require more than one header. Ignored when headers used.
noHeader boolean

renders an overlay without a header
headers Array.<Element> <optional>

allows overlays to have more than one header. When used it is an array of jQuery Objects representing headers created via the header util function. It is expected that only one of these should be visible. If undefined, headerActions and heading is used.
footerAnchor Object <optional>

options for an optional Anchor that can appear in the footer
onBeforeExit function

allows a consumer to prevent exits in certain situations. This callback gets the following parameters:

    1. the exit function which should be run after the consumer has made their changes.
    1. the cancel function which should be run if the consumer explicitly changes their mind
Source:
Fires:

Extends

Members

defaults

A set of default options that are merged with options passed into the initialize function.

Properties:
Name Type Description
defaults Object

Default options hash.

Properties
Name Type Attributes Description
el jQuery.Object | string <optional>

jQuery selector to use for rendering.
skipTemplateRender boolean <optional>

Whether to enhance views already in DOM. When enabled, the template is disabled so that it is not rendered in the DOM. Use in conjunction with View::defaults.$el to associate the View with an existing already rendered element in the DOM.
Inherited From:
Source:

isTemplateMode

Tells the View to ignore tagName and className when constructing the element and to rely solely on the template

Properties:
Name Type Description
isTemplateMode boolean
Inherited From:
Source:

tagName

Name of tag that contains the rendered template

Properties:
Name Type Description
tagName string
Inherited From:
Source:

template

Properties:
Name Type Description
Specifies Mixed

the template used in render(). Object|string
Inherited From:
Source:

templatePartials

Specifies partials (sub-templates) for the main template. Example:

Properties:
Type Description
Object
Inherited From:
Source:
Example
// example content for the "some" template (sub-template will be
    // inserted where {{>content}} is):
    // <h1>Heading</h1>
    // {{>content}}

    oo.mfExtend( SomeView, View, {
      template: util.template( '<source-code>' ),
      templatePartials: { content: util.template( '<source-code>' ) }
    }

Methods

(protected, static) make(options, view) → {Overlay}

Factory method for an overlay with a single child

Parameters:
Name Type Description
options Object
view View
Source:
Returns:
Type
Overlay

after(…contents) → {this}

Parameters:
Name Type Attributes Description
contents string | Node | Array.<Node> | jQuery <repeatable>
Overrides:
Source:
Returns:
Type
this

append(…contents) → {this}

Parameters:
Name Type Attributes Description
contents string | Node | Array.<Node> | jQuery <repeatable>
Overrides:
Source:
Returns:
Type
this

appendTo(target) → {this}

Parameters:
Name Type Description
target string | Node | Array.<Node> | jQuery
Inherited From:
Source:
Returns:
Type
this

before(…contents) → {this}

Parameters:
Name Type Attributes Description
contents string | Node | Array.<Node> | jQuery <repeatable>
Overrides:
Source:
Returns:
Type
this

delegate(eventName, selector, listener)

Add a single event listener to the view's element (or a child element using selector). This only works for delegate-able events: not focus or blur.

Parameters:
Name Type Description
eventName string
selector string
listener function
Inherited From:
Source:

delegateEvents(events)

Set callbacks, where this.options.events is a hash of

{ 'event selector': 'callback' }

{ 'mousedown .title': 'edit', 'click .button': 'save', 'click .open': function(e) { ... } }

pairs. Callbacks will be bound to the view, with this set properly. Uses event delegation for efficiency. Omitting the selector binds the event to this.el.

Parameters:
Name Type Description
events Object

Optionally set this events instead of the ones on this.
Inherited From:
Source:

detach(selectoropt) → {this}

Parameters:
Name Type Attributes Description
selector string <optional>
Inherited From:
Source:
Returns:
Type
this

hide() → {boolean}

Detach the overlay from the current view Should not be overriden as soon to be deprecated.

Overrides:
Source:
Returns:

Whether the overlay was successfully hidden or not

Type
boolean

hideSpinner()

Hide the spinner near to the input field.

Source:

initialize(options)

Run once during construction to set up the View

Parameters:
Name Type Description
options Object

Object passed to the constructor.

Properties
Name Type Attributes Description
events Object.<string, string> <optional>
Inherited From:
Source:

insertAfter(target) → {this}

Parameters:
Name Type Description
target string | Node | Array.<Node> | jQuery
Inherited From:
Source:
Returns:
Type
this

insertBefore(target) → {this}

Parameters:
Name Type Description
target string | Node | Array.<Node> | jQuery
Inherited From:
Source:
Returns:
Type
this

onExitClick(ev)

ClickBack event handler

Parameters:
Name Type Description
ev Object

event object
Source:

parseHTML(html) → {jQuery.Object}

See parseHTML method of util singleton

Parameters:
Name Type Description
html string

to turn into a jQuery object.
Inherited From:
Source:
Returns:
Type
jQuery.Object

postRender()

Function called after the view is rendered. Can be redefined in objects that extend View.

Overrides:
Source:

prepend(…contents) → {this}

Parameters:
Name Type Attributes Description
contents string | Node | Array.<Node> | jQuery <repeatable>
Overrides:
Source:
Returns:
Type
this

prependTo(target) → {this}

Parameters:
Name Type Description
target string | Node | Array.<Node> | jQuery
Inherited From:
Source:
Returns:
Type
this

preRender()

Function called before the view is rendered. Can be redefined in objects that extend View.

Inherited From:
Source:

remove(selectoropt) → {this}

Parameters:
Name Type Attributes Description
selector string <optional>
Inherited From:
Source:
Returns:
Type
this

render(data)

Fill this.$el with template rendered using data if template is set.

Parameters:
Name Type Description
data Object

Template data. Will be merged into the view's options
Inherited From:
Source:

show()

Attach overlay to current view and show it.

Overrides:
Source:

(protected) showHidden(className)

Show elements that are selected by the className. Also hide .hideable elements Can't use jQuery's hide() and show() because show() sets display: block. And we want display: table for headers.

Parameters:
Name Type Description
className string

CSS selector to show
Source:

showSpinner()

Shows the spinner right to the input field.

Source:

undelegate(eventName, selector, listener)

A finer-grained undelegateEvents for removing a single delegated event. selector and listener are both optional.

Parameters:
Name Type Description
eventName string
selector string
listener function
Inherited From:
Source:

undelegateEvents()

Clears all callbacks previously bound to the view by delegateEvents. You usually don't need to use this, but may wish to if you have multiple views attached to the same DOM element.

Inherited From:
Source:

Events

hide

Fired when the overlay is closed.

Source: