jpf 4.2.15 → 4.2.16

package/dist/controls/kendo/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../../src/controls/kendo/Menu/Menu.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../../src/controls/kendo/Menu/Menu.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jpf",
-    "version": "4.2.15",
+    "version": "4.2.16",
     "description": "Javascript Presentation Foundation",
     "keywords": [
         "mvvm",
@@ -25,6 +25,7 @@
     "types": "dist/index.d.ts",
     "files": [
         "dist",
+        "src",
         "LICENSE.md",
         "package.json",
         "README.md"

package/src/controls/codeMirror/HtmlEditor/HtmlEditor.ts

@@ -0,0 +1,149 @@
+import { View, registerView } from "../../../framework/View";
+import { Properties, ViewModel, extendProperties } from "../../../framework/ViewModel";
+import { unwrap, isObservable } from "knockout";
+import { isObservableProperty, observableProperty, ObservableProperty } from "../../../framework/observable";
+import { EditorView, basicSetup } from "codemirror";
+import { EditorState } from "@codemirror/state";
+import { keymap } from "@codemirror/view";
+import { html } from "@codemirror/lang-html";
+import { indentWithTab } from "@codemirror/commands";
+import { foldAll } from "@codemirror/language";
+import { ButtonView } from "../../html/Button/Button";
+import { prettifyHtml } from "../../../utilities/html/html";
+import { DivView } from "../../html/Div/Div";
+
+export interface HtmlEditorProperties extends Properties {
+    value?: string | ObservableProperty<string>;
+}
+
+export class HtmlEditorView extends View<HtmlEditorProperties> {
+    constructor(properties: HtmlEditorProperties) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        viewType: "HtmlEditor",
+                        attributes: {
+                            tabindex: 1
+                        },
+                        style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            border: "1px solid #a3d0e4"
+                        }
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    private editor: EditorView;
+
+
+    build(): void {
+        super.build();
+
+        const viewModel = this.properties;
+        const foldAllButton = new ButtonView({
+            content: "Collapse all",
+            style: {
+                margin: "3px"
+            },
+            eventListeners: {
+                click: {
+                    listener: () => {
+                        foldAll(this.editor);
+                    }
+                }
+            }
+        });
+
+        const formatButton = new ButtonView({
+            content: "Format",
+            style: {
+                margin: "3px"
+            },
+            eventListeners: {
+                click: {
+                    listener: () => {
+                        var formattedHtml = prettifyHtml(this.editor.state.doc.toString());
+                        this.editor.dispatch({ changes: { from: 0, to: this.editor.state.doc.length, insert: formattedHtml } });
+                    }
+                }
+            }
+        });
+
+        const saveButton = new ButtonView({
+            content: "Save",
+            style: {
+                margin: "3px"
+            },
+            eventListeners: {
+                click: {
+                    listener: () => {
+                        if (isObservableProperty(viewModel.value)) {
+                            viewModel.value.set(this.editor.state.doc.toString());
+                        }
+                    }
+                }
+            }
+        });
+
+        const buttons = new DivView({
+            style: {
+                display: "flex"
+            },
+            children: [
+                foldAllButton,
+                formatButton,
+                saveButton
+            ]
+        });
+
+        this.element.appendChild(buttons.render());
+
+        const state = EditorState.create({
+            extensions: [
+                basicSetup,
+                html(),
+                EditorView.lineWrapping,
+                keymap.of([indentWithTab])
+            ]
+        });
+
+        this.editor = new EditorView({
+            state: state,
+            parent: this.element,
+
+        });
+
+        this.editor.dom.style.overflow = "auto";
+
+        //Set the initial value;
+        this.editor.dispatch({ changes: { from: 0, to: this.editor.state.doc.length, insert: unwrap(viewModel.value) as any as string } });
+
+        //Found out if the viewModel property is observable.
+        if (isObservable(viewModel.value)) {
+            this.subscriptions.push(
+                viewModel.value.subscribe((html: string) => {
+                    this.editor.dispatch({ changes: { from: 0, to: this.editor.state.doc.length, insert: html } });
+                })
+            );
+        }
+    }
+}
+
+export function htmlEditorView(properties: HtmlEditorProperties) {
+    return new HtmlEditorView(properties);
+}
+
+export class HtmlEditorViewModel extends ViewModel<HtmlEditorProperties> implements HtmlEditorProperties {
+    value?: string | ObservableProperty<string>;
+}
+
+registerView(
+    HtmlEditorViewModel,
+    HtmlEditorView
+)

package/src/controls/codeMirror/JsonEditor/JsonEditor.ts

@@ -0,0 +1,132 @@
+import { View, registerView } from "../../../framework/View";
+import { Properties, ViewModel, extendProperties } from "../../../framework/ViewModel";
+import { unwrap, isObservable } from "knockout";
+import { isObservableProperty, observableProperty, ObservableProperty } from "../../../framework/observable";
+import { EditorView, basicSetup } from "codemirror";
+import { EditorState } from "@codemirror/state"
+import { keymap } from "@codemirror/view";
+import { json } from "@codemirror/lang-json";
+import { indentWithTab } from "@codemirror/commands";
+import { foldAll } from "@codemirror/language";
+import { ButtonView } from "../../html/Button/Button";
+import { DivView } from "../../html/Div/Div";
+
+export interface JsonEditorProperties extends Properties {
+    value?: string | ObservableProperty<string>;
+}
+
+export class JsonEditorView extends View<JsonEditorProperties> {
+    constructor(properties: JsonEditorProperties) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        viewType: "JsonEditor",
+                        attributes: {
+                            tabindex: 1
+                        },
+                        style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            border: "1px solid #a3d0e4"
+                        }
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    private editor: EditorView;
+
+    build(): void {
+        super.build();
+
+        const viewModel = this.properties;
+        const foldAllButton = new ButtonView({
+            content: "Collapse all",
+            style: {
+                margin: "3px"
+            },
+            eventListeners: {
+                click: {
+                    listener: () => {
+                        foldAll(this.editor);
+                    }
+                }
+            }
+        });
+
+        const saveButton = new ButtonView({
+            content: "Save",
+            style: {
+                margin: "3px"
+            },
+            eventListeners: {
+                click: {
+                    listener: () => {
+                        if (isObservableProperty(viewModel.value)) {
+                            viewModel.value.set(this.editor.state.doc.toString());
+                        }
+                    }
+                }
+            }
+        });
+
+        const buttons = new DivView({
+            style: {
+                display: "flex"
+            },
+            children: [
+                foldAllButton,
+                saveButton
+            ]
+        });
+
+        this.element.appendChild(buttons.render());
+
+        const state = EditorState.create({
+            extensions: [
+                basicSetup,
+                json(),
+                EditorView.lineWrapping,
+                keymap.of([indentWithTab])
+            ]
+        });
+
+        this.editor = new EditorView({
+            state: state,
+            parent: this.element,
+
+        });
+
+        this.editor.dom.style.overflow = "auto";
+
+        //Set the initial value;
+        this.editor.dispatch({ changes: { from: 0, to: this.editor.state.doc.length, insert: unwrap(viewModel.value) as any as string } });
+
+        //Found out if the viewModel property is observable.
+        if (isObservable(viewModel.value)) {
+            this.subscriptions.push(
+                viewModel.value.subscribe((html: string) => {
+                    this.editor.dispatch({ changes: { from: 0, to: this.editor.state.doc.length, insert: html } });
+                })
+            );
+        }
+    }
+}
+
+export function jsonEditorView(properties: JsonEditorProperties) {
+    return new JsonEditorView(properties);
+}
+
+
+export class JsonEditorViewModel extends ViewModel<JsonEditorProperties> implements JsonEditorProperties {
+    value?: string | ObservableProperty<string>;
+}
+
+registerView(
+    JsonEditorViewModel,
+    JsonEditorView
+)

package/src/controls/codeMirror/index.ts

@@ -0,0 +1,2 @@
+export * from "./HtmlEditor/HtmlEditor";
+export * from "./JsonEditor/JsonEditor";

package/src/controls/custom/FileSelector/FileSelector.ts

@@ -0,0 +1,70 @@
+import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel";
+import { View, registerView } from "../../../framework/View";
+import { ButtonProperties , ButtonView } from "../../html/Button/Button";
+import { InputView, InputProperties  } from "../../html/Input/Input";
+
+export interface FileSelectorProperties extends Properties {
+    button?: ButtonProperties;
+    inputFile: InputProperties<FileList>;
+}
+
+export class FileSelectorView extends View<FileSelectorProperties>  {
+    constructor(properties: FileSelectorProperties) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        viewType: "FileSelector"
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    protected build(): void {
+        super.build();
+
+        const viewModel = this.properties;
+
+        var fileInput = new InputView(viewModel.inputFile).render();
+
+        this.element.appendChild(fileInput);
+
+        if (viewModel.button) {
+            const button = new ButtonView(
+                extendProperties(
+                    viewModel.button,
+                    {
+                        eventListeners: {
+                            click: {
+                                listener: () => {
+                                    var mouseEvent = document.createEvent("MouseEvent");
+                                    mouseEvent.initEvent("click", false, false);
+                                    fileInput.dispatchEvent(mouseEvent);
+                                }
+                            }
+                        }
+                    }
+                )
+            ).render();
+
+            this.element.appendChild(button);
+        }
+    }
+}
+
+export function fileSelectorView(properties: FileSelectorProperties){
+    return new FileSelectorView(properties);
+}
+
+export class FileSelectorViewModel extends ViewModel<FileSelectorProperties> implements FileSelectorProperties {
+    button?: ButtonProperties;
+    inputFile: InputProperties<FileList>;
+}
+
+registerView(
+    FileSelectorViewModel,
+    FileSelectorView
+);

package/src/controls/custom/LabeledControl/LabeledControl.ts

@@ -0,0 +1,54 @@
+import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel"
+import { View, IView, registerView } from "../../../framework/View";
+import { DivView } from "../../html/Div/Div";
+
+export interface LabeledViewProperties extends Properties {
+    labelProperties: Properties;
+    view: IView;
+}
+
+export class LabeledControlView extends View<LabeledViewProperties> {
+    constructor(properties: LabeledViewProperties) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        viewType: "LabeledControl",
+                        style: {
+                            display: "flex",
+                            alignItems: "center"
+                        },
+                        classNames: ["o-labled-control"]
+                    },
+                    properties
+                ),
+                children: [
+                    new DivView(
+                        extendProperties(
+                            properties.labelProperties,
+                            {
+                                viewType: "Label"
+                            }
+                        )
+                    ),
+                    properties.view
+                ]
+            }
+        );
+    }
+}
+
+export function labeledControlView(properties: LabeledViewProperties) {
+    return new LabeledControlView(properties);
+}
+
+export class LabeledControlViewModel extends ViewModel<LabeledViewProperties> implements LabeledViewProperties {
+    labelProperties: Properties;
+    view: IView;
+}
+
+registerView(
+    LabeledControlViewModel,
+    LabeledControlView
+)

package/src/controls/custom/ListItem/ListItem.ts

@@ -0,0 +1,91 @@
+import { isObservable, unwrap } from "knockout";
+import { View, getView, registerView } from "../../../framework/View";
+import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel";
+
+//Do not change property names since they have to correspond to kendo listItems
+//so this type can be used in kendo list controls like menu and tree
+
+export interface ListItemProperties extends Properties {
+    id: number | string;
+    text?: string | ViewModel;
+    select?: () => void;
+    order?: number | string;
+}
+
+export interface HierarchicalListItemProperties extends ListItemProperties {
+    parentId?: number | string;
+    expanded?: boolean;
+    items?: Array<HierarchicalListItemProperties>;
+}
+
+export class ListItemView extends View<ListItemProperties> {
+    constructor(properties: ListItemProperties) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        viewType: "ListItem"
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    build(): void {
+        super.build();
+
+        const viewModel = this.properties;
+
+        if (isObservable(viewModel.text)) {
+            this.setContent(unwrap(viewModel.text));
+            this.subscriptions.push(
+                viewModel.text.subscribe((content) => {
+                    this.setContent(content);
+                })
+            );
+        } else {
+            this.setContent(viewModel.text);
+        }
+    }
+
+    private setContent(content: string | ViewModel) {
+        if (typeof content === "string") {
+            this.element.innerHTML = content;
+        } else if (content instanceof ViewModel) {
+            this.setChildren(getView(content));
+        }
+    }
+}
+
+export function listItemView(properties: ListItemProperties) {
+    return new ListItemView(properties);
+}
+
+export class ListItemViewModel extends ViewModel<ListItemProperties> implements ListItemProperties {
+    id: number | string;
+    text?: string | ViewModel;
+    select?: () => void;
+    order?: number | string;
+}
+
+registerView(
+    ListItemViewModel,
+    ListItemView
+);
+
+export class HierarchicalListItemViewModel extends ViewModel<HierarchicalListItemProperties> implements HierarchicalListItemProperties{
+    id: number | string;
+    text?: string | ViewModel;
+    select?: () => void;
+    order?: number | string;
+    parentId?: number | string;
+    expanded?: boolean;
+    items?: Array<HierarchicalListItemProperties>;
+}
+
+registerView(
+    HierarchicalListItemViewModel,
+    ListItemView
+)

package/src/controls/custom/index.ts

@@ -0,0 +1,3 @@
+export * from "./FileSelector/FileSelector";
+export * from "./LabeledControl/LabeledControl";
+export * from "./ListItem/ListItem";

package/src/controls/html/Button/Button.ts

@@ -0,0 +1,66 @@
+import { unwrap, Subscribable, isSubscribable } from "knockout";
+import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel"
+import { View, getView, registerView } from "../../../framework/View";
+
+export interface ButtonProperties extends Properties {
+    content?: string | ViewModel | Subscribable<string | ViewModel>;
+}
+
+export class ButtonView extends View<ButtonProperties> {
+    constructor(properties: ButtonProperties) {
+        super(
+            {
+                tagName: "button",
+                properties: extendProperties(
+                    {
+                        viewType: "Button"
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    build(): void {
+        super.build();
+
+        const viewModel = this.properties;
+        if (viewModel.content) {
+            if (isSubscribable(viewModel.content)) {
+                this.buildContent(unwrap(viewModel.content));
+                this.subscriptions.push(
+                    viewModel.content.subscribe((content) => {
+                        this.buildContent(content);
+                    })
+                );
+            } else {
+                this.buildContent(viewModel.content);
+            }
+        }
+    }
+
+    private buildContent(content: string | ViewModel) {
+        if (content == null || content === undefined) {
+            this.element.innerText = null;
+        }
+        else if (typeof content === "string") {
+            this.element.innerText = content;
+        }
+        else if (content instanceof ViewModel) {
+            this.setChildren(getView(content as ViewModel));
+        }
+    }
+}
+
+export function buttonView(properties: ButtonProperties): ButtonView {
+    return new ButtonView(properties);
+}
+
+export class ButtonViewModel extends ViewModel<ButtonProperties> implements ButtonProperties{
+    content?: string | ViewModel | Subscribable<string | ViewModel>;
+}
+
+registerView(
+    ButtonViewModel,
+    ButtonView
+);

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
+);