@ribajs/bs5
Version:
Bootstrap 5 module for Riba.js
114 lines • 9.71 kB
JavaScript
import { Binder } from "@ribajs/core";
import { Bs5Service } from "../services/bs5.service.js";
import { parseJsonString, jsonStringify, camelCase } from "@ribajs/utils";
export class Bs5AbstractBreakpointBinder extends Binder {
bs5;
breakpoint;
attributeName;
val;
constructor(view, el, type, name, keypath, formatters, identifier) {
super(view, el, type, name, keypath, formatters, identifier);
this.bs5 = Bs5Service.getSingleton();
if (this.args.length !== 2) {
throw new Error("The Bs5AttributeBreakpointBinder was not initialized correctly!");
}
const breakpoint = this.args[0].toString();
const attributeName = this.args[1].toString();
if (!this.bs5.breakpointNames.includes(breakpoint)) {
throw new Error(`Unknown breakpoint "${breakpoint}"! You can define breakpoints at the initialization of the Bs5Module.`);
}
this.breakpoint = breakpoint;
this.attributeName = attributeName;
}
onBreakpointChanges() {
this.setAttributeOnMatch();
}
setAttributeOnMatch() {
if (!this.bs5.activeBreakpoint)
return;
if (this.isBreakpointMatch(this.breakpoint)) {
return this.defaultAttributeBinder.routine(this.el, this.val);
}
if (this.breakpointUnhandled(this.bs5.activeBreakpoint.name)) {
this.defaultAttributeBinder.routine(this.el, undefined);
}
}
isBreakpointMatch(breakpoint = this.breakpoint) {
if (!this.bs5.activeBreakpoint) {
return false;
}
if (this.bs5.activeBreakpoint.name === breakpoint) {
return true;
}
const myBreakpoints = this.myBreakpoints(breakpoint);
if (myBreakpoints.includes(this.bs5.activeBreakpoint.name)) {
return true;
}
return false;
}
myBreakpoints(breakpoint = this.breakpoint) {
const myBreakpoints = [breakpoint];
let nextBreakpoint = breakpoint;
while (nextBreakpoint) {
nextBreakpoint = this.bs5.getNextBreakpointByName(nextBreakpoint);
if (!nextBreakpoint || this.breakpointHandledByAnother(nextBreakpoint)) {
break;
}
myBreakpoints.push(nextBreakpoint);
}
return myBreakpoints;
}
breakpointHandledByAnother(name) {
const handledBreakpoints = this.getHandledBreakpoints();
if (handledBreakpoints.includes(name)) {
return true;
}
return false;
}
breakpointUnhandled(breakpoint) {
let prevBreakpoint = breakpoint;
let unhandled = true;
while (prevBreakpoint && unhandled) {
if (this.breakpointHandledByAnother(prevBreakpoint)) {
unhandled = false;
break;
}
prevBreakpoint = this.bs5.getPrevBreakpointByName(prevBreakpoint);
if (!prevBreakpoint) {
break;
}
}
return unhandled;
}
addToHandledBreakpoints() {
const handledBreakpoints = this.getHandledBreakpoints();
handledBreakpoints.push(this.breakpoint);
this.el.dataset[camelCase(this.attributeName)] =
jsonStringify(handledBreakpoints);
}
getHandledBreakpoints() {
const handledBreakpoints = parseJsonString(this.el.dataset[camelCase(this.attributeName)] || "[]");
if (!Array.isArray(handledBreakpoints)) {
throw new Error("breakpoints dataset has unsupported values!");
}
return handledBreakpoints;
}
bind(el) {
this.bs5.on("breakpoint:changed", this.onBreakpointChanges, this);
if (typeof this.defaultAttributeBinder.bind === "function") {
this.defaultAttributeBinder.bind(el);
}
}
routine(el, newValue) {
this.addToHandledBreakpoints();
this.val = newValue;
this.setAttributeOnMatch();
}
unbind(el) {
this.bs5?.off("breakpoint:changed", this.onBreakpointChanges, this);
if (typeof this.defaultAttributeBinder.unbind === "function") {
this.defaultAttributeBinder.unbind(el);
}
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnM1LWFic3RyYWN0LWJyZWFrcG9pbnQuYmluZGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2JpbmRlcnMvYnM1LWFic3RyYWN0LWJyZWFrcG9pbnQuYmluZGVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBa0IsTUFBTSxFQUFRLE1BQU0sY0FBYyxDQUFDO0FBQzVELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUN4RCxPQUFPLEVBQUUsZUFBZSxFQUFFLGFBQWEsRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFMUUsTUFBTSxPQUFnQiwyQkFFcEIsU0FBUSxNQUFpQjtJQUtmLEdBQUcsQ0FBYTtJQUNoQixVQUFVLENBQVM7SUFDbkIsYUFBYSxDQUFTO0lBQ3RCLEdBQUcsQ0FBTztJQUVwQixZQUNFLElBQVUsRUFDVixFQUFLLEVBQ0wsSUFBbUIsRUFDbkIsSUFBWSxFQUNaLE9BQTJCLEVBQzNCLFVBQTJCLEVBQzNCLFVBQXlCO1FBRXpCLEtBQUssQ0FBQyxJQUFJLEVBQUUsRUFBRSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLFVBQVUsRUFBRSxVQUFVLENBQUMsQ0FBQztRQUM3RCxJQUFJLENBQUMsR0FBRyxHQUFHLFVBQVUsQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUNyQyxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxLQUFLLENBQUMsRUFBRSxDQUFDO1lBQzNCLE1BQU0sSUFBSSxLQUFLLENBQ2IsaUVBQWlFLENBQ2xFLENBQUM7UUFDSixDQUFDO1FBQ0QsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUMzQyxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQzlDLElBQUksQ0FBQyxJQUFJ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