Download all source files including image original resources.
@@ -96,7 +96,7 @@ __Get Latest Build (Stable):__
__Get Latest Build (Nightly):__
-Just exchange the version number from the URLs above with "master", e.g.: "/winbox/__0.1.0__/dist/" into "/winbox/__master__/dist".
+Just exchange the version number from the URLs above with "master", e.g.: "/winbox/__0.1.1__/dist/" into "/winbox/__master__/dist".
__Get Latest (NPM):__
@@ -185,7 +185,7 @@ You can also load modules via CDN, e.g.:
```html
```
@@ -210,6 +210,8 @@ Instance methods:
- winbox.**resize**(width, height)
- winbox.**close**()
- winbox.**focus**()
+- winbox.**hide**()
+- winbox.**show**()
- winbox.**minimize**(state)
- winbox.**maximize**(state)
- winbox.**fullscreen**(state)
@@ -245,7 +247,7 @@ Instance properties:
id
number | string
-
Set a unique id to the window. Used to define custom styles in css, query elements by context or just to identify the corresponding window instance.
+
Set a unique id to the window. Used to define custom styles in css, query elements by context or just to identify the corresponding window instance. If no ID was set it will automatically create one for you.
@@ -287,7 +289,7 @@ Instance properties:
x y
number | string
-
Set the initial position of the window (supports "center" and also units "px" and "%").
+
Set the initial position of the window (supports: "right" for x-axis, "bottom" for y-axis, "center" for both, units "px" and "%" for both).
@@ -339,9 +341,9 @@ Instance properties:
-
classname
+
class
string
-
Add one or more classnames to the window (multiple classnames needs separated with whitespaces, e.g. "class-a class-b"). Used to define custom styles in css, query elements by context or just to tag the corresponding window instance.
+
Add one or more classnames to the window (multiple classnames as array or separated with whitespaces e.g. "class-a class-b"). Used to define custom styles in css, query elements by context (also for styling) or just to tag the corresponding window instance.
@@ -433,7 +435,7 @@ winbox.left = 50;
#### Custom Position / Size
-> Supports units "px" and "%". Also support the keyword "center" for xy-position.
+> Supports "right" for x-axis, "bottom" for y-axis, "center" for both, units "px" and "%" also for both.
```js
new WinBox("Custom Viewport", {
@@ -444,7 +446,16 @@ new WinBox("Custom Viewport", {
});
```
-Alternatively (also supports units):
+```js
+new WinBox("Custom Viewport", {
+ x: "right",
+ y: "bottom",
+ width: "50%",
+ height: "50%"
+});
+```
+
+Alternatively (also supports same units):
```js
var winbox = new WinBox("Custom Viewport");
@@ -694,6 +705,16 @@ winbox.fullscreen(true);
winbox.fullscreen(false);
```
+Hide a specific window:
+```js
+winbox.hide();
+```
+
+Show a specific hidden window:
+```js
+winbox.show();
+```
+
Close and destroy a window:
```js
winbox.close();
@@ -713,6 +734,97 @@ winbox.setTitle("Title")
> When using "center" as position you need to call `resize()` before `move()`.
+
+#### Use Control Classes
+
+WinBox provides you some built-in control classes you can pass when creating a window instance.
+
+
+
+
+
Classname
+
Description
+
+
+
no-animation
+
Disables the windows transition animation
+
+
+
+
no-shadow
+
Disables the windows drop shadow
+
+
+
+
no-header
+
Hide the window header incl. title and toolbar
+
+
+
+
no-min
+
Hide the minimize icon
+
+
+
+
no-max
+
Hide the maximize icon
+
+
+
+
no-full
+
Hide the fullscreen icon
+
+
+
+
no-close
+
Hide the close icon
+
+
+
+
no-resize
+
Disables the window resizing capability
+
+
+
+
no-move
+
Disables the window moving capability
+
+
+
+
modal
+
Open the window in modal mode
+
+
+
+
hide
+
Open the window in hidden state
+
+
+
+> Without the header the user isn't able to move the window frame but may be useful for creating modal popups.
+
+Pass in classnames when creating the window to apply behaviour:
+```js
+const winbox = WinBox({
+ class: [
+ "no-min",
+ "no-max",
+ "no-full",
+ "no-resize",
+ "no-move"
+ ]
+});
+```
+
+> The example above is a perfect workaround to use WinBox for classical popups.
+
+Alternatively you can use a whitespace separated string:
+```js
+const winbox = WinBox({
+ class: "no-min no-max no-full no-resize no-move"
+});
+```
+
## Customize Window
The window boilerplate:
@@ -728,12 +840,6 @@ Hide or disable specific icons:
.wb-close { display: none }
```
-Hide or disable all icons:
-
-```css
-.wb-icon { display: none }
-```
-
Modify a specific icon:
```css
@@ -744,7 +850,7 @@ Modify a specific icon:
}
```
-Disable resizing areas:
+Modify or disable resizing areas on the window borders:
```css
/* north */
@@ -772,12 +878,17 @@ Disable resizing areas:
.wb-se { display: none }
```
-Disable or modify the window drop shadow:
+Modify or disable the window drop shadow:
```css
.winbox { box-shadow: none }
```
-Style the window background:
+Style the header title:
+```css
+.wb-title { font-size: 12px }
+```
+
+Style the window background (frame):
```css
.winbox {
background: linear-gradient(90deg, #ff00f0, #0050ff);
@@ -785,15 +896,10 @@ Style the window background:
}
```
-Style the header title:
-```css
-.wb-title { font-size: 12px }
-```
-
-Style the body of a window element incl. the window border:
+Style the body of a window element and set the frame border:
```css
.wb-body {
- /* the width of window border: */
+ /* the width of window frame border: */
margin: 4px;
color: #fff;
background: #131820;
@@ -889,54 +995,61 @@ Customize the modal background overlay:
}
```
-## Useful Examples
+#### Style Scrollbars
+
+```css
+.wb-body::-webkit-scrollbar {
+ width: 12px;
+}
+.wb-body::-webkit-scrollbar-track {
+ background: transparent;
+}
+.wb-body::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background: #263040;
+}
+.wb-body::-webkit-scrollbar-thumb:window-inactive {
+ background: #181f2a;
+}
+.wb-body::-webkit-scrollbar-corner {
+ background: transparent;
+}
+```
-> Without the header the user isn't able to move the window frame. Instead, you can place your own control elements to the page.
+## Useful Hints
-Always hide the window header:
+Often you need to hide specific content parts when it was mounted to a window. You can solve this easily by using some css:
```css
-.wb-header { display: none }
-.wb-body { top: 0 }
+.winbox .wb-hide { display: none }
```
-Hide the header just in maximize mode:
+The same for hiding when NOT inside a window:
```css
-.winbox.max .wb-header { display: none }
-.winbox.max .wb-body { top: 0 }
+.wb-show { display: none }
+.winbox .wb-show { display: block }
```
-#### Use Declarative Configurations
+Now you can add this two classes to any element to control visibility between the two states "inside" and "outside" a window:
-Define your features/states as css classes, use this as a base:
-```css
-.winbox.no-animation { transition: none }
-.winbox.no-shadow { box-shadow: none }
-.winbox.no-header .wb-header { display: none }
-.winbox.no-header .wb-body { top: 0 }
-.winbox.no-min .wb-min { display: none }
-.winbox.no-max .wb-max { display: none }
-.winbox.no-full .wb-full { display: none }
-.winbox.no-close .wb-close { display: none }
-.winbox.no-resize .wb-body ~ div { display: none }
-.winbox.no-move:not(.min) .wb-title { pointer-events: none }
+```html
+
+
+ Hide this header when in windowed mode
+
+
+
+
+
+
```
-Pass in classnames when creating the window:
+The property `display: block` might not fit your needs. That's why this workaround was not added as one of the built-in classes yet. Please change to your desired display-state accordingly.
+
```js
-const winbox = WinBox({
- class: [
- "no-animation",
- "no-shadow",
- "no-header",
- "no-min",
- "no-max",
- "no-full",
- "no-close",
- "no-resize",
- "no-move"
- ]
+new WinBox({
+ mount: document.getElementById("content")
});
```
diff --git a/demo/style.css b/demo/style.css
index 94b30b5..eeac794 100644
--- a/demo/style.css
+++ b/demo/style.css
@@ -10,6 +10,7 @@ html, body{
font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Open Sans", OpenSans, Roboto, Segoe UI, sans-serif;
text-align: center;
color: #fff;
+ background: linear-gradient(135deg, #0d1117, #131820);
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
@@ -26,7 +27,7 @@ html, body{
right: 0;
bottom: 0;
left: 0;
- background: linear-gradient(135deg, #0d1117, #131820);
+ background: inherit;
}
header{
position: fixed;
diff --git a/dist/css/winbox.min.css b/dist/css/winbox.min.css
index 4488de8..4b1db0e 100644
--- a/dist/css/winbox.min.css
+++ b/dist/css/winbox.min.css
@@ -1 +1 @@
-@keyframes fade-in{0%{opacity:0}to{opacity:.85}}.winbox{position:fixed;left:0;top:0;background:#0050ff;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);transition:width .3s,height .3s,transform .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);will-change:transform,width,height;contain:strict;text-align:left}.wb-body,.wb-header,.wb-n{position:absolute;left:0}.wb-header{top:0;width:100%;height:35px;color:#fff}.wb-body{right:0;top:35px;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:scroll-position;background:#fff;margin-top:0!important;box-sizing:border-box}.wb-title{font-size:14px;padding-left:10px;cursor:move;line-height:35px;width:calc(100% - 120px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.winbox.min .wb-title{width:calc(100% - 65px)}.wb-n{top:-5px;right:0;height:10px;cursor:n-resize}.wb-e,.wb-w{top:0;position:absolute;width:10px}.wb-e{right:-5px;bottom:0;cursor:w-resize}.wb-s{position:absolute;bottom:-5px;left:0;right:0;height:10px;cursor:n-resize}.wb-nw,.wb-sw,.wb-w{left:-5px}.wb-w{bottom:0;cursor:w-resize}.wb-ne,.wb-nw,.wb-sw{position:absolute;width:10px;height:10px}.wb-nw{top:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize}.wb-ne{top:-5px;right:-5px}.wb-se,.wb-sw{bottom:-5px}.wb-se{position:absolute;right:-5px;width:10px;height:10px;cursor:nw-resize}.wb-icon,.winbox.modal:before{top:0;bottom:0;position:absolute}.wb-icon{right:1px}.wb-icon *{display:inline-block;width:30px;height:100%;background-position:center;background-repeat:no-repeat;cursor:pointer}.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center bottom 11px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.max .wb-body~div,.winbox.max .wb-title,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title{pointer-events:none}.winbox.min .wb-title{cursor:default}.winbox iframe{position:absolute;width:100%;height:100%;border:0}.winbox.modal{contain:layout size}.winbox.modal:before{content:'';left:0;right:0;background:inherit}.winbox.modal:after{content:'';position:absolute;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:#0d1117;animation:fade-in .2s ease-out forwards;z-index:-1}
\ No newline at end of file
+@keyframes fade-in{0%{opacity:0}to{opacity:.85}}.winbox.no-close .wb-close,.winbox.no-full .wb-full,.winbox.no-header .wb-header,.winbox.no-max .wb-max,.winbox.no-min .wb-min,.winbox.no-resize .wb-body~div{display:none}.winbox.max .wb-body~div,.winbox.max .wb-title,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title,.winbox.no-move:not(.min) .wb-title{pointer-events:none}.winbox.no-animation{transition:none}.winbox.no-shadow{box-shadow:none}.winbox.no-header .wb-body{top:0}.winbox{position:fixed;left:0;top:0;background:#0050ff;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);transition:width .3s,height .3s,transform .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);will-change:transform,width,height;contain:strict;text-align:left}.wb-body,.wb-header,.wb-n{position:absolute;left:0}.wb-header{top:0;width:100%;height:35px;color:#fff}.wb-body{right:0;top:35px;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:scroll-position;background:#fff;margin-top:0!important;box-sizing:border-box}.wb-title{font-size:14px;padding-left:10px;cursor:move;line-height:35px;width:calc(100% - 120px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.winbox.min .wb-title{width:calc(100% - 65px)}.wb-n{top:-5px;right:0;height:10px;cursor:n-resize}.wb-e,.wb-w{top:0;position:absolute;width:10px}.wb-e{right:-5px;bottom:0;cursor:w-resize}.wb-s{position:absolute;bottom:-5px;left:0;right:0;height:10px;cursor:n-resize}.wb-nw,.wb-sw,.wb-w{left:-5px}.wb-w{bottom:0;cursor:w-resize}.wb-ne,.wb-nw,.wb-sw{position:absolute;width:10px;height:10px}.wb-nw{top:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize}.wb-ne{top:-5px;right:-5px}.wb-se,.wb-sw{bottom:-5px}.wb-se{position:absolute;right:-5px;width:10px;height:10px;cursor:nw-resize}.wb-icon,.winbox.modal:before{top:0;bottom:0;position:absolute}.wb-icon{right:1px}.wb-icon *{display:inline-block;width:30px;height:100%;background-position:center;background-repeat:no-repeat;cursor:pointer}.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center bottom 11px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.min .wb-title{cursor:default}.winbox iframe{position:absolute;width:100%;height:100%;border:0}.winbox.modal{contain:layout size}.winbox.modal:before{content:'';left:0;right:0;background:inherit}.winbox.modal:after{content:'';position:absolute;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:#0d1117;animation:fade-in .2s ease-out forwards;z-index:-1}
\ No newline at end of file
diff --git a/dist/js/winbox.min.js b/dist/js/winbox.min.js
index 7eb74b1..d1dfb53 100644
--- a/dist/js/winbox.min.js
+++ b/dist/js/winbox.min.js
@@ -1,23 +1,24 @@
/**
- * WinBox.js v0.1.0
+ * WinBox.js v0.1.1
* Copyright 2021 Nextapps GmbH
* Author: Thomas Wilkerling
* Licence: Apache-2.0
* https://github.com/nextapps-de/winbox
*/
-(function(){'use strict';var f,h=document.createElement("div");h.innerHTML="
WinBox is a modern HTML5 window manager for the web. Lightweight, outstandin
<button onclick="buttons.color()">Set Color</button>
<button onclick="buttons.close()">Close</button>
</div>
+
+
var winbox = new WinBox("Controls", {
+
+ mount: document.getElementById("controls")
+});
window.buttons = {
@@ -387,16 +392,15 @@
WinBox is a modern HTML5 window manager for the web. Lightweight, outstandin
(Math.random() * 255 | 0) + ")"
);
},
+ modal: function(){
+
+ winbox.body.parentNode.classList.toggle("modal");
+ },
close: function(){
winbox.close();
}
};
-
-
var winbox = new WinBox("Controls", {
-
- mount: document.getElementById("controls")
-});