jpf 5.0.3 → 5.0.6

package/src/framework/ViewModel.ts

@@ -1,528 +0,0 @@
-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 {
-    protected constructor(properties?: Properties) {
-        this.setProperties(this, 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/utilities/html/html.ts

@@ -1,8 +0,0 @@
-import prettify from "html-prettify";
-
-export function prettifyHtml(html: string) {
-    if (html) {
-        return prettify(html);
-    }
-    return null;
-}