Material & macOS Style Dialog Window In JavaScript – VtWindow

Preview:

Description:

VtWindow (Virtual Windows) is a JavaScript plugin to display web content in Google Material or macOS style dialog windows with drag, resize, fullscreen, maximize, close capabilities.

How to use it:

Load the core stylesheet and theme CSS of your choice in the HTML.

<link rel="stylesheet" href="vtwindow.css">
<link rel="stylesheet" href="vtwindow-theme.material.css">
<link rel="stylesheet" href="vtwindow-theme.osx.css">

Load the Material icons for the Material windows.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Load the JavaScript ‘vtwindow.js’ at the end of the HTML page.

<script src="vtwindow.js"></script>

Create the templates for the dialog windows.

<template id="m">
  <div role="dialog" aria-label="" class="vt-window-material">
      <div name="header" class="valign-wrapper deep-purple">
          <span name="title">${content.title}</span>
          <span name="controls">
              <button name="popout" class="btn-flat" title="Deattatch"><i class="material-icons">launch</i></button>
              <button name="minimize" class="btn-flat" title="Minimize"><i class="material-icons">remove</i></button>
              <button name="maximize" class="btn-flat" title="Maximize"><i class="material-icons">zoom_out_map</i></button>
              <button name="close" class="btn-flat" title="Close"><i class="material-icons">close</i></button>
          </span>
      </div>
      <div name="body">
          ${content.body}
          <input type="text">
      </div>
      <div name="footer">
          <div name="grab"></div>
      </div>
  </div>
</template>
<template id="osx">
  <div role="dialog" aria-label="" class="vt-window-osx">
      <div name="header" class="">
          <span name="title">${content.title}</span>
          <span name="controls">
              <button name="close" class="" title="Close"></button>
              <button name="minimize" class="" title="Minimize"></button>
              <button name="maximize" class="" title="Maximize"></button>
              <button name="popout" class="" title="Deattatch"></button>
          </span>
      </div>
      <div name="body">
          ${content.body}
          <input type="text">
      </div>
      <div name="footer">
          <div name="grab"></div>
      </div>
  </div>
</template>

Create a new Virtual Window and specify the template you want to use.

// VtWindow(content, options)
var macOS = new VtWindow(null, { 
    template: osx.innerHTML
});
var googleMaterial = new VtWindow({ 
      title: 'Material Window', 
      body: '<div style="padding: 10px; text-align: center; width: 100%;"><h4>Hello World!</h4></div>' 
    }, { 
      template: m.innerHTML
    }
);

All default options to customize the virtual window.

var options = {
  
    // top position
    top: 10,
    // left position
    left: 10,
    // width
    width: 400,
    // height
    height: 300,
    // enable/disable
    closable: true,
    maximizable: true,
    minimizable: true,
    deatachable: false, //needs polishing
    resizable: true,
    // preserve window order after focusing (disable if you need to use iframes inside windows)
    preserveFocusOrder: true, 
    // mount on new
    autoMount: false, 
    // Turn on optimazations for low end devices
    lowEnd: false,
    // Where the window should be mounted to (cannot be changed after instantiation)
    container: document.body,
    // Template used to construct the window
    template: /*html*/`
      <div role="dialog" aria-label="">
        <div name="header">
          <span name="title"><!-- title --></span>
          <span name="controls">
            <button name="popout">^</button>
            <button name="maximize">+</button>
            <button name="minimize">_</button>
            <button name="close">x</button>
          </span>
        </div>
        <div name="body">
          <!-- body -->
        </div>
        <div name="footer">
          <div name="grab"></div>
        </div>
      </div>
      `,
}

Callback functions.

var options = {
  
    onMinimize: null,
    onMaximize: null,
    onMount: null,
    onUnmount: null,
    onShow: null,
    onHide: null,
    onPopout: null,
    onExitPopout: null,
    onFocus: null,
    onBlur: null,
}

API methods.

myInstance.mount();
myInstance.setTitle('myInstance');
myInstance.setBody(`<div style="padding: 10px; text-align: center; width: 100%;"><h4>Hello World!</h4><p>Try the manipulating the <var>myInstance</var> object on console</p></div>`);
myInstance.top = 220;
myInstance.left = 220;
myInstance.width = 374;
myInstance.height = 206;
myInstance.closable = false;
myInstance.focus();
...

Changelog:

09/24/2018

• JS update