winbox

<h1> <img src="https://cdn.jsdelivr.net/gh/nextapps-de/winbox@master/demo/winbox-gradient.svg" alt="WinBox.js: A modern HTML5 window manager for the web." width="100%"> </h1> <h3>Modern window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source!</h3>

<a href="https://nextapps-de.github.io/winbox/">Demo</a> • <a href="#started">Getting Started</a> • <a href="#options">Options</a> • <a href="#api">API</a> • <a href="#themes">Themes</a> • <a href="#customize">Customize</a> • <a href="CHANGELOG.md">Changelog</a>

Live Demo and Code Examples

<a href="https://nextapps-de.github.io/winbox/">https://nextapps-de.github.io/winbox/ </a>

Support this Project

Hello my name is Thomas, also known as ts-thomas. This is a personal project which I fully made in my free time. It is hosted by the Github account from the company Nextapps where I work to give it more exposure. I have never received any financial support for this project from the company Nextapps as some of you might have guessed, since it is a free and open source project. I'm really happy that WinBox.js is getting so much positive feedback and also feature requests. Please feel free to support me by making a personal donation which helps me a lot to keep this project alive and also to providing all the contribution to keep WinBox.js on a professional top-end level.

<a href="https://opencollective.com/winboxjs/donate" target="_blank" style="margin-right: 10px"> <img src="https://opencollective.com/webpack/donate/button@2x.png?color=blue" height="32" alt="Donate using Open Collective"> </a> <a href="https://github.com/sponsors/ts-thomas/" target="_blank" style="margin-right: 10px"> <img src="https://camo.githubusercontent.com/b932f45963b659dfeb86b77ff29a9eaebe25a734d63a17a176aa82bf34845cf2/68747470733a2f2f696d672e736869656c64732e696f2f7374617469632f76313f6c6162656c3d53706f6e736f72266d6573736167653d254532253944254134266c6f676f3d47697448756226636f6c6f723d253233666538653836" height="32" alt="Donate using Github Sponsors"> </a> <a href="https://liberapay.com/ts-thomas/donate" target="_blank" style="margin-right: 10px"> <img src="https://liberapay.com/assets/widgets/donate.svg" height="32" alt="Donate using Liberapay"> </a> <a href="https://www.patreon.com/user?u=96245532" target="_blank" style="margin-right: 10px"> <img src="https://s3-us-west-1.amazonaws.com/widget-images/become-patron-widget-medium%402x.png" height="32" alt="Donate using Patreon"> </a> <a href="https://salt.bountysource.com/teams/ts-thomas" target="_blank" style="margin-right: 10px"> <img src="https://d2bbtvgnhux6eq.cloudfront.net/assets/logos/alternate-7868987b01474c95f47678727f6657882f6565a36396eb4b637ea53cc5944ff8.svg" height="32" alt="Donate using Bountysource"> </a> <a href="https://www.paypal.com/donate/?hosted_button_id=GEVR88FC9BWRW" target="_blank"> <img src="https://www.paypalobjects.com/webstatic/de_DE/i/de-pp-logo-200px.png" height="32" alt="Donate using PayPal"> </a>  <br><br> Thanks a lot, Thomas (ts-thomas)

Plugins / Add-ons / Extensions

Vue 2 and 3 (a wrapper component that adds the ability to mount Vue components in WinBox.js):<br> <a href="https://github.com/wobsoriano/vue-winbox">https://github.com/wobsoriano/vue-winbox</a>

A React controlled component for WinBox.js, with full Reactful props and state.:<br> <a href="https://github.com/rickonono3/react-winbox">https://github.com/rickonono3/react-winbox</a>

Getting Started

Get Latest Stable Build (Recommended):

<table> <tr> <td colspan=3"> <b><u>Bundle:</u></b> (all assets bundled into one single file: js + css + html + icons) </td> </tr> <tr> <td>winbox.bundle.min.js</td> <td><a href="https://github.com/nextapps-de/winbox/raw/0.2.82/dist/winbox.bundle.min.js" target="_blank">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/dist/winbox.bundle.min.js" target="_blank">https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/dist/winbox.bundle.min.js</a></td> </tr> <tr> <td colspan=3"> <br><b><u>Non-Bundled:</u></b> (js and css are separated, css includes icons as base64) </td> </tr> <tr> <td>winbox.min.js</td> <td><a href="https://github.com/nextapps-de/winbox/raw/0.2.82/dist/js/winbox.min.js" target="_blank">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/dist/js/winbox.min.js" target="_blank">https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/dist/js/winbox.min.js</a></td> </tr> <tr></tr> <tr> <td>winbox.min.css</td> <td><a href="https://github.com/nextapps-de/winbox/raw/0.2.82/dist/css/winbox.min.css" target="_blank">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/dist/css/winbox.min.css" target="_blank">https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/dist/css/winbox.min.css</a></td> </tr> <tr> <td colspan=3"> <br><b><u>Sources:</u></b> (not bundled at all, images as url to original resources) </td> </tr> <tr> <td>ES6 Modules</td> <td><a href="https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nextapps-de/winbox/tree/0.2.82/src/js" target="_blank">Download</a></td> <td>The <i>/src/js</i> folder of this Github repository</td> </tr> <tr></tr> <tr> <td>LESS Files (source)</td> <td><a href="https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nextapps-de/winbox/tree/0.2.82/src/css" target="_blank">Download</a></td> <td>The <i>/src/css</i> folder of this Github repository</td> </tr> <tr></tr> <tr> <td>winbox.css (compiled)</td> <td><a href="https://github.com/nextapps-de/winbox/raw/0.2.82/src/css/winbox.css" target="_blank">Download</a></td> <td><a href="https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/src/css/winbox.css" target="_blank">https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/src/css/winbox.css</a></td> </tr> <tr></tr> <tr> <td>src.zip</td> <td><a href="https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nextapps-de/winbox/tree/0.2.82/dist" target="_blank">Download</a></td> <td>Download all source files including image original resources.</td> </tr> </table>

Get Latest (NPM):

npm install winbox

Use Bundled Version (Recommended)

The bundled version includes all assets like js, css, html and icon images as base64.

A best practice is to load the library as async and use some modern preloading mechanism:

<html>
<head>
    <link rel="preload" href="winbox.bundle.min.js" as="script">
</head>
<body>
    <!--
    
    HTML CONTENT
    
    -->
    <!-- BOTTOM OF BODY -->
    <script src="winbox.bundle.min.js" async></script>
    <!-- YOUR SCRIPT -->
    <script src="my-script.js" defer></script>
</body>
</html>

When you get troubles with unavailable references then remove the async or defer from this example and invest some minutes later to find out how you can properly load js assets asynchronously today.

Use Non-Bundled Version

The non-bundled version needs to load js and css separately (css already includes icons as base64).

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

You can also load the non-bundled version in the same way.

ES6 Modules

The ES6 modules are located in src/js/. But you need to load the stylesheet file explicitly since this is just automatically loaded by the bundled version.

<head>
    <link rel="stylesheet" href="dist/css/winbox.min.css">
</head>

<script type="module">
  import WinBox from "./src/js/winbox.js";
</script>

You can also load modules via CDN, e.g.:

<script type="module">
  import WinBox from "https://unpkg.com/winbox@0.2.82/src/js/winbox.js";
</script>

The ES6 modules are not minified. Please use your favored bundler or build tool for this purpose.

Overview

Constructor:

new <a href="#winbox.new">WinBox(title, options<key: value>)</a> : winbox

Global methods:

<a href="#winbox.new">WinBox.new(title, options<key: value>)</a> : winbox
<a href="#winbox.stack">WinBox.stack()</a> : Array<winbox>

Instance member methods:

<a href="#winbox.mount">winbox.mount(src)</a>
<a href="#winbox.unmount">winbox.unmount(dest)</a>
<a href="#winbox.setUrl">winbox.setUrl(string)</a>
<a href="#winbox.setTitle">winbox.setTitle(string)</a>
<a href="#winbox.setIcon">winbox.setIcon(url)</a>
<a href="#winbox.move">winbox.move(x, y)</a>
<a href="#winbox.resize">winbox.resize(width, height)</a>
<a href="#winbox.close">winbox.close(boolean)</a>
<a href="#winbox.focus">winbox.focus(state)</a>
<a href="#winbox.blur">winbox.blur(state)</a>
<a href="#winbox.hide">winbox.hide(state)</a>
<a href="#winbox.show">winbox.show(state)</a>
<a href="#winbox.minimize">winbox.minimize(state)</a>
<a href="#winbox.maximize">winbox.maximize(state)</a>
<a href="#winbox.fullscreen">winbox.fullscreen(state)</a>
<a href="#winbox.restore">winbox.restore(state)</a>
<a href="#winbox.setBackground">winbox.setBackground(string)</a>
<a href="#winbox.addClass">winbox.addClass(name)</a>
<a href="#winbox.removeClass">winbox.removeClass(name)</a>
<a href="#winbox.hasClass">winbox.hasClass(name)</a>
<a href="#winbox.toggleClass">winbox.toggleClass(name)</a>
<a href="#winbox.addControl">winbox.addControl(options)</a>
<a href="#winbox.removeControl">winbox.removeControl(name)</a>

Instance properties (readonly):

<a href="#winbox.id">winbox.id</a>
<a href="#winbox.index">winbox.index</a>
<a href="#winbox.window">winbox.window</a>
<a href="#winbox.body">winbox.body</a>

Instance properties (writable):

<a href="#winbox.x">winbox.x</a>
<a href="#winbox.y">winbox.y</a>
<a href="#winbox.width">winbox.width</a>
<a href="#winbox.height">winbox.height</a>
<a href="#winbox.top">winbox.top</a>
<a href="#winbox.right">winbox.right</a>
<a href="#winbox.bottom">winbox.bottom</a>
<a href="#winbox.left">winbox.left</a>
<a href="#winbox.minwidth">winbox.minwidth</a>
<a href="#winbox.minheight">winbox.minheight</a>
<a href="#winbox.maxwidth">winbox.maxwidth</a>
<a href="#winbox.maxheight">winbox.maxheight</a>

Instance state boolean properties (readonly):

<a href="#winbox.min">winbox.min</a>
<a href="#winbox.max">winbox.max</a>
<a href="#winbox.full">winbox.full</a>
<a href="#winbox.hidden">winbox.hidden</a>
<a href="#winbox.focused">winbox.focused</a>

Callback methods:

<a href="#winbox.oncreate">winbox.oncreate</a>
<a href="#winbox.onshow">winbox.onshow</a>
<a href="#winbox.onhide">winbox.onhide</a>
<a href="#winbox.onclose">winbox.onclose</a>
<a href="#winbox.onfocus">winbox.onfocus</a>
<a href="#winbox.onblur">winbox.onblur</a>
<a href="#winbox.onmove">winbox.onmove</a>
<a href="#winbox.onresize">winbox.onresize</a>
<a href="#winbox.onfullscreen">winbox.onfullscreen</a>
<a href="#winbox.onmaximize">winbox.onmaximize</a>
<a href="#winbox.onminimize">winbox.onminimize</a>
<a href="#winbox.onrestore">winbox.onrestore</a>

Options

<table> <tr></tr> <tr> <td>Option</td> <td>Values</td> <td>Description</td> </tr> <tr> <td>id</td> <td>number | string</td> <td>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