jpf 5.0.62 → 5.0.63

package/src/framework/observablelmplementations.ts

@@ -1,135 +1,135 @@
-import { ISubscribable, IComputed, IObservableValue, IObservableArray, IObservableMap, IObservableSet } from "./observableInterfaces";
-
-export const implementations = {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    unwrap: <TValue>(value: TValue | ISubscribable<TValue>): TValue => {
-        throw "Unwrap is not implemented";
-    },
-
-    isComputed: (value): value is IComputed<unknown> => {
-        throw "isComputed is not implemented";
-    },
-
-    isObservableValue: (value): value is IObservableValue => {
-        throw "isObservableValue is not implemented";
-    },
-
-    isObservableArray: (value): value is IObservableArray => {
-        throw "isObservableArray is not implemented";
-    },
-
-    isObservableMap: <TKey, TItem>(value): value is IObservableMap<TKey, TItem> => {
-        throw "isObservableMap is not implemented";
-    },
-
-    isObservableSet: <TItem>(value): value is IObservableSet<TItem> => {
-        throw "isObservableSet is not implemented";
-    },
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    computed: <TComputed>(func: () => TComputed): IComputed<TComputed> => {
-        throw "computed is not implemented";
-    },
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    observableValue: <TValue, TSetter = TValue>(value?: TValue | null, setter?: (value: TSetter, observableValue: IObservableValue<TValue, TSetter>) => void): IObservableValue<TValue, TSetter> => {
-        throw "observableValue is not implemented";
-    },
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    observableArray: <TItem = unknown, TSetter = Array<TItem>>(initialValues?: Array<TItem> | null, setter?: (value: TSetter, observableArray: IObservableArray<TItem, TSetter>) => void): IObservableArray<TItem, TSetter> => {
-        throw "observableArray is not implemented"
-    },
-
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    observableMap: <TKey = unknown, TItem = unknown>(initialValues?): IObservableMap<TKey, TItem> => {
-        throw "observableMap is not implemented"
-    },
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    observableSet: <TItem = unknown>(initialValues): IObservableSet<TItem> => {
-        throw "observableMap is not implemented"
-    }
-
-}
-
-export function unwrap<TValue>(value: TValue | ISubscribable<TValue>): TValue {
-    return implementations.unwrap(value);
-}
-
-export function isComputed(value): value is IComputed<unknown> {
-    return implementations.isComputed(value);
-}
-
-export function isObservableValue(value): value is IObservableValue {
-    return implementations.isObservableValue(value);
-}
-
-export function isObservableArray(value): value is IObservableArray {
-    return implementations.isObservableArray(value);
-}
-
-export function isObservableMap<TKey, TItem>(value): value is IObservableMap<TKey, TItem> {
-    return implementations.isObservableMap(value);
-}
-
-export function isObservableSet<TItem>(value): value is IObservableSet<TItem> {
-    return implementations.isObservableSet(value);
-}
-
-export function computed<TComputed>(func: () => TComputed): IComputed<TComputed> {
-    return implementations.computed(func);
-}
-
-export function observableValue<TValue, TSetter = TValue>(value?: TValue | null, setter?: (value: TSetter, observableValue: IObservableValue<TValue, TSetter>) => void): IObservableValue<TValue, TSetter> {
-    return implementations.observableValue(value, setter);
-}
-
-export function isSubscribable<TValue>(value: unknown): value is ISubscribable<TValue> {
-    return implementations.isComputed(value)
-        || implementations.isObservableValue(value)
-        || implementations.isObservableArray(value)
-        || implementations.isObservableMap(value)
-        || implementations.isObservableSet(value);
-}
-
-export function executeHandlerOnContext(context: object, handler: (context) => void, alreadyProcessedContexts?: Set<object>) {
-    if (!alreadyProcessedContexts) {
-        alreadyProcessedContexts = new Set();
-    }
-
-    if (!context || typeof context !== "object" || alreadyProcessedContexts.has(context)) {
-        return;
-    }
-
-    //Add the context to the alreadyProcessedContext to prevent processing the same object twice.
-    alreadyProcessedContexts.add(context);
-
-    //Find out if the object is an array
-    if (Array.isArray(context)) {
-        for (const arrayEntry of context as Array<unknown>) {
-            if (typeof arrayEntry === "object") {
-                executeHandlerOnContext(arrayEntry, handler, alreadyProcessedContexts);
-            }
-        }
-    } else {
-        if (isSubscribable(context)) {
-            const unwrapped = unwrap(context);
-            if (typeof unwrapped === "object") {
-                executeHandlerOnContext(unwrapped, handler, alreadyProcessedContexts);
-            }
-        } else {
-            //Call the handler on the object.
-            handler(context);
-
-            //Find out if the object has properties of type object
-            for (const key of Object.keys(context)) {
-                const property = context[key];
-                if (property && typeof property === "object") {
-                    executeHandlerOnContext(property, handler, alreadyProcessedContexts);
-                }
-            }
-        }
-    }
-}
+//import { ISubscribable, IComputed, IObservableValue, IObservableArray, IObservableMap, IObservableSet } from "./observableInterfaces";
+
+//export const implementations = {
+//    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+//    unwrap: <TValue>(value: TValue | ISubscribable<TValue>): TValue => {
+//        throw "Unwrap is not implemented";
+//    },
+
+//    isComputed: (value): value is IComputed<unknown> => {
+//        throw "isComputed is not implemented";
+//    },
+
+//    isObservableValue: (value): value is IObservableValue => {
+//        throw "isObservableValue is not implemented";
+//    },
+
+//    isObservableArray: (value): value is IObservableArray => {
+//        throw "isObservableArray is not implemented";
+//    },
+
+//    isObservableMap: <TKey, TItem>(value): value is IObservableMap<TKey, TItem> => {
+//        throw "isObservableMap is not implemented";
+//    },
+
+//    isObservableSet: <TItem>(value): value is IObservableSet<TItem> => {
+//        throw "isObservableSet is not implemented";
+//    },
+
+//    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+//    computed: <TComputed>(func: () => TComputed): IComputed<TComputed> => {
+//        throw "computed is not implemented";
+//    },
+
+//    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+//    observableValue: <TValue, TSetter = TValue>(value?: TValue | null, setter?: (value: TSetter, observableValue: IObservableValue<TValue, TSetter>) => void): IObservableValue<TValue, TSetter> => {
+//        throw "observableValue is not implemented";
+//    },
+
+//    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+//    observableArray: <TItem = unknown, TSetter = Array<TItem>>(initialValues?: Array<TItem> | null, setter?: (value: TSetter, observableArray: IObservableArray<TItem, TSetter>) => void): IObservableArray<TItem, TSetter> => {
+//        throw "observableArray is not implemented"
+//    },
+
+
+//    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+//    observableMap: <TKey = unknown, TItem = unknown>(initialValues?): IObservableMap<TKey, TItem> => {
+//        throw "observableMap is not implemented"
+//    },
+
+//    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+//    observableSet: <TItem = unknown>(initialValues): IObservableSet<TItem> => {
+//        throw "observableMap is not implemented"
+//    }
+
+//}
+
+//export function unwrap<TValue>(value: TValue | ISubscribable<TValue>): TValue {
+//    return implementations.unwrap(value);
+//}
+
+//export function isComputed(value): value is IComputed<unknown> {
+//    return implementations.isComputed(value);
+//}
+
+//export function isObservableValue(value): value is IObservableValue {
+//    return implementations.isObservableValue(value);
+//}
+
+//export function isObservableArray(value): value is IObservableArray {
+//    return implementations.isObservableArray(value);
+//}
+
+//export function isObservableMap<TKey, TItem>(value): value is IObservableMap<TKey, TItem> {
+//    return implementations.isObservableMap(value);
+//}
+
+//export function isObservableSet<TItem>(value): value is IObservableSet<TItem> {
+//    return implementations.isObservableSet(value);
+//}
+
+//export function computed<TComputed>(func: () => TComputed): IComputed<TComputed> {
+//    return implementations.computed(func);
+//}
+
+//export function observableValue<TValue, TSetter = TValue>(value?: TValue | null, setter?: (value: TSetter, observableValue: IObservableValue<TValue, TSetter>) => void): IObservableValue<TValue, TSetter> {
+//    return implementations.observableValue(value, setter);
+//}
+
+//export function isSubscribable<TValue>(value: unknown): value is ISubscribable<TValue> {
+//    return implementations.isComputed(value)
+//        || implementations.isObservableValue(value)
+//        || implementations.isObservableArray(value)
+//        || implementations.isObservableMap(value)
+//        || implementations.isObservableSet(value);
+//}
+
+//export function executeHandlerOnContext(context: object, handler: (context) => void, alreadyProcessedContexts?: Set<object>) {
+//    if (!alreadyProcessedContexts) {
+//        alreadyProcessedContexts = new Set();
+//    }
+
+//    if (!context || typeof context !== "object" || alreadyProcessedContexts.has(context)) {
+//        return;
+//    }
+
+//    //Add the context to the alreadyProcessedContext to prevent processing the same object twice.
+//    alreadyProcessedContexts.add(context);
+
+//    //Find out if the object is an array
+//    if (Array.isArray(context)) {
+//        for (const arrayEntry of context as Array<unknown>) {
+//            if (typeof arrayEntry === "object") {
+//                executeHandlerOnContext(arrayEntry, handler, alreadyProcessedContexts);
+//            }
+//        }
+//    } else {
+//        if (isSubscribable(context)) {
+//            const unwrapped = unwrap(context);
+//            if (typeof unwrapped === "object") {
+//                executeHandlerOnContext(unwrapped, handler, alreadyProcessedContexts);
+//            }
+//        } else {
+//            //Call the handler on the object.
+//            handler(context);
+
+//            //Find out if the object has properties of type object
+//            for (const key of Object.keys(context)) {
+//                const property = context[key];
+//                if (property && typeof property === "object") {
+//                    executeHandlerOnContext(property, handler, alreadyProcessedContexts);
+//                }
+//            }
+//        }
+//    }
+//}

package/src/framework/properties.ts

@@ -1,344 +1,3 @@
-import { IEventListener } from "./event";
-import { IAttributes } from "./attributes";
-import { IStyle as Style, IStyleSubscribable as StyleSubscribable } from "./style";
-import { ISubscribable, IDisposer } from "./observableInterfaces";
-import { isSubscribable, unwrap, executeHandlerOnContext } from "./observablelmplementations";
+
 
-export interface IWebSocketMessageHandler {
-    handleWebSocketMessage: (message: unknown) => void;
-}
 
-export interface IProperties {
-    attributes?: IAttributes;
-    classNames?: Array<string> | ISubscribable<Array<string>>;
-    style?: Style | StyleSubscribable;
-    visible?: boolean | ISubscribable<boolean>;
-    disabled?: boolean | ISubscribable<boolean>;
-    innerHtml?: string | ISubscribable<string>;
-    textContent?: string | ISubscribable<string>;
-    addViewModelToDataObject?: boolean;
-    userSelectable?: boolean;
-    eventListeners?: Array<IEventListener>;
-    elementType?: string;
-    focused?: boolean | ISubscribable<boolean>;
-}
-
-export abstract class Properties implements IProperties {
-    protected setProperties<TProperties>(object: object, properties?: TProperties) {
-        if (properties) {
-            Object.keys(properties).forEach((property) => {
-                object[property] = properties[property];
-            });
-        }
-    }
-
-    attributes?: IAttributes;
-    classNames?: Array<string> | ISubscribable<Array<string>>;
-    style?: Style | StyleSubscribable;
-    visible?: boolean | ISubscribable<boolean>;
-    disabled?: boolean | ISubscribable<boolean>;
-    innerHtml?: string | ISubscribable<string>;
-    textContent?: string | ISubscribable<string>;
-    addViewModelToDataObject?: boolean;
-    userSelectable?: boolean;
-    eventListeners?: Array<IEventListener>;
-    elementType?: string;
-    focused?: boolean | ISubscribable<boolean>;
-}
-
-//#region Properties helper functions
-
-export function handleWebSocketMessage(context: object, message: unknown) {
-    executeHandlerOnContext(
-        context,
-        (context) => {
-            const webSocketMessageHandler = context as IWebSocketMessageHandler;
-            if (webSocketMessageHandler.handleWebSocketMessage && typeof webSocketMessageHandler.handleWebSocketMessage === "function") {
-                //Call the handleWebSocketMessage method
-                webSocketMessageHandler.handleWebSocketMessage(message);
-            }
-        }
-    );
-}
-
-export function isNullOrUndefined(value): boolean {
-    return value === null || typeof value === "undefined";
-}
-
-export function extendProperties<TTarget = IProperties, TOverwritingProperties = TTarget, TPreserveExistingProperties = TTarget>(target: TTarget, preserveExisting: TPreserveExistingProperties, overWriteExisting?: TOverwritingProperties): TTarget {
-    if (overWriteExisting || preserveExisting) {
-        target = target || {} as TTarget;
-
-        if (typeof preserveExisting === "object") {
-            Object.keys(preserveExisting).forEach((key) => {
-                //Check if the target object does not already have a property with the given key
-                if (!target.hasOwnProperty(key) || typeof target[key] === "undefined") {
-                    target[key] = preserveExisting[key];
-                }
-            });
-        }
-
-        if (typeof overWriteExisting === "object") {
-            Object.keys(overWriteExisting).forEach((key) => {
-                target[key] = overWriteExisting[key];
-            });
-        }
-    }
-
-    return target;
-}
-
-//Functions to bind the Properties to a html element
-export function applyBindings(properties: IProperties, element: HTMLElement, disposers: Array<IDisposer>) {
-    element.setAttribute("elementtype", properties.elementType || "Element");
-
-    if (properties.classNames) {
-        applyClassesToElement(unwrap(properties.classNames), true, element);
-        if (isSubscribable(properties.classNames)) {
-            const disposer = properties.classNames.subscribe((classNames) => {
-                applyClassesToElement(classNames, true, element);
-            });
-
-            if (disposers) {
-                disposers.push(disposer);
-            }
-        }
-    }
-
-    if (properties.attributes) {
-        Object.keys(properties.attributes).forEach((key) => {
-            const value = properties.attributes[key];
-            applyAttributeToElement(key as keyof IAttributes, unwrap(value), element);
-
-            if (isSubscribable(value)) {
-                const disposer = value.subscribe((value: string) => {
-                    applyAttributeToElement(key as keyof IAttributes, value, element);
-                });
-                if (disposers) {
-                    disposers.push(disposer);
-                }
-            }
-        });
-    }
-
-    if (properties.style) {
-        Object.keys(properties.style).forEach((key) => {
-            const style = properties.style[key];
-
-            element.style[key] = unwrap(style);
-            if (isSubscribable(style)) {
-                const disposer = style.subscribe((style) => {
-                    element.style[key] = style;
-                });
-
-                if (disposers) {
-                    disposers.push(disposer);
-                }
-            }
-        });
-    }
-
-    if (!isNullOrUndefined(properties.innerHtml)) {
-
-        element.innerHTML = unwrap(properties.innerHtml);
-
-        if (isSubscribable(properties.innerHtml)) {
-            const disposer = properties.innerHtml.subscribe((innerHtml: string) => {
-                element.innerHTML = innerHtml;
-            });
-
-            if (disposers) {
-                disposers.push(disposer);
-            }
-        }
-    }
-
-    if (!isNullOrUndefined(properties.textContent)) {
-
-        const textContent = unwrap(properties.textContent);
-
-        if (element.hasChildNodes() && element.childNodes.length === 1 && element.childNodes[0].nodeType === 3) {
-            element.firstChild.nodeValue = textContent;
-        } else {
-            element.textContent = unwrap(properties.textContent);
-        }
-
-        if (isSubscribable(properties.textContent)) {
-            const disposer = properties.textContent.subscribe((textContent) => {
-                if (element.hasChildNodes() && element.childNodes.length === 1 && element.childNodes[0].nodeType === 3) {
-                    element.firstChild.nodeValue = textContent;
-                } else {
-                    element.textContent = unwrap(properties.textContent);
-                }
-            });
-
-            if (disposers) {
-                disposers.push(disposer);
-            }
-        }
-    }
-
-    //Find out if the element is none selectable
-    if (properties.userSelectable === false) {
-        applyEventListenerToElement({
-            type: Event,
-            name: "selectstart",
-            handler: () => { return false; },
-            passive: true
-        },
-            element
-        );
-        element.style.userSelect = "none";
-    }
-
-    if (properties.addViewModelToDataObject) {
-        if (!element["data"]) {
-            element["data"] = {};
-        }
-        element["data"].viewModel = properties;
-    }
-
-    if (properties.eventListeners) {
-        applyEventListenersToElement(properties.eventListeners, element);
-    }
-
-    applyVisibilityToElement(unwrap(properties.visible), element);
-    if (isSubscribable(properties.visible)) {
-        const disposer = properties.visible.subscribe((visible) => {
-            applyVisibilityToElement(visible, element);
-        });
-
-        if (disposers) {
-            disposers.push(disposer);
-        }
-    }
-
-    applyDisabledToElement(unwrap(properties.disabled), element);
-    if (isSubscribable(properties.disabled)) {
-        const disposer = properties.disabled.subscribe((disabled) => {
-            applyDisabledToElement(disabled, element);
-        });
-
-        if (disposers) {
-            disposers.push(disposer);
-        }
-    }
-
-    applyFocusToElement(unwrap(properties.focused), element);
-    if (isSubscribable(properties.focused)) {
-        const disposer = properties.focused.subscribe((focused) => {
-            applyFocusToElement(focused, element);
-        });
-
-        if (disposers) {
-            disposers.push(disposer);
-        }
-    }
-}
-
-function applyVisibilityToElement(visible: boolean, element: HTMLElement) {
-    if (visible === false) {
-        element.classList.add("hidden");
-    } else {
-        element.classList.remove("hidden");
-    }
-}
-
-function applyDisabledToElement(disabled: boolean, element: HTMLElement) {
-    if (disabled) {
-        element.setAttribute("disabled", "disabled");
-    } else {
-        element.removeAttribute("disabled");
-    }
-}
-
-function applyEventListenersToElement(eventListeners: Array<IEventListener>, element: HTMLElement) {
-    if (!element.addEventListener) {
-        throw new Error("Your browser does not support addEventListener");
-    }
-
-    if (eventListeners) {
-        eventListeners.forEach((eventListener) => {
-            applyEventListenerToElement(eventListener, element);
-        });
-    }
-}
-
-function applyEventListenerToElement(eventListener: IEventListener, element: HTMLElement) {
-    const type = eventListener.type;
-    const name = eventListener.name;
-    let handler = eventListener.handler;
-    const options: AddEventListenerOptions = {
-        passive: eventListener.passive || false,
-        once: eventListener.once || false
-    };
-
-    if (!type) {
-        throw new Error("type is mandatory");
-    }
-    if (!name) {
-        throw new Error("name is mandatory");
-    }
-    if (!handler) {
-        throw new Error("handler is mandatory");
-    }
-
-    if (name === "dragstart") {
-        element.setAttribute("draggable", "true");
-    }
-
-    if (eventListener.type === KeyboardEvent) {
-        handler = (event: KeyboardEvent) => {
-            if (eventListener.altKey && !event.altKey) {
-                return;
-            }
-
-            if (eventListener.shiftKey && !event.shiftKey) {
-                return;
-            }
-
-            if (eventListener.ctrlKey && !event.ctrlKey) {
-                return;
-            }
-            if (eventListener.key && eventListener.key !== event.key) {
-                return;
-            }
-
-            handler(event);
-        }
-    }
-
-
-    //Add the event listener to the element
-    element.addEventListener(name, handler, options);
-
-}
-
-function applyClassesToElement(classNames: string[], replace: boolean, element: HTMLElement) {
-    //If all existing classes need to be replace we reset the classes object to an empty object
-    if (replace) {
-        element.className = "";
-    }
-
-    //Add all the classNames to the classes object
-    if (classNames) {
-        classNames.forEach((className) => {
-            element.classList.add(className);
-        });
-    }
-}
-
-function applyAttributeToElement(name: keyof IAttributes, value: string, element: HTMLElement) {
-    if (isNullOrUndefined(value)) {
-        element.removeAttribute(name);
-    } else {
-        element.setAttribute(name, value);
-    }
-}
-
-function applyFocusToElement(focused: boolean, element: HTMLElement) {
-    if (focused) {
-        element.focus();
-    }
-}
-//#endregion