windowmanager

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Home - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav> <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading">C<a href="BoundingBox.html">BoundingBox</a></li><li class="nav-item">F<a href="BoundingBox.html#clone">clone</a></li><li class="nav-item">F<a href="BoundingBox.html#difference">difference</a></li><li class="nav-item">F<a href="BoundingBox.html#getArea">getArea</a></li><li class="nav-item">F<a href="BoundingBox.html#getBoundingBox">getBoundingBox</a></li><li class="nav-item">F<a href="BoundingBox.html#getCenteredOnPosition">getCenteredOnPosition</a></li><li class="nav-item">F<a href="BoundingBox.html#getCenterPosition">getCenterPosition</a></li><li class="nav-item">F<a href="BoundingBox.html#getColliding">getColliding</a></li><li class="nav-item">F<a href="BoundingBox.html#getCollisionMesh">getCollisionMesh</a></li><li class="nav-item">F<a href="BoundingBox.html#getDistanceSquaredToPoint">getDistanceSquaredToPoint</a></li><li class="nav-item">F<a href="BoundingBox.html#getDistanceToPoint">getDistanceToPoint</a></li><li class="nav-item">F<a href="BoundingBox.html#getEdgeClosest">getEdgeClosest</a></li><li class="nav-item">F<a href="BoundingBox.html#getEdgeClosestOrder">getEdgeClosestOrder</a></li><li class="nav-item">F<a href="BoundingBox.html#getEdgeTouching">getEdgeTouching</a></li><li class="nav-item">F<a href="BoundingBox.html#getHeight">getHeight</a></li><li class="nav-item">F<a href="BoundingBox.html#getIntersection">getIntersection</a></li><li class="nav-item">F<a href="BoundingBox.html#getOtherEdgeTouching">getOtherEdgeTouching</a></li><li class="nav-item">F<a href="BoundingBox.html#getPosition">getPosition</a></li><li class="nav-item">F<a href="BoundingBox.html#getSize">getSize</a></li><li class="nav-item">F<a href="BoundingBox.html#getSnapDelta">getSnapDelta</a></li><li class="nav-item">F<a href="BoundingBox.html#getWidth">getWidth</a></li><li class="nav-item">F<a href="BoundingBox.html#isColliding">isColliding</a></li><li class="nav-item">F<a href="BoundingBox.html#isContains">isContains</a></li><li class="nav-item">F<a href="BoundingBox.html#isNaN">isNaN</a></li><li class="nav-item">F<a href="BoundingBox.html#isTouching">isTouching</a></li><li class="nav-item">F<a href="BoundingBox.html#moveBy">moveBy</a></li><li class="nav-item">F<a href="BoundingBox.html#moveTo">moveTo</a></li><li class="nav-item">F<a href="BoundingBox.html#resizeTo">resizeTo</a></li><li class="nav-item">F<a href="BoundingBox.html#set">set</a></li><li class="nav-item">F<a href="BoundingBox.html#someColliding">someColliding</a></li><li class="nav-item">F<a href="BoundingBox.html#someContains">someContains</a></li><li class="nav-item">F<a href="BoundingBox.html#someTouching">someTouching</a></li><li class="nav-heading">C<a href="CollisionMesh.html">CollisionMesh</a></li><li class="nav-item">F<a href="CollisionMesh.html#clone">clone</a></li><li class="nav-item">F<a href="CollisionMesh.html#getBoundingBox">getBoundingBox</a></li><li class="nav-item">F<a href="CollisionMesh.html#getColliding">getColliding</a></li><li class="nav-item">F<a href="CollisionMesh.html#getCollisionMesh">getCollisionMesh</a></li><li class="nav-item">F<a href="CollisionMesh.html#getHeight">getHeight</a></li><li class="nav-item">F<a href="CollisionMesh.html#getPosition">getPosition</a></li><li class="nav-item">F<a href="CollisionMesh.html#getSize">getSize</a></li><li class="nav-item">F<a href="CollisionMesh.html#getWidth">getWidth</a></li><li class="nav-item">F<a href="CollisionMesh.html#isColliding">isColliding</a></li><li class="nav-item">F<a href="CollisionMesh.html#isContains">isContains</a></li><li class="nav-item">F<a href="CollisionMesh.html#isTouching">isTouching</a></li><li class="nav-item">F<a href="CollisionMesh.html#moveBy">moveBy</a></li><li class="nav-item">F<a href="CollisionMesh.html#moveTo">moveTo</a></li><li class="nav-item">F<a href="CollisionMesh.html#someColliding">someColliding</a></li><li class="nav-item">F<a href="CollisionMesh.html#someContains">someContains</a></li><li class="nav-item">F<a href="CollisionMesh.html#someTouching">someTouching</a></li><li class="nav-heading">C<a href="EventHandler.html">EventHandler</a></li><li class="nav-item">F<a href="EventHandler.html#addPipe">addPipe</a></li><li class="nav-item">F<a href="EventHandler.html#clearEvent">clearEvent</a></li><li class="nav-item">F<a href="EventHandler.html#emit">emit</a></li><li class="nav-item">F<a href="EventHandler.html#off">off</a></li><li class="nav-item">F<a href="EventHandler.html#on">on</a></li><li class="nav-item">F<a href="EventHandler.html#once">once</a></li><li class="nav-item">F<a href="EventHandler.html#removePipe">removePipe</a></li><li class="nav-heading">C<a href="Layout.html">Layout</a></li><li class="nav-item">F<a href="Layout.html#.getAll">getAll</a></li><li class="nav-item">F<a href="Layout.html#.getAllTabbed">getAllTabbed</a></li><li class="nav-item">F<a href="Layout.html#.getByID">getByID</a></li><li class="nav-item">F<a href="Layout.html#_changeActiveWindow">_changeActiveWindow</a></li><li class="nav-item">F<a href="Layout.html#_createTabbedLayoutItem">_createTabbedLayoutItem</a></li><li class="nav-item">F<a href="Layout.html#_createTiledLayoutItem">_createTiledLayoutItem</a></li><li class="nav-item">F<a href="Layout.html#_tabbed">_tabbed</a></li><li class="nav-item">F<a href="Layout.html#_tiled">_tiled</a></li><li class="nav-item">F<a href="Layout.html#addWindow">addWindow</a></li><li class="nav-item">F<a href="Layout.html#getWindow">getWindow</a></li><li class="nav-item">F<a href="Layout.html#getWindows">getWindows</a></li><li class="nav-item">F<a href="Layout.html#removeWindow">removeWindow</a></li><li class="nav-heading">C<a href="Position.html">Position</a></li><li class="nav-heading">C<a href="Size.html">Size</a></li><li class="nav-heading">C<a href="Vector.html">Vector</a></li><li class="nav-item">F<a href="Vector.html#add">add</a></li><li class="nav-item">F<a href="Vector.html#clone">clone</a></li><li class="nav-item">F<a href="Vector.html#distance">distance</a></li><li class="nav-item">F<a href="Vector.html#distanceSquared">distanceSquared</a></li><li class="nav-item">F<a href="Vector.html#getBoundingBox">getBoundingBox</a></li><li class="nav-item">F<a href="Vector.html#getCollisionMesh">getCollisionMesh</a></li><li class="nav-item">F<a href="Vector.html#getVector">getVector</a></li><li class="nav-item">F<a href="Vector.html#isNaN">isNaN</a></li><li class="nav-item">F<a href="Vector.html#moveBy">moveBy</a></li><li class="nav-item">F<a href="Vector.html#moveTo">moveTo</a></li><li class="nav-item">F<a href="Vector.html#set">set</a></li><li class="nav-item">F<a href="Vector.html#setMax">setMax</a></li><li class="nav-item">F<a href="Vector.html#setMin">setMin</a></li><li class="nav-item">F<a href="Vector.html#subtract">subtract</a></li><li class="nav-heading">C<a href="Window.html">Window</a></li><li class="nav-item">F<a href="Window.html#.getAll">getAll</a></li><li class="nav-item">F<a href="Window.html#.getByID">getByID</a></li><li class="nav-item">F<a href="Window.html#.getCurrent">getCurrent</a></li><li class="nav-item">F<a href="Window.html#.getMain">getMain</a></li><li class="nav-item">F<a href="Window.html#addPipe">addPipe</a></li><li class="nav-item">F<a href="Window.html#bringToFront">bringToFront</a></li><li class="nav-item">F<a href="Window.html#clearEvent">clearEvent</a></li><li class="nav-item">F<a href="Window.html#close">close</a></li><li class="nav-item">F<a href="Window.html#dock">dock</a></li><li class="nav-item">F<a href="Window.html#emit">emit</a></li><li class="nav-item">F<a href="Window.html#focus">focus</a></li><li class="nav-item">F<a href="Window.html#getBounds">getBounds</a></li><li class="nav-item">F<a href="Window.html#getHeight">getHeight</a></li><li class="nav-item">F<a href="Window.html#getPosition">getPosition</a></li><li class="nav-item">F<a href="Window.html#getSize">getSize</a></li><li class="nav-item">F<a href="Window.html#getTitle">getTitle</a></li><li class="nav-item">F<a href="Window.html#getWidth">getWidth</a></li><li class="nav-item">F<a href="Window.html#hide">hide</a></li><li class="nav-item">F<a href="Window.html#isClosed">isClosed</a></li><li class="nav-item">F<a href="Window.html#isHidden">isHidden</a></li><li class="nav-item">F<a href="Window.html#isMaximized">isMaximized</a></li><li class="nav-item">F<a href="Window.html#isMinimized">isMinimized</a></li><li class="nav-item">F<a href="Window.html#isReady">isReady</a></li><li class="nav-item">F<a href="Window.html#isResizable">isResizable</a></li><li class="nav-item">F<a href="Window.html#isRestored">isRestored</a></li><li class="nav-item">F<a href="Window.html#isShown">isShown</a></li><li class="nav-item">F<a href="Window.html#maximize">maximize</a></li><li class="nav-item">F<a href="Window.html#minimize">minimize</a></li><li class="nav-item">F<a href="Window.html#moveBy">moveBy</a></li><li class="nav-item">F<a href="Window.html#moveTo">moveTo</a></li><li class="nav-item">F<a href="Window.html#off">off</a></li><li class="nav-item">F<a href="Window.html#on">on</a></li><li class="nav-item">F<a href="Window.html#once">once</a></li><li class="nav-item">F<a href="Window.html#onReady">onReady</a></li><li class="nav-item">F<a href="Window.html#removePipe">removePipe</a></li><li class="nav-item">F<a href="Window.html#resizable">resizable</a></li><li class="nav-item">F<a href="Window.html#resizeTo">resizeTo</a></li><li class="nav-item">F<a href="Window.html#restore">restore</a></li><li class="nav-item">F<a href="Window.html#setBounds">setBounds</a></li><li class="nav-item">F<a href="Window.html#setTitle">setTitle</a></li><li class="nav-item">F<a href="Window.html#show">show</a></li><li class="nav-item">F<a href="Window.html#undock">undock</a></li><li class="nav-heading">Namespaces</li><li class="nav-heading">N<a href="geometry.html">geometry</a></li><li class="nav-heading">N<a href="messagebus.html">messagebus</a></li><li class="nav-item">F<a href="messagebus.html#.off">off</a></li><li class="nav-item">F<a href="messagebus.html#.on">on</a></li><li class="nav-item">F<a href="messagebus.html#.send">send</a></li><li class="nav-heading">N<a href="windowmanager.html">windowmanager</a></li><li class="nav-item">F<a href="windowmanager.html#.isReady">isReady</a></li><li class="nav-item">F<a href="windowmanager.html#.onReady">onReady</a></li><li class="nav-heading"><a href="global.html">Globals</a></li><li class="nav-item">F<a href="global.html#load">load</a></li> </nav> <div id="main"> <section class="readme"> <article><h1>windowmanager.js</h1><a href="https://www.npmjs.com/package/windowmanager"><img src="https://img.shields.io/npm/v/windowmanager.svg?style=flat" alt="NPM Status"></a> <a href="https://travis-ci.org/EikosPartners/windowmanagerjs"><img src="https://travis-ci.org/EikosPartners/windowmanagerjs.svg?branch=master" alt="Build Status"></a> <a href="https://david-dm.org/EikosPartners/windowmanagerjs?type=dev"><img src="https://david-dm.org/EikosPartners/windowmanagerjs/dev-status.svg" alt="devDependencies Status"></a> A framework to manage multiple dockable HTML windows. This extension is designed to support multiple different different encapsulation runtimes. See <a href="https://eikospartners.github.io/windowmanagerjs/">API Documentation</a> for more information. Runtimes supported: <ul> <li>Modern Web Browsers (Chrome, Firefox, IE, Edge, Safari)</li> <li><a href="https://openfin.co/">OpenFin</a></li> <li><a href="http://electron.atom.io/">Electron</a></li> </ul> Future runtimes: <ul> <li><a href="http://nwjs.io/">NW.js</a></li> </ul> <h2>Examples</h2>You can see a live demo at <a href="http://blotter.eikospartners.com/install">Eikos Partners Blotter Demonstration</a>. An open source example can be found at: https://github.com/aesalazar/windowmanagerjsdemo A basic example to get started: <pre class="prettyprint source lang-javascript"><code>// Create a new window: let childWindow = new windowmanager.Window({ url: "child.html", // Loads "child.html" based on the current window's url. width: 500, height: 500 }); // Execute code when window is ready for commands: childWindow.onReady(() => { childWindow.focus(); // Set focus to childWindow. }); // Use the layout manager. let state = { width: 400, height: 400, url: 'child.html', title: 'Child Window', frame: false }; let configs = [state, state, state]; let layout = new windowmanager.Layout('tabbed', 'layout-div', configs);</code></pre><h2>Installation - NPM package / express server</h2><pre class="prettyprint source lang-bash"><code>npm install --save windowmanager</code></pre>Loading the package via <code>require</code> in node only gives you access to the script paths to make it easier to serve up the script: <pre class="prettyprint source lang-javascript"><code>const windowmanager = require('windowmanager'); ... // Start windowmanager in this node instance: windowmanager.start({ // Optionally override the windowmanager package.json options for Electron's runtime: endpoint: "http://localhost:5000/", // The starting window's page location config: "http://localhost:5000/app.json" // Where the OpenFin/Electron app.json startup file is }); ... // Set up to access windowmanager debug, minified and map scripts via root url: // Will give access to windowmanager through: example.com/windowmanager.js app.use('/', express.static(windowmanager.distPath, { index: false })); // Set up access to windowmanager.js via get: app.get('/js/windowmanager.js', function (req, res) { res.sendFile(windowmanager.debug.scriptPath); }); app.get('/js/windowmanager.min.js', function (req, res) { res.sendFile(windowmanager.min.scriptPath); });</code></pre><h2>Installation - dist script</h2>Manually download either one of the following scripts from the dist folder (which contains the latest nightly version), and add it to your application. NOTE: Bundling or compiling with babelify will break the script. <ul> <li><a href="https://raw.githubusercontent.com/EikosPartners/windowmanagerjs/master/dist/windowmanager.js">windowmanager</a></li> <li><a href="https://raw.githubusercontent.com/EikosPartners/windowmanagerjs/master/dist/windowmanager.min.js">windowmanager.min</a> </li> </ul> <h4>Example installation with dist script and webpack</h4><ul> <li>Download dist script</li> <li>Put in its own folder in root directory </li> <li>in webpack config, under your <code>module:</code> <code>rules:</code> <code>test: /\.js$/,</code> make sure to <code>exclude:/folderName/</code></li> <li>npm install <code>copy-webpack-plugin</code> and </li> <li>in webpack config, import <code>const CopyWebpackPlugin = require('copy-webpack-plugin')</code></li> <li>under plugins include<pre class="prettyprint source"><code> new CopyWebpackPlugin([ {from:'folderName',to:'folderName'} ]),</code></pre></li> <li>in your entry point html page, include <code><script src="./folderName/windowmanager.js></script></code></li> </ul></article> </section> </div> <footer> Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Mon Feb 12 2018 12:09:04 GMT-0500 (EST) using the Minami theme. </footer> <script>prettyPrint();</script> <script src="scripts/linenumber.js"></script> </body> </html>