@ribajs/bs4
Version:
Bootstrap 4 module for Riba.js
73 lines • 6.27 kB
JavaScript
import { Component } from "@ribajs/core";
import { EventDispatcher } from "@ribajs/events";
import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
import { TOGGLE_BUTTON } from "../../constants/index.js";
export class Bs4ToggleButtonComponent extends Component {
static get observedAttributes() {
return ["target-id"];
}
requiredAttributes() {
return ["targetId"];
}
static tagName = "bs4-toggle-button";
autobind = true;
eventDispatcher;
scope = {
targetId: undefined,
toggle: this.toggle,
state: "undefined",
isActive: true,
isClosed: false,
};
constructor() {
super();
}
toggle() {
if (this.eventDispatcher) {
this.eventDispatcher.trigger(TOGGLE_BUTTON.eventNames.toggle, this.scope.targetId);
}
}
async afterBind() {
this.eventDispatcher?.trigger(TOGGLE_BUTTON.eventNames.init, this.scope.targetId);
await super.afterBind();
}
connectedCallback() {
super.connectedCallback();
this.init(Bs4ToggleButtonComponent.observedAttributes);
}
onToggledEvent(state) {
this.scope.state = state;
this.scope.isActive = state !== "hidden" && state !== "removed";
this.scope.isClosed = !this.scope.isActive;
}
initEventDispatcher(id) {
if (this.eventDispatcher) {
this.eventDispatcher.off(TOGGLE_BUTTON.eventNames.toggled, this.onToggledEvent, this);
}
this.eventDispatcher = new EventDispatcher(TOGGLE_BUTTON.nsPrefix + id);
this.eventDispatcher.on(TOGGLE_BUTTON.eventNames.toggled, this.onToggledEvent, this);
this.eventDispatcher.on(TOGGLE_BUTTON.eventNames.state, this.onToggledEvent, this);
}
async attributeChangedCallback(attributeName, oldValue, newValue, namespace) {
super.attributeChangedCallback(attributeName, oldValue, newValue, namespace);
}
parsedAttributeChangedCallback(attributeName, oldValue, newValue, namespace) {
super.parsedAttributeChangedCallback(attributeName, oldValue, newValue, namespace);
if (attributeName === "targetId" && newValue) {
this.initEventDispatcher(newValue);
}
}
disconnectedCallback() {
super.disconnectedCallback();
if (this.eventDispatcher) {
this.eventDispatcher.off(TOGGLE_BUTTON.eventNames.toggled, this.onToggledEvent, this);
}
}
template() {
if (!hasChildNodesTrim(this)) {
console.warn("No child elements found, this component as no template so you need to define your own as child of this component.");
}
return null;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnM0LXRvZ2dsZS1idXR0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYnM0LXRvZ2dsZS1idXR0b24vYnM0LXRvZ2dsZS1idXR0b24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVNBLE9BQU8sRUFBRSxTQUFTLEVBQStCLE1BQU0sY0FBYyxDQUFDO0FBQ3RFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNqRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUM3RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFzQnpELE1BQU0sT0FBTyx3QkFBeUIsU0FBUSxTQUFTO0lBQ3JELE1BQU0sS0FBSyxrQkFBa0I7UUFDM0IsT0FBTyxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ3ZCLENBQUM7SUFFUyxrQkFBa0I7UUFDMUIsT0FBTyxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ3RCLENBQUM7SUFFTSxNQUFNLENBQUMsT0FBTyxHQUFHLG1CQUFtQixDQUFDO0lBRWxDLFFBQVEsR0FBRyxJQUFJLENBQUM7SUFFaEIsZUFBZSxDQUFtQjtJQUVyQyxLQUFLLEdBQVU7UUFDcEIsUUFBUSxFQUFFLFNBQVM7UUFDbkIsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNO1FBQ25CLEtBQUssRUFBRSxXQUFXO1FBQ2xCLFFBQVEsRUFBRSxJQUFJO1FBQ2QsUUFBUSxFQUFFLEtBQUs7S0FDaEIsQ0FBQztJQUVGO1FBQ0UsS0FBSyxFQUFFLENBQUM7SUFDVixDQUFDO0lBRU0sTUFBTTtRQUNYLElBQUksSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1lBQ3pCLElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxDQUMxQixhQUFhLENBQUMsVUFBVSxDQUFDLE1BQU0sRUFDL0IsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENB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