@ribajs/bs5
Version:
Bootstrap 5 module for Riba.js
125 lines • 9.91 kB
JavaScript
import { Component } from "@ribajs/core";
import { EventDispatcher } from "@ribajs/events";
import { Collapse } from "../../services/collapse.js";
export class Bs5NavbarComponent extends Component {
static tagName = "bs5-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(Bs5NavbarComponent.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 Collapse(collapseElement, { toggle: false }));
collapseElement.addEventListener(Collapse.Events.shown, this.onStateChange);
collapseElement.addEventListener(Collapse.Events.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(Collapse.Events.shown, this.onStateChange);
collapseElement.removeEventListener(Collapse.Events.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(Collapse.CLASS_NAME_COLLAPSED);
this.setAttribute("aria-expanded", "false");
}
else {
this.classList.remove(Collapse.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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnM1LW5hdmJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9iczUtbmF2YmFyL2JzNS1uYXZiYXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQW9CLE1BQU0sY0FBYyxDQUFDO0FBQzNELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNqRCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFFdEQsTUFBTSxPQUFPLGtCQUFtQixTQUFRLFNBQVM7SUFDeEMsTUFBTSxDQUFDLE9BQU8sR0FBRyxZQUFZLENBQUM7SUFFOUIsS0FBSyxHQUFRO1FBQ2xCLE1BQU0sRUFBRSxJQUFJLENBQUMsTUFBTTtRQUNuQixJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUk7UUFDZixJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUk7UUFDZixXQUFXLEVBQUUsSUFBSTtRQUNqQixnQkFBZ0IsRUFBRSxrQkFBa0I7S0FDckMsQ0FBQztJQUVRLGVBQWUsR0FBK0IsSUFBSSxHQUFHLEVBQUUsQ0FBQztJQUN4RCxZQUFZLENBQW1CO0lBRXpDLE1BQU0sS0FBSyxrQkFBa0I7UUFDM0IsT0FBTyxDQUFDLG1CQUFtQixDQUFDLENBQUM7SUFDL0IsQ0FBQztJQUVEO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFDUixJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3JELENBQUM7SUFFUyxLQUFLLENBQUMsU0FBUztRQUN2QixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDWixNQUFNLEtBQUssQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUMxQixDQUFDO0lBRU0sTUFBTSxDQUFDLEtBQWE7UUFDekIsS0FBSyxNQUFNLGVBQWUsSUFBSSxJQUFJLENBQUMsZUFB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