Golden Layout

Golden Layout is a Javascript layout manager which enables you to layout components in a web page and re-arrange them with drag and drop. Its features include:

Native popup windows
Touch support
Support for application frameworks such as Angular and Vue
Virtual components
Comprehensive API
Load and save layouts
Focus components
Completely themeable
Works in modern browsers (Firefox, Chrome)
Responsive design

This fork has a number of advances over the semi-unmaintained upstream. The main feature is optional use of the HTML Drag and Drop API. This enables:

Drag from one window and drop to another.
Drag from one window and drop to desktop as new window (popout).
Cancel a drag (usually by typing Escape before releasing mouse).
Optionally drag-image (proxy) is snapstop of dragged component.

Other features include:

Customizable tab-bar header.
Smart display of tabs when space gets tight.
If there is a single stack (one row and columne but posssible multiple tabs) the tab-bar header can be embedded inside a custom (html) titlebar.
Component elements are not re-parented when moved within a window. This avoide breaking iframes, sockets, etc.
If running under Qt or Electron (experimental) it is possible to use virtual binding with each compoent in the separate browsercontext. Then you can move components between top-level windows by without serializing the contents.

This is used in DomTerm.

The API is not stable or well documented nor compatible with upstream. Most specifically, I feel no need to be compatible with the old mechanisms for Binding Components as they are overly complicated and redundant. The default binding method will not move a component's element in the DOM tree when you moving within the original window. Thus iframes and sockets will remain valid.

Since upstream is inactive, I see no point in creating clean pull requests. Likewise, documenting my changes or cleaning up the APIs is not a priority unless I see signs of actual users. If you do want to use my fork, feel free to create an Issue or email me if you need help - that may spur me to clean things up a bit.

Installation

From a git clone

npm install
npm run build:bundles

Copy the file dist/bundle/esm/golden-layout.min.js (if using EcmaScript modules, as recommended) or dist/bundle/umd/golden-layout.min.js (if using UMD modules) to a folder (for example lib) inside your application. Import it from there, for example with:

import { GoldenLayout } from '../lib/golden-layout/golden-layout.min.js'

Also recursively copy the contents of dist/css to where you application can read them,

Using npm

The library can be installed into an application package with the npm command:
npm i golden-layout However, this may get you a very old version.

More information

For more information, please refer to the Golden Layout website

License

PerBothner/golden-layout

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages