dextop

provides a minimal window manager in your browser

Installation | Example | Usage | License

Installation

With npm do

npm install dextop

or use a CDN like

<script src="https://unpkg.com/dextop/dist/dextop.js"></script>

Example

Try Codepen demo online, see example folder on GitHub, or do the following locally

1. Clone this repo.
2. Install deps: npm install.
3. Start dev server: npm start.

Usage

Start with an empty div in your HTML, for example

<div id="my-dextop-window"></div>

To import DextopWindow choose your favourite syntax among:

• const DextopWindow = require('dextop').Window
• import { DextopWindow } from 'dextop'

Create a DextopWindow instance, add some content.

const myDiv = document.querySelector('#my-dextop-window')
 
const dextopWin = new DextopWindow(myDiv, { width: 400, height: 200 })
 
dextopWin.content.innerHTML = `<p>My content<p>`

First constructor argument is a DOM element, second argument is an object to provide the following options:

name	default
autohide	true
width	400
height	300
color	'rgba(0, 0, 0, 0.1)'
x	0
y	0
border	1
resizerSize	35
toolbarHeight	28

The content attribute holds a div which class is dextop-content, you can optionally style it with a CSS like the following.

.dextop-content {
  overflow: auto;
 
  /* Disable text selection */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
 
  /* Disable dragging */
  -webkit-user-drag: none;
          user-drag: none;
}

Class DextopWindow inherits from EventEmitter, it is possible to listen to events like in the following snippet.

dextop.on('move', ({ x, y }) => {
  console.log('updated position', x, y)
})

The following events are emitted:

name	data
move	{ x, y }
resize	{ width, height }

License

MIT