Elements

Class BaseView

constructor (_el: T): BaseView<T>

Name Type Default Description
_el T    

Property .$placeholder

readonly Property ._data : Obj<any>

Default value: ...

readonly Property ._el : T

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

Accessor .html : string

Accessor .id : string

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

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 .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 .makeDynamicAttribute (name: string, value: string, model: any): void

Name Type Default Description
name string    
value string    
model any    

Method .makeDynamicList (model: any): void

Name Type Default Description
model any    

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 .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 .onKey (keys: string, callback: (e: KeyboardEvent, key: string): void, options: {meta?: undefined|boolean, up?: undefined|boolean}): 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, key: string): void        
options {meta?: undefined boolean, up?: undefined boolean}    

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

Class CanvasView

Extends HTMLBaseView<HTMLCanvasElement>

Property ._ctx

readonly Property .type

Default value: 'canvas'

Accessor .canvasHeight : number

Returns the intrinsic pixel height of this <canvas> element.

Accessor .canvasWidth : number

Returns the intrinsic pixel width of this <canvas> element.

Accessor .ctx : CanvasRenderingContext2D

Cached reference to the 2D context for this <canvas> element.

Method .clear (): void

Clears this canvas.

Method .clearCircle (center: Point, radius: number): void

Erase a specific circle of the canvas.

Name Type Default Description
center Point    
radius number    

Method .downloadImage (fileName: string): void

Name Type Default Description
fileName string    

Method .draw (obj: GeoShape, options: CanvasDrawingOptions): void

Draws a generic geometry object ont a <canvas> element.

Name Type Default Description
obj GeoShape    
options CanvasDrawingOptions …  

Method .fill (color: string): void

Clears this canvas.

Name Type Default Description
color string    

Method .getContext (c: string, options: WebGLContextAttributes): |CanvasRenderingContext2D|ImageBitmapRenderingContext|WebGLRenderingContext|WebGL2RenderingContext

Returns the drawing context for a <canvas> element.

Name Type Default Description
c string ‘2d’  
options WebGLContextAttributes …  

Method .image (type: png|jpg): string

Converts a Canvas element into a PNG or JPEG data URI.

Name Type Default Description  
type png jpg ‘png’  

Class FormView

Extends HTMLBaseView<HTMLFormElement>

readonly Property .type

Default value: 'form'

Accessor .action : string

Accessor .formData : Obj<string>

Summarises the data for an HTML <form> element in an JSON Object.

Accessor .isValid : boolean

Class HTMLBaseView

Extends BaseView<T>

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

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    

Class InputView

Extends HTMLBaseView<InputFieldElement>

readonly Property .type

Default value: 'input'

Accessor .checked : boolean

Accessor .isValid : boolean

Accessor .value : string

Method .bindVariable (model: any, name: string): void

Name Type Default Description
model any    
name string    

Method .change (callback: (val: string): void): void

Binds a change event listener.

Name Type Default Description
callback (val: string): void    

Method .setInputPattern (value: string): void

Polyfill for type and inputmode attributes.

Name Type Default Description
value string    

Method .setValidity (str: string): void

Name Type Default Description
str string    

Method .validate (callback: (value: string): string): void

Name Type Default Description
callback (value: string): string    

Class MediaView

Extends HTMLBaseView<HTMLMediaElement>

Method .pause (): void

Pauses playback on a media element.

Method .play (): Promise<void>

Starts playback on a media element.

Class SVGBaseView

Extends BaseView<T>

readonly Property .type

Default value: 'svg'

Accessor .$ownerSVG : SVGParentView

Returns the owner <svg> which this element is a child of.

Accessor .center : Point

Finds the center of an SVG <circle> element.

Accessor .inverseTransformMatrix

Accessor .points

Returns a list of all points along an SVG <path> element.

Accessor .strokeLength : number

Finds the total stroke length of this element. Similar to the SVG getTotalLength() function, but works for a wider variety of elements.

Method .addPoint (p: SimplePoint): void

Appends a new point to an SVG <path> element.

Name Type Default Description
p SimplePoint    

Method .draw (obj: undefined|GeoShape, options: SVGDrawingOptions): void

Draws a generic geometry object onto an SVG <path> element.

Name Type Default Description  
obj undefined GeoShape    
options SVGDrawingOptions …    

Method .getPointAt (p: number): Point

Gets the coordinates of the point at a position p along the length of the stroke of this <path> element, where 0 ≤ p ≤ 1.

Name Type Default Description
p number    

Method .getPointAtLength (d: number): Point

Gets the coordinates of the point at a distance d along the length of the stroke of this <path> element.

Name Type Default Description
d number    

Method .setCenter (c: SimplePoint): void

Sets the center of an SVG <circle> or <text> element.

Name Type Default Description
c SimplePoint    

Method .setLine (p: SimplePoint, q: SimplePoint): void

Sets the end points of an SVG <line> element.

Name Type Default Description
p SimplePoint    
q SimplePoint    

Method .setRect (rect: Rectangle): void

Sets the bounds of an SVG <rectangle> element.

Name Type Default Description
rect Rectangle    

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

Name Type Default Description
posn SimplePoint    
angle number 0  
scale number 1  

Class SVGParentView

Extends SVGBaseView<SVGSVGElement>

Accessor .svgHeight : number

Returns the intrinsic height of this <svg> element.

Accessor .svgWidth : number

Returns the intrinsic width of this <svg> element.

Accessor .viewBox : DOMRect

Returns the viewport coordinates of this <svg> element.

Method .downloadImage (fileName: string, width: number, height: number, viewBox: string): void

Name Type Default Description
fileName string    
width number    
height number    
viewBox string    

Method .drawPath (obj: GeoShape, attributes: Obj<any>, options: SVGDrawingOptions): SVGView

Create a new <path> element child and draw a geometry object onto it.

Name Type Default Description
obj GeoShape    
attributes Obj<any> …  
options SVGDrawingOptions …  

Method .image (type: svg|png|jpg, width: number, height: number, viewBox: string): Promise<string>

Converts an SVG element into a PNG, JPG or SVG data URI.

Name Type Default Description    
type svg png jpg    
width number        
height number        
viewBox string        

Class WindowView

Extends HTMLBaseView<HTMLHtmlElement HTMLBodyElement>

readonly Property .type

Default value: 'window'

Type alias ElementView : BaseView<HTMLElement|SVGElement>

Type alias HTMLView : HTMLBaseView<HTMLElement>

Type alias SVGView : SVGBaseView<SVGGraphicsElement>

$body : WindowView

Default value: ...

$html : WindowView

Default value: ...

$ (query: T, context: ElementView): QueryResult<T>

Finds the Element that matches a specific CSS selector, or creates a new Element wrapper around a native HTMLElement instance.

Name Type Default Description
query T    
context ElementView    

$$ (selector: T, context: ElementView): QueryResults<T>

Finds all elements that match a specific CSS selector.

Name Type Default Description
selector T    
context ElementView    

$N (tag: T, attributes: Obj<any>, parent: ElementView): CreateResult<T>

Creates a new Element instance from a given set of options.

Name Type Default Description
tag T    
attributes Obj<any> …  
parent ElementView    
Copyright © 2024 Mathigon.org