Spark Framework

Class: DraggableView

DraggableView

new DraggableView(options, data)

Draggable view for Spark Framework. It uses battle tested goog.fx.Dragger as a drag engine but comes with more fancy methods like containers. If you pass a container parameter which should be a DOM element or a View instance then the drag will only be allowed inside that container element or view. Draggable view listens for window resize and sets its limit again to not allow dragging offset of the container. You can also want to unset the container if you don't want to force dragging inside an element. By default, dragging will be allowed for all element. If you want to use a handle pass handle option either a view instance or an element.

Parameters:
Name Type Argument Description
options Object <optional>

Class options.
data * <optional>

Class data
Source:

Extends

Members

<static> Axes :string

Orientatons enum.

Type:
  • string
Properties:
Name Type Default Description
x string x
y string y
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> 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.

Source:

destroy()

Destroyes the component and removes the resize listener binded to window and disposes the goog.fx.Dragger instance to make sure there is no leaking event listeners.

Source:

disable()

Disable view.

Inherited From:
Source:

disableDrag()

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

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.

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.

Source:
Returns:

axis Drag allowed axis.

Type
spark.components.DraggableView.Axes | 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.

Source:
Returns:
Type
Element

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.

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

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.
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.
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.

Source:

setOptions(options)

Sets options object of this class.

Parameters:
Name Type Description
options Object

Options object.
Inherited From:
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.

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