10 ms·
Show HN: GoldenLayout – JavaScript layout manager with multi-screen support
- jph 11y agoWonderful implementation. Especially impressive is the popoout windows, and the implementation of the cross-window communication hub. Kudos!
- safeharbourio 11y agoCertainly looks promising, but add your github url on the front page prominently! i had to google it to find it.
- wolframhempel 11y agoit's in the footer: https://github.com/deepstreamIO/golden-layout https://github.com/deepstreamIO/golden-layout
- NKCSS 11y agoLooks and feels very slick, nice job! :)
- d--b 11y agoWow, this is AWESOME!!!
- grimgrin 11y agoThe only movement that got me hung up was taking the very top standalone tab (Fnts 100), going to move it, and then trying to return it to the top as a standalone tab. The way I discovered to do it was a series of additional moves. Obviously this is very slick and looks great, though.
- eterm 11y agoLooks very good, one issue though: After maximising, I expected the "restore" like icon to get back to the state I was previously, but it seemed to pop-out instead which was very unexpected. It seems I should have chosen "minimize" looking icon instead, which doesn't minimize but instead puts back to tiled size. Also, when closing a pop-out I would expect it to re-integrate rather than closing completely, but perhaps I'm unusual in my expectations.
- wolframhempel 11y agoCheers. It's true, there is no "minimizing" as such, it's just a toggle between maximised and original state. Similarly the close icon does close a popout window, popping it back in can be done via the button in the bottom right
- robmcm 11y agoI found after a mixture of tear out and maximizing and minimizing the widgets end up half way down the page. To reproduce (Chrome 49.0.x): Take "Fnts 100" maximize, undock, redock, meximize (repeat if needed).
- azurelogic 11y agoWe found this a few months ago. It was perfect for the application we were looking to build. I had to invert his recommended process for mixing it with Angular, allowing Angular to bootstrap naturally, then initializing GL. If you go that route, you just have to manually wire the window resize to resize GL.
- Blinkky 11y agoI'm using http://docker.webcabin.org/ http://docker.webcabin.org/ and I love it. This looks great though!
- vdm 11y agohttps://terminal.sexy/ https://terminal.sexy/ is a better demo of Golden Layout's capabilities.
- 51Cards 11y agoVery nice working example but I don't understand why they would maintain the X to close modules when it is so easy to close required functionality (like Save). Are you unable to remove the Close button and they had to add "Reset Layout" to get around it? To me most of those modules shouldn't be permitted to be closed.
- thethington 11y agoThis looks very nice - I've been looking for something like this for a future project.
- takno 11y agoLooks nice, and the payload is impressively small. I'd be happier if there weren't 4 separate downloads of JQuery on the demo page though
- mikegioia 11y agoThis is great work, but any scrollbar adjacent to a draggable divider isn't usable :(
- martingordon 11y agoThe demos don't work on my iPad Pro... 1. Long pressing on a window title brings a smaller window under my finger and when I let go the window disappears. 2. I can maximize the window, but when I try to restore/minimize I get a new CodePen window opening. 3. On a stack, when I tap a tab, it highlights, but I can't get it to activate. Long pressing does the same as (1) and also appears to rearrange the tabs.
- HappyTypist 11y agoThat's nice, but it's terrible on my iPhone.
- wolframhempel 11y agoyup, its a paradigm that doesn't translate too well to mobile - so mobile support is only rudimentary (at best)
- deleted 11y ago[deleted]
- andy_ppp 11y agoWould it not be possible just turn the whole layout into an accordion on mobile?
- wolframhempel 11y agoyup, you can easily do this programmatically
- awalGarg 11y agoNeat! I was making something like this a while ago, but got dragged away. One thing I was implementing there that I'd push here as a feature-request: Provide a simple api to allow binding keyboard shortcuts for common manipulation of the layout, like closing a panel, switching a tab etc. That'd be great for complex applications, specially the ones which use this lib for making native apps based on electron/node-webkit etc.
- dovyski 11y agoThat's an awesome lib! I got confused regarding the license though. The README file says dual licensed as CC-BY-NC 4.0 or GPL 3, but the LICENSE file in the repo says MIT. The FAQ[0] also mentions MIT. I assume MIT is the right license. [0] https://www.golden-layout.com/faq/ https://www.golden-layout.com/faq/
- wolframhempel 11y agoGood find, thanks. I've changed it, it's just MIT
- dovyski 11y agoNice! And thanks for using such a permissive license like MIT :)
- alistproducer2 11y agoThat is pretty awesome work! I'm working on an EHR app and may use this.
- crudbug 11y agoGreat work. deepstream [0] is doing some exceptional work in real-time web application domain. [0] https://deepstream.io https://deepstream.io
- karmakaze 11y agoI remember this! I used it to prototype an HTML layout replacement for a Java GUI. Then I moved on to other companies and projects. Still looks great.
- pjgomez 11y agoFantastic work, thank you for sharing
- oskarer 11y agoLooks really cool, would love to use this in a project of mine. Is it possible to attach a layout to an existing react component and run it inside that? From the documentation I see that passing a DOM element to init() is possible, not sure if that's going to make it in my case..
- wolframhempel 11y agoyou can create a layout in any DOM element, just pass it as the second argument to the constructor `new GoldenLayout( config, element)` - getting it to work well with reacts component-lifecycle might be a bit more of a challenge though
- wertop 11y agoDoes anyone know anything like this that would work well within a React based app?
- squeaky-clean 11y agoI don't have much experience with React, so maybe I can't tell, but is there any reason why this won't work? It even has a link to a tutorial on how to use it with React on the front page. https://www.golden-layout.com/tutorials/getting-started-react.html https://www.golden-layout.com/tutorials/getting-started-reac...
- wertop 11y agoDoh - RTFM as usual. Thanks.
- jasongrout 11y agoCool, thanks for sharing! Another project providing layouts we've been using in the Jupyter project is the phosphor library: http://phosphorjs.github.io/ http://phosphorjs.github.io/ (demo of layouts at http://phosphorjs.github.io/examples/dockpanel/ http://phosphorjs.github.io/examples/dockpanel/).
- jjrv 11y agoPhosphorJS seems truly amazing. Dragging and resizing things feels like using native controls. The example has a polished look and everything is written in well-commented and easily understandable TypeScript without any nonsense external dependencies like jQuery.
- derekja 11y agoLooks great. I'm afraid I'm flailing a little bit on React, though. All the examples I can find are using older versions of react. Is there an example using the current version? Trying to figure out what I call ReactDOM.render with if the DOM is already being modified by GoldenLayout... Thanks!