API
Overlay
Toggle

Util

You can get self object from DOM node on Xtend UI components with Xt.get.

let self = Xt.get({ name: 'xt-overlay', el: document.querySelector('.my-container') })

You can set default options for all components of the same type, with Xt.options.

Xt.options['xt-overlay'] = {
  debug: true,
}

Listen

Listen to events, for listeners use this guideline.

SyntaxDOM ElementDescription
Eventon.xt.overlayelements targetsActivation event (event e.detail is original event)
Eventoff.xt.overlayelements targetsDeactivation event (event e.detail is original event)
Eventondone.xt.overlayelements targetsActivation event after delay and duration
Eventoffdone.xt.overlayelements targetsDeactivation event after delay and duration
Eventmedialoaded.xt.overlayelements targetsImages loaded event
Eventinit.xt.overlaycontainerInit or reinit event
Eventstatus.xt.overlaycontainerStatus event (enabled or disabled)
Eventrestart.xt.overlaycontainerRestart event
Eventdestroy.xt.overlaycontainerDestroy event

Trigger

Trigger events on DOM node.

document.querySelector('#my-element-or-target').dispatchEvent(new CustomEvent('on.trigger.xt.overlay'))
SyntaxDOM ElementDescription
Eventon.trigger.xt.overlayelements targetsActivation event
Eventoff.trigger.xt.overlayelements targetsDeactivation event
Eventopenauto.trigger.xtNodeTrigger the event openauto.trigger.xt inside elements or targets to automatically activate openauto: true
Eventcloseauto.trigger.xtwindowTrigger the event closeauto.trigger.xt on window to automatically deactivate current activation if closeauto: true

You can pass e.detail to the trigger event.

With on and off event e.detail.force = true will force the activation/deactivation skipping checks.

document.querySelector('#my-element-or-target').dispatchEvent(new CustomEvent('on.trigger.xt.overlay', { detail: { force: true } }))

Properties

Access properties by getting self object.

let self = Xt.get({ name: 'xt-overlay', el: document.querySelector('.my-container') })
const container = self.container
SyntaxDescription
PropertycomponentName:StringComponent name (used in Xt.get)
Propertyoptions:ObjectFinal options
Propertyinitial:BooleanIf initial or reset activation
Propertydisabled:BooleanIf component disabled
Propertycontainer:NodeContainer node
Propertyelements:ArrayElements nodes
Propertytargets:ArrayTargets nodes
Propertydirection:NumberDirection 1 or -1
Propertyindex:Number|nullCurrent activated index

Methods

Call methods by getting self object.

let self = Xt.get({ name: 'xt-overlay', el: document.querySelector('.my-container') })
self.destroy()
self = null
SyntaxDescription
Methodself.getElements({ el:Node, same:Boolean = false })Get all elements from element or target, returns Array
Methodself.getTargets({ el:Node, same:Boolean = false })Get all targets from element or target, returns Array
Methodself.getElementsGroups()Get elements (one per group), returns Array
Methodself.hasCurrent({ el:Node, same:Boolean = false })Check if element or target is activated, returns Boolean
Methodself.getIndex({ el:Node })Get activation index of from element or target, returns Number
Methodself.reinit({ save:Boolean = true })Reinit component and save currents as initial (default: true)
Methodself.restart()Restart component to initial
Methodself.disable()Disable component
Methodself.enable()Enable component
Methodself.destroy({ weak:Boolean = false })Destroy component

You can get activated elements or targets with hasCurrent.

self.elements.filter(x => self.hasCurrent({ el: x }))
self.targets.filter(x => self.hasCurrent({ el: x }))

Index methods, they all consider options.loop.

SyntaxDescription
Methodself.getNextIndex({ index:Number|false = false, amount:Number = 1, loop:Boolean|null = null })Get next activation index, returns Number|null
Methodself.getNext({ amount:Number = 1, loop:Boolean|null = null })Get next element, returns Node|null
Methodself.goToNext({ amount:Number = 1, force:Boolean = false, loop:Boolean|null = null })Activate next element, returns Node|null
Methodself.getPrevIndex({ index:Number|false = false, amount:Number = 1, loop:Boolean|null = null })Get prev activation index, returns Number|null
Methodself.getPrev({ amount:Number = 1, loop:Boolean|null = null })Get previous element, returns Node|null
Methodself.goToPrev({ amount:Number = 1, force:Boolean = false, loop:Boolean|null = null })Activate previous element, returns Node|null
Methodself.getNumIndex({ index:Number, loop:Boolean|null = null }Get index from number, return Number|null
Methodself.getNum({ index:Number = 1, loop:Boolean|null = null })Get element from index, returns Node|null
Methodself.goToNum({ index:Number, force:Boolean = false, loop:Boolean|null = null })Activate index, returns Node|null

API Demo