Sha256: 16c69d1479ec74359b715a6aee517f64a12c768c2a1f895c440e6e018bad1433
Contents?: true
Size: 1.93 KB
Versions: 60
Compression:
Stored size: 1.93 KB
Contents
import type {TOutletChangeData} from '../outlet_manager_controller/outlet_manager_controller'
import {useClickOutside} from 'stimulus-use'
import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller'
export interface ToggleableOutlet extends SyncedBooleanAttributesController<boolean> {
toggle: (event: Event, updateTo?: TOutletChangeData<boolean>) => void
}
export default class ToggleableController
extends SyncedBooleanAttributesController<boolean>
implements ToggleableOutlet
{
static outlets = SyncedBooleanAttributesController.outlets
static values = {
...SyncedBooleanAttributesController.values,
state: {
type: Boolean,
default: false,
},
closeOnOutsideClick: {
type: Boolean,
default: false,
},
}
declare stateValue: boolean
declare readonly closeOnOutsideClickValue: boolean
connect(): void {
this.syncElementAttributes()
useClickOutside(this, {dispatchEvent: this.closeOnOutsideClickValue && this.stateValue})
}
toggle(event: Event, updateTo: TOutletChangeData<boolean> = {}) {
const v = updateTo.data ?? !this.stateValue
this.updateAttributesForElement(this.element, v)
this.stateValue = v
this.sendToOutlets(event, {...updateTo, data: v})
}
on(event: Event) {
this.toggle(event, {data: true})
}
off(event: Event) {
this.toggle(event, {data: false})
}
clickOutside(event: Event) {
if (this.closeOnOutsideClickValue && this.stateValue) {
this.toggle(event, {data: false})
}
}
getValueForElement(element: Element): boolean | null {
if (element !== this.element) {
return null
}
return this.stateValue
}
getElementsToSync(): Element[] | null | undefined {
return [this.element]
}
getState() {
return this.stateValue
}
get event_key_postfix() {
return this.stateValue ? 'on' : 'off'
}
outletUpdate = this.toggle
}
Version data entries
60 entries across 60 versions & 1 rubygems