jpf 4.2.15 → 4.2.16

package/src/controls/kendo/Dialog/Dialog.ts

@@ -0,0 +1,64 @@
+import * as kendo from "@progress/kendo-ui/js/kendo.window.js";
+import { View } from "../../../framework/View";
+import { DivView } from "../../html/Div/Div";
+import { ButtonView } from "../../html/Button/Button";
+
+export interface DialogOptions {
+    content?: View;
+    buttons?: Array<ButtonView>;
+}
+
+export class Dialog {
+    constructor(options: DialogOptions) {
+        this.options = options;
+    }
+
+    private options: DialogOptions;
+    private dialog: kendo.ui.Window;
+
+    open() {
+        this.dialog = new kendo.ui.Window(
+            document.createElement("div"),
+            {
+                modal: true,
+                maxHeight: (window as Window).innerHeight * 0.9,
+                maxWidth: (window as Window).innerWidth * 0.9,
+                open: (x) => {
+                    console.log(x);
+                    this.dialog.center();
+                    const wrapper = this.dialog.wrapper.get(0) as HTMLElement;
+                    if (this.options.content) {
+                        const content = wrapper.querySelector(".k-window-content");
+                        if (content) {
+                            content.appendChild(this.options.content.render());
+                        }
+                    }
+                    if (this.options.buttons) {
+                        const footer = new DivView({
+                            children: this.options.buttons,
+                            style: {
+                                display: "flex",
+                                justifyContent: "flex-end",
+                                borderTop: "1px solid gray",
+                                padding: "5px"
+                            }
+                        });
+                        wrapper.appendChild(footer.render());
+                    }
+                }
+            }
+        );
+
+        this.dialog.open();
+    }
+
+    close() {
+        if (this.dialog) {
+            this.dialog.close();
+        }
+    }
+}
+
+export function dialog(options: DialogOptions) {
+    return new Dialog(options);
+}

package/src/controls/kendo/Editor/Editor.ts

@@ -0,0 +1,138 @@
+import * as kendo from "@progress/kendo-ui/js/kendo.editor.js";
+import { View, registerView } from "../../../framework/View";
+import { Properties, ViewModel, extendProperties } from "../../../framework/ViewModel";
+import { unwrap, isObservable, computed, observable } from "knockout";
+import { isObservableProperty, ObservableProperty } from "../../../framework/observable";
+import { DivView } from "../../html/Div/Div";
+import { ButtonView } from "../../html/Button/Button";
+import { prettifyHtml } from "../../../utilities/html/html";
+
+export interface EditorProperties extends Properties {
+    value?: string | ObservableProperty<string>;
+    tools?: string[] | kendo.ui.EditorTool[];
+}
+
+export class EditorView extends View<EditorProperties> {
+    constructor(properties: EditorProperties) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        viewType: "KendoEditor",
+                        style: {
+                            display: "flex",
+                            flexDirection: "column"
+                        }
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    private editor: kendo.ui.Editor;
+
+    build(): void {
+        super.build();
+
+        const viewModel = this.properties;
+
+        const htmlMode = observable<boolean>(false);
+
+        const divHeader = new DivView({
+            children: [
+                new ButtonView({
+                    content: computed<string>(() => {
+                        return htmlMode() ? "wysiwyg" : "view html source";
+                    }),
+                    eventListeners: {
+                        click: {
+                            listener: () => {
+                                htmlMode(!htmlMode());
+                            }
+                        }
+                    },
+                    style: {
+                        width: "120px",
+                        marginTop: "2px"
+                    }
+                })
+            ]
+        }).render();
+
+        const divElement = new DivView({
+            visible: computed<boolean>(() => {
+                return !htmlMode();
+            }),
+            style: {
+                flexGrow: 1
+            }
+        }).render();
+
+        const textAreaElement = new View({
+            tagName: "textarea",
+            properties: {
+                visible: htmlMode,
+                style: {
+                    flexGrow: 1,
+                    borderColor: "transparent",
+                    borderRadius: "4px"
+                }
+            }
+        }).render() as HTMLTextAreaElement;
+
+        this.element.appendChild(divElement);
+        this.element.appendChild(textAreaElement);
+        this.element.appendChild(divHeader);
+
+        const html = unwrap(viewModel.value);
+        divElement.innerHTML = html;
+        textAreaElement.value = prettifyHtml(html);
+
+        if (isObservable(viewModel.value)) {
+            this.subscriptions.push(
+                viewModel.value.subscribe((value) => {
+                    divElement.innerHTML = value;
+                    textAreaElement.value = value;
+                })
+            );
+        }
+
+        this.editor = new kendo.ui.Editor(
+            divElement,
+            {
+                tools: viewModel.tools
+            }
+        );
+
+        this.editor.bind(
+            "change",
+            () => {
+                if (isObservableProperty(viewModel.value)) {
+                    viewModel.value.set(divElement.innerHTML);
+                }
+            }
+        );
+
+        textAreaElement.addEventListener("change", () => {
+            if (isObservableProperty(viewModel.value)) {
+                viewModel.value.set(textAreaElement.value);
+            }
+        });
+    }
+}
+
+export function editorView(properties: EditorProperties) {
+    return new EditorView(properties);
+}
+
+export class EditorViewModel extends ViewModel<EditorProperties> implements EditorProperties {
+    value?: string | ObservableProperty<string>;
+    tools?: string[] | kendo.ui.EditorTool[];
+}
+
+registerView(
+    EditorViewModel,
+    EditorView
+)

package/src/controls/kendo/Grid/Grid.ts

@@ -0,0 +1,286 @@
+import * as kendo from "@progress/kendo-ui/js/kendo.grid.js";
+import { View, registerView } from "../../../framework/View";
+import { Properties, ViewModel, extendProperties } from "../../../framework/ViewModel";
+import { ObservableArrayProperty, ObservableProperty } from "../../../framework/observable";
+import { unwrap, utils, Subscribable, isSubscribable } from "knockout";
+import { ChangedItem } from "../DataSource/DataSource";
+import { knockoutObservableToKendoObservableArray, getUnderlyingObject } from "../ObservableObject/ObservableObject";
+
+export interface GridProperties<TItem> extends Properties {
+    items?: Array<TItem> | Subscribable<Array<TItem>>;
+    idProperty?: keyof TItem;
+    columns?: Array<kendo.ui.GridColumn>;
+    pageSize?: number;
+    sortable?: boolean | kendo.ui.GridSortable;
+    scrollable?: kendo.ui.GridScrollable;
+    editable?: kendo.ui.GridEditable;
+    filterable?: boolean | kendo.ui.GridFilterable | Subscribable<boolean | kendo.ui.GridFilterable>;
+    toolbar?: string | Array<string>;
+    selectable?: boolean | string;
+    selectedItem?: TItem | Subscribable<TItem>;
+    selectedItems?: Array<TItem> | Subscribable<Array<TItem>>;
+    onDataSourceChange?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
+    onDataSourceAdd?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
+    onDataSourceRemove?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
+    onGridChange?: (selectedItems: Array<any>, grid: kendo.ui.Grid) => void;
+    onRowContextMenu?: (event: PointerEvent, dataItem: any) => void;
+}
+
+export class GridView<TItem = any> extends View<GridProperties<TItem>> {
+    constructor(properties: GridProperties<TItem>) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        viewType: "KendoGrid"
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    private grid: kendo.ui.Grid;
+    private dataSource: kendo.data.DataSource;
+
+    private getItemById(id) {
+        if (this.properties.idProperty) {
+            const items = this.dataSource.data() as any as Array<any>;
+            return utils.arrayFirst(items, (item) => { return item[this.properties.idProperty] === id });
+        }
+
+        throw "Can only getItem when idProperty is set";
+    }
+
+    build(): void {
+        super.build();
+
+        const viewModel = this.properties;
+
+        this.dataSource = new kendo.data.DataSource({
+            data: knockoutObservableToKendoObservableArray(viewModel.items),
+            pageSize: this.properties.pageSize || 30,
+            change: (event: kendo.data.DataSourceChangeEvent) => {
+                var items = event.items as Array<ChangedItem>;
+                switch (event.action) {
+                    case "itemchange":
+                        if (viewModel.onDataSourceChange) {
+                            viewModel.onDataSourceChange(items, event.sender);
+                        }
+                        break;
+
+                    case "add":
+                        if (viewModel.onDataSourceAdd) {
+                            viewModel.onDataSourceAdd(items, event.sender);
+                        }
+                        break;
+
+                    case "remove":
+                        if (viewModel.onDataSourceRemove) {
+                            viewModel.onDataSourceRemove(items, event.sender);
+                        }
+                        break;
+                }
+            }
+        });
+
+        this.grid = new kendo.ui.Grid(this.element, {
+            dataSource: this.dataSource,
+            columns: this.properties.columns,
+            toolbar: this.properties.toolbar,
+            scrollable: this.properties.scrollable,
+            sortable: this.properties.sortable,
+            editable: this.properties.editable,
+            filterable: unwrap(this.properties.filterable),
+            change: (event: kendo.ui.GridChangeEvent) => {
+                if (this.properties.selectedItem) {
+                    const selectedItem = getSelectedDataItem(event.sender);
+                    const observableProperty = this.properties.selectedItem as ObservableProperty;
+                    if (observableProperty.set) {
+                        observableProperty.set(selectedItem);
+                    }
+                }
+                if (this.properties.selectedItems) {
+                    const selectedItems = getSelectedDataItems<TItem>(event.sender);
+                    const observableArrayProperty = this.properties.selectedItems as ObservableArrayProperty<TItem>;
+                    if (observableArrayProperty.set) {
+                        observableArrayProperty.set(selectedItems);
+                    }
+                }
+
+                if (this.properties.onGridChange) {
+                    this.properties.onGridChange(getSelectedDataItems<TItem>(event.sender), event.sender);
+                }
+            },
+            selectable: this.properties.selectable
+        });
+
+        if (viewModel.onRowContextMenu) {
+            this.grid.table.contextmenu((event: PointerEvent) => {
+                event.preventDefault();
+                var target = event.target;
+                var row: HTMLTableRowElement;
+
+                if (target instanceof HTMLElement) {
+                    switch (target.tagName.toLowerCase()) {
+                        case "td":
+                            row = target.parentElement as HTMLTableRowElement;
+                            break;
+
+                        case "tr":
+                            row = target as HTMLTableRowElement;
+                            break;
+                    }
+                }
+
+                if (row) {
+                    let dataItem = this.grid.dataItem(row);
+                    if (dataItem) {
+                        const underlyingObject = getUnderlyingObject(dataItem);
+                        if (underlyingObject) {
+                            dataItem = underlyingObject as any;
+                        }
+                        setTimeout(() => {
+                            viewModel.onRowContextMenu(event, dataItem);
+                        });
+
+                    };
+                }
+            });
+        }
+        if (isSubscribable(viewModel.items)) {
+            this.subscriptions.push(
+                viewModel.items.subscribe((items) => {
+                    if (items) {
+                        this.dataSource.data(new kendo.data.ObservableArray(knockoutObservableToKendoObservableArray(items)));
+                    } else {
+                        this.dataSource.data([]);
+                    }
+                })
+            );
+        }
+        if (isSubscribable(viewModel.filterable)) {
+            this.subscriptions.push(
+                viewModel.filterable.subscribe((filterable) => {
+                    this.grid.setOptions({ filterable: filterable });
+                })
+            );
+        }
+
+        if (isSubscribable(viewModel.selectedItem)) {
+            this.subscriptions.push(
+                viewModel.selectedItem.subscribe((selectedItem: TItem) => {
+                    if (selectedItem && viewModel.idProperty) {
+                        setTimeout(
+                            () => {
+                                const id = selectedItem[viewModel.idProperty];
+                                const item = this.getItemById(id);
+                                //Remove previous selected row
+                                this.grid.tbody.find("tr.k-state-selected").removeClass("k-state-selected");
+                                //Add the selected class to the newly selected row
+                                this.grid.tbody.find("tr[data-uid='" + item.uid + "']").addClass("k-state-selected");
+                            },
+                            10
+                        );
+                    } else {
+                        this.grid.select();
+                    }
+                })
+            );
+        }
+
+        if (isSubscribable(viewModel.selectedItems)) {
+            this.subscriptions.push(
+                viewModel.selectedItems.subscribe((selectedItems: Array<TItem>) => {
+                    if (selectedItems && selectedItems.length > 0 && viewModel.idProperty) {
+                        setTimeout(
+                            () => {
+                                //Remove all previous selected rows
+                                this.grid.tbody.find("tr.k-state-selected").removeClass("k-state-selected");
+                                for (let index = 0; index < selectedItems.length; index++) {
+                                    const selectedItem = selectedItems[index];
+                                    const id = selectedItem[viewModel.idProperty];
+                                    const item = this.getItemById(id);
+
+                                    //Add the selected class to the newly selected row
+                                    this.grid.tbody.find("tr[data-uid='" + item.uid + "']").addClass("k-state-selected");
+                                }
+                            },
+                            10
+                        );
+                    } else {
+                        this.grid.select();
+                    }
+                })
+            );
+        }
+
+        //Force the grid to repaint to show the scrollbar properly
+        setTimeout(() => {
+            this.grid.resize(true);
+        }, 5);
+    }
+}
+
+export function gridView<TItem>(properties: GridProperties<TItem>) {
+    return new GridView(properties);
+}
+
+export function getSelectedDataItem<TDataItem>(grid: kendo.ui.Grid): TDataItem {
+    const selection = grid.select() as any as Array<any>;
+    if (selection.length === 1) {
+        const dataItem = grid.dataItem(selection[0]);
+        const underlyingObject = getUnderlyingObject(dataItem);
+        if (underlyingObject) {
+            return underlyingObject as any as TDataItem;
+        }
+        return dataItem.toJSON() as TDataItem;
+    }
+
+    return null;
+}
+
+export function getSelectedDataItems<TItem>(grid: kendo.ui.Grid): Array<TItem> {
+    const selection = grid.select() as any as Array<any>;
+    const selectedDataItems = new Array();
+    if (selection && selection.length > 0) {
+        for (let index = 0; index < selection.length; index++) {
+            const dataItem = grid.dataItem(selection[index]);
+            const underlyingObject = getUnderlyingObject(dataItem);
+            if (underlyingObject) {
+                selectedDataItems.push(underlyingObject);
+            } else {
+                selectedDataItems.push(dataItem.toJSON());
+            }
+        }
+    }
+
+    return selectedDataItems;
+}
+
+export class GridViewModel<TItem = any> extends ViewModel<GridProperties<TItem>> implements GridProperties<TItem>
+{
+    items?: Array<TItem> | Subscribable<Array<TItem>>;
+    idProperty?: keyof TItem;
+    columns?: Array<kendo.ui.GridColumn>;
+    pageSize?: number;
+    sortable?: boolean | kendo.ui.GridSortable;
+    scrollable?: kendo.ui.GridScrollable;
+    editable?: kendo.ui.GridEditable;
+    filterable?: boolean | kendo.ui.GridFilterable | Subscribable<boolean | kendo.ui.GridFilterable>;
+    toolbar?: string | Array<string>;
+    selectable?: boolean | string;
+    selectedItem?: TItem | Subscribable<TItem>;
+    selectedItems?: Array<TItem> | Subscribable<Array<TItem>>;
+    onDataSourceChange?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
+    onDataSourceAdd?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
+    onDataSourceRemove?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
+    onGridChange?: (selectedItems: Array<any>, grid: kendo.ui.Grid) => void;
+    onRowContextMenu?: (event: PointerEvent, dataItem: any) => void;
+}
+
+registerView(
+    GridViewModel,
+    GridView
+);

package/src/controls/kendo/Menu/Menu.ts

@@ -0,0 +1,125 @@
+import * as  kendo from "@progress/kendo-ui/js/kendo.menu.js";
+import { isObservable, unwrap, Subscribable } from "knockout";
+import { View, render } from "../../../framework/View";
+import { ViewModel, Properties, applyBindings as applyViewModelToElement, extendProperties } from "../../../framework/ViewModel";
+import { HierarchicalListItemProperties , HierarchicalListItemViewModel} from "../../custom/ListItem/ListItem";
+const getContent = "getContent";
+
+export interface MenuProperties extends Properties {
+    items?: Array<HierarchicalListItemProperties| HierarchicalListItemViewModel > | Subscribable<Array<HierarchicalListItemProperties| HierarchicalListItemViewModel>>;
+}
+
+export class MenuView extends View<MenuProperties> {
+    constructor(properties: MenuProperties) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        classNames: ["Menu"],
+                        viewType: "KendoMenu"
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    private menu: kendo.ui.Menu;
+    private dataSource: kendo.data.HierarchicalDataSource;
+
+    build(): void {
+        super.build();
+
+        const viewModel = this.properties;
+
+        this.dataSource = new kendo.data.HierarchicalDataSource({});
+        this.menu = new kendo.ui.Menu(this.element, {
+            dataTextField: "text",
+            dataSource: this.dataSource
+        });
+
+        this.menu.bind(
+            "dataBound",
+            (event) => {
+                //Find all menuitems that needs to be post rendered.
+                event.sender.wrapper.find(".k-menu-item[postrender]").each((index, element: HTMLElement) => {
+                    const uid = element.getAttribute("data-uid");
+                    const hierarchicalListItemViewModel = this.dataSource.getByUid(uid) as any as HierarchicalListItemProperties;
+                    if (hierarchicalListItemViewModel) {
+                        applyViewModelToElement(hierarchicalListItemViewModel, element, this.subscriptions);
+
+
+                        if (hierarchicalListItemViewModel[getContent]) {
+                            const content = hierarchicalListItemViewModel[getContent]();
+                            if (content instanceof ViewModel) {
+                                const firstChild = element.firstElementChild as HTMLElement;
+                                firstChild.style.padding = "0";
+                                firstChild.innerHTML = "";
+                                firstChild.appendChild(render(content));
+                            }
+                        }
+                    }
+                    element.removeAttribute("postrender");
+                });
+            }
+        );
+
+        this.buildItems(unwrap(viewModel.items));
+        if (isObservable(viewModel.items)) {
+            this.subscriptions.push(
+                viewModel.items.subscribe((items) => {
+                    this.buildItems(items);
+                })
+            );
+        }
+    }
+
+    private buildItems(listItems: Array<HierarchicalListItemProperties| HierarchicalListItemViewModel>) {
+        const itemDictionary: { [id: string]: HierarchicalListItemProperties } = {};
+        const topLevelItems = new Array<HierarchicalListItemProperties>();
+
+        if (listItems) {
+            //Add all visible menuItems to a dictionary
+            listItems.forEach((listItem) => {
+                if (listItem as any instanceof ViewModel) {
+                    listItem["attr"] = { postrender: true };
+                }
+
+                if (typeof listItem.text !== "string") {
+                    var content = listItem.text;
+                    listItem[getContent] = () => { return content };
+                    listItem.text = "<post>";
+                }
+                if (unwrap(listItem.visible) !== false) {
+                    itemDictionary[listItem.id] = listItem;
+                }
+            });
+
+            //Add all the children to their parent
+            Object.keys(itemDictionary).forEach((key) => {
+                const menuItem = itemDictionary[key];
+
+                if (menuItem.parentId) {
+                    //Add the menuItem to its parent
+                    const parent = itemDictionary[menuItem.parentId];
+                    if (parent) {
+                        if (!parent.items) {
+                            parent.items = [];
+                        }
+                        parent.items.push(itemDictionary[menuItem.id]);
+                    }
+                } else {
+                    //Add the menuItem to the top level items
+                    topLevelItems.push(itemDictionary[menuItem.id]);
+                }
+            });
+        }
+
+        this.dataSource.data(topLevelItems);
+    }
+}
+
+export function menuView(properties: MenuProperties) {
+    return new MenuView(properties);
+}

package/src/controls/kendo/ObservableObject/ObservableObject.ts

@@ -0,0 +1,45 @@
+import { Subscribable, isObservable, unwrap } from "knockout";
+import * as kendo from "@progress/kendo-ui/js/kendo.data.js";
+
+var getUnderlyingObjectFunctionName = "getUnderlyingObject";
+
+export function knockoutObservableToKendoObservable(object: object): kendo.data.ObservableObject {
+    var observableObject = new kendo.data.ObservableObject();
+    observableObject[getUnderlyingObjectFunctionName] = () => {
+        return object;
+    }
+    Object.keys(object).forEach((key: string) => {
+        var value = object[key];
+
+        observableObject[key] = unwrap(value);
+
+        if (isObservable(value)) {
+            value.subscribe(
+                (newValue) => {
+                    observableObject.set(key, newValue);
+                }
+            );
+        }
+    });
+
+    return observableObject;
+}
+
+export function getUnderlyingObject(observableObject: kendo.data.ObservableObject): object {
+    if (observableObject[getUnderlyingObjectFunctionName]) {
+        return observableObject[getUnderlyingObjectFunctionName]();
+    }
+    return null;
+}
+
+export function knockoutObservableToKendoObservableArray(array: Array<any> | Subscribable<Array<any>>): Array<kendo.data.ObservableObject> {
+
+    var observableObjects = new Array<kendo.data.ObservableObject>();
+    if (array) {
+        unwrap(array).forEach((object) => {
+            observableObjects.push(knockoutObservableToKendoObservable(object));
+        });
+    }
+
+    return observableObjects;
+}