Class CustomElementView Base class for custom HTML elements. In addition to other custom methods, it can implement created() and ready() methods that are executed during the element lifecycle.
Extends HTMLBaseView<CustomHTMLElement>
(_el: CustomHTMLElement): CustomElementView Name Type Default Description _elCustomHTMLElement
readonly Property ._data : Obj<any> Default value: ...
readonly Property ._el : CustomHTMLElement readonly Property ._events : Obj<Array<EventCallback>> Default value: ...
readonly Property .type : string Default value: 'default'
Accessor .bounds : DOMRect Accessor .boundsRect : Rectangle Accessor .boxCenter : Point Accessor .childNodes Returns an array of all child nodes, including text nodes.
Accessor .children Returns an array of all children of this element.
Accessor .data : DOMStringMap Accessor .height : number Returns this element’s height, including border and padding.
Accessor .innerHeight : number Returns this element’s height, excluding border and padding.
Accessor .innerWidth : number Returns this element’s width, excluding border and padding.
Accessor .isInViewport : boolean Checks if this element is currently visible in the viewport.
Accessor .next : ElementView Returns this element’s next sibling, or undefined.
Accessor .offsetLeft : number Accessor .offsetParent : ElementView Accessor .offsetTop : number Accessor .outerHeight : number Returns this element’s height, including margins.
Accessor .outerWidth : number Returns this element’s width, including margins.
Accessor .parent : HTMLView Returns this element’s parent, or undefined.
Accessor .positionLeft : number Accessor .positionTop : number Accessor .prev : ElementView Returns this element’s previous sibling, or undefined.
Accessor .scale Finds the x and y scale of this element.
Accessor .tagName : string Accessor .topLeftPosition : Point Shortcut for getting the CSS transform style of an element.
Accessor .width : number Returns this element’s width, including border and padding.
Method .$ (selector: T): QueryResult<T> The first child element matching a given selector.
Name Type Default Description selectorT
Method .$$ (selector: T): QueryResults<T> All child elements matching a given selector.
Name Type Default Description selectorT
Method .addClass (className: string): void Adds one or more space-separated classes to this element.
Name Type Default Description classNamestring
Method .animate (rules: AnimationProperties, duration: number, delay: number, easing: string): AnimationResponse Animates multiple CSS properties of this element, with a given duration, delay and ease function.
Name Type Default Description rulesAnimationProperties durationnumber 400 delaynumber 0 easingstring ‘ease-in-out’
Method .append (newChild: ElementView|Text): void Adds a new child element at the end of this one.
Name Type Default Description newChildElementView Text
Method .attr (attr: string): string Name Type Default Description attrstring
Method .bindModel (model: any, recursive: boolean): void Name Type Default Description modelany recursiveboolean true
Method .bindVariable (_model: any, _name: string): void Name Type Default Description _modelany _namestring
Method .blur (): void Blurs this DOM element.
Method .contains (point: Point): boolean Name Type Default Description pointPoint
Method .copy (recursive: boolean): ElementView Creates a copy of this element, and optionally its children.
Name Type Default Description recursiveboolean true
Method .css (props: string|Obj<string|number>, value: string|number): undefined|string Retrieves or sets CSS properties on this element. Examples:
$el.css(‘color’); // returns ‘red’ $el.css(‘color’, ‘blue’); $el.css({color: ‘blue’}); Name Type Default Description propsstring Obj<string number> valuestring number
Method .detach (): void Detaches an element from the DOM.
Method .effect (className: string): void Triggers a CSS animation in an element by adding a class and removing it after the animationEnd event.
Name Type Default Description classNamestring
Method .enter (effect: string, duration: number, delay: number): AnimationResponse Runs an enter animation on this element. Valid effect names are
‘fade’, ‘pop’ and ‘descend’ ‘draw’ and ‘draw-reverse’ ‘slide’ and ‘slide-down’ ‘reveal’, ‘reveal-left’ and ‘reveal-right’ Name Type Default Description effectstring ‘fade’ durationnumber 500 delaynumber 0
Method .equals (el: ElementView): boolean Name Type Default Description elElementView
Method .exit (effect: string, duration: number, delay: number, remove: boolean): AnimationResponse Runs an exit animation on this element. See .enter() for options.
Name Type Default Description effectstring ‘fade’ durationnumber 500 delaynumber 0 removeboolean false
Method .focus (): void Focuses this DOM element.
Method .getParentModel (): any Method .hasAttr (attr: string): boolean Name Type Default Description attrstring
Method .hasClass (className: string): boolean Name Type Default Description classNamestring
Method .hasParent ($p: Array<ElementView>): boolean Checks if this element has one of the given elements as parent.
Name Type Default Description $pArray<ElementView>
Method .hide (): void Makes the element invisible, using CSS visibility (if data-display="visibility"), or display: none.
Method .index (): number Finds the index of an elements, in the list of its siblings.
Method .insertAfter (newChild: ElementView): void Adds a new element immediately after this one, as a sibling.
Name Type Default Description newChildElementView
Method .insertBefore (newChild: ElementView): void Adds a new element immediately before this one, as a sibling.
Name Type Default Description newChildElementView
Method .is (selector: string): boolean Checks if an element matches a given CSS selector.
Name Type Default Description selectorstring
Method .off (events: string, callback: EventCallback): void Removes an event listener on this element. If callback is undefined, it removes all event listeners for this event.
Name Type Default Description eventsstring callbackEventCallback
Method .offset (parent: HTMLView): {bottom: number, left: number, right: number, top: number} Calculates the element offset relative to any other parent element.
Name Type Default Description parentHTMLView
Method .on (events: string, callback: EventCallback, options: EventListenerOptions): void Binds one ore more space-separated event listeners on this element.
Name Type Default Description eventsstring callbackEventCallback optionsEventListenerOptions
Method .onAttr (name: string, callback: (value: string, initial: boolean): void): void Name Type Default Description namestring callback(value: string, initial: boolean): void
Binds an event listener for a specific key that is pressed while this element is in focus.
Name Type Default Description keysstring callback(e: KeyboardEvent, key: string): void options{meta?: undefined boolean, up?: undefined boolean}
Returns a promise that is resolved when an event is triggered.
Name Type Default Description eventstring resolveImmediatelyboolean false
Method .one (events: string, callback: EventCallback, options: EventListenerOptions): void Binds a one-time event listener on this element.
Name Type Default Description eventsstring callbackEventCallback optionsEventListenerOptions
Method .parents (selector: string): Array<HTMLView> Finds all parent elements that match a specific selector.
Name Type Default Description selectorstring
Method .prepend (newChild: ElementView): void Adds a new child element at the beginning of this one.
Name Type Default Description newChildElementView
Method .remove (): void Removes this element.
Method .removeAttr (attr: string): void Name Type Default Description attrstring
Method .removeChildren (): void Removes all children of this element.
Method .removeClass (className: string): void Name Type Default Description classNamestring
Method .restartAnimation (): void Detach and re-insert to restart CSS animations.
Scrolls the element by a given distance.
Name Type Default Description distancenumber timenumber 1000 easingstring ‘cubic’
Scrolls the element to a specific position.
Name Type Default Description posnumber timenumber 1000 easingstring ‘cubic’
Method .setAttr (attr: string, value: any): void Name Type Default Description attrstring valueany
Method .setClass (className: string, condition: boolean): void Toggles multiple space-separated class names based on a condition.
Name Type Default Description classNamestring conditionboolean
Sets the CSS transform on this element.
Name Type Default Description posnSimplePoint anglenumber 0 scalenumber 1
Method .show (): void Makes the element visible. Use the data-display attribute to determine how this is done. Possible options are visibility, to use CSS visibility, or CSS display values. The default is display: block.
Method .toggle (show: boolean): void Hides or shows the element based on a boolean value.
Name Type Default Description showboolean
Method .toggleClass (className: string): boolean Name Type Default Description classNamestring
Method .toggleDOM (show: boolean): void Conditionally hide this element from the DOM (using placeholder comments).
Name Type Default Description showboolean true
Method .translate (x: number, y: number): void Sets the CSS transform of this element to an x/y translation.
Name Type Default Description xnumber ynumber
Method .trigger (events: string, args: any): void Triggers a specific event on this element.
Name Type Default Description eventsstring argsany …
