@netless/telebox-insider 1.0.0-alpha.3 → 1.0.0-alpha.32

package/src/TeleBox/style.scss

@@ -1,6 +1,8 @@
 @import "../scss/variables.scss";
 @import "../scss/mixins.scss";
 
+@import "./style.shadow.scss";
+
 .#{$namespace}-box {
     position: absolute;
     top: 0;
@@ -12,16 +14,16 @@
 }
 
 .#{$namespace}-box-main {
+    @include clr(border, boxBorder);
+    @include clr(box-shadow, boxShadow);
+
     position: relative;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    background: #f9f9fc;
-    box-shadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);
     border-radius: 6px;
-    border: 1px solid #e3e3ec;
 }
 
 .#{$namespace}-titlebar-wrap {
@@ -30,32 +32,17 @@
     z-index: 1;
 }
 
-.#{$namespace}-content-wrap {
+.#{$namespace}-main {
+    position: relative;
     flex: 1;
     width: 100%;
     overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
 }
 
-.#{$namespace}-content {
+.#{$namespace}-quarantine-outer {
     width: 100%;
     height: 100%;
-    position: relative;
-}
-
-.#{$namespace}-footer-wrap {
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-
-    &::before {
-        content: "";
-        display: block;
-        flex: 1;
-    }
+    overflow: hidden;
 }
 
 .#{$namespace}-resize-handle {
@@ -63,6 +50,8 @@
 
     position: absolute;
     z-index: 2147483647;
+    // enable pointermove event on touch devices
+    touch-action: none;
 }
 
 .#{$namespace}-n {
@@ -211,8 +200,7 @@
     color-scheme: dark;
 
     .#{$namespace}-box-main {
-        color: #e9e9e9;
-        background: #212126;
-        border-color: #43434d;
+        @include clr-dark(border, boxBorder);
+        @include clr-dark(box-shadow, boxShadow);
     }
 }

package/src/TeleBox/style.shadow.scss

@@ -0,0 +1,77 @@
+@import "../scss/variables.scss";
+@import "../scss/mixins.scss";
+@import "../scss/fancy-scrollbar.scss";
+
+.#{$namespace}-quarantine {
+    all: initial;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.#{$namespace}-body-wrap {
+    @include clr(color, boxColor);
+
+    flex: 1;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.#{$namespace}-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    @include clr(background-color, boxContainerBackground);
+}
+
+.#{$namespace}-box-stage {
+    position: absolute;
+    z-index: 1;
+    overflow: hidden;
+
+    @include clr(background-color, boxStageBackground);
+    @include clr(box-shadow, boxStageShadow);
+}
+
+.#{$namespace}-footer-wrap {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+
+    @include clr(color, boxFooterColor);
+    @include clr(background-color, boxFooterBackground);
+
+    &::before {
+        content: "";
+        display: block;
+        flex: 1;
+    }
+}
+
+.#{$namespace}-color-scheme-dark {
+    color-scheme: dark;
+
+    .#{$namespace}-body-wrap {
+        @include clr-dark(color, boxColor);
+    }
+
+    .#{$namespace}-content {
+        @include clr-dark(background-color, boxContainerBackground);
+    }
+
+    .#{$namespace}-box-stage {
+        @include clr-dark(background-color, boxStageBackground);
+        @include clr-dark(box-shadow, boxStageShadow);
+    }
+
+    .#{$namespace}-footer-wrap {
+        @include clr-dark(color, boxFooterColor);
+        @include clr-dark(background-color, boxFooterBackground);
+    }
+}

package/src/TeleBox/typings.ts

@@ -51,45 +51,57 @@ export interface TeleBoxConfig {
     /** Able to drag box window Default true. */
     readonly draggable?: boolean;
     /** Fixed height/width ratio for box window. No ratio limit if <= 0. Default -1. */
-    readonly ratio?: number;
+    readonly boxRatio?: number;
     /** Box focused. */
     readonly focus?: boolean;
     /** Base z-index for box. */
     readonly zIndex?: number;
+    /** Box content stage ratio. Follow manager stage ratio if null. Default null. */
+    readonly stageRatio?: number | null;
     /** Classname Prefix. For CSS styling. Default "telebox". */
     readonly namespace?: string;
+    /** Enable shadow DOM for box content. Default true. */
+    readonly enableShadowDOM?: boolean;
     /** TeleTitleBar Instance. */
     readonly titleBar?: TeleTitleBar;
-    /** Box content. */
+    /** Box content element. */
     readonly content?: HTMLElement;
-    /** Box footer. */
+    /** Stage element. */
+    readonly stage?: HTMLElement;
+    /** Box footer element. */
     readonly footer?: HTMLElement;
     /** Box content styles. */
-    readonly styles?: HTMLStyleElement;
-    /** Show stage frame and grey-out the non-stage area. Inherit setting from manager if null. Default null. */
-    readonly highlightStage?: boolean | null;
+    readonly styles?: string;
+    /** Box content styles from end users. */
+    readonly userStyles?: string;
+    /** Custom styles for box content container. Inherit from manager container style if null. Default null. */
+    readonly bodyStyle?: string | null;
+    /** Custom styles for box content stage. Inherit from manager stage style if null. Default null. */
+    readonly stageStyle?: string | null;
     /** Actual Box Dark Mode */
     readonly darkMode$: ReadonlyVal<boolean, boolean>;
     /** Restrict box to always be within the stage area. Default false. */
     readonly fence$: ReadonlyVal<boolean, boolean>;
-    /** Maximize box. Default false. */
-    readonly maximized$: ReadonlyVal<boolean, boolean>;
-    /** Minimize box. Overwrites maximized state. Default false. */
-    readonly minimized$: ReadonlyVal<boolean, boolean>;
-    /** Is box readonly */
-    readonly readonly$: ReadonlyVal<boolean, boolean>;
     /** Root element to mount boxes */
-    readonly root$: ReadonlyVal<HTMLElement | null>;
+    readonly root: HTMLElement;
     /** Position and dimension of root element */
     readonly rootRect$: ReadonlyVal<TeleBoxRect>;
+    /** Maximize state from manager. Default false. */
+    readonly managerMaximized$: ReadonlyVal<boolean, boolean>;
+    /** Minimize state from manager. Overwrites maximized state. Default false. */
+    readonly managerMinimized$: ReadonlyVal<boolean, boolean>;
+    /** Manager readonly state. */
+    readonly managerReadonly$: ReadonlyVal<boolean, boolean>;
     /** Position and dimension of stage area */
     readonly managerStageRect$: ReadonlyVal<TeleBoxRect>;
     /** Stage area height/with ratio. No ratio if <= 0. */
-    readonly stageRatio$: ReadonlyVal<number, boolean>;
+    readonly managerStageRatio$: ReadonlyVal<number, boolean>;
+    /** Default content styles for all boxes */
+    readonly defaultBoxBodyStyle$: ReadonlyVal<string | null>;
+    /** Default stage styles for all boxes */
+    readonly defaultBoxStageStyle$: ReadonlyVal<string | null>;
     /** Position and dimension of collector */
     readonly collectorRect$: ReadonlyVal<TeleBoxRect | undefined>;
-    /** highlight stage settings from manager */
-    readonly managerHighlightStage$: ReadonlyVal<boolean>;
 }
 
 type CheckTeleBoxConfig<T extends Record<`${TELE_BOX_EVENT}`, any>> = T;

package/src/TeleBox/utils.ts

@@ -0,0 +1,32 @@
+import type { TeleBoxRect } from "./typings";
+
+export function calcStageRect([rootRect, ratio]: [
+    TeleBoxRect,
+    number
+]): TeleBoxRect {
+    if (ratio <= 0 || rootRect.width <= 0 || rootRect.height <= 0) {
+        return rootRect;
+    }
+
+    const preferredHeight = rootRect.width * ratio;
+    if (preferredHeight === rootRect.height) {
+        return rootRect;
+    }
+
+    if (preferredHeight < rootRect.height) {
+        return {
+            x: 0,
+            y: (rootRect.height - preferredHeight) / 2,
+            width: rootRect.width,
+            height: preferredHeight,
+        };
+    }
+
+    const preferredWidth = rootRect.height / ratio;
+    return {
+        x: (rootRect.width - preferredWidth) / 2,
+        y: 0,
+        width: preferredWidth,
+        height: rootRect.height,
+    };
+}

package/src/TeleBoxCollector/index.ts

@@ -6,36 +6,38 @@ import type {
     ReadonlyValEnhancedResult,
     ValEnhancedResult,
 } from "value-enhancer";
-import { withValueEnhancer } from "value-enhancer";
-import { combine } from "value-enhancer";
-import { Val } from "value-enhancer";
-import { withReadonlyValueEnhancer } from "value-enhancer";
+import { derive } from "value-enhancer";
+import {
+    withValueEnhancer,
+    Val,
+    withReadonlyValueEnhancer,
+    ValManager,
+} from "value-enhancer";
 import { SideEffectManager } from "side-effect-manager";
 import type { TeleBoxRect } from "../TeleBox/typings";
 
 export interface TeleBoxCollectorConfig {
     namespace?: string;
     styles?: TeleStyles;
-    root$: ReadonlyVal<HTMLElement | null>;
-    minimized$: Val<boolean>;
+    root: HTMLElement;
+    minimized$: ReadonlyVal<boolean>;
     readonly$: ReadonlyVal<boolean>;
     darkMode$: ReadonlyVal<boolean>;
-    rootRect$: ReadonlyVal<TeleBoxRect>;
+    onClick?: () => void;
 }
 
 type ValConfig = {
     styles: Val<TeleStyles>;
-    el: Val<HTMLElement>;
+    $collector: Val<HTMLElement>;
 };
 
-type ReadonlyValConfig = {
+type MyReadonlyValConfig = {
     rect: ReadonlyVal<TeleBoxRect | undefined>;
     visible: ReadonlyVal<boolean>;
-    root: ReadonlyVal<HTMLElement | null>;
 };
 
 type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> &
-    ReadonlyValEnhancedResult<ReadonlyValConfig>;
+    ReadonlyValEnhancedResult<MyReadonlyValConfig>;
 
 export interface TeleBoxCollector extends CombinedValEnhancedResult {}
 
@@ -44,44 +46,51 @@ export class TeleBoxCollector {
         minimized$,
         readonly$,
         darkMode$,
-        rootRect$,
         namespace = "telebox",
         styles = {},
-        root$,
+        root,
+        onClick,
     }: TeleBoxCollectorConfig) {
         this.namespace = namespace;
 
+        const valManager = new ValManager();
+        this._sideEffect.addDisposer(() => valManager.destroy());
+
         const rect$ = new Val<TeleBoxRect | undefined>(void 0);
-        const visible$ = minimized$;
+        const visible$ = derive(minimized$);
         const styles$ = new Val(styles);
         const el$ = new Val<HTMLElement>(document.createElement("button"));
 
         const valConfig: ValConfig = {
             styles: styles$,
-            el: el$,
+            $collector: el$,
         };
 
-        withValueEnhancer(this, valConfig);
+        withValueEnhancer(this, valConfig, valManager);
 
-        const readonlyValConfig: ReadonlyValConfig = {
+        const myReadonlyValConfig: MyReadonlyValConfig = {
             rect: rect$,
             visible: visible$,
-            root: root$,
         };
 
-        withReadonlyValueEnhancer(this, readonlyValConfig);
+        withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
 
         el$.value.className = this.wrapClassName("collector");
         el$.value.style.backgroundImage = `url('${collectorSVG}')`;
 
         this._sideEffect.addDisposer(
             el$.subscribe(($collector) => {
+                this._sideEffect.add(() => {
+                    root.appendChild($collector);
+                    return () => $collector.remove();
+                }, "telebox-collector-mount");
+
                 this._sideEffect.addEventListener(
                     $collector,
                     "click",
                     () => {
                         if (!readonly$.value) {
-                            minimized$.setValue(false);
+                            onClick?.();
                         }
                     },
                     {},
@@ -123,26 +132,20 @@ export class TeleBoxCollector {
                                 }
                             });
                         }),
-                        root$.subscribe((root) => {
-                            if (root) {
-                                root.appendChild($collector);
-                            }
-                        }),
                         // Place after $collector appended to the DOM so that rect calc works
-                        combine([minimized$, rootRect$, root$]).subscribe(
-                            ([minimized, rootRect, root]) => {
-                                if (minimized && root) {
-                                    const { x, y, width, height } =
-                                        $collector.getBoundingClientRect();
-                                    rect$.setValue({
-                                        x: x - rootRect.x,
-                                        y: y - rootRect.y,
-                                        width,
-                                        height,
-                                    });
-                                }
+                        minimized$.subscribe((minimized) => {
+                            if (minimized) {
+                                const { x, y, width, height } =
+                                    $collector.getBoundingClientRect();
+                                const rootRect = root.getBoundingClientRect();
+                                rect$.setValue({
+                                    x: x - rootRect.x,
+                                    y: y - rootRect.y,
+                                    width,
+                                    height,
+                                });
                             }
-                        ),
+                        }),
                     ],
                     "telebox-collector-el"
                 );

package/src/TeleBoxCollector/style.scss

@@ -7,7 +7,7 @@
     visibility: hidden;
     display: block;
     position: absolute;
-    z-index: $base-z-index * 2;
+    z-index: $collector-z-index;
     width: 40px;
     height: 40px;
     margin: 0;
@@ -16,8 +16,6 @@
     outline: none;
     font-size: 0;
     border-radius: 50%;
-    background: #fff;
-    box-shadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);
     cursor: pointer;
     user-select: none;
     pointer-events: none;
@@ -25,6 +23,9 @@
     background-size: 18px 16px;
     background-position: center;
     -webkit-tap-highlight-color: transparent;
+
+    @include clr(background-color, collectorBackground);
+    @include clr(box-shadow, collectorShadow);
 }
 
 .#{$namespace}-collector-visible {
@@ -40,6 +41,7 @@
     color-scheme: dark;
 
     &.#{$namespace}-collector {
-        background-color: #43434d;
+        @include clr-dark(background-color, collectorBackground);
+        @include clr-dark(box-shadow, collectorShadow);
     }
 }

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -14,7 +14,7 @@ export interface MaxTitleBarConfig extends DefaultTitleBarConfig {
     darkMode$: ReadonlyVal<boolean>;
     boxes$: ReadonlyVal<TeleBox[]>;
     rootRect$: ReadonlyVal<TeleBoxRect>;
-    root$: ReadonlyVal<HTMLElement | null>;
+    root: HTMLElement;
 }
 
 export class MaxTitleBar extends DefaultTitleBar {
@@ -25,15 +25,7 @@ export class MaxTitleBar extends DefaultTitleBar {
         this.rootRect$ = config.rootRect$;
         this.darkMode$ = config.darkMode$;
 
-        this.sideEffect.addDisposer(
-            config.root$.subscribe((root) => {
-                if (root) {
-                    root.appendChild(this.render());
-                } else if (this.$titleBar?.parentNode) {
-                    this.$titleBar.remove();
-                }
-            })
-        );
+        config.root.appendChild(this.render());
     }
 
     public focusBox(box?: TeleBox): void {
@@ -75,11 +67,6 @@ export class MaxTitleBar extends DefaultTitleBar {
 
         this.sideEffect.addDisposer(
             [
-                this.rootRect$.subscribe((rootRect) => {
-                    const { x, y, width } = rootRect;
-                    $titleBar.style.transform = `translate(${x}px, ${y}px)`;
-                    $titleBar.style.width = width + "px";
-                }),
                 this.state$.subscribe((state) => {
                     $titleBar.classList.toggle(
                         this.wrapClassName("max-titlebar-maximized"),
@@ -92,16 +79,6 @@ export class MaxTitleBar extends DefaultTitleBar {
                         readonly
                     );
                 }),
-                this.darkMode$.subscribe((darkMode) => {
-                    $titleBar.classList.toggle(
-                        this.wrapClassName("color-scheme-dark"),
-                        darkMode
-                    );
-                    $titleBar.classList.toggle(
-                        this.wrapClassName("color-scheme-light"),
-                        !darkMode
-                    );
-                }),
                 combine([this.state$, this.boxes$]).subscribe(
                     ([state, titles]) => {
                         if (state === TELE_BOX_STATE.Maximized) {
@@ -109,9 +86,7 @@ export class MaxTitleBar extends DefaultTitleBar {
                                 this.wrapClassName("max-titlebar-single-title"),
                                 titles.length === 1
                             );
-                            if (titles.length === 1) {
-                                this.setTitle(titles[0].title);
-                            } else {
+                            if (titles.length !== 1) {
                                 $titleBar.replaceChild(
                                     this.renderTitles(),
                                     $titleBar.firstElementChild as HTMLElement

package/src/TeleBoxManager/MaxTitleBar/style.scss

@@ -1,7 +1,7 @@
 @import "../../scss/variables.scss";
 @import "../../scss/mixins.scss";
 
-$scrollbar-size: 8px;
+$scrollbar-size: 4px;
 $scrollbar-ff-width: auto; // FF-only accepts auto, thin, none
 $scrollbar-minlength: 50px; // Minimum length of scrollbar thumb
 $scrollbar-track-color: transparent;
@@ -16,7 +16,10 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     position: absolute;
     top: 0;
     left: 0;
-    z-index: $base-z-index * 500;
+    width: 100%;
+    z-index: $max-titlebar-z-index;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
 
     .#{$namespace}-title {
         display: none;
@@ -95,7 +98,7 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     height: 100%;
     overflow: hidden;
     max-width: 182px;
-    min-width: 50px;
+    min-width: 150px;
     padding: 0 26px 0 16px;
     outline: none;
     font-size: 13px;
@@ -105,15 +108,18 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     white-space: nowrap;
     word-break: keep-all;
     border: none;
-    border-right: 1px solid #e5e5f0;
-    color: #7b88a0;
-    background: transparent;
+    border-right-width: 1px;
+    border-right-style: solid;
     cursor: pointer;
     user-select: none;
+
+    @include clr(color, titlebarTabColor);
+    @include clr(background-color, titlebarTabBackground);
+    @include clr(border-right-color, titlebarTabDividerColor);
 }
 
 .#{$namespace}-titles-tab-focus {
-    color: #357bf6;
+    @include clr(color, titlebarTabFocusColor);
 }
 
 .#{$namespace}-readonly {
@@ -125,17 +131,13 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
 .#{$namespace}-color-scheme-dark {
     color-scheme: dark;
 
-    &.#{$namespace}-titlebar {
-        color: #e9e9e9;
-        background: #43434d;
-        border-bottom: none;
-    }
-
     .#{$namespace}-titles-tab {
-        border-right-color: #7b88a0;
+        @include clr-dark(color, titlebarTabColor);
+        @include clr-dark(background-color, titlebarTabBackground);
+        @include clr-dark(border-right-color, titlebarTabDividerColor);
     }
 
-    .#{$namespace}-title {
-        color: #e9e9e9;
+    .#{$namespace}-titles-tab-focus {
+        @include clr-dark(color, titlebarTabFocusColor);
     }
 }