From beedf496af5a93c8f605e170ea733d736fbce741 Mon Sep 17 00:00:00 2001 From: Kodie Grantham Date: Wed, 20 Oct 2021 12:19:43 -0500 Subject: [PATCH 01/10] Add dynamicsize option to make a window size dependent on its content --- src/js/winbox.js | 75 ++++++++++++++++++++++++++++++++++-------------- 1 file changed, 53 insertions(+), 22 deletions(-) diff --git a/src/js/winbox.js b/src/js/winbox.js index 337a341..ef7724a 100644 --- a/src/js/winbox.js +++ b/src/js/winbox.js @@ -69,7 +69,11 @@ function WinBox(params, _title){ background, border, classname, - splitscreen; + splitscreen, + dynamicsize, + clonedBody, + contentWidth, + contentHeight; if(params){ @@ -117,6 +121,7 @@ function WinBox(params, _title){ border = params["border"]; classname = params["class"]; splitscreen = params["splitscreen"]; + dynamicsize = params["dynamicsize"]; if(background){ @@ -130,6 +135,26 @@ function WinBox(params, _title){ } } + index = index || 10; + + this.dom.id = + this.id = id || ("winbox-" + (++id_counter)); + this.dom.className = "winbox" + (classname ? " " + (typeof classname === "string" ? classname : classname.join(" ")) : "") + + (modal ? " modal" : ""); + + if(mount){ + + this.mount(mount); + } + else if(html){ + + this.body.innerHTML = html; + } + else if(url){ + + this.setUrl(url); + } + this.setTitle(title || ""); let max_width = root_w; @@ -143,8 +168,33 @@ function WinBox(params, _title){ max_width -= left + right; max_height -= top + bottom; - width = width ? parse(width, max_width) : (max_width / 2) | 0; - height = height ? parse(height, max_height) : (max_height / 2) | 0; + if (dynamicsize && (!width || !height)){ + + clonedBody = this.body.cloneNode(true); + + setStyle(clonedBody, "contain", "unset"); + setStyle(clonedBody, "margin", ""); + setStyle(clonedBody, "position", "relative"); + setStyle(clonedBody, "visibility", "hidden"); + + if(!hasClass(this.dom, "no-header")){ + + clonedBody.insertAdjacentElement("afterbegin", getByClass(this.dom, "wb-title").cloneNode(true)); + } + + if(width) setStyle(clonedBody, "width", parse(width, max_width)); + if(height) setStyle(clonedBody, "height", parse(width, max_width)); + + (root || body).appendChild(clonedBody); + + contentWidth = Math.min(clonedBody.clientWidth, max_width); + contentHeight = Math.min(clonedBody.clientHeight, max_height); + + (root || body).removeChild(clonedBody); + } + + width = width ? parse(width, max_width) : contentWidth || (max_width / 2) | 0; + height = height ? parse(height, max_height) : contentHeight || (max_height / 2) | 0; minwidth = minwidth ? parse(minwidth, max_width) : 0; minheight = minheight ? parse(minheight, max_height) : 0; @@ -152,12 +202,6 @@ function WinBox(params, _title){ x = x ? parse(x, max_width, width) : left; y = y ? parse(y, max_height, height) : top; - index = index || 10; - - this.dom.id = - this.id = id || ("winbox-" + (++id_counter)); - this.dom.className = "winbox" + (classname ? " " + (typeof classname === "string" ? classname : classname.join(" ")) : "") + - (modal ? " modal" : ""); this.x = x; this.y = y; this.width = width; @@ -191,19 +235,6 @@ function WinBox(params, _title){ this.focus(); - if(mount){ - - this.mount(mount); - } - else if(html){ - - this.body.innerHTML = html; - } - else if(url){ - - this.setUrl(url); - } - register(this); (root || body).appendChild(this.dom); } From 3063de7bc29f6b236aa0289ada1d6a1b21a0aab3 Mon Sep 17 00:00:00 2001 From: Kodie Grantham Date: Thu, 21 Oct 2021 08:13:10 -0500 Subject: [PATCH 02/10] Fix setting size styles on clonedBody for dynamicsize option --- src/js/winbox.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/winbox.js b/src/js/winbox.js index ef7724a..d96db3f 100644 --- a/src/js/winbox.js +++ b/src/js/winbox.js @@ -182,8 +182,8 @@ function WinBox(params, _title){ clonedBody.insertAdjacentElement("afterbegin", getByClass(this.dom, "wb-title").cloneNode(true)); } - if(width) setStyle(clonedBody, "width", parse(width, max_width)); - if(height) setStyle(clonedBody, "height", parse(width, max_width)); + if(width) setStyle(clonedBody, "width", parse(width, max_width) + 'px'); + if(height) setStyle(clonedBody, "height", parse(width, max_width) + 'px'); (root || body).appendChild(clonedBody); From 7233b092d4687e62be9c06453c70b09bd09bb923 Mon Sep 17 00:00:00 2001 From: Kodie Grantham Date: Mon, 25 Oct 2021 09:51:37 -0500 Subject: [PATCH 03/10] Change dynamicsize to autosize --- src/js/winbox.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/js/winbox.js b/src/js/winbox.js index d96db3f..252214c 100644 --- a/src/js/winbox.js +++ b/src/js/winbox.js @@ -70,7 +70,7 @@ function WinBox(params, _title){ border, classname, splitscreen, - dynamicsize, + autosize, clonedBody, contentWidth, contentHeight; @@ -121,7 +121,7 @@ function WinBox(params, _title){ border = params["border"]; classname = params["class"]; splitscreen = params["splitscreen"]; - dynamicsize = params["dynamicsize"]; + autosize = params["autosize"]; if(background){ @@ -168,7 +168,7 @@ function WinBox(params, _title){ max_width -= left + right; max_height -= top + bottom; - if (dynamicsize && (!width || !height)){ + if (autosize && (!width || !height)){ clonedBody = this.body.cloneNode(true); From e8dae6a199a2ab5f2fadc192968901928c65e332 Mon Sep 17 00:00:00 2001 From: h3rb Date: Mon, 31 Jan 2022 13:06:53 -0500 Subject: [PATCH 04/10] adding onfullscreen, onmaximize, onminimize, onwindowize https://github.com/nextapps-de/winbox/issues/76 --- src/js/winbox.js | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/js/winbox.js b/src/js/winbox.js index 31deeee..36e8d94 100644 --- a/src/js/winbox.js +++ b/src/js/winbox.js @@ -65,6 +65,10 @@ function WinBox(params, _title){ onblur, onmove, onresize, + onfullscreen, + onmaximize, + onminimize, + onwindowize, background, border, classname, @@ -114,6 +118,10 @@ function WinBox(params, _title){ onblur = params["onblur"]; onmove = params["onmove"]; onresize = params["onresize"]; + onfullscreen = params["onfullscreen"]; + onmaximize = params["onmaximize"]; + onminimize = params["onminimize"]; + onwindowize = params["onwindowize"]; background = params["background"]; border = params["border"]; classname = params["class"]; @@ -190,6 +198,9 @@ function WinBox(params, _title){ this.onblur = onblur; this.onmove = onmove; this.onresize = onresize; + this.onfullscreen = onfullscreen; + this.onmaximize = onmaximize; + this.onminimize = onminimize; this.splitscreen = splitscreen; if(max){ @@ -746,6 +757,7 @@ WinBox.prototype.minimize = function(state){ remove_min_stack(this); this.resize().move().focus(); + this.onwindowize(); } else if((state !== false) && !this.min){ @@ -754,12 +766,14 @@ WinBox.prototype.minimize = function(state){ this.dom.title = this.title; this.addClass("min"); this.min = true; + this.onminimize(); } if(this.max){ this.removeClass("max"); this.max = false; + this.onminimize(); } return this; @@ -793,10 +807,12 @@ WinBox.prototype.maximize = function(state){ this.top, true ); + this.onmaximize(); } else{ this.resize().move().removeClass("max"); + this.onwindowize(); } } @@ -829,14 +845,9 @@ WinBox.prototype.fullscreen = function(state){ //this.dom[prefix_request](); this.body[prefix_request](); is_fullscreen = true; + this.onfullscreen(); } - // dispatch resize callback on fullscreen? - - // else{ - // - // this.onresize && this.onresize(this.width, this.height); - // } } return this; From 56573a7bc643b79b3f1b11b65d086c2960d6cccf Mon Sep 17 00:00:00 2001 From: h3rb Date: Mon, 31 Jan 2022 13:11:41 -0500 Subject: [PATCH 05/10] Forgotten item --- src/js/winbox.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/winbox.js b/src/js/winbox.js index 36e8d94..333cb3f 100644 --- a/src/js/winbox.js +++ b/src/js/winbox.js @@ -201,6 +201,7 @@ function WinBox(params, _title){ this.onfullscreen = onfullscreen; this.onmaximize = onmaximize; this.onminimize = onminimize; + this.onwindowize = onwindowize; this.splitscreen = splitscreen; if(max){ From 87f7c0c15a666b977c97d70312d5651b9070a5e1 Mon Sep 17 00:00:00 2001 From: h3rb Date: Mon, 31 Jan 2022 13:16:48 -0500 Subject: [PATCH 06/10] Document onfullscreen, onmaximize, onminimize, onwindowize https://github.com/nextapps-de/winbox/issues/76 --- README.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/README.md b/README.md index c41f610..fb9c957 100644 --- a/README.md +++ b/README.md @@ -329,6 +329,30 @@ Instance properties: Callback triggered when the window resizes. The keyword this inside the callback function refers to the corresponding WinBox instance. + + onfullscreen + function() + Callback triggered when the window enters fullscreen. + + + + onminimize + function() + Callback triggered when the window enters minimized mode. + + + + onmaximize + function() + Callback triggered when the window enters maximize mode. + + + + onwindowize + function() + Callback triggered when the window returns to a windowed state from a Fullscreen, Minimized or Maximized state. + + onclose function(force) @@ -883,6 +907,18 @@ var winbox = WinBox({ console.log("width", width); console.log("height", height); }, + onfullscreen: function(){ + this.setBackground("#666"); + }, + onminimize: function(){ + this.setBackground("#999"); + }, + onmaximize: function(){ + this.setBackground("#AAA"); + }, + onwindowize: function(){ + this.setBackground("#DDD"); + }, onmove: function(x, y){ console.log("x", x); console.log("y", y); From d7953c560fd060cefbcdb1429fd5422fcf43a6bb Mon Sep 17 00:00:00 2001 From: h3rb Date: Mon, 31 Jan 2022 16:15:38 -0500 Subject: [PATCH 07/10] ylnl --- src/js/webpack.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/js/webpack.js b/src/js/webpack.js index 038808e..eaa8ff1 100644 --- a/src/js/webpack.js +++ b/src/js/webpack.js @@ -35,6 +35,10 @@ import WinBox from "./winbox.js"; /** @export */ WinBox.onblur; /** @export */ WinBox.onmove; /** @export */ WinBox.onresize; +/** @export */ WinBox.onfullscreen; +/** @export */ WinBox.onmaximize; +/** @export */ WinBox.onminimize; +/** @export */ WinBox.onwindowize; /** @export */ WinBox.winbox; window["WinBox"] = WinBox; From 61da6a383efebf45959e0d978a79e0ef6b36e3ba Mon Sep 17 00:00:00 2001 From: h3rb Date: Mon, 31 Jan 2022 16:33:49 -0500 Subject: [PATCH 08/10] fix, on hide, on show --- src/js/winbox.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/js/winbox.js b/src/js/winbox.js index 333cb3f..c234e6b 100644 --- a/src/js/winbox.js +++ b/src/js/winbox.js @@ -69,6 +69,8 @@ function WinBox(params, _title){ onmaximize, onminimize, onwindowize, + onhide, + onshow, background, border, classname, @@ -122,6 +124,8 @@ function WinBox(params, _title){ onmaximize = params["onmaximize"]; onminimize = params["onminimize"]; onwindowize = params["onwindowize"]; + onhide = params["onhide"]; + onshow = params["onshow"]; background = params["background"]; border = params["border"]; classname = params["class"]; @@ -202,6 +206,8 @@ function WinBox(params, _title){ this.onmaximize = onmaximize; this.onminimize = onminimize; this.onwindowize = onwindowize; + this.onhide = onhide; + this.onshow = onshow; this.splitscreen = splitscreen; if(max){ @@ -729,7 +735,7 @@ WinBox.prototype.focus = function(){ */ WinBox.prototype.hide = function(){ - + this.onhide && this.onhide(); return this.addClass("hide"); }; @@ -738,7 +744,7 @@ WinBox.prototype.hide = function(){ */ WinBox.prototype.show = function(){ - + this.onshow && this.onshow(); return this.removeClass("hide"); }; @@ -758,7 +764,7 @@ WinBox.prototype.minimize = function(state){ remove_min_stack(this); this.resize().move().focus(); - this.onwindowize(); + this.onwindowize && this.onwindowize(); } else if((state !== false) && !this.min){ @@ -767,14 +773,14 @@ WinBox.prototype.minimize = function(state){ this.dom.title = this.title; this.addClass("min"); this.min = true; - this.onminimize(); + this.onminimize && this.onminimize(); } if(this.max){ this.removeClass("max"); this.max = false; - this.onminimize(); + this.onminimize && this.onminimize(); } return this; @@ -808,12 +814,12 @@ WinBox.prototype.maximize = function(state){ this.top, true ); - this.onmaximize(); + this.onmaximize && this.onmaximize(); } else{ this.resize().move().removeClass("max"); - this.onwindowize(); + this.onwindowize && this.onwindowize(); } } @@ -846,7 +852,7 @@ WinBox.prototype.fullscreen = function(state){ //this.dom[prefix_request](); this.body[prefix_request](); is_fullscreen = true; - this.onfullscreen(); + this.onfullscreen && this.onfullscreen(); } } From 9ba651beb14b33fbdb9ad43d4633a848ad7cc81e Mon Sep 17 00:00:00 2001 From: h3rb Date: Mon, 31 Jan 2022 16:34:15 -0500 Subject: [PATCH 09/10] Update webpack.js --- src/js/webpack.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/js/webpack.js b/src/js/webpack.js index eaa8ff1..43e665b 100644 --- a/src/js/webpack.js +++ b/src/js/webpack.js @@ -39,6 +39,8 @@ import WinBox from "./winbox.js"; /** @export */ WinBox.onmaximize; /** @export */ WinBox.onminimize; /** @export */ WinBox.onwindowize; +/** @export */ WinBox.onhide; +/** @export */ WinBox.onshow; /** @export */ WinBox.winbox; window["WinBox"] = WinBox; From 8cdce6f8ce2ccc8d5d8f6ec412dd296d0909a477 Mon Sep 17 00:00:00 2001 From: h3rb Date: Mon, 31 Jan 2022 16:35:52 -0500 Subject: [PATCH 10/10] onhide, onshow --- README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/README.md b/README.md index fb9c957..4b29bb7 100644 --- a/README.md +++ b/README.md @@ -353,6 +353,18 @@ Instance properties: Callback triggered when the window returns to a windowed state from a Fullscreen, Minimized or Maximized state. + + onhide + function() + Callback triggered when the window is hidden with win.hide() + + + + onshow + function() + Callback triggered when the window is shown with win.show() + + onclose function(force)