simple-window-manager

A javascript-only Window Manager

version 2

• the API has changed from v1 to v2
• rollup is used to compile the libraries, so there is no longer a default export: see sample code below
• animations are deprecated for now since they felt slow--I'm open to putting them back in
• finally moved away from style.left and style.top to transform: translate(x, y) (should have done this sooner)
• snapping working much better; screen snapping now optionally responds to window resize
• minimize has been removed since it does the same thing as close (unless we add a taskbar)

features

• basic windowing experience (works great with electron to run multiple windows under one process)
• create normal and modal windows
• optionally snap windows to screen edges and/or other windows
• takes advantage of all the features of the DOM, including undefined width and/or height to automatically adjust size of window based on content
• windows may be resized, maximized, and minimized
• minimize works by minimizing to a small square that can be moved independently. Clicking it restores to its original size and location. Minimizing again moves the small square back to the last minimized location.
• can save and load windowing state (e.g., using localStorage or json files using Electron)
• emits events (using eventemitter3)
• uses javascript animations instead of CSS

rationale

I used Ventus to build internal tools and editors, but I wanted a more configurable solution with a better event model that didn't rely on CSS.

live example

https://davidfig.github.io/window-manager/

installation

npm i simple-window-manager

API documentation

https://davidfig.github.io/window-manager/jsdoc/

sample code

    import { WindowManager } from 'simple-window-manager'
    // or const WindowManager = require('simple-window-manager').WindowManager

    // this is the window manager with one of the default options changed
    const wm = new WindowManager({ backgroundWindow: 'green' });

    // enable window snapping to screen edges and other windows when moving
    wm.snap()

    // create a window    
    const window = wm.createWindow({ width: 500, height: 500, title: 'Test Window' })

    // set content of window
    window.content.style.margin = '10px'
    window.content.innerHTML = 'This is a nifty window.'

License

MIT License
(c) 2020 YOPEY YOPEY LLC by David Figatner