Spark Framework

Class: Modal

Modal

Modal view with overlay option for Spark Framework. By default modal will be appended to document body and it will have an overlay. When overlay clicked the modal will be destroyed. You should pass title and content params of the modal in your options. You can also customize buttons. See @createButtons_ for more information.

Parameters:
Name Type Argument Description
options Object <optional>

Class options.
data * <optional>

Class data
Source:

Extends

Members

<private, static> ButtonOptions

Preset button options.

Source:

<static> Buttons :Array.<string>

Preset buttons enum. Created buttons will emit 'ModalButtonClicked' event width button value.

Type:
  • Array.<string>
Properties:
Name Type Default Description
YES Array.<string> ARRAYLIT
NO Array.<string> ARRAYLIT
YES_NO Array.<string> ARRAYLIT
YES_NO_CANCEL Array.<string> ARRAYLIT
Source:

Methods

addClass(cssClass)

Adds new class name to element.

Parameters:
Name Type Description
cssClass string

New class name for the element.
Inherited From:
Source:

appendToDocumentBody()

Appends view into document's body.

Inherited From:
Source:

appendView(view)

Appends a new view into this view's element as a child.

Parameters:
Name Type Description
view spark.core.View

A spark.View instance to append.
Inherited From:
Source:

<private> bindEvents_()

This method is responsible from binding DOM events to the element of this view. It uses native DOM event names which is all lowercase. If your options has an event name and a callback function in events object View will bind and listen those events automatically.

Inherited From:
Source:

<private> createButtons_(buttons)

Creates modal buttons. You can use preset buttons like YES, YES_NO or you can pass custom array which contains button options in it. Preset buttons will emit ModalButtonClicked with button title. You can programatically listen that event and look for button title to understand which button is clicked. Custom buttons should contain its callback. No other events will be fired for custom buttons. All buttons will be stored in buttons object with its names.

Parameters:
Name Type Description
buttons spark.components.Modal.Buttons | Array.<Object>

Preset button value in Buttons enum or custom buttons array.
Source:

<private> createCloseButton_()

Creates a close button to top right of the modal.

Source:

<private> createContentView_(content)

Creates modal content.

Parameters:
Name Type Description
content string

Modal content.
Source:

<private> createDomElement_()

Creates the element with the configuration passed to constructor.

Inherited From:
Source:

<private> createDragger_()

Creates an instance of goog.fx.Dragger to operate on it.

Inherited From:
Source:

<private> createTitleView_(title)

Creates modal content.

Parameters:
Name Type Description
title string

Modal title.
Source:

destroy()

Destroys the modal. Removes all elements from DOM and also unlistens resize event handler binded to window to set positions correctly. If your modal don't closable or you want to handle close action programatically, when you want to remove the modal you should call this method to do a proper cleanup.

Source:

disable()

Disable view.

Inherited From:
Source:

disableDrag()

Set dragging disabled. Users won't be able to drag the element unless enableDrag called.

Inherited From:
Source:

emit(eventName, data)

Dispatches an event and calls all listeners listening for events of this event. See also goog.events.Listenable.prototype.dispatchEvent

Parameters:
Name Type Argument Description
eventName string

Name of the event.
data * <optional>

Data which will passed to listeners
Inherited From:
Source:

enable()

Enable view.

Inherited From:
Source:

enableDrag()

Set dragging enabled.

Inherited From:
Source:

freeze()

Freezes object to prevent adding new properties, updating or deleting existing properties.

Inherited From:
Source:

getAttribute(name)

Native getAttribute wrapper.

Parameters:
Name Type Description
name string

Atrribute name.
Inherited From:
Source:

getAxis() → {spark.components.DraggableView.Axes|null}

Returns draw allowed axis. If it returns null drag will be allowed in both way.

Inherited From:
Source:
Returns:

axis Drag allowed axis.

Type
spark.components.DraggableView.Axes | null

getButtonByTitle(title) → {spark.components.Button|null}

Returns button instance by its title.

Parameters:
Name Type Description
title string

Button title.
Source:
Returns:
Type
spark.components.Button | null

getChildren() → {Array.<spark.core.View>}

Returns the child views.

Inherited From:
Source:
Returns:

DOM element of this view.

Type
Array.<spark.core.View>

getClass() → {string}

Returns class name of the element.

Inherited From:
Source:
Returns:

Class name.

Type
string

getClassList() → {Array}

Returns class list of the element.

Inherited From:
Source:
Returns:

List of class names.

Type
Array

getContainer() → {Element}

Returns drag container.

Inherited From:
Source:
Returns:
Type
Element

getContentView() → {spark.core.View}

Returns content view.

Source:
Returns:
Type
spark.core.View

getCssClass(options, optionalClass)

Helper method to set css class to options set.

Parameters:
Name Type Argument Description
options Object

Class options.
optionalClass string <optional>

Optinal CSS class which will added to default.
Inherited From:
Source:

getData() → {*}

Returns class data.

Inherited From:
Source:
Returns:

Class data.

Type
*

getDomId() → {string|null}

Returns the DOM id if exists, otherwise it will return null.

Inherited From:
Source:
Returns:
Type
string | null

getElement() → {Element}

Returns the DOM element.

Inherited From:
Source:
Returns:

DOM element of this view.

Type
Element

<private> getHandleElement_() → {Element|null}

Returns handle element if exists.

Inherited From:
Source:
Returns:
Type
Element | null

getHeight() → {number}

Returns the height of the element.

Inherited From:
Source:
Returns:

View element height.

Type
number

getOption() → {*}

Returns value of a key in options object.

Inherited From:
Source:
Returns:

Value of key or null.

Type
*

getOptions() → {Object}

Returns all options object.

Inherited From:
Source:
Returns:

Options object.

Type
Object

getOverlay() → {spark.components.Overlay|null}

Returns Overlay instance if exists.

Source:
Returns:
Type
spark.components.Overlay | null

getTitleView() → {spark.core.View}

Returns title view.

Source:
Returns:
Type
spark.core.View

getUid() → {string}

Return unique id.

Inherited From:
Source:
Returns:

Unique id of this component.

Type
string

getWidth() → {number}

Returns the width of the element.

Inherited From:
Source:
Returns:

View element width.

Type
number

hasClass(cssClass) → {boolean}

Returns true if element has that class name.

Parameters:
Name Type Description
cssClass string

Name of the class which will be tested.
Inherited From:
Source:
Returns:

Whether element has a class name or not.

Type
boolean

isDestroyed() → {boolean}

Returns the object's destroy state.

Inherited From:
Source:
Returns:

Whether the object is destroyed or not.

Type
boolean

isDisabled()

Returns the current disabled state of the button.

Inherited From:
Source:

off()

Override Object::off to remove events binded to DOM element.

Inherited From:
Source:

on()

Override Object::on to support two way binding for DOM events.

Inherited From:
Source:

once()

Override Object::once to support two way binding for DOM events.

Inherited From:
Source:

removeAttribute(name)

Native removeAttribute wrapper.

Parameters:
Name Type Description
name string

Atrribute name.
Inherited From:
Source:

removeClass(cssClass)

Remove a class name from the element.

Parameters:
Name Type Description
cssClass string

Name of the class which will be removed.
Inherited From:
Source:

removeFromDocument() → {boolean}

Removes element from DOM if it is in DOM.

Inherited From:
Source:
Returns:

Whether element removed from document or not.

Type
boolean

render(target)

Renders element into another View instance or a DOM element. Be aware that this method only appends the element of this class into another element. If the parent element is not in DOM, this method will not append the parent into DOM. Also you can use this method with renderTo option. If you pass renderTo as a View instance or DOM element, View will call render method by default.

Parameters:
Name Type Description
target spark.core.View | Element

Target view or element to be rendered.
Inherited From:
Source:

setAttribute(name, value)

Native setAttribute wrapper.

Parameters:
Name Type Description
name string

Atrribute name.
value string

Attribute value.
Inherited From:
Source:

setAxis(axis)

Set allowed drag axis. Orientation should be x or y. If you want to remove axis lock after set the axis you can call this method with a null parameter.

Parameters:
Name Type Description
axis spark.components.DraggableView.Axes | null

Allowed drag axis. Use null to remove axis lock.
Inherited From:
Source:

setClass(cssClass)

Sets the class name of element. This will override existing class names. Use @addClass if you want to add new class name to the element.

Parameters:
Name Type Description
cssClass string

Class name.
Inherited From:
Source:

setContainer(container)

Set container to force dragging inside that container element.

Parameters:
Name Type Description
container spark.core.View | Node

Container to force dragging.
Inherited From:
Source:

setData(data)

Sets data of this class.

Parameters:
Name Type Description
data *

Data passed to class.
Inherited From:
Source:

setDomId(domId)

Sets DOM id.

Parameters:
Name Type Description
domId string

Id of the element.
Inherited From:
Source:

setHeight(height)

Sets height of this view's DOM element.

Parameters:
Name Type Description
height string | number

Height of the element. It can be string with 'px' value or just number.
Inherited From:
Source:

<private> setLimits_()

Sets drag limits relative to container element. This means dragging won't be available outside of that container element.

Inherited From:
Source:

setOptions(options)

Sets options object of this class.

Parameters:
Name Type Description
options Object

Options object.
Inherited From:
Source:

<private> setOverlay_()

Sets overlay for modal. By default, modal will be destroyed when overlay is clicked. To change this behaviour pass blocking: false in modal options.

Source:

setPosition()

Sets left and top values to center modal in the viewport.

Source:

setTemplate(template)

Basic templating support for Spark Framework. Currently templates can include variable tags like in Mustache templates. This can be changed in the future versions of the framework.

Variable tags should start with {{ and end with }}. That's borrowed from Mustache. Tags are not whitespace sensitive, so {{name}} and {{ name }} is the same.

Template should also be a function. Just make sure that function returns a string which will be the template. setTemplate will call the template function by passing the data of this View. So you can use class data in your template function. This will allow framework to easily integrate other template engines.

Spark Framework will use Closure Templates as it's default template engine. This is because to maintain the compiled code size advantage. I am also considering to support Mustache and Handlebar templates in Spark.

Parameters:
Name Type Argument Description
template string | function <optional>

HTML string of the element or function which will return the html string. Function will be called with class data. FIXME: Fix annotation for template variable, it should be {string|Function}
Inherited From:
Source:

<private> setUid_()

Sets uid.

Inherited From:
Source:

setWidth(width)

Sets width of this view's DOM element.

Parameters:
Name Type Description
width string | number

Width of the element. It can be string with 'px' value or just number.
Inherited From:
Source:

toggle()

Toggle view state. Disable if enabled, enable if disabled.

Inherited From:
Source:

unsetContainer()

Unset container to free dragging area.

Inherited From:
Source:
Spark Framework by Fatih Acet
Copyright © 2014 - Fatih Acet
Documentation generated by JSDoc 3.2.2 on 2015-07-19T22:09:32+00:00 using the DocStrap template.