jpf 5.0.62 → 5.0.64

package/src/framework/attributes.ts

@@ -1,51 +1,5 @@
 import { PreserveAspectRatio } from "./css";
-import { ISubscribable } from "./observableInterfaces";
-
-//export interface IAttributes {
-//    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;
-//    info?: string;
-//}
+import { ISubscribable } from "./observable";
 
 export interface IAttributes {
     alt?: string | ISubscribable<string>,

package/src/framework/css.ts

@@ -3,7 +3,7 @@ export type PatternUnits = "userSpaceOnUse" | "objectboudingBox";
 export type DropEffect = "none" | "copy" | "link" | "move";
 export type EffectAllowed = "none" | "copy" | "copyLink" | "copyMove" | "link" | "linkMove" | "move" | "all" | "uninitialized";
 
-type CssPropertyA = "alignContent" | "alignItems" | "alignSelf" | "alignmentAdjust" | "alignmentBaseline" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" |
+export type CssProperty = "alignContent" | "alignItems" | "alignSelf" | "alignmentAdjust" | "alignmentBaseline" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" |
     "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "backfaceVisibility" | "background" |
     "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundComposite" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" |
     "backgroundRepeat" | "backgroundSize" | "baselineShift" | "behavior" | "border" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" |
@@ -17,9 +17,8 @@ type CssPropertyA = "alignContent" | "alignItems" | "alignSelf" | "alignmentAdju
     "float" | "flowFrom" | "font" | "fontFamily" | "fontKerning" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" |
     "fontWeight" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnGap" | "gridColumnEnd" | "gridColumnStart" | "gridGap" | "gridRow" |
     "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridRowPosition" | "gridRowSpan" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" |
-    "hyphenateLimitChars" | "hyphenateLimitLines" | "hyphenateLimitZone" | "hyphens" | "imeMode" | "justifyContent" | "justifyItems" | "justifySelf";
-
-type CssPropertyL = "layoutGrid" | "layoutGridChar" | "layoutGridLine" | "layoutGridMode" | "layoutGridType" | "left" | "letterSpacing" | "lineBreak" | "lineClamp" | "lineHeight" |
+    "hyphenateLimitChars" | "hyphenateLimitLines" | "hyphenateLimitZone" | "hyphens" | "imeMode" | "justifyContent" | "justifyItems" | "justifySelf" |
+    "layoutGrid" | "layoutGridChar" | "layoutGridLine" | "layoutGridMode" | "layoutGridType" | "left" | "letterSpacing" | "lineBreak" | "lineClamp" | "lineHeight" |
     "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "marqueeDirection" | "marqueeStyle" |
     "mask" | "maskBorder" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskOrigin" | "maxFontSize" | "maxHeight" | "maxWidth" |
     "minHeight" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "opacity" | "order" | "orphans" | "outline" | "outlineColor" | "outlineStyle" | "outlineOffset" |
@@ -36,7 +35,6 @@ type CssPropertyL = "layoutGrid" | "layoutGridChar" | "layoutGridLine" | "layout
     "userSelect" | "verticalAlign" | "visibility" | "voiceBalance" | "voiceDuration" | "voiceFamily" | "voicePitch" | "voiceRange" | "voiceRate" | "voiceStress" | "voiceVolume" |
     "whiteSpace" | "whiteSpaceTreatment" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "wrapFlow" | "wrapMargin" | "wrapOption" | "writingMode" | "zIndex" | "zoom";
 
-export type CssProperty = CssPropertyA | CssPropertyL;
 /*
 * Value of a CSS Property.  Could be a single value or a list of fallbacks
 * NOTE: array is for fallbacks

package/src/framework/element.ts

@@ -1,7 +1,13 @@
 import "tocca";
-import { IDisposer, ISubscribable } from "./observableInterfaces";
-import { unwrap, isSubscribable } from "./observablelmplementations";
-import { IProperties, Properties, applyBindings } from "./properties";
+import { IDisposer, ISubscribable, observable } from "./observable";
+import { IEventListener } from "./event";
+import { IAttributes } from "./attributes";
+import { IStyle } from "./style";
+import { isNullOrUndefined } from "../utilities/value/value";
+
+const svgNamespace = "http://www.w3.org/2000/svg";
+
+// #region Element tagNames for HTML and SVG Elements
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const htmlTags = {
@@ -33,26 +39,47 @@ const svgTags = {
 }
 
 type TagName = keyof typeof htmlTags | keyof typeof svgTags;
+// #endregion
+
+// #region Element Interfaces
+
+//Element properties except the tagName
+export interface IElementProperties {
+    attributes?: IAttributes;
+    classNames?: Array<string> | ISubscribable<Array<string>>;
+    style?: IStyle;
+    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>;
+}
 
-const svgNamespace = "http://www.w3.org/2000/svg";
+//Options to create an Element
+export interface IElementOptions<TElementProperties> {
+    tagName: TagName;
+    properties?: TElementProperties;
+}
 
-//#region Element class
+//public interface of an Element
 export interface IElement {
     render(): HTMLElement;
     unmount(): void;
 }
 
-export interface IElementOptions<TProperties> {
-    tagName: TagName;
-    properties?: TProperties;
-}
+// #endregion
 
-export class Element<TProperties = IProperties> implements IElement {
-    constructor(options: IElementOptions<TProperties>, children?: Array<IElement> | ISubscribable<Array<IElement>>) {
+// #region Element Class definition
+export class Element<TElementProperties = IElementProperties> implements IElement {
+    constructor(options: IElementOptions<TElementProperties>, children?: Array<IElement> | ISubscribable<Array<IElement>>) {
         this.tagName = options.tagName;
         this.properties = options.properties;
         this.optionsChildren = children;
-        this.children = unwrap(children);
+        this.children = observable.unwrap(children);
     }
 
     // #region Private members
@@ -62,33 +89,33 @@ export class Element<TProperties = IProperties> implements IElement {
 
 
     private buildChildren() {
-        if (this.element && this.children && this.children.length > 0) {
+        if (this.htmlElement && this.children && this.children.length > 0) {
             //Create a documentFragment to reduce browser repaints
             const documentFragment = document.createDocumentFragment();
             for (const child of this.children) {
-                this.element.appendChild(child.render());
+                this.htmlElement.appendChild(child.render());
             }
 
             //Add the documentFragment to the dom
-            this.element.appendChild(documentFragment);
+            this.htmlElement.appendChild(documentFragment);
         }
     }
     // #endregion
 
     // #region Protected members
-    protected element: HTMLElement;
-    protected readonly properties: TProperties;
+    protected htmlElement: HTMLElement;
+    protected readonly properties: TElementProperties;
     protected readonly disposers = new Array<IDisposer>();
 
     protected build(): void {
-        applyBindings(this.properties as IProperties, this.element, this.disposers);
+        applyBindings(this.properties, this.htmlElement, this.disposers);
 
         if (this.children) {
             this.buildChildren();
         }
 
         //Find out if the options.Children are observable.
-        if (isSubscribable(this.optionsChildren)) {
+        if (observable.isSubscribable(this.optionsChildren)) {
             this.disposers.push(
                 this.optionsChildren.subscribe((children) => {
                     this.setChildren(...children);
@@ -98,26 +125,26 @@ export class Element<TProperties = IProperties> implements IElement {
     }
 
     protected remove(): void {
-        if (this.element) {
-            if (this.element.remove) {
-                this.element.remove();
+        if (this.htmlElement) {
+            if (this.htmlElement.remove) {
+                this.htmlElement.remove();
             } else {
-                if (this.element.parentElement) {
-                    this.element.parentElement.removeChild(this.element);
+                if (this.htmlElement.parentElement) {
+                    this.htmlElement.parentElement.removeChild(this.htmlElement);
                 }
             }
 
-            this.element = null;
+            this.htmlElement = null;
         }
     }
 
-    protected addChild(child: IElement): Element<TProperties> {
+    protected addChild(child: IElement): Element<TElementProperties> {
         this.children.push(child);
         this.buildChildren();
         return this;
     }
 
-    protected setChildren(...children: Array<IElement>): Element<TProperties> {
+    protected setChildren(...children: Array<IElement>): Element<TElementProperties> {
         this.empty();
 
         this.children = children;
@@ -129,10 +156,10 @@ export class Element<TProperties = IProperties> implements IElement {
     protected empty(): void {
         this.children = [];
 
-        if (this.element) {
-            this.element.innerHTML = "";
-            while (this.element.firstChild) {
-                this.element.removeChild(this.element.firstChild);
+        if (this.htmlElement) {
+            this.htmlElement.innerHTML = "";
+            while (this.htmlElement.firstChild) {
+                this.htmlElement.removeChild(this.htmlElement.firstChild);
             }
         }
     }
@@ -140,7 +167,7 @@ export class Element<TProperties = IProperties> implements IElement {
 
     // #region Public members
     render(): HTMLElement {
-        if (this.element) {
+        if (this.htmlElement) {
             //If the element has already been rendered we remove the element from the dom
             this.remove();
         }
@@ -150,17 +177,17 @@ export class Element<TProperties = IProperties> implements IElement {
             //Create the html element.
             if (svgTags.hasOwnProperty(this.tagName)) {
                 //Create a SVGElement
-                this.element = document.createElementNS(svgNamespace, this.tagName) as unknown as HTMLElement;
+                this.htmlElement = document.createElementNS(svgNamespace, this.tagName) as unknown as HTMLElement;
             } else {
                 //Create a HTMLElement
-                this.element = document.createElement(this.tagName);
+                this.htmlElement = document.createElement(this.tagName);
             }
 
             //Build the UiElement
             this.build();
 
             //Return the fully functional html element
-            return this.element;
+            return this.htmlElement;
         }
 
         throw "The build method of this UiElement has not been defined";
@@ -169,7 +196,7 @@ export class Element<TProperties = IProperties> implements IElement {
 
     //This method is used to dispose subscriptions before removing the element from the DOM to prevent memory leaks
     unmount(): void {
-        const properties = this.properties as IProperties;
+        const properties = this.properties as IElementProperties;
         console.log("Unmount element " + properties.elementType);
 
         //If the element has childeren then we unmount the children
@@ -186,28 +213,337 @@ export class Element<TProperties = IProperties> implements IElement {
     }
 
     focus(options?: FocusOptions) {
-        if (this.element) {
-            this.element.focus(options);
+        if (this.htmlElement) {
+            this.htmlElement.focus(options);
         }
     }
     // #endregion
 }
 
-export function element<TProperties>(options: IElementOptions<TProperties>, children?: Array<IElement> | ISubscribable<Array<IElement>>) {
+// #endregion
+
+// #region ElementProperties Class definition
+export abstract class ElementProperties implements IElementProperties {
+    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?: IStyle;
+    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>;
+}
+// #endregion
+
+//#region Element helper functions
+
+export function extendProperties<TTarget = IElementProperties, 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;
+}
+
+
+export function createElement<TProperties>(options: IElementOptions<TProperties>, children?: Array<IElement> | ISubscribable<Array<IElement>>) {
     return new Element<TProperties>(options, children);
 }
+
+//#endregion
+
+//#region Element Binding functions
+export function applyBindings(properties: IElementProperties, element: HTMLElement, disposers: Array<IDisposer>) {
+    element.setAttribute("elementtype", properties.elementType || "Element");
+
+    if (properties.classNames) {
+        applyClassesToElement(observable.unwrap(properties.classNames), true, element);
+        if (observable.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, observable.unwrap(value), element);
+
+            if (observable.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] = observable.unwrap(style);
+            if (observable.isSubscribable(style)) {
+                const disposer = style.subscribe((style) => {
+                    element.style[key] = style;
+                });
+
+                if (disposers) {
+                    disposers.push(disposer);
+                }
+            }
+        });
+    }
+
+    if (!isNullOrUndefined(properties.innerHtml)) {
+
+        element.innerHTML = observable.unwrap(properties.innerHtml);
+
+        if (observable.isSubscribable(properties.innerHtml)) {
+            const disposer = properties.innerHtml.subscribe((innerHtml: string) => {
+                element.innerHTML = innerHtml;
+            });
+
+            if (disposers) {
+                disposers.push(disposer);
+            }
+        }
+    }
+
+    if (!isNullOrUndefined(properties.textContent)) {
+
+        const textContent = observable.unwrap(properties.textContent);
+
+        if (element.hasChildNodes() && element.childNodes.length === 1 && element.childNodes[0].nodeType === 3) {
+            element.firstChild.nodeValue = textContent;
+        } else {
+            element.textContent = observable.unwrap(properties.textContent);
+        }
+
+        if (observable.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 = observable.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(observable.unwrap(properties.visible), element);
+    if (observable.isSubscribable(properties.visible)) {
+        const disposer = properties.visible.subscribe((visible) => {
+            applyVisibilityToElement(visible, element);
+        });
+
+        if (disposers) {
+            disposers.push(disposer);
+        }
+    }
+
+    applyDisabledToElement(observable.unwrap(properties.disabled), element);
+    if (observable.isSubscribable(properties.disabled)) {
+        const disposer = properties.disabled.subscribe((disabled) => {
+            applyDisabledToElement(disabled, element);
+        });
+
+        if (disposers) {
+            disposers.push(disposer);
+        }
+    }
+
+    applyFocusToElement(observable.unwrap(properties.focused), element);
+    if (observable.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
 
-//#region View dictionary
-// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type, @typescript-eslint/no-explicit-any
+//#region Element dictionary
+//eslint-disable-next-line @typescript-eslint/no-unsafe-function-type, @typescript-eslint/no-explicit-any
 const elementDictionary = new Map<Function, any>();
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+//eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 export function addElementToDictionary(properties: Function, element: Function) {
     elementDictionary.set(properties, element);
 }
 
-export function getElement(properties: Properties): Element {
+export function getElement(properties: IElementProperties): IElement {
     if (properties && properties.constructor) {
         const element = elementDictionary.get(properties.constructor);
         if (element.prototype) {
@@ -220,7 +556,7 @@ export function getElement(properties: Properties): Element {
     return null;
 }
 
-export function render(properties: Properties): HTMLElement {
+export function render(properties: IElementProperties): HTMLElement {
     const view = getElement(properties);
     if (view && view.render) {
         return view.render();

package/src/framework/event.ts

@@ -9,8 +9,6 @@ export type TouchEventType = "touchstart" | "touchend" | "touchmove" | "touchcan
 export type MouseEventType = "contextmenu" | "dblclick" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup";
 export type FocusEventType = "blur" | "focusout" | "focus" | "focusin";
 
-
-
 export interface IEventListener extends AddEventListenerOptions, KeyboardEventInit {
     type: EventType;
     name: string;