@web-atoms/web-controls 2.1.9 → 2.1.13

package/src/basic/PopupButton.tsx

@@ -3,7 +3,7 @@ import Colors from "@web-atoms/core/dist/core/Colors";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import StyleRule from "@web-atoms/core/dist/style/StyleRule";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
-import PopupService, { IPopup } from "@web-atoms/core/dist/web/services/PopupService";
+import PopupService, { IPopup, IPopupOptions } from "@web-atoms/core/dist/web/services/PopupService";
 import CSS from "@web-atoms/core/dist/web/styles/CSS";
 
 const menuCss = CSS(StyleRule()
@@ -28,6 +28,7 @@ export interface IMenuItem {
 export interface IPopupButton {
     icon?: string;
     label?: string;
+    showAsDialog?: boolean;
     [key: string]: any;
 }
 
@@ -63,6 +64,7 @@ export default function PopupButton(
 {
     icon,
     label,
+    showAsDialog,
     ... others
 }: IPopupButton,
 ... menus: Array<IMenuItem | XNode>) {
@@ -70,8 +72,8 @@ export default function PopupButton(
     let popup: IPopup = null;
     function openPopup(s: AtomControl, e: Event) {
         const button = e.currentTarget as HTMLElement;
+        button.classList.add("pressed");
         if (popup) {
-            button.classList.remove("pressed");
             popup.dispose();
             popup = null;
             return;
@@ -83,7 +85,12 @@ export default function PopupButton(
         </div>, menu);
 
         const ps = (s as any).resolve(PopupService) as PopupService;
-        popup = ps.show(button, menu);
+        const options: IPopupOptions = showAsDialog
+            ? {
+                alignment: "centerOfScreen"
+            }
+            : null;
+        popup = ps.show(button, menu, options);
 
         const dispose = () => {
             popup?.dispose();
@@ -92,7 +99,11 @@ export default function PopupButton(
 
         menu.addEventListener("click", dispose);
 
-        popup.registerDisposable(() => menu.removeEventListener("click", dispose));
+        popup.registerDisposable(() => {
+            button.classList.remove("pressed");
+            menu.removeEventListener("click", dispose);
+            popup = null;
+        });
     }
 
     if (label) {

package/src/html-editor/HtmlEditor.tsx

@@ -0,0 +1,242 @@
+import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import Colors from "@web-atoms/core/dist/core/Colors";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import StyleRule from "@web-atoms/core/dist/style/StyleRule";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import AddImage from "./commands/AddImage";
+import AddLink from "./commands/AddLink";
+import Align from "./commands/Align";
+import Bold from "./commands/Bold";
+import ChangeColor from "./commands/ChangeColor";
+import ChangeFont from "./commands/ChangeFont";
+import ChangeFontSize from "./commands/ChangeFontSize";
+import Headings from "./commands/Headings";
+import HorizontalRule from "./commands/HorizontalRule";
+import IndentLess from "./commands/IndentLess";
+import IndentMore from "./commands/IndentMore";
+import Italic from "./commands/Italic";
+import NumberedList from "./commands/NumberedList";
+import RemoveFormat from "./commands/RemoveFormat";
+import Separator from "./commands/Separator";
+import Source from "./commands/Source";
+import StrikeThrough from "./commands/StrikeThrough";
+import Underline from "./commands/Underline";
+import Unlink from "./commands/Unlink";
+import UnorderedList from "./commands/UnorderedList";
+
+const link = document.createElement("link");
+link.href = "https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css";
+link.rel = "stylesheet";
+document.head.appendChild(link);
+
+const css = CSS(StyleRule()
+    .display("flex")
+    .flexDirection("column")
+    .minHeight(500)
+    .child(StyleRule("iframe")
+        .flexBasis("100%")
+    )
+    .nested(StyleRule(".toolbar")
+        .display("flex")
+        .child(StyleRule(".command")
+            .display("inline-flex")
+            .justifyContent("space-evenly" as any)
+            .border("none")
+            .cursor("pointer")
+            .backgroundColor(Colors.transparent)
+            .hoverBackgroundColor(Colors.lightGreen)
+            .minWidth(28)
+            .height(28)
+            .and(StyleRule(".pressed")
+                .backgroundColor(Colors.lightGray)
+                .hoverBackgroundColor(Colors.lightGreen)
+            )
+            .nested(StyleRule(".ri-bold")
+                .fontWeight("bold")
+            )
+        )
+    )
+);
+
+export function Toolbar(a: any, ... nodes: XNode[]) {
+    return <div class="toolbar">
+        { ... nodes}
+    </div>;
+}
+
+export class HtmlEditorControl extends AtomControl {
+
+    @BindableProperty
+    public content: string;
+
+    @BindableProperty
+    public header: any[];
+
+    @BindableProperty
+    public version: number;
+
+    public editor: HTMLDivElement;
+
+    public get htmlContent(): string {
+        try {
+            return this.editor.innerHTML;
+        } catch (ex) {
+            console.warn(ex);
+        }
+    }
+
+    public set htmlContent(v: string) {
+        this.editor.innerHTML = v;
+        AtomBinder.refreshValue(this, "htmlContent");
+    }
+
+    private editorWindow: Window;
+
+    private editorDocument: Document;
+
+    public executeCommand(cmd, showUI?: boolean, value?: string): boolean {
+        const r = this.editorDocument.execCommand(cmd, showUI, value);
+        setTimeout(() => this.version++, 1);
+        return r;
+    }
+
+    public queryCommandState(cmd: string, ... a: any[]): boolean {
+        return this.editorDocument.queryCommandState(cmd);
+    }
+
+    public getStyle(name: string, v: any): string {
+        try {
+            const node = this.editorWindow.getSelection().getRangeAt(0);
+            const e = node.startContainer.parentElement as HTMLElement;
+            return this.editorWindow.getComputedStyle(e)[name];
+        } catch (ex) {
+            return null;
+        }
+    }
+
+    protected preCreate() {
+        this.version = 1;
+        this.runAfterInit(() => {
+            this.setup();
+        });
+        this.element.classList.add(css);
+    }
+
+    protected onPasteEvent(e: ClipboardEvent) {
+        // tslint:disable-next-line: no-console
+        if (!e.clipboardData.types.find((x) => x === "text/html")) {
+            return;
+        }
+
+        const d = e.clipboardData.getData("text/plain");
+        if (d) {
+            // we need to sanitize this one...
+            const s = window.getSelection();
+            const r = s.getRangeAt(0);
+            const p = document.createElement("p");
+            const span = document.createElement("span");
+            span.textContent = d;
+            p.appendChild(span);
+            r.insertNode(p);
+            r.setStartAfter(p);
+        }
+        e.preventDefault();
+    }
+
+    protected onInputEvent(e: InputEvent) {
+        // tslint:disable-next-line: no-console
+        console.log(e);
+    }
+
+    protected setup() {
+        const frame = this.element.getElementsByTagName("iframe")[0] as HTMLIFrameElement;
+        const doc = frame.contentWindow.document;
+        doc.open();
+        doc.writeln(`<div id="editor"><p>&nbsp;</p></div>`);
+        doc.close();
+        const style = doc.createElement("style");
+        style.textContent = `body {
+            font-family: arial,sans-serif
+        }
+        #editor {
+            min-height: 500px;
+        }
+        `;
+        doc.head.appendChild(style);
+        this.editor = doc.getElementById("editor") as HTMLDivElement;
+        this.editor.contentEditable = "true";
+        doc.execCommand("styleWithCSS");
+        const updateVersion = () => setTimeout(() => {
+            this.version++;
+            AtomBinder.refreshValue(this, "htmlContent");
+        }, 1);
+        this.editor.addEventListener("click", updateVersion);
+        this.editor.addEventListener("keydown", updateVersion);
+        this.editor.addEventListener("keypress", updateVersion);
+        this.editor.addEventListener("input", updateVersion);
+        this.editorWindow = frame.contentWindow;
+        this.editorDocument = doc;
+
+        this.registerDisposable({
+            dispose: () => {
+                this.editor.removeEventListener("click", updateVersion);
+                this.editor.removeEventListener("keydown", updateVersion);
+                this.editor.removeEventListener("keypress", updateVersion);
+                this.editor.removeEventListener("input", updateVersion);
+            }
+        });
+    }
+}
+
+export interface IHtmlEditor {
+    insertImage?: (s: HtmlEditorControl, e: Event) => Promise<string> | string;
+}
+
+export default function HtmlEditor(
+    {
+        insertImage,
+        ... attributes
+    }: any,
+    ... nodes: XNode[]) {
+
+    if (nodes.length === 0) {
+        return <HtmlEditorControl { ... attributes}>
+            <Toolbar>
+                <Bold/>
+                <Italic/>
+                <Underline/>
+                <StrikeThrough/>
+                <Align/>
+                <Separator/>
+                <Headings/>
+                <ChangeColor/>
+                <HorizontalRule/>
+                <Separator/>
+                <ChangeFont/>
+                <ChangeFontSize/>
+                <Separator/>
+                <NumberedList/>
+                <UnorderedList/>
+                <IndentLess/>
+                <IndentMore/>
+                <Separator/>
+                <AddImage eventInsertHtml={insertImage}/>
+                <Separator/>
+                <AddLink/>
+                <Unlink/>
+                <RemoveFormat/>
+                <Separator/>
+                <Source/>
+            </Toolbar>
+            <iframe class="editor-frame"/>
+        </HtmlEditorControl>;
+    }
+
+    return <HtmlEditorControl { ... attributes}>
+        { ... nodes}
+        <iframe class="editor-frame"/>
+    </HtmlEditorControl>;
+}

package/src/html-editor/commands/AddImage.tsx

@@ -0,0 +1,13 @@
+import CommandButton, { notSet } from "./CommandButton";
+
+export default function AddImage({
+    eventInsertHtml = notSet("AddImage"),
+    insertCommand = "insertHTML"
+}) {
+    return CommandButton({
+        icon: "ri-image-add-fill",
+        insertCommand,
+        title: "Insert Image",
+        eventInsertHtml
+    });
+}

package/src/html-editor/commands/AddLink.tsx

@@ -0,0 +1,90 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import { CancelToken } from "@web-atoms/core/dist/core/types";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import StyleRule from "@web-atoms/core/dist/style/StyleRule";
+import { AtomToggleButtonBar } from "@web-atoms/core/dist/web/controls/AtomToggleButtonBar";
+import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
+import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import FormField from "../../basic/FormField";
+import type { HtmlEditorControl } from "../HtmlEditor";
+import CommandButton, { notSet } from "./CommandButton";
+
+const linkTypes = [
+    {
+        label: "Web Page",
+        value: "web-page"
+    },
+    {
+        label: "Email",
+        value: "email"
+    },
+    {
+        label: "Anchor",
+        value: "anchor"
+    },
+    {
+        label: "Phone",
+        value: "phone"
+    }
+];
+
+const linkDialogCss = CSS(StyleRule()
+    .display("flex")
+    .flexDirection("column")
+    .gap(5)
+);
+
+class LinkDialog extends PopupWindow {
+
+    @BindableProperty
+    public link: string;
+
+    @BindableProperty
+    public type: string;
+
+    protected create(): void {
+        this.type = "web-page";
+        this.title = "Create Link";
+        this.render(<div class={linkDialogCss}>
+            <FormField label="Type">
+                <AtomToggleButtonBar
+                    items={linkTypes}
+                    value={Bind.twoWays(() => this.type)}/>
+            </FormField>
+            <FormField label="Link" required={true}>
+                <input
+                    placeholder="https://..."
+                    value={Bind.twoWaysImmediate(() => this.link)}/>
+            </FormField>
+            <div class="command-bar">
+                <button
+                    text="Add"
+                    eventClick={Bind.event(() => this.viewModel.close(this.toLink(this.link)))} />
+            </div>
+        </div>);
+    }
+
+    private toLink(link: string): string {
+        switch (this.type) {
+            case "web-page":
+                return /^(http|https)\:\/\//.test(link) ? link : "";
+        }
+    }
+}
+
+function showDialog(s: HtmlEditorControl, e: Event): Promise<string> {
+    const popupService = s.app.resolve(PopupService);
+    return popupService.showWindow(s.element, LinkDialog);
+}
+
+export default function AddLink({
+    insertCommand = "createLink"
+}) {
+    return CommandButton({
+        icon: "ri-link-m",
+        insertCommand,
+        eventInsertHtml: showDialog,
+        title: "Create Hyper Link"
+    });
+}

package/src/html-editor/commands/Align.tsx

@@ -0,0 +1,32 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import PopupButton, { MenuItem } from "../../basic/PopupButton";
+import type { HtmlEditorControl } from "../HtmlEditor";
+
+export default function Align() {
+    return <PopupButton
+        class="command"
+        icon="ri-align-left"
+        title="Change Alignment">
+        <MenuItem
+            icon="ri-align-left"
+            title="Align Left"
+            eventClick={Bind.event((e: HtmlEditorControl) =>
+                e.executeCommand("justifyLeft"))}/>
+        <MenuItem
+            icon="ri-align-center"
+            title="Align Center"
+            eventClick={Bind.event((e: HtmlEditorControl) =>
+                e.executeCommand("justifyCenter"))}/>
+        <MenuItem
+            icon="ri-align-right"
+            title="Align Right"
+            eventClick={Bind.event((e: HtmlEditorControl) =>
+                e.executeCommand("justifyRight"))}/>
+        <MenuItem
+            icon="ri-align-justify"
+            title="Justify"
+            eventClick={Bind.event((e: HtmlEditorControl) =>
+                e.executeCommand("justifyFull"))}/>
+    </PopupButton>;
+}

package/src/html-editor/commands/Bold.ts

@@ -0,0 +1,13 @@
+import Command, { ICommand } from "./Command";
+
+export default function Bold(cmd: ICommand) {
+    return Command({
+        icon: "ri-bold",
+        queryState: "bold",
+        title: "Bold",
+        ... cmd,
+        command(editor) {
+            editor.executeCommand("bold");
+        }
+    });
+}

package/src/html-editor/commands/ChangeColor.tsx

@@ -0,0 +1,178 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import StyleRule from "@web-atoms/core/dist/style/StyleRule";
+import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import PopupButton from "../../basic/PopupButton";
+import type { HtmlEditorControl } from "../HtmlEditor";
+
+const gray = [
+    "rgb(0,0,0)",
+    "rgb(68,68,68)",
+    "rgb(102,102,102)",
+    "rgb(153,153,153)",
+    "rgb(204,204,204)",
+    "rgb(238,238,238)",
+    "rgb(243,243,243)",
+    "rgb(255,255,255)"
+];
+
+const primary = [
+    "rgb(255,0,0)",
+    "rgb(255,153,0)",
+    "rgb(255,255,0)",
+    "rgb(0,255,0)",
+    "rgb(0,255,255)",
+    "rgb(0,0,255)",
+    "rgb(153,0,255)",
+    "rgb(255,0,255)"
+];
+
+const all = [
+    [
+        "rgb(244,204,204)",
+        "rgb(252,229,205)",
+        "rgb(255,242,204)",
+        "rgb(217,234,211)",
+        "rgb(208,224,227)",
+        "rgb(207,226,243)",
+        "rgb(217,210,233)",
+        "rgb(234,209,220)"
+    ],
+    [
+        "rgb(234,153,153)",
+        "rgb(249,203,156)",
+        "rgb(255,229,153)",
+        "rgb(182,215,168)",
+        "rgb(162,196,201)",
+        "rgb(159,197,232)",
+        "rgb(180,167,214)",
+        "rgb(213,166,189)"
+    ],
+    [
+        "rgb(224,102,102)",
+        "rgb(246,178,107)",
+        "rgb(255,217,102)",
+        "rgb(147,196,125)",
+        "rgb(118,165,175)",
+        "rgb(111,168,220)",
+        "rgb(142,124,195)",
+        "rgb(194,123,160)"
+    ],
+    [
+        "rgb(204,0,0)",
+        "rgb(230,145,56)",
+        "rgb(241,194,50)",
+        "rgb(106,168,79)",
+        "rgb(69,129,142)",
+        "rgb(61,133,198)",
+        "rgb(103,78,167)",
+        "rgb(166,77,121)"
+    ],
+    [
+        "rgb(153,0,0)",
+        "rgb(180,95,6)",
+        "rgb(191,144,0)",
+        "rgb(56,118,29)",
+        "rgb(19,79,92)",
+        "rgb(11,83,148)",
+        "rgb(53,28,117)",
+        "rgb(116,27,71)"
+    ],
+    [
+        "rgb(102,0,0)",
+        "rgb(120,63,4)",
+        "rgb(127,96,0)",
+        "rgb(39,78,19)",
+        "rgb(12,52,61)",
+        "rgb(7,55,99)",
+        "rgb(32,18,77)",
+        "rgb(76,17,48)"
+    ]
+];
+
+const colorSelectorCss = CSS(StyleRule("color-selector")
+    .width(400)
+    .display("flex")
+    .justifyContent("space-evenly" as any)
+    .child(StyleRule("table")
+        .display("inline-table")
+    )
+    .nested(StyleRule(".color-button")
+        .display("inline-block")
+        .width(20)
+        .height(20)
+        .borderWidth(1)
+        .margin(1)
+        .cursor("pointer")
+        .borderStyle("solid")
+        .borderColor("transparent")
+        .hover(StyleRule()
+            .borderColor("black")
+        )
+    )
+);
+
+function TextColor(color: string) {
+    return <div
+        class="color-button"
+        eventClick={Bind.event((e: HtmlEditorControl) => e.executeCommand("foreColor", false, color))}
+        styleBackgroundColor={color.toLowerCase()} title={color}></div>;
+}
+
+function BackgroundColor(color: string) {
+    return <div
+        class="color-button"
+        eventClick={Bind.event((e: HtmlEditorControl) => e.executeCommand("hiliteColor", false, color))}
+        styleBackgroundColor={color.toLowerCase()} title={color}></div>;
+}
+
+export default function ChangeColor() {
+    return <PopupButton title="Change Color" class="command" icon="ri-font-color">
+        <div class={colorSelectorCss}>
+            <table>
+                <thead>
+                    <tr>
+                        <th colSpan={8}>Text Color</th>
+                    </tr>
+                </thead>
+                <thead>
+                    <tr>
+                        { ... gray.map(TextColor)}
+                    </tr>
+                </thead>
+                <thead>
+                    <tr>
+                        { ... primary.map(TextColor)}
+                    </tr>
+                </thead>
+                <tbody>
+                    { ... all.map((row) => <tr>
+                        { ... row.map(TextColor)}
+                    </tr>)}
+                </tbody>
+            </table>
+            <table class="background-color">
+                <thead>
+                    <tr>
+                        <th colSpan={8}>Background Color</th>
+                    </tr>
+                </thead>
+                <thead>
+                    <tr>
+                        { ... gray.map(BackgroundColor)}
+                    </tr>
+                </thead>
+                <thead>
+                    <tr>
+                        { ... primary.map(BackgroundColor)}
+                    </tr>
+                </thead>
+                <tbody>
+                    { ... all.map((row) => <tr>
+                        { ... row.map(BackgroundColor)}
+                    </tr>)}
+                </tbody>
+            </table>
+        </div>
+    </PopupButton>;
+}