StructureJS

0.15.2

A class based utility library for building modular and scalable web platform applications. Features opt-in classes and utilities which provide a solid foundation and toolset to build your next project.

DOMElement Class

Extends DisplayObjectContainer
Defined in: ts/display/DOMElement.ts:7
Module: view
Parent Module: StructureJS

The DOMElement class is the base view class for all objects that can be placed into the HTML DOM.

Index

Show:

Properties

Methods

Properties

$element JQuery public

Defined in ts/display/DOMElement.ts:142

A cached reference to the jQuery DOM element

Default: null

_isReference Boolean protected

Defined in ts/display/DOMElement.ts:152

If a jQuery object was passed into the constructor this will be set as true and this class will not try to add the view to the DOM since it already exists.

_listeners Any protected

Inherited from EventDispatcher: ts/event/EventDispatcher.ts:26

Holds a reference to added listeners.

_params Any protected

Defined in ts/display/DOMElement.ts:172

Holds onto the value passed into the constructor.

Default: null

_type String protected

Defined in ts/display/DOMElement.ts:162

Holds onto the value passed into the constructor.

Default: null

alpha Number public

Inherited from DisplayObject: ts/display/DisplayObject.ts:124

Indicates the alpha transparency value of the object specified.

checkCount Number public

Defined in ts/display/DOMElement.ts:121

Tracks number of times an element's width has been checked in order to determine if the element has been added to the DOM.

children Array. public

Inherited from DisplayObjectContainer: ts/display/DisplayObjectContainer.ts:28

A reference to the child DisplayObject instances to this parent object instance.

ctx CanvasRenderingContext2D public

Inherited from DisplayObject: ts/display/DisplayObject.ts:27

The CanvasRenderingContext2D interface provides the 2D rendering context for the drawing surface of a canvas element. This property is only used with the canvas specific display objects.

element HTMLElement public

Defined in ts/display/DOMElement.ts:132

A cached reference to the DOM Element

Default: null

height Number public

Inherited from DisplayObject: ts/display/DisplayObject.ts:67

Indicates the height of the display object, in pixels.

Default: 0

isCreated Boolean public

Inherited from DisplayObject: ts/display/DisplayObject.ts:160

The isCreated property is used to keep track if it is the first time this DisplayObject is created.

Default: false

isEnabled Boolean public

Inherited from ObjectManager: ts/ObjectManager.ts:17

The isEnabled property is used to keep track of the enabled state of the object.

Default: false

mouseChildren Boolean public

Inherited from DisplayObjectContainer: ts/display/DisplayObjectContainer.ts:38

Determines whether or not the children of the object are mouse enabled.

mouseEnabled Boolean public

Inherited from DisplayObject: ts/display/DisplayObject.ts:142

Specifies whether this object receives mouse

name String public

Inherited from DisplayObject: ts/display/DisplayObject.ts:170

Indicates the instance name of the DisplayObject.

numChildren Int public

Inherited from DisplayObjectContainer: ts/display/DisplayObjectContainer.ts:17

Returns the number of children of this object.

Default: 0

parent Any public

Inherited from EventDispatcher: ts/event/EventDispatcher.ts:35

Indicates the object that contains a child object. Uses the parent property to specify a relative path to display objects that are above the current display object in the display list hierarchy and helps facilitate event bubbling.

rotation Number public

Inherited from DisplayObject: ts/display/DisplayObject.ts:115

Indicates the rotation of the DisplayObject instance, in degrees, from its original orientation.

scaleX Number public

Inherited from DisplayObject: ts/display/DisplayObject.ts:97

Indicates the horizontal scale (percentage) of the object as applied from the registration point.

scaleY Number public

Inherited from DisplayObject: ts/display/DisplayObject.ts:106

Indicates the vertical scale (percentage) of an object as applied from the registration point of the object.

sjsId Int public

Inherited from BaseObject: ts/BaseObject.ts:15

The sjsId (StructureJS ID) is a unique identifier automatically assigned to most StructureJS objects upon instantiation.

Default: null

stage Any public

Inherited from DisplayObject: ts/display/DisplayObject.ts:18

The Stage of the display object.

unscaledHeight Number public

Inherited from DisplayObject: ts/display/DisplayObject.ts:87

A property providing access to the unscaledHeight.

Default: 100

unscaledWidth Number public

Inherited from DisplayObject: ts/display/DisplayObject.ts:77

A property providing access to the unscaledWidth.

Default: 100

useHandCursor Boolean public

Inherited from DisplayObject: ts/display/DisplayObject.ts:151

A Boolean value that indicates whether the pointing hand (hand cursor) appears when the pointer rolls over a display object.

visible Boolean public

Inherited from DisplayObject: ts/display/DisplayObject.ts:133

Whether or not the display object is visible.

width Number public

Inherited from DisplayObject: ts/display/DisplayObject.ts:57

Indicates the width of the display object, in pixels.

Default: 0

x Number public

Inherited from DisplayObject: ts/display/DisplayObject.ts:37

A property providing access to the x position.

Default: 0

y Number public

Inherited from DisplayObject: ts/display/DisplayObject.ts:47

A property providing access to the y position.

Default: 0

There are no properties that match your current filter settings. You can change your filter settings in the index section on this page. index

Constructor

DOMElement
(
  • type
  • params
)

Defined in ts/display/DOMElement.ts:7

Parameters:

  • type Object

    [any=null] Either a jQuery object or JavaScript template string reference you want to use as the view. Check out the examples below.

  • params Object

    [any=null] Any data you would like to pass into the jQuery element or template that is being created.

Example:

// Example: Using DOMElement without extending it.
let aLink = new DOMElement('a', {text: 'Google', href: 'http://www.google.com', 'class': 'externalLink'});
this.addChild(aLink);

// Example: A view passing in a jQuery object.
let view = new CustomView($('.selector'));
this.addChild(view);

// Example: A view extending DOMElement while passing in a jQuery object.
class ClassName extends DOMElement {

     constructor($element) {
         super($element);
     }

     create() {
         super.create();

         // Create and add your child objects to this parent class.
     }

     enable() {
         if (this.isEnabled === true) { return; }

         // Enable the child objects and add any event listeners.

         super.enable();
     }

     disable() {
         if (this.isEnabled === false) { return; }

         // Disable the child objects and remove any event listeners.

         super.disable();
     }

     layout() {
         // Layout or update the child objects in this parent class.
     }

     destroy() {
         this.disable();

         // Destroy the child objects and references in this parent class to prevent memory leaks.

         super.destroy();
     }

}

// Example: A view extending DOMElement with a precompiled JavaScript template reference passed in.
class ClassName extends DOMElement {

     constructor() {
         _super();
     }

     create() {
         super.create('templates/home/homeTemplate', {data: 'some data'});

         // Create and add your child objects to this parent class.
     }

     enable() {
         if (this.isEnabled === true) { return; }

         // Enable the child objects and add any event listeners.

         super.enable();
     }

     disable() {
         if (this.isEnabled === false) { return; }

         // Disable the child objects and remove any event listeners.

         super.disable();
     }

     layout() {
         // Layout or update the child objects in this parent class.
     }

     destroy() {
         this.disable();

         // Destroy the child objects and references in this parent class to prepare for garbage collection.

         super.destroy();
     }

}

Methods

_addClientSideId
(
  • child
)
protected

Defined in ts/display/DOMElement.ts:334

Adds the sjsId to the DOM element so we can know what what Class object the HTMLElement belongs too.

Parameters:

  • child DOMElement

    The DOMElement instance to add the sjsId too.

_onAddedToDom () protected

Defined in ts/display/DOMElement.ts:393

Called when the child object is added to the DOM. The method will call DOMElement/layout:method and dispatch the BaseEvent.ADDED_TO_STAGE event.

_removeClientSideId
(
  • child
)
Boolean protected

Defined in ts/display/DOMElement.ts:363

Removes the sjsId and class type from the HTMLElement.

Parameters:

  • child DOMElement

    The DOMElement instance to add the sjsId too.

Returns:

Boolean:

addChild
(
  • child
)
Any chainable

Inherited from DisplayObjectContainer but overwritten in ts/display/DOMElement.ts:293

Parameters:

  • child DOMElement

    The DOMElement instance to add as a child of this object instance.

Returns:

Any:

Returns an instance of itself.

Example:

this.addChild(domElementInstance);

addChildAt
(
  • child
  • index
)
DisplayObjectContainer public chainable

Inherited from DisplayObjectContainer: ts/display/DisplayObjectContainer.ts:81

Adds a child DisplayObject instance to this DisplayObjectContainerContainer instance. The child is added at the index position specified. An index of 0 represents the back (bottom) of the display list for this DisplayObjectContainerContainer object.

Parameters:

  • child DisplayObject

    The DisplayObject instance to add as a child of this object instance.

  • index Int

    The index position to which the child is added. If you specify a currently occupied index position, the child object that exists at that position and all higher positions are moved up one position in the child list.

Returns:

DisplayObjectContainer:

Returns an instance of itself.

addEventListener
(
  • type
  • callback
  • scope
  • [priority=0]
)
public chainable

Inherited from EventDispatcher: ts/event/EventDispatcher.ts:51

Registers an event listener object with an EventDispatcher object so the listener receives notification of an event.

Parameters:

  • type String

    The type of event.

  • callback Function

    The listener function that processes the event. This function must accept an Event object as its only parameter and must return nothing, as this example shows. @example function(event:Event):void

  • scope Any

    Binds the scope to a particular object (scope is basically what "this" refers to in your function). This can be very useful in JavaScript because scope isn't generally maintained.

  • [priority=0] Int optional

    Influences the order in which the listeners are called. Listeners with lower priorities are called after ones with higher priorities.

Example:

 this.addEventListener(BaseEvent.CHANGE, this._handlerMethod, this);

 _handlerMethod(event) {
     console.log(event.target + " sent the event.");
     console.log(event.type, event.data);
 }

addEventListenerOnce
(
  • type
  • callback
  • scope
  • [priority=0]
)
public chainable

Inherited from EventDispatcher: ts/event/EventDispatcher.ts:100

Registers an event listener object once with an EventDispatcher object so the listener will receive the notification of an event.

Parameters:

  • type String

    The type of event.

  • callback Function

    The listener function that processes the event. This function must accept an Event object as its only parameter and must return nothing, as this example shows. @example function(event:Event):void

  • scope Any

    Binds the scope to a particular object (scope is basically what "this" refers to in your function). This can be very useful in JavaScript because scope isn't generally maintained.

  • [priority=0] Int optional

    Influences the order in which the listeners are called. Listeners with lower priorities are called after ones with higher priorities.

Example:

 this.addEventListenerOnce(BaseEvent.CHANGE, this._handlerMethod, this);

 _handlerMethod(event) {
     console.log(event.target + " sent the event.");
     console.log(event.type, event.data);
 }

appendTo
(
  • type
  • [enabled=true]
)

Defined in ts/display/DOMElement.ts:690

Only use this once per application and use used on your main application Class. This selects HTML element that you want the application to have control over. This method starts the lifecycle of the application.

Parameters:

  • type Any

    A string value where your application will be appended. This can be an element id (#some-id), element class (.some-class) or a element tag (body).

  • [enabled=true] Boolean optional

    Sets the enabled state of the object.

Example:

Instantiation Example
This example illustrates how to instantiate your main application or root class.

 const app = new MainClass();
 app.appendTo('body');

contains
(
  • child
)
Boolean public

Inherited from DisplayObjectContainer: ts/display/DisplayObjectContainer.ts:213

Determines whether the specified display object is a child of the DisplayObject instance or the instance itself. The search includes the entire display list including this DisplayObject instance.

Parameters:

Returns:

Boolean:

true if the child object is a child of the DisplayObject or the container itself; otherwise false.

create
(
  • type
  • params
)
Any public chainable

Inherited from DisplayObject but overwritten in ts/display/DOMElement.ts:199

The create function is intended to provide a consistent place for the creation and adding of children to the view. It will automatically be called the first time that the view is added to another DisplayObjectContainer. It is critical that all subclasses call the super for this function in their overridden methods.

This method gets called once when the child view is added to another view. If the child view is removed and added to another view the create method will not be called again.

Parameters:

  • type Object

    [string=div] The HTML tag you want to create or the id/class selector of the template or the pre-compiled path to a template.

  • params Object

    [any=null] Any data you would like to pass into the jQuery element or template that is being created.

Returns:

Any:

Returns an instance of itself.

Example:

// EXAMPLE 1: By default your view class will be a div element:
create() {
     super.create();

     this._childInstance = new DOMElement();
     this.addChild(this._childInstance);
}

// EXAMPLE 2: But lets say you wanted the view to be a ul element:
create() {
     super.create('ul');
}

// Then you could nest other elements inside this base view/element.
create() {
     super.create('ul', {id: 'myId', 'class': 'myClass anotherClass'});

     let li = new DOMElement('li', {text: 'Robert is cool'});
     this.addChild(li);
}

// EXAMPLE 3: So that's cool but what if you wanted a block of html to be your view. Let's say you had the below
// inline Handlebar template in your html file.
<script id="todoTemplate" type="text/template">
     <div id="htmlTemplate" class="js-todo">
         <div id="input-wrapper">
             <input type="text" class="list-input" placeholder="{{ data.text }}">
             <input type="button" class="list-item-submit" value="Add">
         </div>
     </div>
</script>

// You would just pass in the id or class selector of the template which in this case is "#todoTemplate".
// There is a second optional argument where you can pass data for the Handlebar template to use.
create() {
     super.create('#todoTemplate', { data: this.viewData });

}

// EXAMPLE 4: Or maybe you're using grunt-contrib-handlebars, or similar, to precompile hbs templates
create() {
     super.create('templates/HomeTemplate', {data: "some data"});

}

createComponents
(
  • componentList
)
Array. public chainable

Defined in ts/display/DOMElement.ts:652

A way to instantiate view classes by found html selectors.

Example: It will find all children elements of the $element property with the 'js-shareEmail' selector. If any selectors are found the EmailShareComponent class will be instantiated and pass the found jQuery element into the contructor.

Parameters:

  • componentList Selector: string; component: DOMElement

    (Array.<>

Returns:

Array.:

Returns all the items created from this createComponents method.

Example:

 create() {
     super.create();

     this.createComponents([
         {selector: '.js-shareEmail', component: EmailShareComponent},
         {selector: '.js-pagination', component: PaginationComponent},
         {selector: '.js-carousel', component: CarouselComponent}
     ]);
 }

destroy () Void public

Inherited from BaseObject: ts/BaseObject.ts:49

The purpose of the destroy method is to make an object ready for garbage collection. This should be thought of as a one way function. Once destroy is called no further methods should be called on the object or properties accessed. It is the responsibility of those who implement this function to stop all running Timers, all running Sounds, and take any other steps necessary to make an object eligible for garbage collection.

By default the destroy method will null out all properties of the class automatically. You should call destroy on other objects before calling the super.

Returns:

Void:

Example:

destroy() {
     this.disable();

     this._childInstance.destroy();

     super.destroy();
}

disable () public chainable

Inherited from ObjectManager: ts/ObjectManager.ts:60

The disable method is responsible for disabling event listeners and/or children of the containing objects.

Example:

 disable() {
     if (this.isEnabled === false) { return; }

     this._childInstance.removeEventListener(BaseEvent.CHANGE, this.handlerMethod, this);
     this._childInstance.disable();

     super.disable();
 }

dispatchEvent
(
  • event
  • [data=null]
)
public chainable

Inherited from EventDispatcher: ts/event/EventDispatcher.ts:167

Dispatches an event into the event flow. The event target is the EventDispatcher object upon which the dispatchEvent() method is called.

Parameters:

  • event String | BaseEvent

    The Event object or event type string you want to dispatch. You can create custom events, the only requirement is all events must extend BaseEvent.

  • [data=null] Any optional

    The optional data you want to send with the event. Do not use this parameter if you are passing in a BaseEvent.

Example:

 this.dispatchEvent('change');

 // Example: Sending data with the event:
 this.dispatchEvent('change', {some: 'data'});

 // Example: With an event object
 // (event type, bubbling set to true, cancelable set to true and passing data) :
 let event = new BaseEvent(BaseEvent.CHANGE, true, true, {some: 'data'});
 this.dispatchEvent(event);

 // Here is a common inline event object being dispatched:
 this.dispatchEvent(new BaseEvent(BaseEvent.CHANGE));

enable () public chainable

Inherited from ObjectManager: ts/ObjectManager.ts:32

The enable method is responsible for enabling event listeners and/or children of the containing objects.

Example:

enable() {
     if (this.isEnabled === true) { return; }

     this._childInstance.addEventListener(BaseEvent.CHANGE, this.handlerMethod, this);
     this._childInstance.enable();

     super.enable();
}

getChild
(
  • selector
)
DOMElement public

Defined in ts/display/DOMElement.ts:491

Returns a DOMElement object with the first found DOM element by the passed in selector.

Parameters:

  • selector String

    DOM id name, DOM class name or a DOM tag name.

Returns:

DOMElement:

getChildAt
(
  • index
)
DisplayObject

Inherited from DisplayObjectContainer: ts/display/DisplayObjectContainer.ts:226

Returns the child display object instance that exists at the specified index.

Parameters:

  • index Int

    The index position of the child object.

Returns:

DisplayObject:

The child display object at the specified index position.

getChildByCid
(
  • sjsId
)
DisplayObject | Null public

Inherited from DisplayObjectContainer: ts/display/DisplayObjectContainer.ts:238

Gets a DisplayObject by its sjsId.

Parameters:

Returns:

DisplayObject | Null:

getChildIndex
(
  • child
)
Int public

Inherited from DisplayObjectContainer: ts/display/DisplayObjectContainer.ts:200

Returns the index position of a child DisplayObject instance.

Parameters:

Returns:

Int:

The index position of the child display object to identify.

getChildren
(
  • [selector]
)
Array. public

Defined in ts/display/DOMElement.ts:530

Gets all the HTML elements children of this object.

Parameters:

  • [selector] String optional

    You can pass in any type of jQuery selector. If there is no selector passed in it will get all the children of this parent element.

Returns:

Array.:

Returns a list of DOMElement's. It will grab all children HTML DOM elements of this object and will create a DOMElement for each DOM child. If the 'data-sjs-id' property exists is on an HTML element a DOMElement will not be created for that element because it will be assumed it already exists as a DOMElement.

getEventListeners () Array public

Inherited from EventDispatcher: ts/event/EventDispatcher.ts:284

Returns and array of all current event types and there current listeners.

Returns:

Array:

Example:

 this.getEventListeners();

getQualifiedClassName () String public

Inherited from BaseObject: ts/BaseObject.ts:32

Returns the fully qualified class name of an object.

Returns:

String:

Returns the class name.

Example:

let someClass = new SomeClass();
someClass.getQualifiedClassName();

// SomeClass

hasEventListener
(
  • type
  • callback
  • scope
)
Boolean public

Inherited from EventDispatcher: ts/event/EventDispatcher.ts:253

Check if an object has a specific event listener already added.

Parameters:

  • type String

    The type of event.

  • callback Function

    The listener method to call.

  • scope Any

    The scope of the listener object.

Returns:

Boolean:

Example:

 this.hasEventListener(BaseEvent.CHANGE, this._handlerMethod, this);

layout
(
  • ...rest
)
DisplayObject public chainable

Inherited from DisplayObject: ts/display/DisplayObject.ts:201

The layout method provides a common function to handle updating objects in the view.

Parameters:

  • ...rest Array

Returns:

DisplayObject:

Returns an instance of itself.

print () String public

Inherited from EventDispatcher: ts/event/EventDispatcher.ts:298

Prints out each event listener in the console.log

Returns:

String:

Example:

 this.printEventListeners();

 // [ClassName] is listening for the 'BaseEvent.change' event.
 // [AnotherClassName] is listening for the 'BaseEvent.refresh' event.

removeChild
(
  • child
)
Any public chainable

Inherited from DisplayObjectContainer but overwritten in ts/display/DOMElement.ts:567

Removes the specified child object instance from the child list of the parent object instance. The parent property of the removed child is set to null and the object is garbage collected if there are no other references to the child. The index positions of any objects above the child in the parent object are decreased by 1.

Parameters:

  • child DOMElement

    The DisplayObjectContainer instance to remove.

Returns:

Any:

Returns an instance of itself.

removeChildAt
(
  • index
)
public chainable

Defined in ts/display/DOMElement.ts:600

Removes the child display object instance that exists at the specified index.

Parameters:

  • index Int

    The index position of the child object.

removeChildren () DOMElement public chainable

Inherited from DisplayObjectContainer but overwritten in ts/display/DOMElement.ts:615

Removes all child object instances from the child list of the parent object instance. The parent property of the removed children is set to null and the objects are garbage collected if no other references to the children exist.

Returns:

DOMElement:

Returns an instance of itself.

removeEventListener
(
  • type
  • callback
  • scope
)
public chainable

Inherited from EventDispatcher: ts/event/EventDispatcher.ts:133

Removes a specified listener from the EventDispatcher object.

Parameters:

  • type String

    The type of event.

  • callback Function

    The listener object to remove.

  • scope Any

    The scope of the listener object to be removed.

Example:

 this.removeEventListener(BaseEvent.CHANGE, this._handlerMethod, this);

swapChildren
(
  • child1
  • child2
)
DisplayObjectContainer public chainable

Inherited from DisplayObjectContainer: ts/display/DisplayObjectContainer.ts:156

Swaps two DisplayObject's with each other.

Parameters:

Returns:

DisplayObjectContainer:

Returns an instance of itself.

swapChildrenAt
(
  • index1
  • index2
)
DisplayObjectContainer public chainable

Inherited from DisplayObjectContainer: ts/display/DisplayObjectContainer.ts:175

Swaps child objects at the two specified index positions in the child list. All other child objects in the display object container remain in the same index positions.

Parameters:

  • index1 Int

    The index position of the first child object.

  • index2 Int

    The index position of the second child object.

Returns:

DisplayObjectContainer:

Returns an instance of itself.

There are no methods that match your current filter settings. You can change your filter settings in the index section on this page. index