jpf 4.2.15 → 4.2.17

package/src/framework/ViewModel.ts

@@ -0,0 +1,525 @@
+import { unwrap, Subscribable, isSubscribable, Subscription, isObservable } from "knockout";
+import { CssProperty } from "./types";
+import { userAgent } from "./userAgent";
+import { EventListeners, UiElementEventMap, IEventListenerOptions, IGenericEventListener, IMouseEventListener, MouseEventListeners, mouseEvents, touchEvents, isGlobalEvent } from "./event";
+import { Attributes, AttributesSubscribable } from "./attributes";
+import { extend } from "jquery";
+import { Style, StyleSubscribable, defaultStyle } from "./style"
+
+export interface WebSocketMessageHandler {
+    handleWebSocketMessage: (message: any) => void;
+}
+
+export function handleWebSocketMessage(object: object, message: any) {
+    bubbleDownObjectTreeAndExecuteHandler(
+        object,
+        (object) => {
+            const webSocketMessageHandler = object as WebSocketMessageHandler;
+            if (webSocketMessageHandler.handleWebSocketMessage && typeof webSocketMessageHandler.handleWebSocketMessage === "function") {
+                //Call the handleWebSocketMessage method
+                webSocketMessageHandler.handleWebSocketMessage(message);
+            }
+        }
+    );
+}
+
+//This function bubbles down an object tree
+//The given handler is executed on the given object and all its child properties of type object
+export function bubbleDownObjectTreeAndExecuteHandler(object: object, handler: (object) => void) {
+    //Find out if the object is an array
+    if (object.constructor === Array) {
+        for (const arrayEntry of object as Array<any>) {
+            if (typeof arrayEntry === "object") {
+                bubbleDownObjectTreeAndExecuteHandler(arrayEntry, handler);
+            }
+        }
+    } else {
+        //Find out if the object implements the WebSocketMessageHandler interface
+        if (isSubscribable(object)) {
+            var unwrapped = unwrap(object);
+            if (typeof unwrapped === "object") {
+                bubbleDownObjectTreeAndExecuteHandler(unwrapped, handler);
+            }
+        } else {
+            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") {
+                    //Call handleWebSocketMessage method on the property to bubble down the object tree.
+                    bubbleDownObjectTreeAndExecuteHandler(property, handler);
+                }
+            }
+        }
+    }
+}
+
+//#region Null check
+export function isNullOrUndefined(value): boolean {
+    return value === null || typeof value === "undefined";
+}
+
+export interface Properties {
+    attributes?: Attributes | AttributesSubscribable;
+    classNames?: Array<string> | Subscribable<Array<string>>;
+    style?: Style | StyleSubscribable;
+    visible?: boolean | Subscribable<boolean>;
+    disabled?: boolean | Subscribable<boolean>;
+    innerHtml?: any | Subscribable<any>;
+    textContent?: string | Subscribable<string>;
+    addViewModelToDataObject?: boolean;
+    userSelectable?: boolean;
+    eventListeners?: EventListeners;
+    viewType?: string;
+    focused?: boolean | Subscribable<boolean>;
+}
+
+export abstract  class ViewModel implements Properties {
+    setProperties<TProperties>(object: object, properties: TProperties) {
+        if (properties) {
+            Object.keys(properties).forEach((property) => {
+                object[property] = properties[property];
+            });
+        }
+    }
+
+    attributes?: Attributes | AttributesSubscribable;
+    classNames?: Array<string> | Subscribable<Array<string>>;
+    style?: Style | StyleSubscribable;
+    visible?: boolean | Subscribable<boolean>;
+    disabled?: boolean | Subscribable<boolean>;
+    innerHtml?: any | Subscribable<any>;
+    textContent?: string | Subscribable<string>;
+    addViewModelToDataObject?: boolean;
+    userSelectable?: boolean;
+    eventListeners?: EventListeners;
+    viewType?: string;
+    focused?: boolean | Subscribable<boolean>;
+
+    //protected getStyle(...cssProperties: Array<CssProperty>): Style {
+    //    if (cssProperties && this.style) {
+    //        const style: Style = {};
+    //        cssProperties.forEach((cssProperty) => {
+    //            style[cssProperty] = this.style[cssProperty] as never;
+    //        });
+    //        return style;
+    //    }
+
+    //    return null as Style;
+    //}
+    //protected getStyleValue(cssProperty: CssProperty): any {
+    //    if (this.style) {
+    //        return unwrap(this.style[cssProperty]);
+    //    }
+    //    return null;
+    //}
+
+    //addMouseEventListener(event: keyof MouseEventListeners, mouseEventListener: IMouseEventListener) {
+    //    if (!this.eventListeners[event]) {
+    //        this.eventListeners[event] = mouseEventListener;
+    //    }
+    //}
+
+    //addEventListener(event: keyof EventListeners, genericEventListener: IGenericEventListener) {
+    //    if (!this.eventListeners[event]) {
+    //        this.eventListeners[event] = genericEventListener;
+    //    }
+    //}
+
+    //setClasses(classNames: string[], replace: boolean) {
+    //    if (isSubscribable(this.classNames)) {
+
+    //        var currentClassNames = unwrap(this.classNames);
+    //        if (replace) {
+    //            currentClassNames = new Array<string>();
+    //        }
+
+    //        if (classNames) {
+    //            classNames.forEach((className) => {
+    //                currentClassNames.push(className);
+    //            });
+    //        }
+    //        const observable = this.classNames;
+    //        if (isObservable(observable)) {
+    //            observable(currentClassNames);
+    //        }
+    //    }
+    //}
+    //setAttributes(attributes: Attributes) {
+    //    if (attributes) {
+    //        Object.keys(attributes).forEach((key) => {
+    //            let newValue = attributes[key];
+    //            if (newValue === null || newValue === undefined) {
+    //                newValue = null;
+    //            }
+
+    //            if (isSubscribable(this.attributes[key])) {
+    //                this.attributes[key](unwrap(newValue));
+    //            } else {
+    //                this.attributes[key] = newValue;
+    //            }
+    //        });
+    //    }
+    //}
+    //setStyle(style: Style): void {
+    //    if (style) {
+    //        Object.keys(style).forEach((key: string) => {
+    //            let newValue = style[key];
+    //            if (newValue === null || newValue === undefined) {
+    //                if (userAgent.browser.isInternetExplorer) {
+    //                    //Setting a css style property to null does not work for internet explorer 
+    //                    //so we reset to the default value for the given property.
+    //                    newValue = defaultStyle[key];
+    //                } else {
+    //                    newValue = null;
+    //                }
+    //            }
+
+    //            if (isSubscribable(this.style[key])) {
+    //                this.style[key](unwrap(newValue));
+    //            } else {
+    //                this.style[key] = newValue;
+    //            }
+    //        });
+    //    }
+    //}
+    //setVisible(visible: boolean) {
+    //    const visibleObservable = this.visible;
+    //    if (isSubscribable(visibleObservable)) {
+    //        visibleObservable(visible);
+    //    }
+    //}
+    //setDisabled(disabled: boolean) {
+    //    const disableObservable = this.disabled;
+    //    if (isSubscribable(disableObservable)) {
+    //        disableObservable(disabled);
+    //    }
+    //}
+    //setInnerHtml(innerHtml: string) {
+    //    const innerHtmlObservable = this.innerHtml;
+    //    if (isSubscribable(innerHtmlObservable)) {
+    //        innerHtmlObservable(innerHtml);
+    //    }
+    //}
+
+    //setTextContent(textContent: string) {
+    //    const textContentObservable = this.textContent;
+    //    if (isSubscribable(textContentObservable)) {
+    //        textContentObservable(textContent);
+    //    }
+    //}
+
+    //removeClasses(classNames: string[]) {
+    //    const classNamesObservable = this.classNames;
+    //    if (isSubscribable(classNamesObservable)) {
+    //        const currentClassNames = unwrap(classNamesObservable);
+    //        for (let i = 0; i < currentClassNames.length; i++) {
+    //            if (classNames.includes(currentClassNames[i])) {
+    //                currentClassNames.splice(i, 1);
+    //            }
+    //        }
+    //        classNamesObservable(currentClassNames);
+    //    }
+    //}
+}
+
+//#region ViewModel helper functions
+
+//Function to merge two viewModels. The source is applied to the target. Corresponding properties are overwritten in the target.
+export function extendProperties<TResult = Properties, TTarget = Properties, TSource = Properties>(target: TTarget, source: TSource): TResult {
+    return extend(true, target, source) as any as TResult;
+}
+
+//Functions to bind the viewModel to a html element
+export function applyBindings(properties: Properties, element: HTMLElement, subscriptions: Array<Subscription>) {
+    element.setAttribute("viewtype", properties.viewType || "View");
+
+    if (properties.classNames) {
+        applyClassesToElement(unwrap<string[]>(properties.classNames), true, element);
+
+        if (isSubscribable(properties.classNames)) {
+            const subscription = properties.classNames.subscribe((classNames: Array<string>) => {
+                applyClassesToElement(classNames, true, element);
+            });
+
+            if (subscriptions) {
+                subscriptions.push(subscription);
+            }
+        }
+    }
+
+    if (properties.attributes) {
+        Object.keys(properties.attributes).forEach((key) => {
+            var value = properties.attributes[key];
+            applyAttributeToElement(key as keyof Attributes, unwrap(value), element);
+            if (isSubscribable(value)) {
+                const subscription = value.subscribe((newValue: string) => {
+                    applyAttributeToElement(key as keyof Attributes, newValue, element);
+                });
+
+                if (subscriptions) {
+                    subscriptions.push(subscription);
+                }
+            }
+        });
+    }
+
+    if (properties.style) {
+        Object.keys(properties.style).forEach((key) => {
+            const style = properties.style[key];
+            element.style[key] = unwrap(style);
+            if (isSubscribable(style)) {
+                const subscription = style.subscribe((newStyle) => {
+                    element.style[key] = newStyle;
+                });
+
+                if (subscriptions) {
+                    subscriptions.push(subscription);
+                }
+            }
+        });
+    }
+
+    if (!isNullOrUndefined(properties.innerHtml)) {
+        element.innerHTML = unwrap(properties.innerHtml);
+        if (isSubscribable(properties.innerHtml)) {
+            const subscription = properties.innerHtml.subscribe((innerHtml: string) => {
+                element.innerHTML = innerHtml;
+            });
+
+            if (subscriptions) {
+                subscriptions.push(subscription);
+            }
+        }
+    }
+
+    if (!isNullOrUndefined(properties.textContent)) {
+        element.textContent = unwrap(properties.textContent);
+        if (isSubscribable(properties.textContent)) {
+            const subscription = properties.textContent.subscribe((textContent: string) => {
+                if (element.hasChildNodes() && element.childNodes.length === 1 && element.childNodes[0].nodeType === 3) {
+                    //The first child is a text node so the most efficient way is to use the nodeValue property
+                    element.firstChild.nodeValue = textContent;
+                } else {
+                    element.textContent = textContent;
+                }
+            });
+
+            if (subscriptions) {
+                subscriptions.push(subscription);
+            }
+        }
+    }
+
+    //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 subscription = properties.visible.subscribe((visible) => {
+            applyVisibilityToElement(visible, element);
+        });
+
+        if (subscriptions) {
+            subscriptions.push(subscription);
+        }
+    }
+
+    applyDisabledToElement(unwrap(properties.disabled), element);
+    if (isSubscribable(properties.disabled)) {
+        const subscription = properties.disabled.subscribe((disabled) => {
+            applyDisabledToElement(disabled, element);
+        });
+
+        if (subscriptions) {
+            subscriptions.push(subscription);
+        }
+    }
+
+    applyFocusToElement(unwrap(properties.focused), element);
+    if (isSubscribable(properties.focused)) {
+        const subscription = properties.focused.subscribe((focused) => {
+            applyFocusToElement(focused, element);
+        });
+
+        if (subscriptions) {
+            subscriptions.push(subscription);
+        }
+    }
+}
+
+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(viewModel: Properties, element: HTMLElement) {
+    //Add the eventListeners to the element
+    const clickEventListeners = new Array<IGenericEventListener>();
+    const doubleClickEventListeners = new Array<IGenericEventListener>();
+
+    Object.entries(viewModel.eventListeners).forEach((entry) => {
+        var eventName = entry[0] as keyof UiElementEventMap;
+        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(viewModel, 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 UiElementEventMap, 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(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 Attributes, 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/attributes.ts

@@ -0,0 +1,92 @@
+import { Subscribable } from "knockout";
+import { PreserveAspectRatio } from "./types";
+
+export interface Attributes {
+    alt?: string,
+    disabled?: string,
+    href?: string,
+    target?: string,
+    id?: string,
+    src?: string,
+    title?: string,
+    class?: string,
+    tabindex?: number,
+    draggable?: string,
+    placeholder?: string,
+    for?: string,
+    type?: string,
+    value?: string,
+    view?: string,
+    checked?: string;
+    enctype?: string;
+    name?: string;
+    multiple?: boolean;
+    ["aria-label"]?: string;
+    cx?: number | string;
+    cy?: number | string;
+    r?: number | string;
+    rx?: number | string;
+    ry?: number | string;
+    x?: number | string;
+    x1?: number | string;
+    x2?: number | string;
+    y?: number | string;
+    y1?: number | string;
+    y2?: number | string;
+    width?: number | string;
+    height?: number | string;
+    patternUnits?: string;
+    patternTransform?: string;
+    points?: string;
+    viewBox?: string;
+    dx?: number | string;
+    dy?: number | string;
+    rotate?: string;
+    preserveAspectRatio?: PreserveAspectRatio;
+    xmlns?: string;
+}
+
+export interface AttributesSubscribable {
+    alt?: string | Subscribable<string>,
+    disabled?: string | Subscribable<string>,
+    href?: string | Subscribable<string>,
+    target?: string | Subscribable<string>,
+    id?: string | Subscribable<string>,
+    src?: string | Subscribable<string>,
+    title?: string | Subscribable<string>,
+    class?: string | Subscribable<string>,
+    tabindex?: number | Subscribable<number>,
+    draggable?: string | Subscribable<string>,
+    placeholder?: string | Subscribable<string>,
+    for?: string | Subscribable<string>,
+    type?: string | Subscribable<string>,
+    value?: string | Subscribable<string>,
+    view?: string | Subscribable<string>,
+    checked?: string | Subscribable<string>;
+    enctype?: string | Subscribable<string>;
+    name?: string | Subscribable<string>;
+    multiple?: boolean | Subscribable<boolean>;
+    ["aria-label"]?: string | Subscribable<string>;
+    cx?: number | string | Subscribable<number | string>;
+    cy?: number | string | Subscribable<number | string>;
+    r?: number | string | Subscribable<number | string>;
+    rx?: number | string | Subscribable<number | string>;
+    ry?: number | string | Subscribable<number | string>;
+    x?: number | string | Subscribable<number | string>;
+    x1?: number | string | Subscribable<number | string>;
+    x2?: number | string | Subscribable<number | string>;
+    y?: number | string | Subscribable<number | string>;
+    y1?: number | string | Subscribable<number | string>;
+    y2?: number | string | Subscribable<number | string>;
+    width?: number | string | Subscribable<number | string>;
+    height?: number | string | Subscribable<number | string>;
+    patternUnits?: string | Subscribable<string>;
+    patternTransform?: string | Subscribable<string>;
+    points?: string | Subscribable<string>;
+    viewBox?: string | Subscribable<string>;
+    dx?: number | string | Subscribable<number | string>;
+    dy?: number | string | Subscribable<number | string>;
+    rotate?: string | Subscribable<string>;
+    preserveAspectRatio?: PreserveAspectRatio | Subscribable<PreserveAspectRatio>;
+    xmlns?: string| Subscribable<string>;
+}