jpf 4.2.14 → 4.2.16

package/src/controls/html/Div/Div.ts

@@ -0,0 +1,37 @@
+import { View, IView, registerView } from "../../../framework/View";
+import { Properties , extendProperties, ViewModel } from "../../../framework/ViewModel";
+import { Subscribable } from "knockout";
+
+export interface DivProperties extends Properties {
+    children?: Array<IView> | Subscribable<Array<IView>>;
+}
+
+export class DivView extends View<DivProperties> {
+    constructor(properties: DivProperties) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        viewType: "Div"
+                    },
+                    properties
+                ),
+                children: properties.children
+            },
+        );
+    }
+}
+
+export function divView(properties: DivProperties): DivView {
+    return new DivView(properties);
+}
+
+export class DivViewModel extends ViewModel<DivProperties> implements DivProperties{
+    children?: Array<IView> | Subscribable<Array<IView>>;
+}
+
+registerView(
+    DivViewModel,
+    DivView
+)

package/src/controls/html/Image/Image.ts

@@ -0,0 +1,42 @@
+import { View, registerView } from "../../../framework/View";
+import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel";
+import { Subscribable } from "knockout";
+
+export interface ImageProperties extends Properties {
+    src: string | Subscribable<string>;
+    alt: string | Subscribable<string>;
+}
+
+export class ImageView extends View<ImageProperties> {
+    constructor(properties: ImageProperties) {
+        super(
+            {
+                tagName: "img",
+                properties: extendProperties(
+                    {
+                        viewType: "Image",
+                        attributes: {
+                            src: properties.src,
+                            alt: properties.alt
+                        }
+                    },
+                    properties
+                )
+            }
+        );
+    }
+}
+
+export function imageView(properties: ImageProperties) {
+    return new ImageView(properties);
+}
+
+export class ImageViewModel extends ViewModel<ImageProperties> implements ImageProperties{
+    src: string | Subscribable<string>;
+    alt: string | Subscribable<string>;
+}
+
+registerView(
+    ImageViewModel,
+    ImageView
+);

package/src/controls/html/Input/Input.ts

@@ -0,0 +1,223 @@
+import { isSubscribable, unwrap, isObservable } from "knockout";
+import { View, registerView } from "../../../framework/View";
+import { ViewModel, Properties, extendProperties, isNullOrUndefined } from "../../../framework/ViewModel";
+import { ObservableProperty, observableProperty, isObservableProperty } from "../../../framework/observable";
+import { isInteger } from "../../../utilities/integer/integer";
+import { isFloat } from "../../../utilities/float/float";
+
+
+export type InputType = "text" | "checkbox" | "file" | "integer" | "float" | "range" | "radio";
+
+export enum ValueUpdateModeEnum {
+    OnChange = 1,
+    OnInput = 2
+}
+
+export interface InputProperties<TValue> extends Properties {
+    value?: TValue | ObservableProperty<TValue>;
+    inputValidator?: (event: Event, inputViewModel: InputProperties<TValue>, value: string) => Promise<boolean>;
+    placeholder?: string | ObservableProperty<string>;
+    valueUpdateMode?: ValueUpdateModeEnum;
+    min?: number;
+    max?: number;
+    step?: number;
+    type?: InputType;
+}
+
+export class InputView<TValue> extends View<InputProperties<TValue>> {
+    constructor(properties: InputProperties<TValue>) {
+        super(
+            {
+                tagName: "input",
+                properties: extendProperties(
+                    {
+                        viewType: "Input"
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    //Protected members
+    protected build() {
+        super.build();
+
+        const element = this.element;
+        const viewModel = this.properties;
+        if (!viewModel.valueUpdateMode) {
+            viewModel.valueUpdateMode = ValueUpdateModeEnum.OnChange;
+        }
+
+        const input = this.element as HTMLInputElement;
+        input.type = viewModel.type;
+
+        if (!isNullOrUndefined(viewModel.min)) {
+            input.min = viewModel.min as any;
+        }
+        if (!isNullOrUndefined(viewModel.max)) {
+            input.max = viewModel.max as any;
+        }
+        if (!isNullOrUndefined(viewModel.step)) {
+            input.step = viewModel.step as any;
+        }
+
+        switch (viewModel.type) {
+            case "checkbox":
+                input.checked = unwrap(viewModel.value) as unknown as boolean;
+                if (isObservable(viewModel.value)) {
+                    this.subscriptions.push(
+                        viewModel.value.subscribe((value: TValue) => {
+                            input.checked = value as unknown as boolean;
+                        })
+                    );
+                }
+
+                break;
+
+            case "file":
+                //An input type file can not be set.
+                break;
+
+            case "radio":
+                input.checked = input.value === unwrap(viewModel.value);
+                if (isSubscribable(viewModel.value)) {
+                    this.subscriptions.push(
+                        viewModel.value.subscribe((value) => {
+                            input.checked = input.value === (value as any as string);
+                        })
+                    );
+                }
+                break;
+
+            default:
+                const value = unwrap(viewModel.value);
+                if (value) {
+                    input.value = value as unknown as string;
+                }
+                if (isObservable(viewModel.value)) {
+                    this.subscriptions.push(
+                        viewModel.value.subscribe((value: TValue) => {
+                            input.value = value as unknown as string;
+                        })
+                    );
+                }
+        }
+
+        const placeholder = unwrap(viewModel.placeholder) as unknown as string;
+        if (placeholder) {
+            input.placeholder = placeholder;
+        }
+        if (isSubscribable(viewModel.placeholder)) {
+            this.subscriptions.push(
+                viewModel.placeholder.subscribe((placeholder) => {
+                    if (placeholder) {
+                        input.placeholder = placeholder;
+                    } else {
+                        input.removeAttribute("placeholder");
+                    }
+                })
+            );
+        }
+
+        if (this.properties.valueUpdateMode === ValueUpdateModeEnum.OnChange) {
+            this.element.addEventListener(
+                "change",
+                handleEvent
+            );
+        }
+
+        if (this.properties.valueUpdateMode === ValueUpdateModeEnum.OnInput || viewModel.inputValidator) {
+            this.element.addEventListener(
+                "input",
+                handleEvent
+            );
+        }
+
+        async function handleEvent(event: Event) {
+            let newValue = null;
+            switch (viewModel.type) {
+                case "checkbox":
+                    newValue = input.checked;
+                    break;
+
+                case "file":
+                    newValue = input.files;
+                    break;
+
+                case "radio":
+                    const name = element.getAttribute("name");
+                    if (name) {
+                        const selectedRadioButton = document.querySelector("input[type='radio'][name='" + name + "']:checked") as HTMLInputElement;
+                        if (selectedRadioButton) {
+                            newValue = selectedRadioButton.value;
+                        }
+                    }
+                    break;
+
+                default:
+                    newValue = input.value as any as TValue;
+                    if (newValue + "" === "") {
+                        newValue = null;
+                    }
+            }
+
+            if (viewModel.inputValidator) {
+                if (!await viewModel.inputValidator(event, viewModel, newValue as any as string)) {
+                    input.value = unwrap(viewModel.value) as any as string;
+                    return;
+                };
+            }
+
+            if (viewModel.type === "integer") {
+                if (isInteger(newValue)) {
+                    newValue = parseInt(newValue);
+                } else {
+                    input.value = unwrap(viewModel.value) as any as string;
+                    return;
+                }
+            }
+
+            if (viewModel.type === "float") {
+                if (isFloat(newValue)) {
+                    newValue = parseFloat(newValue);
+                } else {
+                    input.value = unwrap(viewModel.value) as any as string;
+                    return;
+                }
+            }
+
+            //if validation has succeeded we set the viewModel value
+            if (isObservableProperty(viewModel.value)) {
+                if ((event.type === "change" && viewModel.valueUpdateMode === ValueUpdateModeEnum.OnChange) ||
+                    (event.type === "input" && viewModel.valueUpdateMode === ValueUpdateModeEnum.OnInput)) {
+                    viewModel.value.set(newValue);
+                } else {
+                    viewModel.value.set(newValue, false);
+                }
+            } else if (isObservable(viewModel.value)) {
+                viewModel.value(newValue);
+            }
+        }
+    }
+}
+
+export function inputView<TValue>(properties: InputProperties<TValue>) {
+    return new InputView<TValue>(properties);
+}
+
+export class InputViewModel<TValue> extends ViewModel<InputProperties<TValue>> implements InputProperties<TValue> {
+    value?: TValue | ObservableProperty<TValue>;
+    inputValidator?: (event: Event, inputViewModel: InputProperties<TValue>, value: string) => Promise<boolean>;
+    placeholder?: string | ObservableProperty<string>;
+    valueUpdateMode?: ValueUpdateModeEnum;
+    min?: number;
+    max?: number;
+    step?: number;
+    type?: InputType;
+}
+
+registerView(
+    InputViewModel,
+    InputView
+);

package/src/controls/html/Select/Select.ts

@@ -0,0 +1,142 @@
+import { unwrap, isSubscribable } from "knockout";
+import { View, registerView } from "../../../framework/View";
+import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel";
+import { ObservableProperty, ObservableArrayProperty, isObservableProperty, observableArrayProperty, observableProperty } from "../../../framework/observable";
+
+export interface SelectProperties<TItem, TValue, TSetter = TValue> extends Properties {
+    value?: TValue | ObservableProperty<TValue, TSetter>;
+    items?: Array<TItem> | ObservableArrayProperty<TItem>;
+    textFunction: (item: TItem) => string;
+    valueFunction: (item: TItem) => TValue;
+    setFunction?: (item: TItem) => TSetter;
+    inputValidator?: (event: Event, selectViewModel: SelectProperties<TItem, TValue, TSetter>, value: TValue) => Promise<boolean>;
+    emptyItemText?: string;
+}
+
+export class SelectView<TItem, TValue, TSetter = TValue> extends View<SelectProperties<TItem, TValue, TSetter>> {
+    constructor(properties: SelectProperties<TItem, TValue, TSetter>) {
+        super(
+            {
+                tagName: "select",
+                properties: extendProperties(
+                    {
+                        viewType: "Select"
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    //Protected members
+    protected build() {
+        super.build();
+        const select = this.element as HTMLSelectElement;
+
+        const viewModel = this.properties;
+
+        this.setItems(unwrap(viewModel.items) as Array<TItem>);
+        if (isSubscribable(viewModel.items)) {
+            this.subscriptions.push(
+                viewModel.items.subscribe((items) => {
+                    this.setItems(items);
+                })
+            );
+        }
+
+        this.setSelectedValue(unwrap(viewModel.value) as TValue);
+        if (isSubscribable(viewModel.value)) {
+            this.subscriptions.push(
+                viewModel.value.subscribe((value) => {
+                    this.setSelectedValue(value);
+                })
+            );
+        }
+
+        this.element.addEventListener(
+            "change",
+            async (event: Event) => {
+                let selectedValue = select.value as any as TValue;
+                let selectedItem: TItem = null;
+                if (selectedValue + "" === "") {
+                    selectedValue = null;
+                } else {
+                    selectedItem = this.itemDictionary[selectedValue.toString()];
+                    selectedValue = this.properties.valueFunction(selectedItem);
+                }
+                if (viewModel.inputValidator) {
+                    if (!await viewModel.inputValidator(event, viewModel, selectedValue)) {
+                        select.value = unwrap(viewModel.value) as any as string;
+                        return;
+                    };
+                }
+
+                if (isObservableProperty(viewModel.value)) {
+                    if (viewModel.setFunction) {
+                        const setValue = viewModel.setFunction(selectedItem);
+                        viewModel.value.set(setValue);
+                    } else {
+                        viewModel.value.set(selectedValue as any);
+                    }
+                }
+            }
+        );
+    }
+
+    private itemDictionary: { [key: string]: TItem };
+
+    private setItems(items: Array<TItem>) {
+        if (this.element) {
+            this.itemDictionary = {};
+            if (items) {
+                const select = this.element as HTMLSelectElement;
+                select.innerHTML = null;
+                if (this.properties.emptyItemText) {
+                    const emptyOption = document.createElement("option") as HTMLOptionElement;
+                    emptyOption.value = "";
+                    emptyOption.text = this.properties.emptyItemText;
+                    select.options.add(emptyOption);
+                }
+
+                items.forEach((item: TItem) => {
+                    const value = this.properties.valueFunction(item).toString();
+                    this.itemDictionary[value] = item;
+                    var option = document.createElement("option") as HTMLOptionElement;
+                    option.value = value;
+                    option.text = this.properties.textFunction(item);
+                    select.options.add(option);
+                });
+            }
+        }
+    }
+
+    private setSelectedValue(value: TValue) {
+        if (this.element) {
+            const select = this.element as HTMLSelectElement;
+            if (value === null || value === undefined) {
+                select.value = "";
+            } else {
+                select.value = value.toString();
+            }
+        }
+    }
+}
+
+export function selectView<TItem, TValue, TSetter = TValue>(properties: SelectProperties<TItem, TValue, TSetter>) {
+    return new SelectView(properties);
+}
+
+export class SelectViewModel<TItem, TValue, TSetter = TValue> extends ViewModel<SelectProperties<TItem,TValue,TSetter>> implements SelectProperties<TItem, TValue, TSetter> {
+    value?: TValue | ObservableProperty<TValue, TSetter>;
+    items?: Array<TItem> | ObservableArrayProperty<TItem>;
+    textFunction: (item: TItem) => string;
+    valueFunction: (item: TItem) => TValue;
+    setFunction?: (item: TItem) => TSetter;
+    inputValidator?: (event: Event, selectViewModel: SelectProperties<TItem, TValue, TSetter>, value: TValue) => Promise<boolean>;
+    emptyItemText?: string;
+}
+
+registerView(
+    SelectViewModel,
+    SelectView
+);

package/src/controls/html/Span/Span.ts

@@ -0,0 +1,35 @@
+import { View, registerView } from "../../../framework/View";
+import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel";
+
+export interface SpanProperties extends Properties {
+
+}
+
+export class SpanView extends View<SpanProperties> {
+    constructor(properties: SpanProperties) {
+        super(
+            {
+                tagName: "span",
+                properties: extendProperties(
+                    {
+                        viewType: "Span"
+                    },
+                    properties
+                )
+            }
+        );
+    }
+}
+
+export function spanView(properties: SpanProperties) {
+    return new SpanView(properties);
+}
+
+export class SpanViewModel extends ViewModel<SpanProperties> implements SpanProperties {
+
+}
+
+registerView(
+    SpanViewModel,
+    SpanView
+);

package/src/controls/html/index.ts

@@ -0,0 +1,6 @@
+export * from "./Button/Button";
+export * from "./Div/Div";
+export * from "./Image/Image";
+export * from "./Input/Input";
+export * from "./Select/Select";
+export * from "./Span/Span";

package/src/controls/index.ts

@@ -0,0 +1,15 @@
+import * as codeMirror from "./codeMirror/index";
+import * as custom from "./custom/index";
+import * as html from "./html/index";
+import * as jsonViewAwesome from "./jsonViewAwesome/index";
+import * as kendo from "./kendo/index";
+import * as leaflet from "./leaflet/index";
+import * as svg from "./svg/index";
+
+export { codeMirror };
+export { custom };
+export { html };
+export { jsonViewAwesome };
+export { kendo };
+export { leaflet };
+export { svg };

package/src/controls/jsonViewAwesome/index.ts

@@ -0,0 +1 @@
+export *  from "./jsonFormatter/JsonFormatter";

package/src/controls/jsonViewAwesome/jsonFormatter/JsonFormatter.ts

@@ -0,0 +1,87 @@
+import { View, registerView } from "../../../framework/View";
+import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel";
+import { Subscribable, unwrap, isObservable } from "knockout";
+import { JSONFormatter } from "json-viewer-awesome/lib/json-formatter";
+
+export interface JsonFormatterProperties extends Properties {
+    json: object | Subscribable<object>;
+    showArrayIndex?: boolean;
+    quotesOnKeys?: boolean;
+    displayDataTypes?: boolean;
+    displayObjectSize?: boolean;
+    sortKeys?: boolean;
+    collapsed?: boolean;
+}
+
+export class JsonFormatterView extends View<JsonFormatterProperties> {
+    constructor(properties: JsonFormatterProperties) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        viewType: "JsonFormatter"
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    build(): void {
+        super.build();
+
+        const viewModel = this.properties;
+        this.setJson(unwrap(viewModel.json));
+        if (isObservable(viewModel.json)) {
+            this.subscriptions.push(
+                viewModel.json.subscribe((json) => {
+                    this.setJson(json);
+                })
+            );
+        }
+    }
+
+    private setJson(json: object) {
+        if (json) {
+            if (typeof json === "object") {
+                const jsonFormatter = new JSONFormatter({
+                    showArrayIndex: this.properties.showArrayIndex,
+                    quotesOnKeys: this.properties.quotesOnKeys,
+                    displayDataTypes: this.properties.displayDataTypes,
+                    displayObjectSize: this.properties.displayObjectSize,
+                    sortKeys: false,
+                    collapsed: true,
+                    iconStyle: 0,
+                    theme: undefined,
+                    src: json
+                });
+
+                this.element.replaceChildren(jsonFormatter.render());
+            } else {
+                this.element.innerHTML = (json as any).toString();
+            }
+        } else {
+            this.empty();
+        }
+    }
+}
+
+export function jsonFormatterView(properties: JsonFormatterProperties) {
+    return new JsonFormatterView(properties);
+}
+
+export class JsonFormatterViewModel extends ViewModel<JsonFormatterProperties> implements JsonFormatterProperties {
+    json: object | Subscribable<object>;
+    showArrayIndex?: boolean;
+    quotesOnKeys?: boolean;
+    displayDataTypes?: boolean;
+    displayObjectSize?: boolean;
+    sortKeys?: boolean;
+    collapsed?: boolean;
+}
+
+registerView(
+    JsonFormatterViewModel,
+    JsonFormatterView
+);

package/src/controls/kendo/Chart/Chart.ts

@@ -0,0 +1,97 @@
+import * as kendo from "@progress/kendo-ui/js/dataviz/chart/chart.js";
+import { View } from "../../../framework/View";
+import { Properties, extendProperties} from "../../../framework/ViewModel";
+import { Subscribable, unwrap, isSubscribable } from "knockout";
+
+export interface ChartProperties extends Properties {
+    data?: Array<any> | Subscribable<Array<any>>;
+    chartArea?: kendo.dataviz.ui.ChartChartArea | undefined;
+    series?: kendo.dataviz.ui.ChartSeriesItem[] | Subscribable<kendo.dataviz.ui.ChartSeriesItem[]>;
+    categoryAxis?: kendo.dataviz.ui.ChartCategoryAxisItem | kendo.dataviz.ui.ChartCategoryAxisItem[] | Subscribable<kendo.dataviz.ui.ChartCategoryAxisItem | kendo.dataviz.ui.ChartCategoryAxisItem[]>;
+    valueAxis?: kendo.dataviz.ui.ChartValueAxisItem | kendo.dataviz.ui.ChartValueAxisItem[] | undefined;
+    legend?: kendo.dataviz.ui.ChartLegend | undefined;
+}
+
+export class ChartView extends View<ChartProperties>{
+    constructor(properties: ChartProperties) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        viewType: "KendoChart"
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    private chart: kendo.dataviz.ui.Chart;
+    private dataSource: kendo.data.DataSource;
+
+    build(): void {
+        super.build();
+
+        const viewModel = this.properties;
+
+        if (viewModel.data) {
+            this.dataSource = new kendo.data.DataSource(
+                {
+                    data: unwrap(viewModel.data)
+                }
+            );
+        }
+
+        if (isSubscribable(viewModel.data)) {
+            this.subscriptions.push(
+                viewModel.data.subscribe((data) => {
+                    this.dataSource.data(data);
+                })
+            );
+        }
+
+        setTimeout(() => {
+            this.chart = new kendo.dataviz.ui.Chart(
+                this.element,
+                {
+                    autoBind: false,
+                    legend: viewModel.legend,
+                    dataSource: this.dataSource,
+                    chartArea: viewModel.chartArea,
+                    series: unwrap(viewModel.series),
+                    categoryAxis: unwrap(viewModel.categoryAxis),
+                    valueAxis: viewModel.valueAxis
+                }
+            );
+        });
+
+        if (isSubscribable(viewModel.series)) {
+            this.subscriptions.push(
+                viewModel.series.subscribe((series) => {
+                    if (this.chart) {
+                        this.chart.setOptions({
+                            series: series
+                        });
+                    }
+                })
+            );
+        }
+
+        if (isSubscribable(viewModel.categoryAxis)) {
+            this.subscriptions.push(
+                viewModel.categoryAxis.subscribe((categoryAxis) => {
+                    if (this.chart) {
+                        this.chart.setOptions({
+                            categoryAxis: categoryAxis
+                        });
+                    }
+                })
+            );
+        }
+    }
+}
+
+export function chartView(properties: ChartProperties) {
+    return new ChartView(properties);
+}