@netless/telebox-insider 0.3.0-beta.9 → 0.3.1-beta.0

package/src/TeleBoxManager/typings.ts

@@ -15,6 +15,7 @@ export interface TeleBoxManagerConfig
         | "minimized"
         | "namespace"
         | "readonly"
+        | "forceMaximized"
     > {
     /** Element to mount boxes. */
     root?: HTMLElement;
@@ -38,7 +39,11 @@ type TeleBoxManagerBoxConfigBaseProps =
     | "fixRatio"
     | "zIndex"
     | "boxStatus"
-    | "lastNotMinimizedBoxStatus";
+    | "lastNotMinimizedBoxStatus"
+    | "forceTop"
+    | "forceNormal"
+    | "forceMaximized"
+    | "isDragContent";
 
 export type TeleBoxManagerCreateConfig = Pick<
     TeleBoxConfig,
@@ -75,8 +80,10 @@ export type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
     z_index: [ReadonlyTeleBox];
     prefers_color_scheme: [TeleBoxColorScheme];
     dark_mode: [boolean];
-    box_status: [{ id: string, boxStatus?: TeleBoxState }];
-    last_not_minimized_box_status: [{ id: string, boxStatus?: NotMinimizedBoxState }];
+    box_status: [{ id: string; boxStatus?: TeleBoxState }];
+    last_not_minimized_box_status: [
+        { id: string; boxStatus?: NotMinimizedBoxState }
+    ];
 }>;
 
 export type TeleBoxManagerEvent = keyof TeleBoxManagerEventConfig;

package/src/TeleTitleBar/DefaultTitleBar/index.ts

@@ -27,6 +27,9 @@ export interface DefaultTitleBarConfig extends TeleTitleBarConfig {
 
 export class DefaultTitleBar implements TeleTitleBar {
     protected boxStatus?: TeleBoxState;
+    protected forceTop?: boolean;
+    protected forceNormal?: boolean;
+    protected forceMaximized?: boolean;
     public constructor({
         readonly = false,
         title,
@@ -36,6 +39,9 @@ export class DefaultTitleBar implements TeleTitleBar {
         namespace = "telebox",
         state = TELE_BOX_STATE.Normal,
         boxStatus,
+        forceTop = false,
+        forceNormal = false,
+        forceMaximized = false,
     }: DefaultTitleBarConfig = {}) {
         this.readonly = readonly;
         this.onEvent = onEvent;
@@ -44,23 +50,43 @@ export class DefaultTitleBar implements TeleTitleBar {
         this.title = title;
         this.state = state;
         this.boxStatus = boxStatus;
-
-        this.buttons = buttons || [
-            {
-                type: TELE_BOX_DELEGATE_EVENT.Minimize,
-                iconClassName: this.wrapClassName("titlebar-icon-minimize"),
-            },
-            {
-                type: TELE_BOX_DELEGATE_EVENT.Maximize,
-                iconClassName: this.wrapClassName("titlebar-icon-maximize"),
-                isActive: (state) => state === TELE_BOX_STATE.Maximized,
-            },
-            {
-                type: TELE_BOX_DELEGATE_EVENT.Close,
-                iconClassName: this.wrapClassName("titlebar-icon-close"),
-            },
-        ];
-
+        this.forceTop = forceTop;
+        this.forceNormal = forceNormal;
+        this.forceMaximized = forceMaximized;
+
+        this.buttons =
+            buttons ||
+            (forceNormal
+                ? [
+                      {
+                          type: TELE_BOX_DELEGATE_EVENT.Close,
+                          iconClassName: this.wrapClassName(
+                              "titlebar-icon-close"
+                          ),
+                      },
+                  ]
+                : [
+                      {
+                          type: TELE_BOX_DELEGATE_EVENT.Minimize,
+                          iconClassName: this.wrapClassName(
+                              "titlebar-icon-minimize"
+                          ),
+                      },
+                      {
+                          type: TELE_BOX_DELEGATE_EVENT.Maximize,
+                          iconClassName: this.wrapClassName(
+                              "titlebar-icon-maximize"
+                          ),
+                          isActive: (state) =>
+                              state === TELE_BOX_STATE.Maximized,
+                      },
+                      {
+                          type: TELE_BOX_DELEGATE_EVENT.Close,
+                          iconClassName: this.wrapClassName(
+                              "titlebar-icon-close"
+                          ),
+                      },
+                  ]);
         this.$dragArea = this.renderDragArea();
     }
 
@@ -70,7 +96,7 @@ export class DefaultTitleBar implements TeleTitleBar {
 
     public $title: HTMLElement | undefined;
 
-    public $dragArea: HTMLElement;
+    public readonly $dragArea: HTMLElement;
 
     public setTitle(title: string): void {
         this.title = title;
@@ -117,6 +143,21 @@ export class DefaultTitleBar implements TeleTitleBar {
         }
     }
 
+    public setForceMaximized(forceMaximized: boolean): void {
+        this.forceMaximized = forceMaximized;
+        this.$btns.forEach((button, index) => {
+            if (
+                this.buttons[index]?.type === TELE_BOX_DELEGATE_EVENT.Maximize
+            ) {
+                button.disabled = forceMaximized;
+                button.setAttribute("aria-disabled", String(forceMaximized));
+                button.classList.toggle(
+                    this.wrapClassName("disabled"),
+                    forceMaximized
+                );
+            }
+        });
+    }
 
     public render(): HTMLElement {
         if (!this.$titleBar) {
@@ -137,7 +178,6 @@ export class DefaultTitleBar implements TeleTitleBar {
 
             $titleArea.appendChild(this.$title);
             $titleArea.appendChild(this.$dragArea);
-
             const $buttonsContainer = document.createElement("div");
             $buttonsContainer.className = this.wrapClassName("titlebar-btns");
 
@@ -152,7 +192,10 @@ export class DefaultTitleBar implements TeleTitleBar {
                 $btn.dataset.teleTitleBarNoDblClick = "true";
 
                 if (isActive) {
-                    $btn.classList.toggle("is-active", isActive(this.boxStatus || this.state));
+                    $btn.classList.toggle(
+                        "is-active",
+                        isActive(this.boxStatus || this.state)
+                    );
                 }
 
                 this.$btns.push($btn);
@@ -177,6 +220,12 @@ export class DefaultTitleBar implements TeleTitleBar {
                     ) {
                         preventEvent(ev);
                         const btn = this.buttons[teleTitleBarBtnIndex];
+                        if (
+                            this.forceMaximized &&
+                            btn.type === TELE_BOX_DELEGATE_EVENT.Maximize
+                        ) {
+                            return;
+                        }
                         if (this.onEvent) {
                             this.onEvent({
                                 type: btn.type,
@@ -189,6 +238,7 @@ export class DefaultTitleBar implements TeleTitleBar {
 
             this.$titleBar.appendChild($titleArea);
             this.$titleBar.appendChild($buttonsContainer);
+            this.setForceMaximized(Boolean(this.forceMaximized));
         }
 
         return this.$titleBar;
@@ -275,7 +325,7 @@ export class DefaultTitleBar implements TeleTitleBar {
                 Math.abs(ev.clientY - this.lastTitleBarClick.clientY) <= 5
             ) {
                 // double click
-                if (this.onEvent) {
+                if (this.onEvent && !this.forceMaximized) {
                     this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
                 }
             }
@@ -316,7 +366,7 @@ export class DefaultTitleBar implements TeleTitleBar {
                 Math.abs(clientY - this.lastTitleBarTouch.clientY) <= 10
             ) {
                 // double click
-                if (this.onEvent) {
+                if (this.onEvent && !this.forceMaximized) {
                     this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
                 }
             }

package/src/TeleTitleBar/DefaultTitleBar/style.scss

@@ -70,6 +70,11 @@
     background: transparent;
     cursor: pointer;
 
+    &:disabled,
+    &.#{$namespace}-disabled {
+        cursor: not-allowed;
+    }
+
     & ~ & {
         margin-left: 10px;
     }

package/src/TeleTitleBar/typings.ts

@@ -12,17 +12,23 @@ export interface TeleTitleBarConfig {
     title?: string;
     state?: TeleBoxState;
     namespace?: string;
+    forceTop?: boolean;
+    forceNormal?: boolean;
+    forceMaximized?: boolean;
     onEvent?: (event: TeleTitleBarEvent) => void;
     onDragStart?: (event: MouseEvent | TouchEvent) => void;
 }
 
 export interface TeleTitleBar {
+    readonly $dragArea: HTMLElement;
     setTitle(title: string): void;
 
     setState(state: TeleBoxState): void;
 
     setReadonly(readonly: boolean): void;
 
+    setForceMaximized(forceMaximized: boolean): void;
+
     render(): HTMLElement;
 
     destroy(): void;