@social-mail/social-mail-hosted-web 1.2.18 → 1.2.21

package/node_modules/@web-atoms/web-controls/src/basic/TitleEditor.tsx

@@ -1,7 +1,7 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
 import IElement from "./IElement";
 
-import "./styles/title-editor-style";
+import "./styles/title-editor.global.less";
 
 export type Capitalize = "none" | "off" | "on" | "sentences" | "words" | "characters";
 

package/node_modules/@web-atoms/web-controls/src/basic/ToggleButtonBar.tsx

@@ -2,7 +2,7 @@ import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import AtomRepeater from "./AtomRepeater";
 
-import "./styles/toggle-button-bar-style";
+import "./styles/toggle-button-bar.global.less";
 
 export default class ToggleButtonBar extends AtomRepeater {
 

package/node_modules/@web-atoms/web-controls/src/basic/Tooltip.tsx

@@ -4,7 +4,7 @@ import { AtomControl, ElementValueSetters } from "@web-atoms/core/dist/web/contr
 import { getParentRepeaterItem } from "./AtomRepeater";
 import InlinePopup from "./InlinePopup";
 
-import "./styles/tooltip-style";
+import "./styles/tooltip.global.less";
 
 const tooltips = new Map<HTMLElement, [{control: any, tooltip: CancelToken}, typeof InlinePopup]>();
 

package/node_modules/@web-atoms/web-controls/src/basic/TypeWriter.tsx

@@ -0,0 +1,75 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import sleep from "@web-atoms/core/dist/core/sleep";
+import { CancelToken } from "@web-atoms/core/dist/core/types";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+
+import "../styles/type-writer.global.less";
+
+const disposableProperty = Symbol("type-writer-timer");
+
+const nbsp = "\u202f";
+
+const tp = AtomControl.registerProperty("data-type-writer","type-writer", (c, e, value) => {
+
+    e[disposableProperty]?.cancel();
+
+    const ct = new CancelToken();
+    e[disposableProperty] = ct;
+    c.app.runAsync(async () => {
+
+        const separator = e.getAttribute("separator") ?? e.getAttribute("data-separator") ?? ",";
+
+        const typeDelay = Number(e.getAttribute("type-delay") ?? e.getAttribute("data-type-delay") ?? "180");
+
+        const pause = Number(e.getAttribute("pause") ?? e.getAttribute("data-pause") ?? "700");
+
+        const deleteDelay = Number(e.getAttribute("delete-delay") ?? e.getAttribute("data-delete-delay") ?? "100");
+
+        const textList = value
+            .split(separator)
+            .map((x) => x.trim())
+            .filter((x) => x);
+
+        e.textContent = nbsp;
+
+        let index = 0;
+        const max = textList.length;
+
+
+        while(!ct.cancelled) {
+            if (!e.isConnected) {
+                return;
+            }
+            const current = textList[index];
+
+            let length = 0;
+
+            // forward...
+            while(length < current.length) {
+                e.textContent = current.substring(0, ++length) || nbsp;
+                await sleep(typeDelay);
+            }
+
+            await sleep(pause);
+
+            while(length) {
+                e.textContent = current.substring(0, --length) || nbsp;
+                await sleep(deleteDelay);
+            }
+
+            await sleep(deleteDelay);
+
+            index++;
+            if (index === max) {
+                index = 0;
+            }
+        }
+    });
+});
+
+export default function TypeWriter({ text, ... a}) {
+    return <div
+        data-component="type-writer"
+        { ... tp(text)}
+        { ... a}></div>;
+}

package/node_modules/@web-atoms/web-controls/src/basic/UploadEvent.tsx

@@ -2,6 +2,7 @@ import { App } from "@web-atoms/core/dist/App";
 import Command from "@web-atoms/core/dist/core/Command";
 import EventScope from "@web-atoms/core/dist/core/EventScope";
 import { StringHelper } from "@web-atoms/core/dist/core/StringHelper";
+import XNode from "@web-atoms/core/dist/core/XNode";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import { AncestorEnumerator } from "@web-atoms/core/dist/web/core/AtomUI";
 import PopupService from "@web-atoms/core/dist/web/services/PopupService";
@@ -39,7 +40,7 @@ export const isFileType = (acceptType: string) => {
     return acceptCache[acceptType] ??= isFileTypeFactory(acceptType);
 };
 
-export type FilesAvailableEventArgs<T = any> = CustomEvent<{ files: File[], extra: T }>;
+export type FilesAvailableEventArgs<T = any> = CustomEvent<{ files: File[], extra: T, maxSize: number, convert: boolean, uploadEvent: string }>;
 
 export interface IUploadParams<T = any> {
     "event-files-available"?: (ce: FilesAvailableEventArgs<T>) => any,
@@ -50,6 +51,12 @@ export interface IUploadParams<T = any> {
     /** Will enforce that the selected file matches the given accept types */
     forceType?: boolean;
     maxSize?: number;
+    /** Used for inline video conversion, you must handle conversion before upload by yourself. */
+    convert?: boolean;
+    /** Used for inline video streaming, you must handle the streaming yourself */
+    stream?: boolean;
+    /** Max file size for streaming */
+    maxStreamSize?: number;
     upload?: boolean;
     /** Extra will hold other information that will be available in upload event */
     extra?: T;
@@ -69,14 +76,20 @@ const requestUpload = ({
     multiple,
     authorize,
     extra,
+    convert,
     upload,
     folder,
+    stream,
+    maxStreamSize,
     uploadEvent
 }: {
     element: HTMLElement,
     multiple?: boolean,
     authorize?: boolean,
     extra?: any,
+    convert?: boolean,
+    stream?: boolean,
+    maxStreamSize?: number;
     upload?: boolean,
     folder?: boolean,
     uploadEvent?: string
@@ -112,12 +125,14 @@ const requestUpload = ({
     document.body.append(file);
     previousFile = file;
     const maxSize = parseInt(element.getAttribute("data-max-size") || "0", 10);
+    stream ||= element.getAttribute("data-stream") === "true";
+    maxStreamSize ??= parseInt(element.getAttribute("data-max-stream-size") || "0", 10);
     const forceType = element.getAttribute("data-force-type") === "true";
 
     file.addEventListener("change", () => {
         let files = Array.from(file.files);
 
-        let msg = "";
+        let msgItems = [];
 
         if (forceType || maxSize) {
             
@@ -126,15 +141,23 @@ const requestUpload = ({
             const checkFileType = isFileType(accept);
 
             for (const iterator of files) {
-                if (maxSize && iterator.size > maxSize) {
-                    msg += `Size of ${iterator.name} is more than ${maxSize}`;
-                    continue;
-                }
                 if (forceType) {
                     if (!checkFileType(iterator)) {
-                        msg += `${iterator.name} is invalid file.`;
+                        msgItems.push(`${iterator.name} is invalid file.`, <br/>);
+                        continue;
+                    }
+                }
+                if (stream) {
+                    if (iterator.size > maxStreamSize) {
+                        msgItems.push(`Size of ${iterator.name} is more than ${maxSize}.`, <br/>);
                         continue;
                     }
+                    validated.push(iterator);
+                    continue;
+                }
+                if (!convert && maxSize && iterator.size > maxSize) {
+                    msgItems.push(`Size of ${iterator.name} is more than ${maxSize}.`, <br/>);
+                    continue;
                 }
                 validated.push(iterator);
             }
@@ -151,7 +174,8 @@ const requestUpload = ({
             if (root.isConnected) {
 
                 const control = AtomControl.from(root);
-                if (msg) {
+                if (msgItems.length) {
+                    const msg = <p>{ ... msgItems }</p>;
                     control.app.runAsync(() => PopupService.alert({ message: msg}));
                     if (files.length === 0) {
                         return;
@@ -163,6 +187,10 @@ const requestUpload = ({
                         detail: {
                             files,
                             extra,
+                            convert,
+                            stream,
+                            maxStreamSize,
+                            maxSize,
                             uploadEvent
                         },
                         bubbles: true,
@@ -199,14 +227,20 @@ window.addEventListener(uploadCommand.eventName, (ce: MouseEvent) => {
     const extra = (element as any).extra ?? element.getAttribute("data-extra");
     const upload = element.getAttribute("data-upload") === "true";
     const folder = element.hasAttribute("data-folder");
+    const convert = element.getAttribute("data-convert") === "true";
+    const stream = element.getAttribute("data-stream") === "true";
+    const maxStreamSize = parseInt(element.getAttribute("data-max-stream-size") ?? "0", 10);
     const uploadEvent = StringHelper.fromHyphenToCamel(element.getAttribute("data-upload-event"));
     requestUpload({
         element,
         authorize,
         multiple,
         extra,
+        convert,
         upload,
         folder,
+        stream,
+        maxStreamSize,
         uploadEvent
     })
 });
@@ -225,7 +259,10 @@ export default class UploadEvent {
         multiple = false,
         forceType = true,
         maxSize = 524288000,
+        maxStreamSize = 100*1024*1024,
+        stream = false,
         extra,
+        convert = false,
         upload = true,
         authorize = true,
         ariaLabel = "Upload",
@@ -240,6 +277,9 @@ export default class UploadEvent {
             "data-accept": accept,
             "data-multiple": multiple ? "true" : "false",
             "data-capture": capture,
+            "data-convert": convert,
+            "data-stream" : stream ? "true" : "false",
+            "data-max-stream-size" : maxStreamSize ? maxStreamSize.toString() : undefined,
             "data-upload": upload ? "true" : "false",
             "data-force-type": forceType ? "true" : "false",
             "data-max-size" : maxSize ? maxSize.toString() : undefined,

package/node_modules/@web-atoms/web-controls/src/basic/ZoomView.tsx

@@ -0,0 +1,295 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import XNode, { isTemplateSymbol } from "@web-atoms/core/dist/core/XNode";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+
+import "./styles/zoom-view.global.less";
+
+const center = (ev: TouchEvent) => {
+    const touch = ev.touches[0];
+    if (touch) {
+        return {
+            x: touch.clientX,
+            y: touch.clientY
+        }
+    }
+    return {
+        x: 0,
+        y: 0
+    };
+}
+
+const distance = (first: Touch, second: Touch) => {
+    return Math.hypot(first.pageX - second.pageX, first.pageY - second.pageY);
+};
+
+const findLargestDistance = (touches: TouchList) => {
+
+    let pair = null as { t1: Touch, t2: Touch, distance: number};
+
+    for (let i = 0; i < touches.length; i++) {
+        const t1 = touches[i];
+        for (let j = i + 1; j < touches.length; j++) {
+            const t2 = touches[j];
+            const distance = Math.hypot(t1.pageX - t2.pageX, t1.pageY - t2.pageY);
+            if (pair === null) {
+                pair = { t1, t2, distance };
+                continue;
+            }
+            if (pair.distance < distance) {
+                pair = { t1, t2, distance };
+            }
+        }
+    }
+
+    return pair;
+};
+
+export interface IZoom {
+    anchorX: number;
+    anchorY: number;
+    x: number;
+    y: number;
+    scale: number;
+}
+
+export default class ZoomView extends AtomControl {
+
+    @BindableProperty
+    public zoom: IZoom;
+
+    @BindableProperty
+    public source: string;
+
+    @BindableProperty
+    private loading: boolean;
+
+    private image: HTMLImageElement;
+
+    private scrollDiv: HTMLDivElement;
+
+    private imageContainer: HTMLDivElement;
+
+    protected preCreate() {
+
+        this.element.title = "Use mouse wheel to zoom";
+
+        this.loading = false;
+        this.zoom = {
+            scale: 0,
+            anchorX: 0,
+            anchorY: 0,
+            x: 0,
+            y: 0
+        };
+
+        this.element.setAttribute("data-zoom-view", "zoom-view");
+
+        this.element.draggable = false;
+
+        this.render(<div>
+            <div class="scroll">
+                <img
+                    class="image-container"
+                    src={Bind.oneWay(() => this.getSource(this.source))}
+                    style-opacity={Bind.oneWay(() => this.loading ? "0.3" : "1")}
+                    event-load={() => {
+                        this.loading = false;
+                        this.updateZoom(this.zoom);
+                    }}
+                    />
+            </div>
+            <i class={Bind.oneWay(() => this.loading ? "spinner fa-duotone fa-spinner fa-spin" : "hide")}/>
+            <i
+                event-click={() => this.updateZoom()}
+                class={Bind.oneWay(() => this.zoom.scale ? "scale" : "hide")}
+                title="Display entire image"/>
+        </div>);
+        this.scrollDiv = this.element.firstElementChild as HTMLDivElement;
+        this.imageContainer = this.scrollDiv.firstElementChild as HTMLDivElement;
+        this.image = this.imageContainer as HTMLImageElement;
+
+        const scrollView = this.element;
+
+        let previous: {x: number, y: number};
+
+        let touchMoveDisposable;
+        let touchEndDisposable;
+
+        this.bindEvent(scrollView, "touchstart", (evs: TouchEvent) => {
+
+            previous = center(evs);
+            let previousDistance = undefined;
+            
+
+            touchMoveDisposable ??= this.bindEvent(scrollView, "touchmove", (ev: TouchEvent) => {
+
+
+                let { x, y, anchorX, anchorY, scale } = this.zoom;
+
+                if (ev.touches.length > 1) {
+
+                    ev.preventDefault();
+                    ev.stopImmediatePropagation();
+                    
+                    const rect = this.element.getBoundingClientRect();
+
+                    const ld = findLargestDistance(ev.touches);
+
+                    const first = ld.t1;
+                    const second = ld.t2;
+                    const newScale = ld.distance;
+                    if (previousDistance === void 0) {
+                        previousDistance = newScale;
+                        return;
+                    }
+                    if (previousDistance === newScale) {
+                        return;
+                    }
+
+                    anchorX = ((first.clientX + second.clientX) / 2) - rect.left;
+                    anchorY = ((first.clientY + second.clientY) / 2) - rect.top;
+                    scale += newScale - previousDistance;
+                    previousDistance = newScale;
+                    this.updateZoom({
+                        anchorX,
+                        anchorY,
+                        x,
+                        y,
+                        scale
+                    });
+                    
+                    return;
+                }
+
+            });
+
+            touchEndDisposable ??= this.bindEvent(scrollView, "touchend", (ev: TouchEvent) => {
+                // ev.preventDefault();
+                // ev.stopImmediatePropagation?.();
+
+                touchMoveDisposable?.dispose();
+                touchEndDisposable?.dispose();
+                touchMoveDisposable = undefined;
+                touchEndDisposable = undefined;
+                previousDistance = undefined;
+            });
+        });
+
+        let mouseMoveDisposable;
+        let mouseUpDisposable;
+
+        this.bindEvent(scrollView, "dragstart", (ev: DragEvent) => {
+            ev.preventDefault();
+            ev.stopImmediatePropagation();
+        });
+
+        this.bindEvent(scrollView, "mousedown", (ev: MouseEvent) => {
+            this.element.dataset.state = "grabbing";
+            previous = {
+                x: ev.clientX,
+                y: ev.clientY
+            };
+
+            mouseMoveDisposable ??= this.bindEvent(scrollView, "mousemove", (e: MouseEvent) => {
+                e.preventDefault();
+                e.stopImmediatePropagation?.();
+                const cp = { x: e.clientX, y: e.clientY };
+                const diffX = previous.x - cp.x;
+                const diffY = previous.y - cp.y;
+                previous = cp;
+                this.scrollDiv.scrollBy(diffX, diffY);
+            });
+            mouseUpDisposable ??= this.bindEvent(scrollView, "mouseup", (e: MouseEvent) => {
+                e.preventDefault();
+                e.stopImmediatePropagation?.();
+
+                this.element.dataset.state = "";
+                previous = null;
+                mouseMoveDisposable.dispose();
+                mouseUpDisposable.dispose();
+                mouseMoveDisposable = undefined;
+                mouseUpDisposable = undefined;
+            });
+
+        });
+
+        this.bindEvent(scrollView, "wheel", (ev: WheelEvent) => {
+
+            ev.preventDefault();
+            ev.stopImmediatePropagation?.();
+
+            const newScale = this.zoom.scale - (ev.deltaY < 0 ? -50 : 50);
+
+            const anchorX = ev.offsetX;
+            const anchorY = ev.offsetY;
+            const { x, y } = this.zoom;
+            this.updateZoom({
+                anchorX,
+                anchorY,
+                x,
+                y,
+                scale: newScale < 0 ? 0 : newScale
+            });
+
+        }, undefined, {
+            passive: false
+        });
+    }
+
+    private getSource(text: string) {
+        if (text) {
+            this.loading = true;
+        }
+        return text;
+    }
+
+    private updateZoom(zoom: IZoom = {
+        x: 0,
+        y: 0,
+        anchorX: 0,
+        anchorY: 0,
+        scale: 0
+    }) {
+        const { anchorX, anchorY, x, y } = zoom;
+        let { scale } = zoom;
+        // console.log(zoom);
+        this.zoom = zoom;
+        const image = this.image;
+        if (!image.naturalHeight) {
+            return;
+        }
+        const maxHeight = this.element.clientWidth > this.element.clientHeight;
+        const s = maxHeight
+            ? this.element.clientWidth / image.naturalWidth
+            : this.element.clientHeight / image.naturalHeight ;
+
+        if (scale <= 0) {
+            scale = 0;
+        }
+
+        const { clientWidth, clientHeight } = this.element;
+
+
+        if (scale <= 0) {
+            this.element.scrollTo(0,0);
+            this.imageContainer.style.transform = ``;
+            return;
+        }
+
+        const scaleFactor = (clientWidth + scale) / clientWidth;
+
+        this.imageContainer.style.transformOrigin = `${anchorX}px ${anchorY}px`;
+        this.imageContainer.style.transform = `scale(${scaleFactor})`;
+
+
+        const e = this.imageContainer.getBoundingClientRect();
+        // console.log([e.left, e.top]);
+        const left = -e.left;
+        const top = -e.top;
+        this.imageContainer.style.transformOrigin = "0 0";
+        const de = this.imageContainer.getBoundingClientRect();
+        // console.log([de.left, de.top]);
+        this.scrollDiv.scrollTo({ left: left + de.left, top: top + de.top , behavior: "instant" });
+    }
+}