dock-spawn-ts - npm Package Compare versions

Comparing version 2.526.0 to 2.530.0

lib/js/Dialog.js

@@ -185,2 +185,9 @@ import { Point } from "./Point.js";
         };
+        let btnNewBrowserWindow = document.createElement('div');
+        btnNewBrowserWindow.innerText = Localizer.getString('NewBrowserWindow');
+        contextMenuContainer.append(btnNewBrowserWindow);
+        btnNewBrowserWindow.onclick = () => {
+            dialog.panel.undockToBrowserDialog();
+            dialog.closeContextMenu();
+        };
         return true;
@@ -187,0 +194,0 @@ }

lib/js/DockWheelItem.js

@@ -13,4 +13,4 @@ import { EventHandler } from "./EventHandler.js";
         this.hoverIconClass = 'dock-wheel-' + wheelType + '-icon-hover';
-        this.mouseOverHandler = new EventHandler(this.element, 'mouseover', this.onMouseMoved.bind(this));
-        this.mouseOutHandler = new EventHandler(this.element, 'mouseout', this.onMouseOut.bind(this));
+        this.mouseOverHandler = new EventHandler(this.element, 'pointerover', this.onMouseMoved.bind(this));
+        this.mouseOutHandler = new EventHandler(this.element, 'pointerout', this.onMouseOut.bind(this));
         this.active = false; // Becomes active when the mouse is hovered over it
@@ -17,0 +17,0 @@ }

lib/js/i18n/Defaults.d.ts

@@ -8,4 +8,5 @@ export type TranslationKey = keyof typeof Defaults;
     DefaultPanelName: string;
+    NewBrowserWindow: string;
 };
 export interface LocalizerParameters {
 }

lib/js/i18n/Defaults.js

@@ -5,3 +5,4 @@ export const Defaults = {
     'CloseAllButThis': 'Close all documents but this',
-    'DefaultPanelName': 'Panel'
+    'DefaultPanelName': 'Panel',
+    'NewBrowserWindow': 'Open in new window'
     //Example of parameterized translation
@@ -8,0 +9,0 @@ // 'CloseWithName': 'Close tab {0}'

lib/js/PanelContainer.d.ts

@@ -88,2 +88,3 @@ import { DockManager } from "./DockManager.js";
     set height(value: number);
+    private panelDocked;
     resize(width: number, height: number): void;
@@ -101,3 +102,5 @@ _setPanelDimensions(width: number, height: number): void;
     onCloseButtonClicked(e: Event): void;
+    undockToBrowserDialog(): void;
     close(): Promise<void>;
+    private closeInternal;
 }

lib/js/PanelContainer.js

@@ -7,2 +7,3 @@ import { Utils } from "./Utils.js";
 import { Localizer } from "./i18n/Localizer.js";
+import { moveElementToNewBrowserWindow } from "./BrowserDialogHelper.js";
 /**
@@ -25,3 +26,2 @@ * This dock container wraps the specified element on a panel frame with a title bar and close button
         elementContent.style.bottom = '0';
-        elementContent.hidden = false;
         this.elementContentContainer = document.createElement('div');
@@ -188,3 +188,2 @@ this.elementContentContainer.className = 'panel-element-content-container';
         this.touchDownHandler = new EventHandler(this.elementPanel, 'touchstart', this.onMouseDown.bind(this), { passive: true });
-        this.elementContent.removeAttribute("hidden");
     }
@@ -276,2 +275,7 @@ onMouseDown() {
     }
+    panelDocked() {
+        if (this.elementContent.hidden)
+            this.elementContent.hidden = false;
+        this.dockManager.config.dialogRootElement.appendChild(this.elementContentContainer);
+    }
     resize(width, height) {
@@ -283,2 +287,3 @@ // if (this._cachedWidth === width && this._cachedHeight === height)
         // }
+        this.panelDocked();
         this.setVisible(true);
@@ -367,7 +372,25 @@ this._setPanelDimensions(width, height);
     }
+    undockToBrowserDialog() {
+        moveElementToNewBrowserWindow(this.elementContent, {
+            title: '',
+            closeCallback: () => { },
+            newWindowClosedCallback: () => { },
+            focused: (e) => {
+                this.dockManager.activePanel = this;
+            },
+            blured: (e) => {
+                this.dockManager.activePanel = null;
+            }
+        });
+        this.closeInternal(false);
+    }
     async close() {
+        this.closeInternal(true);
+    }
+    async closeInternal(runCallback) {
         let close = true;
         if (this.elementContentContainer.parentElement === this.dockManager.config.dialogRootElement) {
-            this.dockManager.config.dialogRootElement.removeChild(this.elementContentContainer);
-            if (this.closePanelContainerCallback)
+            if (!runCallback)
+                close = true;
+            else if (this.closePanelContainerCallback)
                 close = await this.closePanelContainerCallback(this);
@@ -377,2 +400,3 @@ else if (this.dockManager.closePanelContainerCallback)
             if (close) {
+                this.dockManager.config.dialogRootElement.removeChild(this.elementContentContainer);
                 if (this.isDialog) {
@@ -379,0 +403,0 @@ if (this.floatingDialog) {

lib/js/TabHandle.js

@@ -242,5 +242,2 @@ import { PanelContainer } from "./PanelContainer.js";
     contextMenuContainer.append(btnCloseAll);
-    let btnCloseAllButThis = document.createElement('div');
-    btnCloseAllButThis.innerText = Localizer.getString('CloseAllButThis');
-    contextMenuContainer.append(btnCloseAllButThis);
     btnCloseAll.onclick = () => {
@@ -255,2 +252,5 @@ let length = documentMangerNodes.length;
     };
+    let btnCloseAllButThis = document.createElement('div');
+    btnCloseAllButThis.innerText = Localizer.getString('CloseAllButThis');
+    contextMenuContainer.append(btnCloseAllButThis);
     btnCloseAllButThis.onclick = () => {
@@ -265,3 +265,10 @@ let length = documentMangerNodes.length;
     };
+    let btnNewBrowserWindow = document.createElement('div');
+    btnNewBrowserWindow.innerText = Localizer.getString('NewBrowserWindow');
+    contextMenuContainer.append(btnNewBrowserWindow);
+    btnNewBrowserWindow.onclick = () => {
+        tabHandle.parent.container.undockToBrowserDialog();
+        tabHandle.closeContextMenu();
+    };
 };
 //# sourceMappingURL=TabHandle.js.map

package.json

 {
   "name": "dock-spawn-ts",
-  "version": "2.526.0",
+  "version": "2.530.0",
   "description": "DockSpawn Typescript Version",
@@ -5,0 +5,0 @@ "license": "MIT",

src/Dialog.ts

@@ -193,2 +193,12 @@ import { DockManager } from "./DockManager.js";
             };
+
+            let btnNewBrowserWindow = document.createElement('div');
+            btnNewBrowserWindow.innerText = Localizer.getString('NewBrowserWindow');
+            contextMenuContainer.append(btnNewBrowserWindow);
+
+            btnNewBrowserWindow.onclick = () => {
+                dialog.panel.undockToBrowserDialog();
+                dialog.closeContextMenu();
+            };
+
             return true;
@@ -195,0 +205,0 @@ } else {

src/DockWheelItem.ts

@@ -25,4 +25,4 @@ import { EventHandler } from "./EventHandler.js";
         this.hoverIconClass = 'dock-wheel-' + wheelType + '-icon-hover';
-        this.mouseOverHandler = new EventHandler(this.element, 'mouseover', this.onMouseMoved.bind(this));
-        this.mouseOutHandler = new EventHandler(this.element, 'mouseout', this.onMouseOut.bind(this));
+        this.mouseOverHandler = new EventHandler(this.element, 'pointerover', this.onMouseMoved.bind(this));
+        this.mouseOutHandler = new EventHandler(this.element, 'pointerout', this.onMouseOut.bind(this));
         this.active = false;    // Becomes active when the mouse is hovered over it
@@ -29,0 +29,0 @@ }

src/i18n/Defaults.ts

@@ -11,3 +11,4 @@ export type TranslationKey = keyof typeof Defaults;
     'CloseAllButThis': 'Close all documents but this',
-    'DefaultPanelName': 'Panel'
+    'DefaultPanelName': 'Panel',
+    'NewBrowserWindow': 'Open in new window'
     //Example of parameterized translation
@@ -14,0 +15,0 @@ // 'CloseWithName': 'Close tab {0}'

src/PanelContainer.ts

@@ -15,2 +15,3 @@ import { DockManager } from "./DockManager.js";
 import { Localizer } from "./i18n/Localizer.js";
+import { moveElementToNewBrowserWindow } from "./BrowserDialogHelper.js";
 
@@ -74,3 +75,2 @@ /**
         elementContent.style.bottom = '0'
-        elementContent.hidden = false;
         this.elementContentContainer = document.createElement('div');
@@ -257,4 +257,2 @@ this.elementContentContainer.className = 'panel-element-content-container';
         this.touchDownHandler = new EventHandler(this.elementPanel, 'touchstart', this.onMouseDown.bind(this), { passive: true });
-
-        this.elementContent.removeAttribute("hidden");
     }
@@ -356,2 +354,8 @@
 
+    private panelDocked() {
+        if (this.elementContent.hidden)
+            this.elementContent.hidden = false;
+        this.dockManager.config.dialogRootElement.appendChild(this.elementContentContainer);
+    }
+
     resize(width: number, height: number) {
@@ -363,2 +367,3 @@ // if (this._cachedWidth === width && this._cachedHeight === height)
         // }
+        this.panelDocked();
         this.setVisible(true);
@@ -459,9 +464,28 @@ this._setPanelDimensions(width, height);
 
+    undockToBrowserDialog() {
+        moveElementToNewBrowserWindow(this.elementContent, {
+            title: '',
+            closeCallback: () => { },
+            newWindowClosedCallback: () => { },
+            focused: (e) => {
+                this.dockManager.activePanel = this;
+            },
+            blured: (e) => {
+                this.dockManager.activePanel = null;
+            }
+        });
+        this.closeInternal(false);
+    }
+
     async close() {
+        this.closeInternal(true);
+    }
+
+    private async closeInternal(runCallback: boolean) {
         let close = true;
 
         if (this.elementContentContainer.parentElement === this.dockManager.config.dialogRootElement) {
-            this.dockManager.config.dialogRootElement.removeChild(this.elementContentContainer);
-
-            if (this.closePanelContainerCallback)
+            if (!runCallback)
+                close = true;
+            else if (this.closePanelContainerCallback)
                 close = await this.closePanelContainerCallback(this);
@@ -472,2 +496,4 @@ else if (this.dockManager.closePanelContainerCallback)
             if (close) {
+                this.dockManager.config.dialogRootElement.removeChild(this.elementContentContainer);
+
                 if (this.isDialog) {
@@ -474,0 +500,0 @@ if (this.floatingDialog) {

src/TabHandle.ts

@@ -103,6 +103,2 @@ import { TabPage } from "./TabPage.js";
 
-        let btnCloseAllButThis = document.createElement('div');
-        btnCloseAllButThis.innerText = Localizer.getString('CloseAllButThis');
-        contextMenuContainer.append(btnCloseAllButThis);
-
         btnCloseAll.onclick = () => {
@@ -118,2 +114,6 @@ let length = documentMangerNodes.length;
 
+        let btnCloseAllButThis = document.createElement('div');
+        btnCloseAllButThis.innerText = Localizer.getString('CloseAllButThis');
+        contextMenuContainer.append(btnCloseAllButThis);
+
         btnCloseAllButThis.onclick = () => {
@@ -128,2 +128,11 @@ let length = documentMangerNodes.length;
         };
+        
+        let btnNewBrowserWindow = document.createElement('div');
+        btnNewBrowserWindow.innerText = Localizer.getString('NewBrowserWindow');
+        contextMenuContainer.append(btnNewBrowserWindow);
+
+        btnNewBrowserWindow.onclick = () => {
+            (<PanelContainer>tabHandle.parent.container).undockToBrowserDialog();
+            tabHandle.closeContextMenu();
+        };
     }
@@ -130,0 +139,0 @@

No alert changes

Improved metrics

Total package byte prevSize

786797

increased by3.01%

Number of package files

216

increased by3.35%

Lines of code

10920

increased by2.92%

No dependency changes