API
Toggle
Toggle

Util

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

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

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

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

Listen

Listen to events, for listeners use this guideline.

SyntaxDOM ElementDescription
Eventon.xt.toggleelementstargetsActivation event (event e.detail is original event)
Eventoff.xt.toggleelementstargetsDeactivation event (event e.detail is original event)
Eventondone.xt.toggleelementstargetsActivation event after delay and duration
Eventoffdone.xt.toggleelementstargetsDeactivation event after delay and duration
Eventmedialoaded.xt.toggleelementstargetsImages loaded event
Eventautostart.xt.togglecontainerAuto start event
Eventautostop.xt.togglecontainerAuto stop event
Eventinit.xt.togglecontainerInit or reinit event
Eventstatus.xt.togglecontainerStatus event (enabled or disabled)
Eventrestart.xt.togglecontainerRestart event
Eventdestroy.xt.togglecontainerDestroy event

Trigger

Trigger events on DOM node.

document.querySelector('#my-element-or-target').dispatchEvent(new CustomEvent('on.trigger.xt.toggle'))
SyntaxDOM ElementDescription
Eventon.trigger.xt.toggleelementstargetsActivation event
Eventoff.trigger.xt.toggleelementstargetsDeactivation event
Eventopenauto.trigger.xtNodeTrigger the event openauto.trigger.xtinside elements or targets to automatically activate openauto: true
Eventcloseauto.trigger.xtwindowTrigger the event closeauto.trigger.xton window to automatically deactivate current activation if closeauto: true
Eventautostart.trigger.xt.togglecontainerAuto start event
Eventautostop.trigger.xt.togglecontainerAuto stop event

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.toggle', { detail: { force: true } }))

Properties

Access properties by getting self object.

let self = Xt.get({ name: 'xt-toggle', 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
Propertyautoblock:BooleanBlock all auto logic
Propertyindex:Number|nullCurrent activated index

Methods

Call methods by getting self object.

let self = Xt.get({ name: 'xt-toggle', 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
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