jpf 5.0.3 → 5.0.6

package/src/framework/observable.ts

@@ -1,80 +1,114 @@
-import { Subscribable, ObservableArray, Observable, isObservable, observable, observableArray, pureComputed } from "knockout";
+export interface ISubscription {
+    dispose(): void;
+}
+
+export interface ISubscribable<TValue> {
+    subscribe(handler: (arg: TValue, prev: TValue) => void): ISubscription;
+}
 
-export interface ObservableProperty<TValue = any, TSetter = TValue> extends Subscribable<TValue> {
+export interface IObservableValue<TValue = any, TSetter = TValue> extends ISubscribable<TValue> {
     (): TValue;
-    set: (value: TSetter | null, triggerSetter?: boolean) => void;
+    setValue(value: TSetter | null): void;
+    setValueInAction(value: TSetter| null): void;
+    setInternal(value: TValue | null): void;
 }
 
-export function isObservableProperty<T = any>(instance: any): instance is ObservableProperty<T> {
-    return instance && !!(instance as ObservableProperty<T>).set;
+export interface IObservableArray<TItem = any, TSetter = Array<TItem>> extends Array<TItem>, ISubscribable<Array<TItem>> {
+    get(): Array<TItem>;
+    setItems(items: TSetter | null, triggerSetter?: boolean): void;
+    setInternal(items: Array<TItem> | null): void;
 }
 
-export function observableProperty<TValue, TSetter = TValue>(value?: TValue | Observable<TValue>, setter?: (value: TSetter, internalProperty: Observable<TValue>) => void, notifyAlways: boolean = false): ObservableProperty<TValue, TSetter> {
-    let internalProperty: Observable<TValue>;
-    if (value === undefined) {
-        value = null;
-    }
-    if (isObservable(value)) {
-        internalProperty = value;
-    } else {
-        internalProperty = observable<TValue>(value);
-    }
+export interface IComputed<TValue> extends ISubscribable<TValue> {
+    (): TValue;
+}
 
-    if (notifyAlways) {
-        internalProperty.extend({ notify: "always" });
-    }
+export interface IObservableMap<TKey, TValue> {
 
-    //Wrap the internal property in a computed so the property becomes readonly
-    const computed = pureComputed({ read: internalProperty }).extend({ notify: "always" }) as any as ObservableProperty<TValue, TSetter>;
+}
 
-    computed.set = (newValue: any, triggerSetter: boolean = true) => {
-        if (setter && triggerSetter) {
-            setter(newValue, internalProperty);
-        } else {
-            internalProperty(newValue);
-        }
-    };
+export interface IObservableSet<TItem> {
 
-    return computed;
 }
 
-export interface ObservableArrayProperty<TItem = any, TSetter = Array<TItem>> extends ObservableArray<TItem> {
-    set: (items: TSetter, triggerSetter?: boolean) => void;
-    map<TResult>(callbackfn: (value: TItem, index: number, array: TItem[]) => TResult, thisArg?: any): TResult[];
+export function observableValue<TValue, TSetter = TValue>(value?: TValue | null, setter?: (value: TSetter, observableValue: IObservableValue<TValue, TSetter>) => void): IObservableValue<TValue, TSetter> {
+    throw "observableValue is not implemented";
 }
 
-export function observableArrayProperty<TItem, TSetter = Array<TItem>>(items?: Array<TItem> | ObservableArray<TItem>, setter?: (items: TSetter, internalProperty: ObservableArray<TItem>) => void): ObservableArrayProperty<TItem, TSetter> {
-    //Create an ObservableArray to hold the Items.
-    let internalProperty: ObservableArray<TItem>;
-    if (!items) {
-        items = [];
-    }
-    if (isObservable(items)) {
-        internalProperty = items;
-    } else {
-        internalProperty = observableArray<TItem>(items);
-    }
+export function observableArray<TItem = any, TSetter = Array<TItem>>(initialValues?: Array<TItem> | null, setter?: (value: TSetter, observableArray: IObservableArray<TItem, TSetter>) => void): IObservableArray<TItem, TSetter> {
+    throw "observableArray is not implemented";
+}
 
-    //Wrap the ObservableArray in a computed so the property becomes readonly
-    const computed = pureComputed({ read: internalProperty }).extend({ notify: "always" }) as any as ObservableArrayProperty<TItem, TSetter>;
+export function observableMap<TKey = any, TItem = any>() {
+    throw "observableMap is not implemented";
+}
 
-    computed.set = (value: any, triggerSetter: boolean = true) => {
-        if (setter && triggerSetter) {
-            setter(value, internalProperty);
-        } else {
-            internalProperty(value);
-        }
-    };
+export function observableSet<TItem = any>() {
+    throw "observableSet is not implemented";
+}
 
-    computed.push = (...itemsToPush) => {
-        internalProperty.push(...itemsToPush);
-        return itemsToPush.length;
-    }
 
-    computed.map = (callBack: (value: TItem, index: number, array: TItem[]) => any, thisArg?: any) => {
-        //Call the map function on the underlying array
-        return internalProperty().map(callBack, thisArg);
-    }
+export function computed<TComputed>(func: () => TComputed): IComputed<TComputed> {
+    throw "computed is not implementd";
+}
+
+export function unwrap<TValue>(value: TValue | ISubscribable<TValue>): TValue {
+    throw "Unwrap is not implemented";
+}
+
+export function isSubscribable<TValue>(value: any): value is ISubscribable<TValue> {
+    return isComputed(value)
+        || isObservableValue(value)
+        || isObservableArray(value)
+        || isObservableMap(value)
+        || isObservableSet(value);
+}
 
-    return computed;
+export function isComputed(value): value is IComputed<any> {
+    throw "isComputed is not implemented";
 }
+
+export function isObservableValue(value): value is IObservableValue {
+    throw "isObservableValue is not implemented";
+}
+
+export function isObservableArray(value): value is IObservableArray {
+    throw "isObservableArray is not implemented";
+}
+
+export function isObservableMap<TKey, TItem>(value): value is IObservableMap<TKey, TItem> {
+    throw "isObservableMap is not implemented";
+}
+
+export function isObservableSet<TItem>(value): value is IObservableSet<TItem> {
+    throw "isObservableSet is not implemented";
+}
+
+export function executeHandlerOnObject(handler: (object) => void, object: object,) {
+    //Find out if the object is an array
+    if (object.constructor === Array) {
+        for (const arrayEntry of object as Array<any>) {
+            if (typeof arrayEntry === "object") {
+                executeHandlerOnObject(handler, arrayEntry);
+            }
+        }
+    } else {
+        if (isSubscribable(object)) {
+            const unwrapped = unwrap(object);
+            if (typeof unwrapped === "object") {
+                executeHandlerOnObject(handler, unwrapped);
+            }
+        } else {
+            //Call the handler on the object.
+            handler(object);
+
+            //Find out if the object has properties of type object
+            for (const key in Object.keys(object)) {
+                const property = object[key];
+                if (property && typeof property === "object") {
+                    executeHandlerOnObject(handler, property);
+                }
+            }
+        }
+    }
+}

package/src/framework/properties.ts

@@ -0,0 +1,393 @@
+import { IEventListeners, IUiElementEventMap, IEventListenerOptions, IGenericEventListener, mouseEvents, touchEvents, isGlobalEvent } from "./event";
+import { IAttributes, IAttributesSubscribable } from "./attributes";
+import { IStyle as Style, IStyleSubscribable as StyleSubscribable } from "./style";
+import { unwrap, executeHandlerOnObject, isSubscribable } from "./observable";
+import { ISubscription, ISubscribable } from "./observable";
+import { userAgent } from "../utilities/userAgent/userAgent";
+
+export interface IWebSocketMessageHandler {
+    handleWebSocketMessage: (message: any) => void;
+}
+
+export interface IProperties {
+    attributes?: IAttributes | IAttributesSubscribable;
+    classNames?: Array<string> | ISubscribable<Array<string>>;
+    style?: Style | StyleSubscribable;
+    visible?: boolean | ISubscribable<boolean>;
+    disabled?: boolean | ISubscribable<boolean>;
+    innerHtml?: any | ISubscribable<any>;
+    textContent?: string | ISubscribable<string>;
+    addViewModelToDataObject?: boolean;
+    userSelectable?: boolean;
+    eventListeners?: IEventListeners;
+    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 | IAttributesSubscribable;
+    classNames?: Array<string> | ISubscribable<Array<string>>;
+    style?: Style | StyleSubscribable;
+    visible?: boolean | ISubscribable<boolean>;
+    disabled?: boolean | ISubscribable<boolean>;
+    innerHtml?: any | ISubscribable<any>;
+    textContent?: string | ISubscribable<string>;
+    addViewModelToDataObject?: boolean;
+    userSelectable?: boolean;
+    eventListeners?: IEventListeners;
+    elementType?: string;
+    focused?: boolean | ISubscribable<boolean>;
+}
+
+//#region Properties helper functions
+
+export function handleWebSocketMessage(object: object, message: any) {
+    executeHandlerOnObject(
+        (object) => {
+            const webSocketMessageHandler = object as IWebSocketMessageHandler;
+            if (webSocketMessageHandler.handleWebSocketMessage && typeof webSocketMessageHandler.handleWebSocketMessage === "function") {
+                //Call the handleWebSocketMessage method
+                webSocketMessageHandler.handleWebSocketMessage(message);
+            }
+        },
+        object
+    );
+}
+
+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<ISubscription>) {
+    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) => {
+            var 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("selectstart", () => { 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, 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(properties: IProperties, element: HTMLElement) {
+    //Add the eventListeners to the element
+    const clickEventListeners = new Array<IGenericEventListener>();
+    const doubleClickEventListeners = new Array<IGenericEventListener>();
+
+    Object.entries(properties.eventListeners).forEach((entry) => {
+        var eventName = entry[0] as keyof IUiElementEventMap;
+        var eventListener = entry[1] as IGenericEventListener;
+
+        if (eventName === "click") {
+            clickEventListeners.push(eventListener);
+            return;
+        }
+        if (eventName === "dblclick") {
+            doubleClickEventListeners.push(eventListener);
+            return;
+        }
+
+        if (eventName === "dragstart") {
+            element.setAttribute("draggable", "true");
+        }
+
+        if (isGlobalEvent(eventName)) {
+            applyEventListenerToElement(
+                eventName,
+                (event: Event) => {
+                    if (eventListener.options) {
+                        const options = eventListener.options as IEventListenerOptions;
+                        const keyEvent = event as KeyboardEvent;
+                        if (options.altKey && !keyEvent.altKey) {
+                            return;
+                        }
+                        if (options.shiftKey && !keyEvent.shiftKey) {
+                            return;
+                        }
+                        if (options.ctrlKey && !keyEvent.ctrlKey) {
+                            return;
+                        }
+                        if (options.eventKey && options.eventKey !== keyEvent.key) {
+                            return;
+                        }
+                    }
+
+                    eventListener.listener.call(properties, event);
+                },
+                eventListener.options,
+                element
+            );
+        }
+        else if (mouseEvents[eventName] && userAgent.device.supportsMouseEvents) {
+            applyEventListenerToElement(eventName, eventListener.listener, eventListener.options, element);
+        }
+        else if (touchEvents[eventName] && userAgent.device.supportsTouchEvents) {
+            applyEventListenerToElement(eventName, eventListener.listener, eventListener.options, element);
+        }
+    });
+
+    clickEventListeners.forEach((clickEventListener) => {
+        if (userAgent.device.supportsTouchEvents) {
+            // ReSharper disable once Html.EventNotResolved
+            applyEventListenerToElement("tap", clickEventListener.listener, clickEventListener.options, element);
+        }
+        if (userAgent.device.supportsMouseEvents) {
+            applyEventListenerToElement("click", clickEventListener.listener, clickEventListener.options, element);
+        }
+    });
+
+    doubleClickEventListeners.forEach((doubleClickEventListener) => {
+        if (userAgent.device.supportsTouchEvents) {
+            // ReSharper disable once Html.EventNotResolved
+            applyEventListenerToElement("dbltap", doubleClickEventListener.listener, doubleClickEventListener.options, element);
+        }
+        if (userAgent.device.supportsMouseEvents) {
+            applyEventListenerToElement("dblclick", doubleClickEventListener.listener, doubleClickEventListener.options, element);
+        }
+    });
+}
+
+function applyEventListenerToElement(type: keyof IUiElementEventMap, listener: (event: any) => any, options: IEventListenerOptions, element: HTMLElement) {
+    if (!type) {
+        throw new Error("type is mandatory");
+    }
+    if (!listener) {
+        throw new Error("listener is mandatory");
+    }
+    if (!options) {
+        options = {};
+    }
+    if (!options.passive) {
+        options.passive = false;
+    }
+    if (!options.once) {
+        options.once = false;
+    }
+
+    if (element.addEventListener) {
+        element.addEventListener(
+            type,
+            (event) => {
+                listener.call(event);
+            },
+            {
+                passive: options.passive,
+                once: options.once
+            });
+    } else if (element["attachEvent"]) {
+        element["attachEvent"](
+            type,
+            (event) => {
+                listener(event);
+            }
+        );
+    } else {
+        throw "Your browser does not support 'addEventListener'";
+    }
+}
+
+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

package/src/framework/root.ts

@@ -0,0 +1,45 @@
+import { Element } from "./element";
+
+export class Root {
+    constructor(rootElement: HTMLElement | string) {
+        if (rootElement instanceof HTMLElement) {
+            this.rootElement = rootElement;
+        } else {
+            rootElement = document.getElementById(rootElement);
+            if (rootElement) {
+                this.rootElement = rootElement as any as HTMLElement;
+            } else {
+                throw "RootElement with id " + rootElement + "not found";
+            }
+        }
+
+    }
+
+    private readonly rootElement: HTMLElement;
+    private view: Element;
+
+    render(view: Element) {
+        this.unmount();
+
+        this.view = view;
+        this.rootElement.appendChild(view.render());
+    }
+
+    unmount() {
+        if (this.view) {
+            this.view.unmount();
+        }
+
+        //Remove all children from the root
+        if (this.rootElement) {
+            this.rootElement.innerHTML = "";
+            while (this.rootElement.firstChild) {
+                this.rootElement.removeChild(this.rootElement.firstChild);
+            }
+        }
+    }
+}
+
+export function createRoot(rootElement: HTMLElement | string): Root {
+    return new Root(rootElement);
+}