@ribajs/bs4
Version:
Bootstrap 4 module for Riba.js
125 lines • 9.86 kB
JavaScript
import { Component } from "@ribajs/core";
import { EventDispatcher } from "@ribajs/events";
import { CollapseService, EVENT_SHOWN, EVENT_HIDDEN, CLASS_NAME_COLLAPSED, } from "../../services/collapse.service.js";
export class Bs4NavbarComponent extends Component {
static tagName = "bs4-navbar";
scope = {
toggle: this.toggle,
show: this.show,
hide: this.hide,
isCollapsed: true,
collapseSelector: ".navbar-collapse",
};
collapseTargets = new Map();
routerEvents;
static get observedAttributes() {
return ["collapse-selector"];
}
constructor() {
super();
this.onStateChange = this.onStateChange.bind(this);
}
async afterBind() {
this.hide();
await super.afterBind();
}
toggle(event) {
for (const collapseService of this.collapseTargets.values()) {
collapseService.toggle();
}
if (event) {
event.preventDefault();
event.stopPropagation();
}
}
show(event) {
for (const collapseService of this.collapseTargets.values()) {
collapseService.show();
}
if (event) {
event.preventDefault();
event.stopPropagation();
}
}
hide(event) {
for (const collapseService of this.collapseTargets.values()) {
collapseService.hide();
}
if (event) {
event.preventDefault();
event.stopPropagation();
}
}
connectedCallback() {
super.connectedCallback();
this.routerEvents = new EventDispatcher("main");
this.routerEvents.on("newPageReady", this.onNewPageReady, this);
this.setCollapseElement();
this.onStateChange();
this.init(Bs4NavbarComponent.observedAttributes);
}
setCollapseElement() {
const collapseElements = Array.from(this.querySelectorAll(this.scope.collapseSelector) || []);
for (const collapseElement of this.collapseTargets.keys()) {
if (!collapseElements.find((ce) => ce === collapseElement)) {
this.disposeCollapseTarget(collapseElement);
}
}
for (const collapseElement of collapseElements) {
if (!this.collapseTargets.has(collapseElement)) {
this.collapseTargets.set(collapseElement, new CollapseService(collapseElement, [this], { toggle: false }));
collapseElement.addEventListener(EVENT_SHOWN, this.onStateChange);
collapseElement.addEventListener(EVENT_HIDDEN, this.onStateChange);
}
}
this.hide();
}
disposeCollapseTargets() {
for (const collapseElement of this.collapseTargets.keys()) {
this.disposeCollapseTarget(collapseElement);
}
}
disposeCollapseTarget(collapseElement) {
const collapseService = this.collapseTargets.get(collapseElement);
if (collapseService) {
collapseService.dispose();
}
this.collapseTargets.delete(collapseElement);
collapseElement.removeEventListener(EVENT_SHOWN, this.onStateChange);
collapseElement.removeEventListener(EVENT_HIDDEN, this.onStateChange);
}
disconnectedCallback() {
super.disconnectedCallback();
this.disposeCollapseTargets();
if (this.routerEvents) {
this.routerEvents.off("newPageReady", this.onNewPageReady, this);
}
}
onStateChange() {
this.scope.isCollapsed = this.collapseTargets
.values()
.next()
.value?.isCollapsed();
if (this.scope.isCollapsed) {
this.classList.add(CLASS_NAME_COLLAPSED);
this.setAttribute("aria-expanded", "false");
}
else {
this.classList.remove(CLASS_NAME_COLLAPSED);
this.setAttribute("aria-expanded", "true");
}
}
onNewPageReady() {
this.hide();
}
parsedAttributeChangedCallback(attributeName, oldValue, newValue, namespace) {
super.parsedAttributeChangedCallback(attributeName, oldValue, newValue, namespace);
if (attributeName === "collapseSelector") {
this.setCollapseElement();
}
}
template() {
return null;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnM0LW5hdmJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9iczQtbmF2YmFyL2JzNC1uYXZiYXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQW9CLE1BQU0sY0FBYyxDQUFDO0FBQzNELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNqRCxPQUFPLEVBQ0wsZUFBZSxFQUNmLFdBQVcsRUFDWCxZQUFZLEVBQ1osb0JBQW9CLEdBQ3JCLE1BQU0sb0NBQW9DLENBQUM7QUFFNUMsTUFBTSxPQUFPLGtCQUFtQixTQUFRLFNBQVM7SUFDeEMsTUFBTSxDQUFDLE9BQU8sR0FBRyxZQUFZLENBQUM7SUFFOUIsS0FBSyxHQUFRO1FBQ2xCLE1BQU0sRUFBRSxJQUFJLENBQUMsTUFBTTtRQUNuQixJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUk7UUFDZixJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUk7UUFDZixXQUFXLEVBQUUsSUFBSTtRQUNqQixnQkFBZ0IsRUFBRSxrQkFBa0I7S0FDckMsQ0FBQztJQUVRLGVBQWUsR0FBc0MsSUFBSSxHQUFHLEVBQUUsQ0FBQztJQUMvRCxZQUFZLENBQW1CO0lBRXpDLE1BQU0sS0FBSyxrQkFBa0I7UUFDM0IsT0FBTyxDQUFDLG1CQUFtQixDQUFDLENBQUM7SUFDL0IsQ0FBQztJQUVEO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFDUixJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3JELENBQUM7SUFFUyxLQUFLLENBQUMsU0FBUztRQUN2QixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDWixNQUFNLEtBQUssQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUMxQixDQUFDO0lBRU0sTUFBTSxDQUFDLEtBQWE7UUFDekIs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