Home Reference Source 
import DomObserver from 'canvas-gauges/lib/DomObserver.js'
public class | source

DomObserver

DOM Observer. It will observe DOM document for a configured element types and instantiate associated Types for an existing or newly added DOM elements

Example:

class ProgressBar {
    constructor(options) {}
    draw() {}
}

// It will observe DOM document for elements <div>
// having attribute 'data-type="progress"'
// and instantiate for each new instance of ProgressBar

new DomParser({color: 'red'}, 'div', 'progress', ProgressBar);

// assume we could have HTML like this
// <div data-type="progress" color="blue"></div>
// in this case all matching attributes names for a given options will be
// parsed and bypassed to an instance from HTML attributes

Static Method Summary

Static Public Methods
public static

domReady(handler: Function): *

Cross-browser DOM ready handler
public static

parse(value: *): *

Parses given attribute value to a proper JavaScript value.
public static

Transforms camel case property name to dash separated attribute name
public static

toCamelCase(dashed: string, capitalized: boolean): string

Transforms dashed string to CamelCase representation
public static

toDashed(camelCase: string): string

Transforms camelCase string to dashed string

Constructor Summary

Public Constructor
public

constructor(options: object, element: string, type: string)

Member Summary

Public Members
public

Actual type constructor to instantiate for each found element
public

Name of an element to lookup/observe
public

Flag specifies whenever the browser supports observing of DOM tree mutations or not
public

Signals if mutations observer for this type or not
public

Default instantiation options for the given type
public

data-type attribute value to lookup

Method Summary

Public Methods
public

isValidNode(node: Node | HTMLElement): boolean

Checks if given node is valid node to process
public

observe(records: MutationRecord[])

Observes given mutation records for an elements to process
public

process(node: Node | HTMLElement): GaugeInterface | null

Processes a given node, instantiating a proper type constructor for it
public

Traverse entire current DOM tree and process matching nodes.

Static Public Methods

public static domReady(handler: Function): * source

Cross-browser DOM ready handler

Params:

NameTypeAttributeDescription
handler Function

Return:

*

public static parse(value: *): * source

Parses given attribute value to a proper JavaScript value. For example it will parse some stringified value to a proper type value, e.g. 'true' => true, 'null' => null, '{"prop": 20}' => {prop: 20}

Params:

NameTypeAttributeDescription
value *

Return:

*

public static toAttributeName(str: string): string source

Transforms camel case property name to dash separated attribute name

Params:

NameTypeAttributeDescription
str string

Return:

string

public static toCamelCase(dashed: string, capitalized: boolean): string source

Transforms dashed string to CamelCase representation

Params:

NameTypeAttributeDescription
dashed string
capitalized boolean
  • optional

Return:

string

public static toDashed(camelCase: string): string source

Transforms camelCase string to dashed string

Params:

NameTypeAttributeDescription
camelCase string

Return:

string

Public Constructors

public constructor(options: object, element: string, type: string) source

Params:

NameTypeAttributeDescription
options object
element string
type string

Public Members

public Type: Function source

Actual type constructor to instantiate for each found element

public element: string source

Name of an element to lookup/observe

public isObservable: boolean source

Flag specifies whenever the browser supports observing of DOM tree mutations or not

public mutationsObserved: boolean source

Signals if mutations observer for this type or not

public options: Object source

Default instantiation options for the given type

public type: string source

data-type attribute value to lookup

Public Methods

public isValidNode(node: Node | HTMLElement): boolean source

Checks if given node is valid node to process

Params:

NameTypeAttributeDescription
node Node | HTMLElement

Return:

boolean

public observe(records: MutationRecord[]) source

Observes given mutation records for an elements to process

Params:

NameTypeAttributeDescription
records MutationRecord[]

public process(node: Node | HTMLElement): GaugeInterface | null source

Processes a given node, instantiating a proper type constructor for it

Params:

NameTypeAttributeDescription
node Node | HTMLElement

Return:

GaugeInterface | null

public traverse() source

Traverse entire current DOM tree and process matching nodes. Usually it should be called only once on document initialization.