DomSync

A utility class for syncing DOM config objects to DOM elements. Syncing compares the new config with the previously used for that element, only applying the difference. Very much like a virtual DOM approach on a per element basis (element + its children).

Usage example:

DomSync.sync({
    domConfig: {
        className : 'b-outer',
        children : [
            {
                className : 'b-child',
                html      : 'Child 1',
                dataset   : {
                    custom : true
                }
            },
            {
                className : 'b-child',
                html      : 'Child 2',
                style     : {
                    fontWeight : 'bold',
                    color      : 'blue'
                }
            }
        ]
    },
    targetElement : target
});

Functions

addChildstatic

Adds a child element without syncing, making it properly available for later syncs. Useful for example when dragging and dropping an element from some other parent.

Parameter	Type	Description
`parentElement`	HTMLElement
`childElement`	HTMLElement
`syncId`	String \| Number

getChildstatic

Get a child element using a dot separated syncIdMap path.

DomSync.getChild(eventWrap, 'event.percentBar');

Parameter	Type	Description
`element`	HTMLElement	"root" element, under which the path starts
`path`	String	Dot '.' separated path of syncIdMap entries

Returns: HTMLElement -

Child element or null if path did not match any element

removeChildstatic

Remove a child element without syncing, for example when dragging an element to some other parent. Removes it both from DOM and the parent elements syncMap

Parameter	Type	Description
`parentElement`	HTMLElement
`childElement`	HTMLElement

syncstatic

Sync a DOM config to a target element

Parameter	Type	Description
`options`	Object	Options object
`options.domConfig`	DomConfig	A DOM config object
`options.targetElement`	HTMLElement	Target element to apply to
`options.strict`	Boolean	Specify `true` to limit synchronization to only the values set by previous calls. Styles and classes placed directly on the DOM elements by other means will not be affected.
`options.syncIdField`	String	Field in dataset to use to match elements for re-usage
`options.syncOwner`	String	Unique id of caller used to isolate child elements. Elements created by `sync` calls using this option will not be reused by `sync` calls with a different `syncOwner` (including no `syncOwner`). When specified, only elements created by previous `sync` calls with the same `syncOwner` will be reused.
`options.affected`	String \| String[]	The references affected by a partial sync.
`options.callback`	function	A function that will be called on element re-usage, creation and similar
`options.configEquality`	Boolean	A function that will be called to compare an incoming config to the last config applied to the `targetElement`. This function returns `true` if the passed values are equal and `false` otherwise.

Returns: HTMLElement -

Returns the updated target element (which is also updated in place)