@social-mail/social-mail-client 1.8.312 → 1.8.314

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.8.312",
+  "version": "1.8.314",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/site-editor/editor/HtmlPageEditor.global.css

@@ -71,71 +71,16 @@
             }
         }
 
-        & > [data-element=selection] {
-            position: absolute;
-            pointer-events: none;
-            outline: solid 1px green;
-            z-index: 22;
-            & > .lt, & > .rt, & > .lb, & > .rb {
-                position: absolute;
-                width: 10px;
-                height: 10px;
-                background-color: blue;
-                border: solid 1px white;
-                display: none;
-                border-radius: 5px;
-            }
-            & > .lt {
-                top: -5px;
-                left: -5px;
-            }
-            & > .rt {
-                top: -5px;
-                right: -5px;
-            }
-            & > .lb {
-                bottom: -5px;
-                left: -5px;
-            }
-            & > .rb {
-                bottom: -5px;
-                right: -5px;
-            }
-            & > div {
-                pointer-events: all;
-                position: absolute;
-                right: 0;
-                top: -1.4rem;
-                /* transform: translate(0, -100%); */
-                background-color: #0000ff;
-                color: white;
-                font-size: smaller;
-                text-transform: capitalize;
-                padding: 2px;
-                padding-left: 5px;
-                padding-right: 5px;
-                display: flex;
-                gap: 5px;
-                & > * {
-                    cursor: pointer;
-                    padding: 2px;
-                    &:hover {
-                        background-color: white;
-                        color: blue;
-                    }
-                }
-            }
-        }
         & > [data-element=hover] {
             position: absolute;
-            outline: solid 1px blue;
-            outline-color: #0000ff6a;
+            outline: solid 1px green;
+            outline-color: #00940094;
             pointer-events: none;
             z-index: 20;
             & > label {
                 position: absolute;
                 transform: translate(0, -100%);
-                background-color: #0000ff6a;
+                background-color: #00940094;
                 color: white;
                 font-size: smaller;
                 text-transform: capitalize;

package/src/site-editor/editor/HtmlPageEditor.tsx

@@ -59,12 +59,13 @@ import { ElementBuilder } from "../properties/controls/ElementBuilder";
 import { IToolItem } from "../tools/section/ToolSection";
 import { editorSuggestions } from "../suggestions/editorSuggestions";
 import InlinePopupButton from "@web-atoms/web-controls/dist/basic/InlinePopupButton";
-import EditorPopupMenu from "../menus/EditorPopupMenu";
 import { IAppFile } from "../../model/model";
+import { SelectionUI } from "./ui/SelectionUI";
+import { desktopScreenWidth, mobileScreenWidth, tabletScreenWidth } from "./sizes";
 
-const desktopWidth = 992;
-const tabletWidth = 768;
-const mobileWidth = 480;
+const desktopWidth = desktopScreenWidth;
+const tabletWidth = tabletScreenWidth;
+const mobileWidth = mobileScreenWidth;
 
 const languageSymbol = Symbol.for("language");
 
@@ -80,6 +81,9 @@ export default class HtmlPageEditor extends AtomControl {
 
     public readonly selection: SelectedElement = new SelectedElement(this);
 
+    public readonly hover: SelectedElement = new SelectedElement(this);
+
+
     public undoRedo = { canUndo: false, canRedo: false, dispose() { /* do nothing */ } } as any as UndoRedo;
 
     @BindableProperty
@@ -89,6 +93,9 @@ export default class HtmlPageEditor extends AtomControl {
 
     public languages = null;
 
+    public maxWidth = desktopWidth;
+
+
     public get modifiedDocument() {
         if (!this.undoRedo.changed) {
             return null;
@@ -225,12 +232,9 @@ export default class HtmlPageEditor extends AtomControl {
 
     private contentEditor: HTMLIFrameElement;
 
-    private readonly hover: SelectedElement = new SelectedElement(this);
 
     private readonly dropTarget: SelectedElement = new SelectedElement(this);
 
-    private maxWidth = desktopWidth;
-
     private lastCommitTimerID;
 
     constructor(app, e) {
@@ -319,54 +323,7 @@ export default class HtmlPageEditor extends AtomControl {
                     style-width={Bind.oneWay(() => this.dropTarget.width)}
                     style-height={Bind.oneWay(() => this.dropTarget.height)}>
                 </div>
-                <div data-element="selection"
-                    style-left={Bind.oneWay(() => this.selection.left)}
-                    style-top={Bind.oneWay(() => this.selection.top)}
-                    style-width={Bind.oneWay(() => this.selection.width)}
-                    style-height={Bind.oneWay(() => this.selection.height)}>
-                        <i class="lt" />
-                        <i class="rt" />
-                        <i class="lb" />
-                        <i class="rb" />
-                        <div>
-                            <i
-                                class="fa-regular fa-arrow-up"
-                                event-click={() => {
-                                    if (this.selection.element.parentElement !== this.htmlDocument.body) {
-                                        this.selection.update(this.selection.element.parentElement);
-                                    }
-                                }}
-                                />
-                            <i
-                                event-click={() => {
-                                    this.selection.setDraggable();
-                                }}
-                                class="fa-solid fa-up-down-left-right"
-                                data-click-event="start-drag"/>
-                            <i
-                                style-display={Bind.oneWay(() => this.selection.element.hasAttribute("styler-invisible"))}
-                                class="fa-solid fa-eye-slash"
-                                event-click={() => (this.selection.element.removeAttribute("styler-invisible"), this.selection.refresh())}
-                                title="Show Object"
-                                />
-                            <i
-                                style-display={Bind.oneWay(() => !this.selection.element.hasAttribute("styler-invisible"))}
-                                class="fa-solid fa-eye"
-                                event-click={() => (this.selection.element.setAttribute("styler-invisible", "1"), this.selection.refresh())}
-                                title="Hide to reveal objects behind this"
-                                />
-                            <i
-                                style-display={Bind.oneWay(() => this.selection.isImage)}
-                                data-click-event="change-image"
-                                title="Change Image (Double Click)"
-                                class="fa-solid fa-arrows-rotate-reverse"></i>
-                            <i
-                                title="Extract Fragment"
-                                data-click-event="extract-element"
-                                class="fad fa-file-export"/>
-                            <EditorPopupMenu/>
-                        </div>
-                </div>
+                <SelectionUI/>
                 <div data-element="hover"
                     style-left={Bind.oneWay(() => this.hover.left)}
                     style-top={Bind.oneWay(() => this.hover.top)}

package/src/site-editor/editor/SelectedElement.tsx

@@ -247,7 +247,7 @@ export class SelectedElement {
         }
     }
 
-    private updateRect() {
+    public updateRect() {
         const { e } = this;
         if (!e) {
             return;

package/src/site-editor/editor/sizes.ts

@@ -0,0 +1,3 @@
+export const desktopScreenWidth = 992;
+export const tabletScreenWidth = 768;
+export const mobileScreenWidth = 480;

package/src/site-editor/editor/ui/SelectionUI.global.css

@@ -0,0 +1,78 @@
+selected-element {
+    position: absolute;
+    outline: solid 1px blue;
+    z-index: 22;
+    &:not([data-edit]) {
+        pointer-events: none;
+        & > i {
+            display: none;
+        }
+    }
+    &[data-edit] {
+        cursor: move;
+    }
+    & > [data-resize] {
+        display: block;
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        background-color: blue;
+        border: solid 1px white;
+        border-radius: 5px;
+    }
+    & > [data-resize=lt] {
+        top: -5px;
+        left: -5px;
+        cursor: nw-resize;
+    }
+    & > [data-resize=rt] {
+        top: -5px;
+        right: -5px;
+        cursor: ne-resize;
+    }
+    & > [data-resize=lb] {
+        bottom: -5px;
+        left: -5px;
+        cursor: sw-resize;
+    }
+    & > [data-resize=rb] {
+        bottom: -5px;
+        right: -5px;
+        cursor: se-resize;
+    }
+    & > label {
+        position: absolute;
+        transform: translate(0, -100%);
+        background-color: #0000ff;
+        color: white;
+        font-size: smaller;
+        text-transform: capitalize;
+        padding: 2px;
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+    & > div {
+        pointer-events: all;
+        position: absolute;
+        right: 0;
+        top: -1.4rem;
+        /* transform: translate(0, -100%); */
+        background-color: #0000ff;
+        color: white;
+        font-size: smaller;
+        text-transform: capitalize;
+        padding: 2px;
+        padding-left: 5px;
+        padding-right: 5px;
+        display: flex;
+        gap: 5px;
+        & > * {
+            cursor: pointer;
+            padding: 2px;
+            &:hover {
+                background-color: white;
+                color: blue;
+            }
+        }
+    }
+}

package/src/site-editor/editor/ui/SelectionUI.tsx

@@ -0,0 +1,218 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/no-namespace */
+import XNode from "@web-atoms/core/dist/core/XNode";
+import EditorPopupMenu from "../../menus/EditorPopupMenu";
+import { BindEditor } from "../../properties/controls/PropertyEditor";
+
+import "./SelectionUI.global.css";
+import HtmlPageEditor from "../HtmlPageEditor";
+import { mobileScreenWidth, tabletScreenWidth } from "../sizes";
+import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "selected-element": any;
+        }
+    }
+}
+
+interface IRect {
+    left;
+    top;
+    right;
+    bottom;
+    dx;
+    dy;
+    sx;
+    sy;
+}
+
+const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEvent, fx: (r: IRect, ) => IRect) => {
+
+
+    const prefix = editor.maxWidth === tabletScreenWidth
+        ? "styler-tablet"
+        : (editor.maxWidth === mobileScreenWidth
+            ? "styler-mobile"
+            : "styler");
+
+    const sx = e.clientX;
+    const sy = e.clientY;
+
+    const { selection, hover } = editor;
+    const selectedElement = selection.element;
+    const selectedParent = selectedElement.parentElement;
+
+    const style = selectedElement.ownerDocument.defaultView.getComputedStyle(selectedElement);
+    const { left = "0", top = "0", right = "0", bottom = "0" } = style;
+    const width = selectedParent.offsetWidth;
+    const height = selectedParent.offsetHeight;
+
+    const ps = (v, max) => (v* 100 / (max || 1)).toFixed(2);
+
+    const captureMove = (evt: PointerEvent) => {
+        const dx = evt.clientX - sx;
+        const dy = evt.clientY - sy;
+        const ri = {
+            left: parseFloat(left),
+            top: parseFloat(top),
+            right: parseFloat(right),
+            bottom: parseFloat(bottom),
+            sx,
+            sy,
+            dx,
+            dy
+        };
+        const r = fx(ri);
+        const av = `${ps(r.top, height)}% ${ps(r.right, width)}% ${ps(r.bottom, height)}% ${ps(r.left, width)}%`;
+        selectedElement.setAttribute(`${prefix}-inset`, av);
+        if (/^img$/i.test(selectedElement.tagName)) {
+            // image needs width/height as well...
+            let widthDiff = -r.left;
+            let heightDiff = -r.top;
+            if (ri.bottom === r.bottom) {
+                heightDiff -= r.bottom;
+            }
+            if (ri.right === r.right) {
+                widthDiff -= r.right;
+            }
+            selectedElement.setAttribute(`${prefix}-width`, ps(width + widthDiff, width) + "%");
+            selectedElement.setAttribute(`${prefix}-height`, ps(height + heightDiff, height) + "%");
+        }
+
+        setTimeout(() => {
+            selection.updateRect();
+            hover.updateRect();
+        }, 1);
+    };
+
+    element.addEventListener("pointermove", captureMove);
+    element.setPointerCapture(e.pointerId);
+    const release = () => {
+        element.releasePointerCapture(e.pointerId);
+        element.removeEventListener("pointermove", captureMove);
+        element.removeEventListener("pointerup", release);
+    };
+    element.addEventListener("pointerup", release);
+};
+
+const eventPointerDown = (editor: HtmlPageEditor, e: PointerEvent) =>  {
+    const element = e.target as HTMLElement;
+    const currentElement = e.currentTarget as HTMLElement;
+    if (!currentElement.hasAttribute("data-edit")) {
+        return;
+    }
+
+    const resize = element.getAttribute("data-resize");
+    if (resize) {
+
+
+        // enable resizing...
+        switch(resize) {
+            case "lt":
+                setCapture(editor, element, e, (r) => {
+                    r.left += r.dx;
+                    r.top += r.dy;
+                    return r;
+                });
+                return;
+            case "rt":
+                setCapture(editor, element, e, (r) => {
+                    r.top += r.dy;
+                    r.right -= r.dx;
+                    return r;
+                });
+                return;
+            case "lb":
+                setCapture(editor, element, e, (r) => {
+                    r.left += r.dx;
+                    r.bottom -= r.dy;
+                    return r;
+                });
+                return;
+            case "rb":
+                setCapture(editor, element, e, (r) => {
+                    r.bottom -= r.dy;
+                    r.right -= r.dx;
+                    return r;
+                });
+                return;
+        }
+        return;
+    }
+
+    if(currentElement !== element) {
+        return;
+    }
+
+    setCapture(editor, element, e, (r) => {
+        r.top += r.dy;
+        r.left += r.dx;
+        r.bottom -= r.dy;
+        r.right -= r.dx;
+        return r;
+    });
+
+
+};
+
+export function SelectionUI() {
+    return <selected-element data-element="selection"
+        data-edit={BindEditor.oneWay((e) => /absolute|fixed/i.test(e.selection.currentStyle.position) ? "1" : null)}
+        event-pointerdown={BindEditor.event(eventPointerDown as any)}
+        style-left={BindEditor.oneWay((e) => e.selection.left)}
+        style-top={BindEditor.oneWay((e) => e.selection.top)}
+        style-width={BindEditor.oneWay((e) => e.selection.width)}
+        style-height={BindEditor.oneWay((e) => e.selection.height)}>
+        <label text={BindEditor.oneWay((e) => e.selection.name)}/>
+            <i data-resize="lt"/>
+            <i data-resize="rt"/>
+            <i data-resize="lb"/>
+            <i data-resize="rb"/>
+            <div>
+                <i
+                    class="fa-regular fa-arrow-up"
+                    event-click={BindEditor.event((e) => {
+                        if (e.selection.element.parentElement !== e.htmlDocument.body) {
+                            e.selection.update(e.selection.element.parentElement);
+                        }
+                    })}
+                    />
+                <i
+                    event-click={BindEditor.event((e) => {
+                        e.selection.setDraggable();
+                    })}
+                    class="fa-solid fa-up-down-left-right"
+                    data-click-event="start-drag"/>
+                <i
+                    style-display={BindEditor.oneWay((e) => e.selection.element.hasAttribute("styler-invisible"))}
+                    class="fa-solid fa-eye-slash"
+                    event-click={BindEditor.event((e) => {
+                        e.selection.element.removeAttribute("styler-invisible");
+                        e.selection.refresh();
+                    })}
+                    title="Show Object"
+                    />
+                <i
+                    style-display={BindEditor.oneWay((e) => !e.selection.element.hasAttribute("styler-invisible"))}
+                    class="fa-solid fa-eye"
+                    event-click={BindEditor.event((e) => {
+                        e.selection.element.setAttribute("styler-invisible", "1");
+                        e.selection.refresh();
+                    })}
+                    title="Hide to reveal objects behind this"
+                    />
+                <i
+                    style-display={BindEditor.oneWay((e) => e.selection.isImage)}
+                    data-click-event="change-image"
+                    title="Change Image (Double Click)"
+                    class="fa-solid fa-arrows-rotate-reverse"></i>
+                <i
+                    title="Extract Fragment"
+                    data-click-event="extract-element"
+                    class="fad fa-file-export"/>
+                <EditorPopupMenu/>
+            </div>
+    </selected-element>;
+}

package/src/site-editor-app/drawer/SiteEditorDrawer.global.css

@@ -0,0 +1,25 @@
+drawer-menu {
+    /* & > .menus, & > section {
+        scrollbar-color: transparent transparent;
+        &:hover {
+            scrollbar-color: var(--accent-color, gray) var(--accent-color, gray);
+        }
+
+        & *:hover {
+            scrollbar-color: var(--accent-color, gray) var(--accent-color, gray);
+        }
+    } */
+
+    .menu-item-search {
+        overflow: hidden;
+        & input {
+            width: 100%;
+            margin-left: 16px;
+            border-radius: 0;
+            border-bottom: solid 1px transparent;
+            &:focus {
+                border-bottom: solid 1px var(--accent-color);
+            }
+        }
+    }
+}

package/src/site-editor-app/drawer/SiteEditorDrawer.tsx

@@ -10,6 +10,8 @@ import MenuItem from "../../common/controls/menu/MenuItem";
 import BaseDrawer from "../../common/controls/drawer/BaseDrawer";
 import SocialMailApp from "../../common/SocialMailApp";
 
+import "./SiteEditorDrawer.global.css";
+
 export default class SiteEditorDrawer extends BaseDrawer {
 
     @InjectProperty
@@ -20,13 +22,19 @@ export default class SiteEditorDrawer extends BaseDrawer {
             <header>
                 Social Websites
             </header>
-            <section>
+            <section
+                other={Bind.oneWayAsync((c, e, cancelToken) => this.menuService.load(this.menuService.search, cancelToken))}>
                 { SocialMailApp.config.links.home !== "/"
                     && <MenuItem
                         icon="fas fa-home"
                         label="Home"
                         href={SocialMailApp.config.links.home}
                     />}
+                <div class="menu-item-search" style-display={Bind.oneWay(() => this.menuService.showSearch)}>
+                    <input
+                        type="search"
+                        value={Bind.twoWaysImmediate(() => this.menuService.search)}/>
+                </div>
                 <AtomRepeater
                     items={Bind.oneWay(() => this.menuService.websites)}
                     itemRenderer={(x: IWebSite) => <ExpanderMenu isExpanded={true}>