Icon

Class IconView

SVG icon component, which loads from a global /icons.svg file.

Extends CustomElementView

constructor (_el: CustomHTMLElement): IconView

Name Type Default Description
_el CustomHTMLElement    

readonly Property ._data : Obj<any>

Default value: ...

readonly Property ._el : CustomHTMLElement

readonly Property ._events : Obj<Array<EventCallback>>

Default value: ...

Property .model ?: any

readonly Property .type : string

Default value: 'default'

Accessor .attributes

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 .html : string

Accessor .id : string

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 .scrollHeight : number

Accessor .scrollLeft : number

Accessor .scrollTop : number

Accessor .scrollWidth : number

Accessor .tagName : string

Accessor .text : string

Accessor .textStr

Accessor .topLeftPosition : Point

Accessor .transform : string

Shortcut for getting the CSS transform style of an element.

Accessor .transformMatrix

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
selector T    

Method .$$ (selector: T): QueryResults<T>

All child elements matching a given selector.

Name Type Default Description
selector T    

Method .addClass (className: string): void

Adds one or more space-separated classes to this element.

Name Type Default Description
className string    

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
rules AnimationProperties    
duration number 400  
delay number 0  
easing string ‘ease-in-out’  

Method .append (newChild: ElementView|Text): void

Adds a new child element at the end of this one.

Name Type Default Description  
newChild ElementView Text    

Method .attr (attr: string): string

Name Type Default Description
attr string    

Method .bindModel (model: any, recursive: boolean): void

Name Type Default Description
model any    
recursive boolean true  

Method .bindVariable (_model: any, _name: string): void

Name Type Default Description
_model any    
_name string    

Method .blur (): void

Blurs this DOM element.

Method .contains (point: Point): boolean

Name Type Default Description
point Point    

Method .copy (recursive: boolean): ElementView

Creates a copy of this element, and optionally its children.

Name Type Default Description
recursive boolean true  

Method .created (): void

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    
props string Obj<string number>    
value string 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
className string    

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
effect string ‘fade’  
duration number 500  
delay number 0  

Method .equals (el: ElementView): boolean

Name Type Default Description
el ElementView    

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
effect string ‘fade’  
duration number 500  
delay number 0  
remove boolean false  

Method .focus (): void

Focuses this DOM element.

Method .getParentModel (): any

Method .hasAttr (attr: string): boolean

Name Type Default Description
attr string    

Method .hasClass (className: string): boolean

Name Type Default Description
className string    

Method .hasParent ($p: Array<ElementView>): boolean

Checks if this element has one of the given elements as parent.

Name Type Default Description
$p Array<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
newChild ElementView    

Method .insertBefore (newChild: ElementView): void

Adds a new element immediately before this one, as a sibling.

Name Type Default Description
newChild ElementView    

Method .is (selector: string): boolean

Checks if an element matches a given CSS selector.

Name Type Default Description
selector string    

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
events string    
callback EventCallback    

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
parent HTMLView    

Method .on (events: string, callback: EventCallback, options: EventListenerOptions): void

Binds one ore more space-separated event listeners on this element.

Name Type Default Description
events string    
callback EventCallback    
options EventListenerOptions    

Method .onAttr (name: string, callback: (value: string, initial: boolean): void): void

Name Type Default Description
name string    
callback (value: string, initial: boolean): void    

Method .onKeyDown (keys: string, callback: (e: KeyboardEvent): void): void

Binds an event listener for a specific key that is pressed while this element is in focus.

Name Type Default Description
keys string    
callback (e: KeyboardEvent): void    

Method .onPromise (event: string, resolveImmediately: boolean): Promise<void>

Returns a promise that is resolved when an event is triggered.

Name Type Default Description
event string    
resolveImmediately boolean false  

Method .one (events: string, callback: EventCallback, options: EventListenerOptions): void

Binds a one-time event listener on this element.

Name Type Default Description
events string    
callback EventCallback    
options EventListenerOptions    

Method .parents (selector: string): Array<HTMLView>

Finds all parent elements that match a specific selector.

Name Type Default Description
selector string    

Method .prepend (newChild: ElementView): void

Adds a new child element at the beginning of this one.

Name Type Default Description
newChild ElementView    

Method .ready (): void

Method .remove (): void

Removes this element.

Method .removeAttr (attr: string): void

Name Type Default Description
attr string    

Method .removeChildren (): void

Removes all children of this element.

Method .removeClass (className: string): void

Name Type Default Description
className string    

Method .restartAnimation (): void

Detach and re-insert to restart CSS animations.

Method .scrollBy (distance: number, time: number, easing: string): void

Scrolls the element by a given distance.

Name Type Default Description
distance number    
time number 1000  
easing string ‘cubic’  

Method .scrollTo (pos: number, time: number, easing: string): void

Scrolls the element to a specific position.

Name Type Default Description
pos number    
time number 1000  
easing string ‘cubic’  

Method .setAttr (attr: string, value: any): void

Name Type Default Description
attr string    
value any    

Method .setClass (className: string, condition: boolean): void

Toggles multiple space-separated class names based on a condition.

Name Type Default Description
className string    
condition boolean    

Method .setTransform (posn: SimplePoint, angle: number, scale: number): void

Sets the CSS transform on this element.

Name Type Default Description
posn SimplePoint    
angle number 0  
scale number 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
show boolean    

Method .toggleClass (className: string): boolean

Name Type Default Description
className string    

Method .toggleDOM (show: boolean): void

Conditionally hide this element from the DOM (using placeholder comments).

Name Type Default Description
show boolean true  

Method .translate (x: number, y: number): void

Sets the CSS transform of this element to an x/y translation.

Name Type Default Description
x number    
y number    

Method .trigger (events: string, args: any): void

Triggers a specific event on this element.

Name Type Default Description
events string    
args any …  
Copyright © 2024 Mathigon.org