@netless/telebox-insider 0.3.0 → 0.3.1

package/src/TeleBoxManager/typings.ts

@@ -15,6 +15,7 @@ export interface TeleBoxManagerConfig
         | "minimized"
         | "namespace"
         | "readonly"
+        | "forceMaximized"
     > {
     /** Element to mount boxes. */
     root?: HTMLElement;
@@ -41,6 +42,7 @@ type TeleBoxManagerBoxConfigBaseProps =
     | "lastNotMinimizedBoxStatus"
     | "forceTop"
     | "forceNormal"
+    | "forceMaximized"
     | "isDragContent";
 
 export type TeleBoxManagerCreateConfig = Pick<
@@ -78,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

@@ -29,6 +29,7 @@ export class DefaultTitleBar implements TeleTitleBar {
     protected boxStatus?: TeleBoxState;
     protected forceTop?: boolean;
     protected forceNormal?: boolean;
+    protected forceMaximized?: boolean;
     public constructor({
         readonly = false,
         title,
@@ -40,7 +41,8 @@ export class DefaultTitleBar implements TeleTitleBar {
         boxStatus,
         forceTop = false,
         forceNormal = false,
-    }: DefaultTitleBarConfig = {}) {    
+        forceMaximized = false,
+    }: DefaultTitleBarConfig = {}) {
         this.readonly = readonly;
         this.onEvent = onEvent;
         this.onDragStart = onDragStart;
@@ -50,27 +52,41 @@ export class DefaultTitleBar implements TeleTitleBar {
         this.boxStatus = boxStatus;
         this.forceTop = forceTop;
         this.forceNormal = forceNormal;
-
-        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.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();
     }
 
@@ -127,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) {
@@ -161,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);
@@ -186,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,
@@ -198,6 +238,7 @@ export class DefaultTitleBar implements TeleTitleBar {
 
             this.$titleBar.appendChild($titleArea);
             this.$titleBar.appendChild($buttonsContainer);
+            this.setForceMaximized(Boolean(this.forceMaximized));
         }
 
         return this.$titleBar;
@@ -284,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 });
                 }
             }
@@ -325,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

@@ -14,6 +14,7 @@ export interface TeleTitleBarConfig {
     namespace?: string;
     forceTop?: boolean;
     forceNormal?: boolean;
+    forceMaximized?: boolean;
     onEvent?: (event: TeleTitleBarEvent) => void;
     onDragStart?: (event: MouseEvent | TouchEvent) => void;
 }
@@ -26,6 +27,8 @@ export interface TeleTitleBar {
 
     setReadonly(readonly: boolean): void;
 
+    setForceMaximized?(forceMaximized: boolean): void;
+
     render(): HTMLElement;
 
     destroy(): void;