design-angular-kit
Version:
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
68 lines • 10.4 kB
JavaScript
import { BehaviorSubject, distinctUntilChanged, map, Subject } from 'rxjs';
import { flattenNavscrollItems, search } from './navscroll.utils';
export class NavscrollStore {
constructor() {
this.#state = new BehaviorSubject({
items: new Set(),
active: [],
selected: undefined,
progressBar: 0,
isMobile: false,
});
this.#state$ = this.#state.asObservable();
this.selected = this.#state$.pipe(map(({ selected }) => selected), distinctUntilChanged());
this.progressBar = this.#state$.pipe(map(({ progressBar }) => progressBar), distinctUntilChanged());
this.isMobile = this.#state$.pipe(map(({ isMobile }) => isMobile), distinctUntilChanged());
this.#menuItemSelected = new Subject();
this.menuItemSelected = this.#menuItemSelected.asObservable();
}
#state;
#state$;
#menuItemSelected;
init(navscrollItems) {
const flattenItems = flattenNavscrollItems(navscrollItems);
//the first item is selected by default
const selected = (flattenItems && flattenItems.length && flattenItems[0]) ?? undefined;
const state = {
items: new Set(flattenItems),
active: selected ? [selected] : [],
selected: selected,
progressBar: 0,
isMobile: false,
};
this.#state.next(state);
}
setActive(item) {
const { items } = this.#state.value;
const active = search(items, item);
const state = this.#state.value;
this.#state.next({ ...state, items, selected: item, active });
}
isActive$(item) {
return this.#state.asObservable().pipe(map(state => state.active.includes(item)));
}
updateProgressBar(container) {
if (!container) {
return;
}
const offset = Math.abs(container.getBoundingClientRect().top);
const height = container.getBoundingClientRect().height;
const scrollAmount = (offset / height) * 100;
const scrollValue = Math.min(100, Math.max(0, scrollAmount));
const state = this.#state.value;
this.#state.next({
...state,
progressBar: container.getBoundingClientRect().y > 0 ? 0 : scrollValue,
});
}
selectMenuItem() {
this.#menuItemSelected.next(undefined);
}
setMobile({ innerWidth }) {
const isLessThan992px = innerWidth < 992;
const isMobile = isLessThan992px;
const state = this.#state.value;
this.#state.next({ ...state, isMobile });
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2c2Nyb2xsLnN0b3JlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGVzaWduLWFuZ3VsYXIta2l0L3NyYy9saWIvY29tcG9uZW50cy9uYXZpZ2F0aW9uL25hdnNjcm9sbC9uYXZzY3JvbGwuc3RvcmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGVBQWUsRUFBRSxvQkFBb0IsRUFBRSxHQUFHLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBRTNFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQVVsRSxNQUFNLE9BQU8sY0FBYztJQUEzQjtRQUNXLFdBQU0sR0FBRyxJQUFJLGVBQWUsQ0FBaUI7WUFDcEQsS0FBSyxFQUFFLElBQUksR0FBRyxFQUFpQjtZQUMvQixNQUFNLEVBQUUsRUFBRTtZQUNWLFFBQVEsRUFBRSxTQUFTO1lBQ25CLFdBQVcsRUFBRSxDQUFDO1lBQ2QsUUFBUSxFQUFFLEtBQUs7U0FDaEIsQ0FBQyxDQUFDO1FBRU0sWUFBTyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsWUFBWSxFQUFFLENBQUM7UUFFckMsYUFBUSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUNuQyxHQUFHLENBQUMsQ0FBQyxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFDL0Isb0JBQW9CLEVBQUUsQ0FDdkIsQ0FBQztRQUVPLGdCQUFXLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQ3RDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsV0FBVyxFQUFFLEVBQUUsRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUNyQyxvQkFBb0IsRUFBRSxDQUN2QixDQUFDO1FBRU8sYUFBUSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUNuQyxHQUFHLENBQUMsQ0FBQyxFQUFFLFFBQVEs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QUM7SUFDekMsQ0FBQztJQUVELFNBQVMsQ0FBQyxFQUFFLFVBQVUsRUFBMEI7UUFDOUMsTUFBTSxlQUFlLEdBQUcsVUFBVSxHQUFHLEdBQUcsQ0FBQztRQUN6QyxNQUFNLFFBQVEsR0FBRyxlQUFlLENBQUM7UUFDakMsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7UUFDaEMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsRUFBRSxHQUFHLEtBQUssRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFDO0lBQzNDLENBQUM7Q0FDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCwgZGlzdGluY3RVbnRpbENoYW5nZWQsIG1hcCwgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgTmF2c2Nyb2xsSXRlbSB9IGZyb20gJy4vbmF2c2Nyb2xsLm1vZGVsJztcbmltcG9ydCB7IGZsYXR0ZW5OYXZzY3JvbGxJdGVtcywgc2VhcmNoIH0gZnJvbSAnLi9uYXZzY3JvbGwudXRpbHMnO1xuXG5pbnRlcmZhY2UgTmF2c2Nyb2xsU3RhdGUge1xuICBpdGVtczogU2V0PE5hdnNjcm9sbEl0ZW0+O1xuICBhY3RpdmU6IEFycmF5PE5hdnNjcm9sbEl0ZW0+O1xuICBzZWxlY3RlZD86IE5hdnNjcm9sbEl0ZW07XG4gIHByb2dyZXNzQmFyOiBudW1iZXI7XG4gIGlzTW9iaWxlOiBib29sZWFuO1xufVxuXG5leHBvcnQgY2xhc3MgTmF2c2Nyb2xsU3RvcmUge1xuICByZWFkb25seSAjc3RhdGUgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PE5hdnNjcm9sbFN0YXRlPih7XG4gICAgaXRlbXM6IG5ldyBTZXQ8TmF2c2Nyb2xsSXRlbT4oKSxcbiAgICBhY3RpdmU6IFtdLFxuICAgIHNlbGVjdGVkOiB1bmRlZmluZWQsXG4gICAgcHJvZ3Jlc3NCYXI6IDAsXG4gICAgaXNNb2JpbGU6IGZhbHNlLFxuICB9KTtcblxuICByZWFkb25seSAjc3RhdGUkID0gdGhpcy4jc3RhdGUuYXNPYnNlcnZhYmxlKCk7XG5cbiAgcmVhZG9ubHkgc2VsZWN0ZWQgPSB0aGlzLiNzdGF0ZSQucGlwZShcbiAgICBtYXAoKHsgc2VsZWN0ZWQgfSkgPT4gc2VsZWN0ZWQpLFxuICAgIGRpc3RpbmN0VW50aWxDaGFuZ2VkKClcbiAgKTtcblxuICByZWFkb25seSBwcm9ncmVzc0JhciA9IHRoaXMuI3N0YXRlJC5waXBlKFxuICAgIG1hcCgoeyBwcm9ncmVzc0JhciB9KSA9PiBwcm9ncmVzc0JhciksXG4gICAgZGlzdGluY3RVbnRpbENoYW5nZWQoKVxuICApO1xuXG4gIHJlYWRvbmx5IGlzTW9iaWxlID0gdGhpcy4jc3RhdGUkLnBpcGUoXG4gICAgbWFwKCh7IGlzTW9iaWxlIH0pID0+IGlzTW9iaWxlKSxcbiAgICBkaXN0aW5jdFVudGlsQ2hhbmdlZCgpXG4gICk7XG5cbiAgcmVhZG9ubHkgI21lbnVJdGVtU2VsZWN0ZWQgPSBuZXcgU3ViamVjdCgpO1xuXG4gIHJlYWRvbmx5IG1lbnVJdGVtU2VsZWN0ZWQgPSB0aGlzLiNtZW51SXRlbVNlbGVjdGVkLmFzT2JzZXJ2YWJsZSgpO1xuXG4gIGluaXQobmF2c2Nyb2xsSXRlbXM6IEFycmF5PE5hdnNjcm9sbEl0ZW0+KSB7XG4gICAgY29uc3QgZmxhdHRlbkl0ZW1zID0gZmxhdHRlbk5hdnNjcm9sbEl0ZW1zKG5hdnNjcm9sbEl0ZW1zKTtcbiAgICAvL3RoZSBmaXJzdCBpdGVtIGlzIHNlbGVjdGVkIGJ5IGRlZmF1bHRcbiAgICBjb25zdCBzZWxlY3RlZCA9ICgoZmxhdHRlbkl0ZW1zICYmIGZsYXR0ZW5JdGVtcy5sZW5ndGggJiYgZmxhdHRlbkl0ZW1zWzBdKSBhcyBOYXZzY3JvbGxJdGVtKSA/PyB1bmRlZmluZWQ7XG5cbiAgICBjb25zdCBzdGF0ZSA9IHtcbiAgICAgIGl0ZW1zOiBuZXcgU2V0KGZsYXR0ZW5JdGVtcyksXG4gICAgICBhY3RpdmU6IHNlbGVjdGVkID8gW3NlbGVjdGVkXSA6IFtdLFxuICAgICAgc2VsZWN0ZWQ6IHNlbGVjdGVkLFxuICAgICAgcHJvZ3Jlc3NCYXI6IDAsXG4gICAgICBpc01vYmlsZTogZmFsc2UsXG4gICAgfTtcblxuICAgIHRoaXMuI3N0YXRlLm5leHQoc3RhdGUpO1xuICB9XG5cbiAgc2V0QWN0aXZlKGl0ZW06IE5hdnNjcm9sbEl0ZW0pIHtcbiAgICBjb25zdCB7IGl0ZW1zIH0gPSB0aGlzLiNzdGF0ZS52YWx1ZTtcblxuICAgIGNvbnN0IGFjdGl2ZSA9IHNlYXJjaChpdGVtcywgaXRlbSk7XG4gICAgY29uc3Qgc3RhdGUgPSB0aGlzLiNzdGF0ZS52YWx1ZTtcbiAgICB0aGlzLiNzdGF0ZS5uZXh0KHsgLi4uc3RhdGUsIGl0ZW1zLCBzZWxlY3RlZDogaXRlbSwgYWN0aXZlIH0pO1xuICB9XG5cbiAgaXNBY3RpdmUkKGl0ZW06IE5hdnNjcm9sbEl0ZW0pIHtcbiAgICByZXR1cm4gdGhpcy4jc3RhdGUuYXNPYnNlcnZhYmxlKCkucGlwZShtYXAoc3RhdGUgPT4gc3RhdGUuYWN0aXZlLmluY2x1ZGVzKGl0ZW0pKSk7XG4gIH1cblxuICB1cGRhdGVQcm9ncmVzc0Jhcihjb250YWluZXI6IEhUTUxFbGVtZW50KSB7XG4gICAgaWYgKCFjb250YWluZXIpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgY29uc3Qgb2Zmc2V0ID0gTWF0aC5hYnMoY29udGFpbmVyLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLnRvcCk7XG4gICAgY29uc3QgaGVpZ2h0ID0gY29udGFpbmVyLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLmhlaWdodDtcbiAgICBjb25zdCBzY3JvbGxBbW91bnQgPSAob2Zmc2V0IC8gaGVpZ2h0KSAqIDEwMDtcbiAgICBjb25zdCBzY3JvbGxWYWx1ZSA9IE1hdGgubWluKDEwMCwgTWF0aC5tYXgoMCwgc2Nyb2xsQW1vdW50KSk7XG4gICAgY29uc3Qgc3RhdGUgPSB0aGlzLiNzdGF0ZS52YWx1ZTtcbiAgICB0aGlzLiNzdGF0ZS5uZXh0KHtcbiAgICAgIC4uLnN0YXRlLFxuICAgICAgcHJvZ3Jlc3NCYXI6IGNvbnRhaW5lci5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS55ID4gMCA/IDAgOiBzY3JvbGxWYWx1ZSxcbiAgICB9KTtcbiAgfVxuXG4gIHNlbGVjdE1lbnVJdGVtKCkge1xuICAgIHRoaXMuI21lbnVJdGVtU2VsZWN0ZWQubmV4dCh1bmRlZmluZWQpO1xuICB9XG5cbiAgc2V0TW9iaWxlKHsgaW5uZXJXaWR0aCB9OiB7IGlubmVyV2lkdGg6IG51bWJlciB9KSB7XG4gICAgY29uc3QgaXNMZXNzVGhhbjk5MnB4ID0gaW5uZXJXaWR0aCA8IDk5MjtcbiAgICBjb25zdCBpc01vYmlsZSA9IGlzTGVzc1RoYW45OTJweDtcbiAgICBjb25zdCBzdGF0ZSA9IHRoaXMuI3N0YXRlLnZhbHVlO1xuICAgIHRoaXMuI3N0YXRlLm5leHQoeyAuLi5zdGF0ZSwgaXNNb2JpbGUgfSk7XG4gIH1cbn1cbiJdfQ==