@ribajs/bs5
Version:
Bootstrap 5 module for Riba.js
153 lines • 12.5 kB
JavaScript
import { DEFAULT_MODULE_OPTIONS } from "../constants/index.js";
import { debounce } from "@ribajs/utils/src/control";
import { getViewportDimensions } from "@ribajs/utils/src/dom.js";
import { EventDispatcher } from "@ribajs/events";
export class Bs5Service {
_options = DEFAULT_MODULE_OPTIONS;
_events = EventDispatcher.getInstance("bs5");
_activeBreakpoint = null;
static instance;
constructor(options) {
this._options = options;
this.sortBreakpoints(this._options.breakpoints);
this._onViewChanges();
this.addEventListeners();
}
static getSingleton() {
if (Bs5Service.instance) {
return Bs5Service.instance;
}
throw new Error("Singleton of Bs5Service not defined, please call `Bs5Service.setSingleton` or `bs5Module.init` first!");
}
static setSingleton(options = DEFAULT_MODULE_OPTIONS) {
if (Bs5Service.instance) {
throw new Error(`Singleton of Bs5Service already defined!`);
}
Bs5Service.instance = new Bs5Service(options);
return Bs5Service.instance;
}
onBreakpointChanges() {
this._events.trigger("breakpoint:changed", this.activeBreakpoint);
}
setActiveBreakpoint(breakpoint) {
if (breakpoint && breakpoint.name !== this.activeBreakpoint?.name) {
this._activeBreakpoint = breakpoint;
this.onBreakpointChanges();
}
}
addEventListeners() {
window.addEventListener("resize", this.onViewChanges, { passive: true });
}
removeEventListeners() {
window.removeEventListener("resize", this.onViewChanges);
}
_onViewChanges() {
const newBreakpoint = this.getBreakpointByDimension(getViewportDimensions().w) ||
this.getBreakpointByName("xs");
if (newBreakpoint) {
this.setActiveBreakpoint(newBreakpoint);
}
}
onViewChanges = debounce(this._onViewChanges.bind(this));
sortBreakpoints(breakpoints) {
breakpoints.sort((a, b) => a.dimension - b.dimension);
}
get options() {
return this._options;
}
get activeBreakpoint() {
return this._activeBreakpoint;
}
get breakpointNames() {
return this.options.breakpoints.map((breakpoint) => breakpoint.name);
}
get events() {
return this._events;
}
on(eventName, cb, thisContext) {
return this.events.on(eventName, cb, thisContext);
}
once(eventName, cb, thisContext) {
return this.events.once(eventName, cb, thisContext);
}
off(eventName, cb, thisContext) {
return this.events.off(eventName, cb, thisContext);
}
getBreakpointByDimension(dimension, breakpoints) {
breakpoints = breakpoints || this.options.breakpoints;
for (let i = 0; i < breakpoints.length - 1; i++) {
const curr = breakpoints[i];
const next = breakpoints[i + 1];
if (next &&
curr &&
dimension > curr.dimension &&
dimension < next.dimension) {
return curr;
}
}
const last = breakpoints[breakpoints.length - 1];
if (dimension >= last.dimension) {
return last;
}
return null;
}
getBreakpointByName(name, breakpoints) {
breakpoints = breakpoints || this.options.breakpoints;
const found = breakpoints.find((breakpoint) => breakpoint.name === name);
if (!found) {
return null;
}
return found;
}
getNextBreakpointByName(name) {
const breakpoints = this.breakpointNames;
const index = breakpoints.indexOf(name);
if (index < 0) {
throw new Error(`the breakpoint "${name}" does not exist!`);
}
if (index === breakpoints.length - 1) {
return null;
}
return breakpoints[index + 1];
}
getPrevBreakpointByName(name) {
const breakpoints = this.breakpointNames;
const index = breakpoints.indexOf(name);
if (index < 0) {
throw new Error(`the breakpoint "${name}" does not exist!`);
}
if (index === 0) {
return null;
}
return breakpoints[index - 1];
}
isBreakpointGreaterThan(isBreakpointName, compareBreakpointName) {
const isBreakpoint = this.getBreakpointByName(isBreakpointName);
const compareBreakpoint = this.getBreakpointByName(compareBreakpointName);
if (isBreakpoint && compareBreakpoint) {
return isBreakpoint.dimension > compareBreakpoint.dimension;
}
return null;
}
isBreakpointSmallerThan(isBreakpointName, compareBreakpointName) {
const isBreakpoint = this.getBreakpointByName(isBreakpointName);
const compareBreakpoint = this.getBreakpointByName(compareBreakpointName);
if (isBreakpoint && compareBreakpoint) {
return isBreakpoint.dimension < compareBreakpoint.dimension;
}
return null;
}
isActiveBreakpointGreaterThan(compareBreakpoint) {
if (!this.activeBreakpoint) {
return null;
}
return this.isBreakpointGreaterThan(this.activeBreakpoint.name, compareBreakpoint);
}
isActiveBreakpointSmallerThan(compareBreakpoint) {
if (!this.activeBreakpoint) {
return null;
}
return this.isBreakpointSmallerThan(this.activeBreakpoint.name, compareBreakpoint);
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnM1LnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvc2VydmljZXMvYnM1LnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDL0QsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ3JELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ2pFLE9BQU8sRUFBRSxlQUFlLEVBQWlCLE1BQU0sZ0JBQWdCLENBQUM7QUFNaEUsTUFBTSxPQUFPLFVBQVU7SUFDWCxRQUFRLEdBQXFCLHNCQUFzQixDQUFDO0lBQ3BELE9BQU8sR0FBRyxlQUFlLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzdDLGlCQUFpQixHQUFzQixJQUFJLENBQUM7SUFFL0MsTUFBTSxDQUFDLFFBQVEsQ0FBYztJQUVwQyxZQUFzQixPQUF5QjtRQUM3QyxJQUFJLENBQUMsUUFBUSxHQUFHLE9BQU8sQ0FBQztRQUN4QixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLENBQUM7UUFDaEQsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3RCLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO0lBQzNCLENBQUM7SUFFTSxNQUFNLENBQUMsWUFBWTtRQUN4QixJQUFJLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUN4QixPQUFPLFVBQVUsQ0FBQyxRQUFRLENBQUM7UUFDN0IsQ0FBQztRQUVELE1BQU0sSUFBSSxLQUFLLENBQ2IsdUdBQXVHLENBQ3hHLENBQUM7SUFDSixDQUFDO0lBRU0sTUFBTSxDQUFDLFlBQVksQ0FDeEIsVUFBNEIsc0JBQXNCO1FBRWxELElBQUksVUFBVSxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQ3hCLE1BQU0sSUFBSSxLQUFLLENBQUMsMENB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