@netless/telebox-insider 1.0.0-alpha.20 → 1.0.0-alpha.21

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "1.0.0-alpha.20",
+    "version": "1.0.0-alpha.21",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",
@@ -54,7 +54,7 @@
         "sass": "^1.36.0",
         "sass-loader": "^10.1.1",
         "typescript": "^4.1.2",
-        "vite": "^2.4.4"
+        "vite": "^2.9.13"
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.3.1",

package/src/TeleBox/index.ts

@@ -1,4 +1,5 @@
 import "./style.scss";
+import shadowStyles from "./style.shadow.scss?inline";
 
 import Emittery from "emittery";
 import styler from "stylefire";
@@ -19,14 +20,7 @@ import {
 import type { TeleTitleBar } from "../TeleTitleBar";
 import { DefaultTitleBar } from "../TeleTitleBar";
 import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
-import {
-    clamp,
-    flattenEvent,
-    getBoxDefaultName,
-    isFalsy,
-    isTruthy,
-    preventEvent,
-} from "../utils";
+import { clamp, flattenEvent, getBoxDefaultName, preventEvent } from "../utils";
 import {
     TELE_BOX_EVENT,
     TELE_BOX_STATE,
@@ -116,6 +110,7 @@ export class TeleBox {
         focus = false,
         zIndex = 100,
         stageRatio = null,
+        enableShadowDOM = true,
         titleBar,
         content,
         stage,
@@ -141,6 +136,7 @@ export class TeleBox {
 
         this.id = id;
         this.namespace = namespace;
+        this.enableShadowDOM = enableShadowDOM;
 
         const valManager = new ValManager();
         this._sideEffect.addDisposer(() => valManager.destroy());
@@ -368,6 +364,9 @@ export class TeleBox {
     /** ClassName Prefix. For CSS styling. Default "telebox" */
     public readonly namespace: string;
 
+    /** Enable shadow DOM for box content. Default true. */
+    public readonly enableShadowDOM: boolean;
+
     public readonly events = new Emittery<
         TeleBoxEventConfig,
         TeleBoxEventConfig
@@ -640,35 +639,48 @@ export class TeleBox {
             return this.$box;
         }
 
-        this.$box = document.createElement("div");
-
-        this.$box.classList.add(this.wrapClassName("box"));
-
-        const bindClassName = <TValue>(
-            el: Element,
-            val: ReadonlyVal<TValue, boolean>,
-            className: string,
-            predicate: (value: TValue) => boolean = isTruthy
-        ): string => {
-            return this._sideEffect.add(() => {
-                const wrappedClassName = this.wrapClassName(className);
-                return val.subscribe((value) => {
-                    el.classList.toggle(wrappedClassName, predicate(value));
-                });
-            });
+        const bindBoxStates = (el: Element, disposerID?: string): string => {
+            return this._sideEffect.addDisposer(
+                [
+                    this._readonly$.subscribe((readonly) =>
+                        el.classList.toggle(
+                            this.wrapClassName("readonly"),
+                            readonly
+                        )
+                    ),
+                    this._draggable$.subscribe((draggable) =>
+                        el.classList.toggle(
+                            this.wrapClassName("no-drag"),
+                            !draggable
+                        )
+                    ),
+                    this._resizable$.subscribe((resizable) =>
+                        el.classList.toggle(
+                            this.wrapClassName("no-resize"),
+                            !resizable
+                        )
+                    ),
+                    this._focus$.subscribe((focus) =>
+                        el.classList.toggle(this.wrapClassName("blur"), !focus)
+                    ),
+                    this._darkMode$.subscribe((darkMode) => {
+                        el.classList.toggle(
+                            this.wrapClassName("color-scheme-dark"),
+                            darkMode
+                        );
+                        el.classList.toggle(
+                            this.wrapClassName("color-scheme-light"),
+                            !darkMode
+                        );
+                    }),
+                ],
+                disposerID
+            );
         };
 
-        bindClassName(this.$box, this._readonly$, "readonly");
-        bindClassName(this.$box, this._draggable$, "no-drag", isFalsy);
-        bindClassName(this.$box, this._resizable$, "no-resize", isFalsy);
-        bindClassName(this.$box, this._focus$, "blur", isFalsy);
-        bindClassName(this.$box, this._darkMode$, "color-scheme-dark");
-        bindClassName(
-            this.$box,
-            this._darkMode$,
-            "color-scheme-light",
-            isFalsy
-        );
+        this.$box = document.createElement("div");
+        this.$box.classList.add(this.wrapClassName("box"));
+        bindBoxStates(this.$box, "bind-box-state");
 
         this._sideEffect.add(() => {
             const minimizedClassName = this.wrapClassName("minimized");
@@ -806,7 +818,7 @@ export class TeleBox {
         this.$titleBar = $titleBar;
 
         const $body = document.createElement("div");
-        $body.className = this.wrapClassName("content-wrap");
+        $body.className = this.wrapClassName("body-wrap");
         this.$body = $body;
 
         const $styles = document.createElement("style");
@@ -836,8 +848,29 @@ export class TeleBox {
         this.$footer = $footer;
 
         $boxMain.appendChild($titleBar);
-        $boxMain.appendChild($body);
-        $boxMain.appendChild($footer);
+
+        if (this.enableShadowDOM) {
+            const $quarantineWrap = document.createElement("div");
+            $quarantineWrap.className = this.wrapClassName("quarantine-wrap");
+            $boxMain.appendChild($quarantineWrap);
+
+            const $quarantine = document.createElement("div");
+            $quarantine.className = this.wrapClassName("quarantine");
+            bindBoxStates($quarantine, "bind-quarantine-state");
+
+            const $shadowStyle = document.createElement("style");
+            $shadowStyle.textContent = shadowStyles;
+
+            $quarantine.appendChild($shadowStyle);
+            $quarantine.appendChild($body);
+            $quarantine.appendChild($footer);
+
+            const shadow = $quarantineWrap.attachShadow({ mode: "open" });
+            shadow.appendChild($quarantine);
+        } else {
+            $boxMain.appendChild($body);
+            $boxMain.appendChild($footer);
+        }
 
         this._renderResizeHandlers();
 
@@ -878,7 +911,7 @@ export class TeleBox {
     private _renderStage(): HTMLDivElement {
         const $stage = document.createElement("div");
 
-        $stage.className = this.wrapClassName("content-stage");
+        $stage.className = this.wrapClassName("box-stage");
         const updateStageRect = (stageRect: TeleBoxRect): void => {
             $stage.style.top = stageRect.y + "px";
             $stage.style.left = stageRect.x + "px";
@@ -897,7 +930,7 @@ export class TeleBox {
                 }),
                 this._stageRect$.subscribe(updateStageRect),
             ],
-            "content-stage-styles"
+            "box-stage-styles"
         );
         return $stage;
     }

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,15 +14,16 @@
 }
 
 .#{$namespace}-box-main {
+    @include v(border, box-border, $box-border);
+    @include v(box-shadow, box-shadow, $box-shadow);
+
     position: relative;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    box-shadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);
     border-radius: 6px;
-    border: 1px solid #e3e3ec;
 }
 
 .#{$namespace}-titlebar-wrap {
@@ -29,41 +32,11 @@
     z-index: 1;
 }
 
-.#{$namespace}-content-wrap {
+.#{$namespace}-quarantine-wrap {
+    all: initial;
     flex: 1;
     width: 100%;
     overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-}
-
-.#{$namespace}-content {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    background: $color-container-background;
-}
-
-.#{$namespace}-content-stage {
-    position: absolute;
-    z-index: 1;
-    overflow: hidden;
-    background: $color-stage-background;
-    box-shadow: $color-stage-shadow;
-}
-
-.#{$namespace}-footer-wrap {
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-
-    &::before {
-        content: "";
-        display: block;
-        flex: 1;
-    }
 }
 
 .#{$namespace}-resize-handle {
@@ -219,16 +192,7 @@
     color-scheme: dark;
 
     .#{$namespace}-box-main {
-        color: #e9e9e9;
-        border-color: #43434d;
-    }
-
-    .#{$namespace}-content {
-        background: $color-container-background-dark;
-    }
-
-    .#{$namespace}-content-stage {
-        background: $color-stage-background-dark;
-        box-shadow: $color-stage-shadow-dark;
+        @include v(border, box-border-dark, $box-border-dark);
+        @include v(box-shadow, box-shadow-dark, $box-shadow-dark);
     }
 }

package/src/TeleBox/style.shadow.scss

@@ -0,0 +1,87 @@
+@import "../scss/variables.scss";
+@import "../scss/mixins.scss";
+
+.#{$namespace}-quarantine {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.#{$namespace}-body-wrap {
+    @include v(color, box-color, $box-color);
+
+    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 v(
+        background-color,
+        manager-container-background,
+        $manager-container-background
+    );
+}
+
+.#{$namespace}-box-stage {
+    position: absolute;
+    z-index: 1;
+    overflow: hidden;
+
+    @include v(
+        background-color,
+        manager-stage-background,
+        $manager-stage-background
+    );
+    @include v(box-shadow, manager-stage-shadow, $manager-stage-shadow);
+}
+
+.#{$namespace}-footer-wrap {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+
+    &::before {
+        content: "";
+        display: block;
+        flex: 1;
+    }
+}
+
+.#{$namespace}-color-scheme-dark {
+    color-scheme: dark;
+
+    .#{$namespace}-body-wrap {
+        @include v(color, box-color-dark, $box-color-dark);
+    }
+
+    .#{$namespace}-content {
+        @include v(
+            background-color,
+            manager-container-background-dark,
+            $manager-container-background-dark
+        );
+    }
+
+    .#{$namespace}-box-stage {
+        @include v(
+            background-color,
+            manager-stage-background-dark,
+            $manager-stage-background-dark
+        );
+        @include v(
+            box-shadow,
+            manager-stage-shadow-dark,
+            $manager-stage-shadow-dark
+        );
+    }
+}

package/src/TeleBox/typings.ts

@@ -60,6 +60,8 @@ export interface TeleBoxConfig {
     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 element. */

package/src/TeleBoxCollector/style.scss

@@ -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 v(background-color, collector-background, $collector-background);
+    @include v(box-shadow, collector-shadow, $collector-shadow);
 }
 
 .#{$namespace}-collector-visible {
@@ -40,6 +41,11 @@
     color-scheme: dark;
 
     &.#{$namespace}-collector {
-        background-color: #43434d;
+        @include v(
+            background-color,
+            collector-background-dark,
+            $collector-background-dark
+        );
+        @include v(box-shadow, collector-shadow-dark, $collector-shadow-dark);
     }
 }

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 {
@@ -87,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) {

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;
@@ -108,15 +108,26 @@ $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 v(color, titlebar-tab-color, $titlebar-tab-color);
+    @include v(
+        background-color,
+        titlebar-tab-background,
+        $titlebar-tab-background
+    );
+    @include v(
+        border-right-color,
+        titlebar-tab-divider-color,
+        $titlebar-tab-divider-color
+    );
 }
 
 .#{$namespace}-titles-tab-focus {
-    color: #357bf6;
+    @include v(color, titlebar-tab-focus-color, $titlebar-tab-focus-color);
 }
 
 .#{$namespace}-readonly {
@@ -128,17 +139,25 @@ $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 v(color, titlebar-tab-color-dark, $titlebar-tab-color-dark);
+        @include v(
+            background-color,
+            titlebar-tab-background-dark,
+            $titlebar-tab-background-dark
+        );
+        @include v(
+            border-right-color,
+            titlebar-tab-divider-color-dark,
+            $titlebar-tab-divider-color-dark
+        );
     }
 
-    .#{$namespace}-title {
-        color: #e9e9e9;
+    .#{$namespace}-titles-tab-focus {
+        @include v(
+            color,
+            titlebar-tab-focus-color-dark,
+            $titlebar-tab-focus-color-dark
+        );
     }
 }

package/src/TeleBoxManager/index.ts

@@ -282,6 +282,51 @@ export class TeleBoxManager {
             true
         );
 
+        this.$container = document.createElement("div");
+        this.$container.className = this.wrapClassName("manager-container");
+
+        this.$stage = document.createElement("div");
+        this.$stage.className = this.wrapClassName("manager-stage");
+        this.$container.appendChild(this.$stage);
+
+        this._sideEffect.addDisposer([
+            darkMode$.subscribe((darkMode) => {
+                this.$container.classList.toggle(
+                    this.wrapClassName("color-scheme-dark"),
+                    darkMode
+                );
+                this.$container.classList.toggle(
+                    this.wrapClassName("color-scheme-light"),
+                    !darkMode
+                );
+            }),
+            maximized$.subscribe((maximized) => {
+                this.$container.classList.toggle("is-maximized", maximized);
+            }),
+            minimized$.subscribe((minimized) => {
+                this.$container.classList.toggle("is-minimized", minimized);
+            }),
+            containerStyle$.subscribe((containerStyle) => {
+                this.$container.style.cssText = containerStyle;
+            }),
+            stageStyle$.subscribe((stageStyle) => {
+                this.$stage.style.cssText = stageStyle;
+                this.$stage.style.width = stageRect$.value.width + "px";
+                this.$stage.style.height = stageRect$.value.height + "px";
+            }),
+            stageRect$.subscribe((stageRect) => {
+                this.$stage.style.width = stageRect.width + "px";
+                this.$stage.style.height = stageRect.height + "px";
+            }),
+            root$.subscribe((root) => {
+                if (root) {
+                    root.appendChild(this.$container);
+                } else if (this.$container.parentElement) {
+                    this.$container.remove();
+                }
+            }),
+        ]);
+
         this.titleBar = new MaxTitleBar({
             namespace: this.namespace,
             title$: derive(this.topBox$, (topBox) => topBox?.title || ""),
@@ -289,8 +334,8 @@ export class TeleBoxManager {
             darkMode$: darkMode$,
             readonly$: readonly$,
             state$: state$,
-            root$,
             rootRect$: rootRect$,
+            root: this.$container,
             onEvent: (event): void => {
                 switch (event.type) {
                     case TELE_BOX_DELEGATE_EVENT.Maximize: {
@@ -341,51 +386,6 @@ export class TeleBoxManager {
                 }
             }),
         ]);
-
-        this.$container = document.createElement("div");
-        this.$container.className = this.wrapClassName("manager-container");
-
-        this.$stage = document.createElement("div");
-        this.$stage.className = this.wrapClassName("manager-stage");
-        this.$container.appendChild(this.$stage);
-
-        this._sideEffect.addDisposer([
-            darkMode$.subscribe((darkMode) => {
-                this.$container.classList.toggle(
-                    this.wrapClassName("color-scheme-dark"),
-                    darkMode
-                );
-                this.$container.classList.toggle(
-                    this.wrapClassName("color-scheme-light"),
-                    !darkMode
-                );
-            }),
-            maximized$.subscribe((maximized) => {
-                this.$container.classList.toggle("is-maximized", maximized);
-            }),
-            minimized$.subscribe((minimized) => {
-                this.$container.classList.toggle("is-minimized", minimized);
-            }),
-            containerStyle$.subscribe((containerStyle) => {
-                this.$container.style.cssText = containerStyle;
-            }),
-            stageStyle$.subscribe((stageStyle) => {
-                this.$stage.style.cssText = stageStyle;
-                this.$stage.style.width = stageRect$.value.width + "px";
-                this.$stage.style.height = stageRect$.value.height + "px";
-            }),
-            stageRect$.subscribe((stageRect) => {
-                this.$stage.style.width = stageRect.width + "px";
-                this.$stage.style.height = stageRect.height + "px";
-            }),
-            root$.subscribe((root) => {
-                if (root) {
-                    root.appendChild(this.$container);
-                } else if (this.$container.parentElement) {
-                    this.$container.remove();
-                }
-            }),
-        ]);
     }
 
     public readonly $container: HTMLDivElement;