Draggable/Resizable/Maximizable/Minimizable Dialog Window Library – winbox

Preview:

Description:

winbox is an open-source, zero-dependency JavaScript library for creating draggable, resizable, maximizable, and minimizable dialog windows on the app.

More Features:

• 2 pre-built themes: Light and Modern.
• Highly customizable.
• Allows to expand the window to fullscreen.
• Allows to minimize the modal into a tab dock.
• Supports any content: inline, iframe, HTML.

How to use it:

1. Import the winbox’s JavaScript and CSS into the document.

<!-- Core Stylesheet -->
<link rel="stylesheet" href="dist/css/winbox.min.css">
<!-- Themes -->
<link rel="stylesheet" href="dist/css/themes/modern.min.css">
<link rel="stylesheet" href="dist/css/themes/white.min.css">
<!-- Core JavaScript -->
<script src="dist/js/winbox.min.js"></script>
<!-- OR ... -->
<script src="dist/winbox.bundle.js"></script>

2. Create a default dialog window and specify the title & message as follows:

new WinBox("Default Dialog", {
    title: "Default Dialog",
    html: "<h1>HTML Content</h1>"
});

3. Or load content from an element within the document.

<div id="backstore" style="display: none">
  <div id="content">
    Dialog Content Here
  </div>
</div>

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

4. Or load external content in an iframe.

new WinBox("Iframe Example", {
    url: "/path/to/page/"
});

5. Specify the theme of the dialog window.

new WinBox("Iframe Example", {
    class: "modern", // 'white', or 'customTheme'
});

6. More options to customize the dialog window.

new WinBox("With Options", {
    // unique ID
    id: "my-window",
    // CSS z-index
    index: 10,
    // root element
    mount: document.body,
    // width/height (px or %)
    width: 200,
    height: 200,
    minwidth: 0,
    maxwidth: 400,
    minheight: 0,
    maxheight: 400,
    // auto resize
    autosize: true,
    // modal mode
    modal: false,
    // background color
    background: "#fff",
    // border width
    border: 4,
    // x/y position
    x: "center",
    y: "center",
    // maximize/minimize the dialog on init
    max: false,
    min: false,
    // hide the dialog on init
    hidden: false,
    // position options
    top: 50,
    right: 50,
    bottom: 0,
    left: 50,
    // custom icon in title bar
    icon: '',
    // additional CSS classes
    class: '',
});

7. Callback functions.

new WinBox("With Options", {
    oncreate: function(options){
      // do something
    },
    onshow: function(){
      // do something
    },
    onhide: function(){
      // do something
    },
    onfocus: function(){
      // do something
    },
    onblur: function(){
      // do something
    },
    onresize: function(width, height){
      // do something
    },
    onmove: function(x, y){
      // do something
    },
    onclose: function(force){
      // do something
    },
    onfullscreen: function(){
      // do something
    },
    onminimize: function(){
      // do something
    },
    onmaximize: function(){
      // do something
    },
    onrestore: function(){
      // do something
    },
});

8. API methods & properties.

const myBox = WinBox(title, options);
// methods
winbox.mount(src)
winbox.unmount(dest)
winbox.setUrl(string)
winbox.setTitle(string)
winbox.setIcon(url)
winbox.move(x, y)
winbox.resize(width, height)
winbox.close(boolean)
winbox.focus(state)
winbox.blur(state)
winbox.hide(state)
winbox.show(state)
winbox.minimize(state)
winbox.maximize(state)
winbox.fullscreen(state)
winbox.restore(state)
winbox.setBackground(string)
winbox.addClass(name)
winbox.removeClass(name)
// properties
winbox.id
winbox.index
winbox.window
winbox.body
winbox.x
winbox.y
winbox.width
winbox.height
winbox.top
winbox.right
winbox.bottom
winbox.left
winbox.minwidth
winbox.minheight
winbox.maxwidth
winbox.maxheight
winbox.min
winbox.max
winbox.full
winbox.hidden
winbox.focused

Changelog:

v0.2.6 (09/06/2022)

• use passive listeners

v0.2.5 (08/20/2022)

• support custom toolbar icon
• support custom toolbar controls
• support custom toolbar height
• support custom window index
• support window autosize
• support new callbacks
• improve drag pointer calculation when outside the viewport
• improve toolbar template
• improve window states
• improve performance

v0.2.2 (08/08/2022)

• update dependencies

v0.2.1 (11/04/2021)

• new release and hotfix

v0.2.0 (05/27/2021)

• Add split screen feature

v0.1.91 (05/08/2021)

• fix lost pointer when hovering iframe