davidfig / window-manager Goto Github PK

View Code? Open in Web Editor NEW

62.0 4.0 11.0 1.65 MB

A javascript-only Window Manager

License: MIT License

JavaScript 100.00%

javascript window windowmanager minimize maximize save electron ui win

window-manager's Introduction

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

window-manager's People

Contributors

Stargazers

Watchers

Forkers

doytsujin paulbruggeman bnwan t-aftanashchuk zerdos robertomalatesta audiorobson agility-one digitaldrreamer droidkita

window-manager's Issues

Finish populating the WindowOptions with all configurable DOM options

Don't use appendChild to reorder the windows, as it causes page reload (e.g., youtube)

Question about Mouse down event

I have some problem when I using some other component that listen for mousedown event.
And i found that it seems related to this line
https://github.com/davidfig/window-manager/blob/master/src/window.js#L727

Does it need to stopPropagation here?

Cannot resize windows.

Hi, I'm playing around with the library and noticed that, on the demo site and using an NPM installation, I cannot get the windows to resize with the grab area on the lower right side. The cursor indicator does change.

Thanks!

snap on window edges should stay on edges when resizing

titlebar: false is not working

Sorry just have one more question. I suppose setting tilebar: false will hide the title bar for that window, but it seems no effect (Or i understand this field incorrectly?)

p.s. I can achieve the "hide titlebar" by setting titlebarHeight: 0px though : )

Snap/grid

Add a snap/grid for connecting windows

Can I use it on client-side?

I'm have only .html file. Can I use this:

<script src="/node_modules/simple-window-manager/src/WindowManager.js"></script>

Error when closing window

Default example not work when specific DOCTYPE html

I tried the basic example, with a simple HTML (empty body)
It work as expected (Snap to browser edge, set default window x, y)
But if i added DOCTYPE html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>wm Example</title>
    <style>
        body {
            background: #aaaaaa;
        }
    </style>
</head>
<body>
    <script src="main.js"></script>
</body>

Snap to browswer edge, and set window position not work.
I think it is related to the body height problem
as state here:
https://stackoverflow.com/questions/1966300/height-100-is-not-working-in-html-when-using-doctype

After adding html, body { height: 100% }, snap to edge work (because body height filled viewport) But the setting window position in createWindow still not work. Do you think of some potential reason? Thank you