@fluid-topics/ft-app-context 1.2.58 → 1.2.59

package/build/services/history/HistoryService.d.ts

@@ -0,0 +1,34 @@
+import { WithEventBus } from "@fluid-topics/ft-wc-utils";
+import { HistoryChangeEvent, HistoryState, HistoryStateUpdate } from "./HistoryService.models";
+import { HistorySessionStorage } from "./HistorySessionStorage";
+export declare class HistoryService extends WithEventBus {
+    private history;
+    private historyStorage;
+    private windowLocation;
+    static build(): HistoryService;
+    private states;
+    private readonly initialIndex;
+    private currentIndex;
+    private currentState;
+    private readonly realPushState;
+    private readonly realReplaceState;
+    constructor(history: History, historyStorage: HistorySessionStorage, windowLocation: () => Location | URL, initDataInstantly: boolean);
+    private setCurrentState;
+    private installProxies;
+    private initEventListeners;
+    private initData;
+    updateCurrentState(update?: HistoryStateUpdate, forceMajorStateFromUpdate?: boolean): void;
+    addHistoryChangeListener(listener: (event: HistoryChangeEvent) => void): void;
+    removeHistoryChangeListener(listener: (event: HistoryChangeEvent) => void): void;
+    currentItem(): HistoryState;
+    back(): void;
+    backwardItem(): HistoryState | undefined;
+    private previousMajorPosition;
+    forward(): void;
+    forwardItem(): HistoryState | undefined;
+    private nextMajorPosition;
+    private previousExistingPosition;
+    private buildCurrentState;
+    private hasState;
+    private isMajorState;
+}

package/build/services/history/HistoryService.js

@@ -0,0 +1,163 @@
+import { deepCopy, deepEqual, WithEventBus } from "@fluid-topics/ft-wc-utils";
+import { HistoryChangeEvent } from "./HistoryService.models";
+import { historyStorage } from "./HistorySessionStorage";
+export class HistoryService extends WithEventBus {
+    static build() {
+        return new HistoryService(window.history, historyStorage, () => window.location, false);
+    }
+    constructor(history, historyStorage, windowLocation, initDataInstantly) {
+        var _a, _b;
+        super();
+        this.history = history;
+        this.historyStorage = historyStorage;
+        this.windowLocation = windowLocation;
+        this.states = [];
+        this.realPushState = history.pushState;
+        this.realReplaceState = history.replaceState;
+        this.initialIndex = (_b = (_a = history.state) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : history.length - 1;
+        this.currentIndex = this.initialIndex;
+        this.setCurrentState(this.buildCurrentState());
+        this.installProxies();
+        this.initEventListeners();
+        this.initData(initDataInstantly);
+    }
+    setCurrentState(state, clearForwardHistoryIfNecessary = false) {
+        const clearForwardHistory = clearForwardHistoryIfNecessary && this.currentIndex === state.index - 1;
+        this.currentState = { ...this.buildCurrentState(), ...state };
+        this.currentIndex = this.currentState.index;
+        this.states[this.currentIndex] = this.currentState;
+        if (clearForwardHistory) {
+            this.states = this.states.slice(0, this.currentIndex + 1);
+        }
+        this.historyStorage.set(this.currentIndex, this.currentState);
+        if (!deepEqual(this.currentState, this.history.state)) {
+            this.realReplaceState.apply(this.history, [this.currentState, this.currentState.title, window.location.href]);
+        }
+        setTimeout(() => this.dispatchEvent(new HistoryChangeEvent(this.currentItem())), 0);
+    }
+    installProxies() {
+        const editStateProxy = (indexProvider) => (method, history, [data, title, url]) => {
+            const index = indexProvider();
+            const state = {
+                ...(index === this.currentIndex ? this.currentState : undefined),
+                ...data,
+                index: index,
+                href: typeof url === "string" ? url : (url !== null && url !== void 0 ? url : this.windowLocation()).href,
+            };
+            method.apply(history, [state, title, url]);
+            this.setCurrentState(state, true);
+        };
+        this.history.pushState = new Proxy(this.history.pushState, { apply: editStateProxy(() => this.currentIndex + 1) });
+        this.history.replaceState = new Proxy(this.history.replaceState, { apply: editStateProxy(() => this.currentIndex) });
+    }
+    initEventListeners() {
+        window.addEventListener("popstate", (e) => this.setCurrentState(e.state));
+        if (document.querySelector("title") == null) {
+            document.head.append(document.createElement("title"));
+        }
+        new MutationObserver(() => this.updateCurrentState({ title: document.title }))
+            .observe(document.querySelector("title"), { subtree: true, characterData: true, childList: true });
+    }
+    initData(instant) {
+        for (let i = this.history.length - 1; i >= 0; i--) {
+            if (instant) {
+                this.states[i] = this.historyStorage.get(i);
+            }
+            else {
+                setTimeout(() => this.states[i] = this.historyStorage.get(i), this.history.length - i);
+            }
+        }
+    }
+    updateCurrentState(update, forceMajorStateFromUpdate = false) {
+        var _a, _b, _c;
+        const newState = {
+            ...this.buildCurrentState(),
+            ...update,
+            index: this.currentIndex,
+            title: (_a = update === null || update === void 0 ? void 0 : update.title) !== null && _a !== void 0 ? _a : this.currentState.title,
+        };
+        const majorState = forceMajorStateFromUpdate
+            ? ((_b = update === null || update === void 0 ? void 0 : update.majorState) !== null && _b !== void 0 ? _b : this.currentState.majorState)
+            : ((_c = this.currentState.majorState) !== null && _c !== void 0 ? _c : update === null || update === void 0 ? void 0 : update.majorState);
+        if (majorState != undefined) {
+            newState.majorState = majorState;
+        }
+        this.setCurrentState(newState);
+    }
+    addHistoryChangeListener(listener) {
+        this.addEventListener(HistoryChangeEvent.eventName, listener);
+    }
+    removeHistoryChangeListener(listener) {
+        this.removeEventListener(HistoryChangeEvent.eventName, listener);
+    }
+    currentItem() {
+        return deepCopy(this.currentState);
+    }
+    back() {
+        const previousMajorPosition = this.previousMajorPosition();
+        if (previousMajorPosition >= 0) {
+            this.history.go(previousMajorPosition - this.currentIndex);
+        }
+        else if (this.currentIndex !== this.initialIndex) {
+            this.history.go(this.initialIndex - this.currentIndex);
+        }
+        else {
+            this.history.back();
+        }
+    }
+    backwardItem() {
+        return deepCopy(this.states[this.previousMajorPosition()]);
+    }
+    previousMajorPosition() {
+        let position = this.currentIndex;
+        while (position > 0 && !this.isMajorState(position)) {
+            position--;
+        }
+        return this.previousExistingPosition(position);
+    }
+    forward() {
+        const nextMajorPosition = this.nextMajorPosition();
+        if (nextMajorPosition < this.states.length) {
+            this.history.go(nextMajorPosition - this.currentIndex);
+        }
+        else {
+            this.history.forward();
+        }
+    }
+    forwardItem() {
+        return deepCopy(this.states[this.nextMajorPosition()]);
+    }
+    nextMajorPosition() {
+        let position = this.currentIndex;
+        do {
+            position++;
+        } while (position < this.states.length && !this.isMajorState(position));
+        do {
+            position++;
+        } while (position < this.states.length && !this.isMajorState(position));
+        return this.previousExistingPosition(position);
+    }
+    previousExistingPosition(fromIndex) {
+        let position = fromIndex;
+        do {
+            position--;
+        } while (position > 0 && !this.hasState(position));
+        return position;
+    }
+    buildCurrentState() {
+        var _a, _b;
+        return {
+            ...this.history.state,
+            index: this.currentIndex,
+            href: this.windowLocation().href,
+            title: (_b = (_a = this.history.state) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : document.title,
+        };
+    }
+    hasState(index) {
+        return this.states[index] != undefined;
+    }
+    isMajorState(index) {
+        var _a, _b;
+        return this.hasState(index) && ((_b = (_a = this.states[index]) === null || _a === void 0 ? void 0 : _a.majorState) !== null && _b !== void 0 ? _b : true);
+    }
+}

package/build/services/history/HistoryService.models.d.ts

@@ -0,0 +1,18 @@
+export interface HistoryState {
+    index: number;
+    href: string;
+    token?: string;
+    title: string;
+    majorState?: boolean;
+}
+export interface HistoryStateUpdate {
+    token?: string;
+    title?: string;
+    majorState?: boolean;
+}
+export declare class HistoryChangeEvent extends CustomEvent<{
+    currentItem: HistoryState;
+}> {
+    static eventName: string;
+    constructor(currentItem: HistoryState);
+}

package/build/services/history/HistoryService.models.js

@@ -0,0 +1,7 @@
+class HistoryChangeEvent extends CustomEvent {
+    constructor(currentItem) {
+        super(HistoryChangeEvent.eventName, { detail: { currentItem } });
+    }
+}
+HistoryChangeEvent.eventName = "change";
+export { HistoryChangeEvent };

package/build/services/history/HistorySessionStorage.d.ts

@@ -0,0 +1,7 @@
+import { HistoryState } from "./HistoryService.models";
+export declare class HistorySessionStorage {
+    private itemName;
+    get(index: number): HistoryState | undefined;
+    set(index: number, state: HistoryState): void;
+}
+export declare const historyStorage: HistorySessionStorage;

package/build/services/history/HistorySessionStorage.js

@@ -0,0 +1,13 @@
+export class HistorySessionStorage {
+    itemName(index) {
+        return `fluid-topics-history-item-${index}`;
+    }
+    get(index) {
+        const item = sessionStorage.getItem(this.itemName(index));
+        return item ? JSON.parse(item) : undefined;
+    }
+    set(index, state) {
+        sessionStorage.setItem(this.itemName(index), JSON.stringify(state));
+    }
+}
+export const historyStorage = new HistorySessionStorage();

package/build/services/history/WithHistory.d.ts

@@ -0,0 +1,12 @@
+import { Constructor, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { HistoryState } from "./HistoryService.models";
+export interface WithHistoryInterface extends EventTarget {
+    backwardItem?: HistoryState;
+    forwardItem?: HistoryState;
+}
+export type WithHistoryComponentType<T extends Constructor<FtLitElement>> = T & Constructor<WithHistoryInterface>;
+export declare function withHistory<T extends Constructor<FtLitElement>>(ReduxClass: T): WithHistoryComponentType<T>;
+declare const WithHistory_base: WithHistoryComponentType<typeof FtLitElement>;
+export declare class WithHistory extends WithHistory_base {
+}
+export {};

package/build/services/history/WithHistory.js

@@ -0,0 +1,37 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { state } from "lit/decorators.js";
+export function withHistory(ReduxClass) {
+    class WithHistoryClass extends ReduxClass {
+        constructor() {
+            super(...arguments);
+            this.updateState = () => {
+                this.backwardItem = window.FluidTopicsHistoryService.backwardItem();
+                this.forwardItem = window.FluidTopicsHistoryService.forwardItem();
+            };
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            window.FluidTopicsHistoryService.addHistoryChangeListener(this.updateState);
+            this.updateState();
+        }
+        disconnectedCallback() {
+            window.FluidTopicsHistoryService.addHistoryChangeListener(this.updateState);
+            super.disconnectedCallback();
+        }
+    }
+    __decorate([
+        state()
+    ], WithHistoryClass.prototype, "backwardItem", void 0);
+    __decorate([
+        state()
+    ], WithHistoryClass.prototype, "forwardItem", void 0);
+    return WithHistoryClass;
+}
+export class WithHistory extends withHistory(FtLitElement) {
+}

package/build/services/history/index.d.ts

@@ -0,0 +1,15 @@
+import { HistoryService } from "./HistoryService";
+declare global {
+    interface Window {
+        FluidTopicsInternalHistoryService: HistoryService;
+        FluidTopicsHistoryService: {
+            currentItem: HistoryService["currentItem"];
+            back: HistoryService["forward"];
+            forward: HistoryService["back"];
+            backwardItem: HistoryService["backwardItem"];
+            forwardItem: HistoryService["forwardItem"];
+            addHistoryChangeListener: HistoryService["addHistoryChangeListener"];
+            removeHistoryChangeListener: HistoryService["removeHistoryChangeListener"];
+        };
+    }
+}

package/build/services/history/index.js

@@ -0,0 +1,13 @@
+import { HistoryService } from "./HistoryService";
+if (window.FluidTopicsInternalHistoryService == null) {
+    window.FluidTopicsInternalHistoryService = HistoryService.build();
+    window.FluidTopicsHistoryService = {
+        currentItem: () => window.FluidTopicsInternalHistoryService.currentItem(),
+        back: () => window.FluidTopicsInternalHistoryService.back(),
+        forward: () => window.FluidTopicsInternalHistoryService.forward(),
+        backwardItem: () => window.FluidTopicsInternalHistoryService.backwardItem(),
+        forwardItem: () => window.FluidTopicsInternalHistoryService.forwardItem(),
+        addHistoryChangeListener: (callback) => window.FluidTopicsInternalHistoryService.addHistoryChangeListener(callback),
+        removeHistoryChangeListener: (callback) => window.FluidTopicsInternalHistoryService.removeHistoryChangeListener(callback),
+    };
+}

package/build/services/index.d.ts

@@ -9,3 +9,4 @@ export * from "./DateService";
 export * from "./SearchPlaceConverterProvider";
 export * from "./FtAnalyticsEventsService";
 export * from "./webapp/UrlService";
+export * from "./history";

package/build/services/index.js

@@ -9,3 +9,4 @@ export * from "./DateService";
 export * from "./SearchPlaceConverterProvider";
 export * from "./FtAnalyticsEventsService";
 export * from "./webapp/UrlService";
+export * from "./history";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-app-context",
-  "version": "1.2.58",
+  "version": "1.2.59",
   "description": "Global application context for Fluid Topics integrations",
   "keywords": [
     "Lit"
@@ -19,11 +19,11 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-wc-utils": "1.2.58",
+    "@fluid-topics/ft-wc-utils": "1.2.59",
     "lit": "3.1.0"
   },
   "devDependencies": {
     "@fluid-topics/public-api": "1.0.94"
   },
-  "gitHead": "7aa0ab41f37fa5e6f4f6477c4994b15663d67b4f"
+  "gitHead": "ca70918bd99da1a41e1d5ee71f9e9156ac58289f"
 }