WinBox.js

https://nextapps-de.github.io/winbox
Admin
WinBox.js is a modern HTML5 window manager for the web that provides lightweight, high-performance...
Tokens:5,552
Snippets:55
Trust Score:8.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### All Options

Source: https://nextapps-de.github.io/winbox

A comprehensive example demonstrating all available configuration options and callbacks.

```javascript
new WinBox({
    // configuration:
    index: 1,
    id: "my-window",
    root: document.body,
    class: ["no-full", "no-max", "my-theme"],

    // appearance:
    title: "All Options",
    background: "#fff",
    border: 4,
    header: 45,
    icon: false,

    // initial state:
    modal: false,
    max: false,
    min: false,
    hidden: false,

    // dimension:
    width: 250,
    height: 200,
    minheight: 55,
    minwidth: 100,
    maxheight: 300,
    maxwidth: 500,
    autosize: true,

    // position:
    x: "center",
    y: "center",

    // viewport boundaries:
    top: 50,
    right: 50,
    bottom: 0,
    left: 50,

    // contents (choose from):
    url: false,
    mount: false,
    html: "width: 250, height: 200",

    // callbacks:
    oncreate: function(options){
        options.icon = "demo/wikipedia.svg"
    },
    onshow: function(){
        console.log("Show:", this.id);
    },
    onhide: function(){
        console.log("Hide:", this.id);
    },
    onfocus: function(){
        this.setBackground("#fff");
    },
    onblur: function(){
        this.setBackground("#999");
    },
    onresize: function(w, h){
        this.body.textContent =
            `width: ${w}, height: ${h}`;
    },
    onmove: function(x, y){
        this.body.textContent =
            `x: ${x}, y: ${y}`;
    },
    onclose: function(force){
        return !confirm("Close window?");
    },
    onfullscreen: function(){
        console.log("Fullscreen:", this.id);
    },
    onmaximize: function(){
        console.log("Maximize:", this.id);
    },
    onminimize: function(){
        console.log("Minimize:", this.id);
    },
    onrestore: function(){
        console.log("Restore:", this.id);
    }
});
```

--------------------------------

### Programmatic Window Control Setup

Source: https://nextapps-de.github.io/winbox

This setup includes the HTML structure for control buttons, the WinBox initialization, and the JavaScript object defining the button actions.

```html
<div id="controls">
    <button onclick="buttons.minimize()">Minimize (Toggle)</button>
    <button onclick="buttons.maximize()">Maximize (Toggle)</button>
    <button onclick="buttons.fullscreen()">Fullscreen (Toggle)</button>
    <button onclick="buttons.move()">Move (Center, Center)</button>
    <button onclick="buttons.resize()">Resize (50%, 50%)</button>
    <button onclick="buttons.title()">Set Title</button>
    <button onclick="buttons.color()">Set Color</button>
    <button onclick="buttons.close()">Close</button>
</div>
```

```javascript
var winbox = new WinBox("Controls", {
    mount: document.getElementById("controls"),
    border: 4,
    onclose: function(force){
        return !force && !confirm("Close window?");
    }
});
```

```javascript
window.buttons = {
    minimize: function(){

        winbox.minimize(!this.min);
    },
    maximize: function(){

        winbox.maximize(!this.max);
    },
    fullscreen: function(){

        winbox.fullscreen(!this.full);
    },
    move: function(){

        winbox.move("center", "center");
    },
    resize: function(){

        winbox.resize("50%", "50%");
    },
    title: function(){

        winbox.setTitle("Title-" + Math.random());
    },
    color: function(){

        winbox.setBackground(
            "rgb(" + (Math.random() * 255 | 0) + "," +
                     (Math.random() * 255 | 0) + "," +
                     (Math.random() * 255 | 0) + ")"
        );
    },
    modal: function(){

        winbox.toggleClass("modal");
    },
    close: function(){

        winbox.close();
    },
    force_close: function(){

        winbox.close(true);
    }
};
```

--------------------------------

### Use Theme

Source: https://nextapps-de.github.io/winbox

Include the required CSS and JS files, then apply a theme class to a WinBox instance.

```html
<head>
<link rel="stylesheet" href="dist/css/winbox.min.css">
<link rel="stylesheet" href="dist/css/themes/modern.min.css">
<script src="dist/js/winbox.min.js"></script>
</head>
```

```javascript
new WinBox("Theme", {
    class: "modern",
    mount: document.getElementById("content")
                   .cloneNode(true)
});
```

--------------------------------

### Load Library (Bundle)

Source: https://nextapps-de.github.io/winbox

Include the bundled version of WinBox in your HTML head.

```html
<head>
    <script src="dist/winbox.bundle.min.js"></script>
</head>
```

--------------------------------

### Class Constructor

Source: https://nextapps-de.github.io/winbox

The basic syntax for creating a new WinBox instance.

```javascript
WinBox(title, options<key: value>)
```

--------------------------------

### Basic Window

Source: https://nextapps-de.github.io/winbox

Create a simple window with a title.

```javascript
new WinBox("Basic Window");
```

--------------------------------

### Initialize WinBox with a custom template

Source: https://nextapps-de.github.io/winbox

Creates a new WinBox instance using a custom HTML template defined via a DOM element.

```javascript
const template = document.createElement("div");
template.innerHTML = `
    <div class=wb-header>
        <div class=wb-control>
            <span class=wb-custom></span>
            <span class=wb-close></span>
        </div>
        <div class=wb-drag>
            <div class=wb-title></div>
        </div>
    </div>
    <div class=wb-body></div>
`;

new WinBox("Custom Template", { template });
```

--------------------------------

### Load Library (Non-Bundle)

Source: https://nextapps-de.github.io/winbox

Include the CSS and JS files separately for the non-bundled version.

```html
<head>
    <link rel="stylesheet" href="dist/css/winbox.min.css">
    <script src="dist/js/winbox.min.js"></script>
</head>
```

--------------------------------

### Open URI / URL

Source: https://nextapps-de.github.io/winbox

Load an external URL inside the window.

```javascript
new WinBox("WinBox.js", {
    url: "https://nextapps-de.github.io/winbox/"
});
```

--------------------------------

### Custom Styles By Classname

Source: https://nextapps-de.github.io/winbox

Define custom themes using CSS classes and apply them to a WinBox instance.

```css
.winbox.my-theme{
    background: #fff;
}
.winbox.my-theme .wb-body {
    color: #fff;
    background: #131820;
}
.winbox.my-theme .wb-title {
    color: #000;
}
.winbox.my-theme .wb-control {
    filter: invert(1);
}
```

```javascript
new WinBox("Custom CSS (Class)", {
    class: "my-theme",
    mount: document.getElementById("content")
                   .cloneNode(true)
});
```

--------------------------------

### Mount DOM (Singleton) + Auto-Unmount

Source: https://nextapps-de.github.io/winbox

Mount an existing DOM element directly into the window.

```javascript
new WinBox("Mount DOM", {
    mount: document.getElementById("content")
});
```

--------------------------------

### Global Custom Styles

Source: https://nextapps-de.github.io/winbox

CSS rules to customize the appearance of WinBox windows, including gradients, border-radius, and body styling.

```css
.winbox {
    background: linear-gradient(90deg, #ff00f0, #0050ff);
    border-radius: 12px 12px 0 0;
    box-shadow: none;
}

.winbox.min {
    border-radius: 0;
}

.wb-body {
    /* set the width of window border via margin: */
    margin: 4px;
    color: #fff;
    background: #131820;
}

.wb-title {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
}
```

--------------------------------

### Custom Color

Source: https://nextapps-de.github.io/winbox

Configure the window's background color and border width.

```javascript
new WinBox({
    title: "Custom Color",
    background: "#ff005d",
    border: 4
});
```

--------------------------------

### Splitscreen

Source: https://nextapps-de.github.io/winbox

Create two windows side-by-side using percentage-based positioning.

```javascript
new WinBox("Splitscreen (Left)", {
    right: "50%",
    max: true
});

new WinBox("Splitscreen (Right)", {
    left: "50%",
    max: true
});
```

--------------------------------

### Custom Template Layout

Source: https://nextapps-de.github.io/winbox

CSS for custom window layout elements.

```css
.wb-custom {
    background-image: url(demo/icon-github.svg);
    background-size: 17px auto;
}
```

--------------------------------

### Custom Position / Size

Source: https://nextapps-de.github.io/winbox

Set explicit dimensions and center the window.

```javascript
new WinBox({
    title: "Custom Position / Size",
    x: "center",
    y: "center",
    width: "50%",
    height: "50%"
});
```

--------------------------------

### Mount DOM (Cloned)

Source: https://nextapps-de.github.io/winbox

Mount a cloned DOM element into the window.

```html
<div id="backstore" style="display: none">
    <div id="content">
        <h1>Lorem Ipsum</h1>
        <p>Lorem ipsum [...]</p>
        <p>Duis autem vel [...]</p>
        <p>Ut wisi enim [...]</p>
    </div>
</div>
```

```javascript
new WinBox("Mount DOM", {
    mount: document.getElementById("content")
                   .cloneNode(true)
});
```

--------------------------------

### Set innerHTML

Source: https://nextapps-de.github.io/winbox

Inject HTML content directly into the window body.

```javascript
new WinBox({
    title: "Set innerHTML",
    html: "<h1>Lorem Ipsum</h1>"
});
```

--------------------------------

### Custom Scrollbars

Source: https://nextapps-de.github.io/winbox

CSS for styling scrollbars within the WinBox body and a JavaScript snippet to mount content.

```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;
}
```

```javascript
new WinBox("Custom CSS", {
    mount: document.getElementById("content")
                   .cloneNode(true)
});
```

--------------------------------

### Custom Root

Source: https://nextapps-de.github.io/winbox

Specify a custom DOM element as the root container for the window.

```javascript
new WinBox("Custom Root", {
    root: document.querySelector("main")
});
```

--------------------------------

### Custom Border

Source: https://nextapps-de.github.io/winbox

Set a custom border width for the window.

```javascript
new WinBox("Custom Border", {
    border: "0.3em"
});
```

--------------------------------

### Customize Control Icons

Source: https://nextapps-de.github.io/winbox

CSS to modify the appearance and icons of window control buttons.

```css
.wb-control * {
    opacity: 0.65;
}

.wb-control *:hover {
    opacity: 1;
}

.wb-min {
    background-image: url(src/img/min.svg);
    background-size: 15px center;
}

.wb-max {
    background-image: url(src/img/max.svg);
}

.wb-close {
    background-image: url(src/img/close.svg);
}

.wb-full {
    display: none;
}
```

--------------------------------

### Custom Controls

Source: https://nextapps-de.github.io/winbox

Add custom buttons to the window title bar and define their behavior.

```css
.wb-like {
    background-size: 20px auto;
}
.wb-like.active {
    background-image: url(demo/heart-filled.svg) !important;
}
```

```javascript
const winbox = new WinBox("Custom Controls");
winbox.removeControl("wb-max").removeControl("wb-min");
winbox.addControl({
    index: 0,
    class: "wb-like",
    image: "demo/heart.svg",
    click: function(event, winbox){
        // the winbox instance will be passed as 2nd parameter
        console.log(winbox.id);
        // "this" refers to the button which was clicked:
        this.classList.toggle("active");
    }
});
```

--------------------------------

### Custom Icon (Titlebar)

Source: https://nextapps-de.github.io/winbox

Add an icon to the window titlebar.

```javascript
new WinBox({
    title: "Custom Icon",
    icon: "demo/wikipedia.svg",
    background: "#252b4e"
});
```

--------------------------------

### Limit Viewport

Source: https://nextapps-de.github.io/winbox

Define boundaries for the window within the viewport.

```javascript
new WinBox("Limit Viewport", {
    top: 50,
    right: 50,
    bottom: 0,
    left: 50
});
```

--------------------------------

### Modal Window

Source: https://nextapps-de.github.io/winbox

Create a modal window that blocks interaction with the rest of the page.

```javascript
new WinBox("Modal Window", {
    modal: true
});
```
Tokens:
Raw