dock-spawn-ts 2.230.0 → 2.270.0

package/src/PanelContainer.ts

@@ -25,6 +25,7 @@ export class PanelContainer implements IDockContainerWithSize {
     name: string;
     state: ISize;
     elementContent: HTMLElement & { resizeHandler?: any, _dockSpawnPanelContainer: PanelContainer };
+    elementContentWrapper: HTMLElement;
     dockManager: DockManager;
     title: string;
     containerType: ContainerType;
@@ -46,6 +47,7 @@ export class PanelContainer implements IDockContainerWithSize {
     _cachedWidth: number;
     _cachedHeight: number;
     _hideCloseButton: boolean;
+    _grayOut: HTMLDivElement;
 
     constructor(elementContent: HTMLElement, dockManager: DockManager, title?: string, panelType?: PanelType, hideCloseButton?: boolean) {
         if (!title)
@@ -53,6 +55,7 @@ export class PanelContainer implements IDockContainerWithSize {
         if (!panelType)
             panelType = PanelType.panel;
         this.panelType = panelType;
+
         this.elementContent = Object.assign(elementContent, { _dockSpawnPanelContainer: this });
         this.dockManager = dockManager;
         this.title = title;
@@ -130,6 +133,31 @@ export class PanelContainer implements IDockContainerWithSize {
         return this.elementPanel;
     }
 
+    grayOut(show: boolean) {
+        if (!show && this._grayOut) {
+            this.elementContentWrapper.removeChild(this._grayOut);
+            this.elementButtonClose.style.display = this._hideCloseButton ? 'none' : 'block';
+            this._grayOut = null;
+            if (!this._hideCloseButton)
+                this.eventListeners.forEach((listener) => {
+                    if (listener.onHideCloseButton) {
+                        listener.onHideCloseButton({ self: this, state: this._hideCloseButton });
+                    }
+                });
+        }
+        else if (show && !this._grayOut) {
+            this._grayOut = document.createElement('div');
+            this._grayOut.className = 'panel-grayout';
+            this.elementButtonClose.style.display = 'none';
+            this.elementContentWrapper.appendChild(this._grayOut);
+            this.eventListeners.forEach((listener) => {
+                if (listener.onHideCloseButton) {
+                    listener.onHideCloseButton({ self: this, state: true });
+                }
+            });
+        }
+    }
+
     _initialize() {
         this.name = Utils.getNextId('panel_');
         this.elementPanel = document.createElement('div');
@@ -166,8 +194,12 @@ export class PanelContainer implements IDockContainerWithSize {
                 new EventHandler(this.elementButtonClose, 'touchstart', this.onCloseButtonClicked.bind(this));
         }
 
-        Utils.removeNode(this.elementContent);
-        this.elementContentHost.appendChild(this.elementContent);
+        this.elementContentWrapper = document.createElement("div");
+        this.elementContentWrapper.classList.add('panel-content-wrapper');
+        this.elementContentWrapper.appendChild(this.elementContent);
+
+        Utils.removeNode(this.elementContentWrapper);
+        this.elementContentHost.appendChild(this.elementContentWrapper);
 
         // Extract the title from the content element's attribute
         let contentTitle = this.elementContent.dataset.panelCaption;
@@ -226,7 +258,7 @@ export class PanelContainer implements IDockContainerWithSize {
     performUndockToDialog(e, dragOffset: Point) {
         this.isDialog = true;
         this.undockInitiator.enabled = false;
-        this.elementContent.style.display = "block";
+        this.elementContentWrapper.style.display = "block";
         this.elementPanel.style.position = "";
         return this.dockManager.requestUndockToDialog(this, e, dragOffset);
     }
@@ -237,7 +269,7 @@ export class PanelContainer implements IDockContainerWithSize {
     performClose() {
         this.isDialog = true;
         this.undockInitiator.enabled = false;
-        this.elementContent.style.display = "block";
+        this.elementContentWrapper.style.display = "block";
         this.elementPanel.style.position = "";
         this.dockManager.requestClose(this);
     }

package/src/TabHandle.ts

@@ -50,7 +50,7 @@ export class TabHandle {
         this.elementBase.appendChild(this.elementText);
         if (this.parent.host.displayCloseButton)
             this.elementBase.appendChild(this.elementCloseButton);
-        if ((<PanelContainer>this.parent.container)._hideCloseButton)
+        if ((<PanelContainer>this.parent.container)._hideCloseButton || (<PanelContainer>this.parent.container)._grayOut)
             this.elementCloseButton.style.display = 'none';
         this.parent.host.tabListElement.appendChild(this.elementBase);