7 ms·

Show HN: GoldenLayout – JavaScript Layout Manager

211 points by wolframhempel 12y ago

err4nt 12y ago
I am always interested to see ways that people apply different layout ideas to code. The Golden Section is a number considered to produce the most aesthetically pleasing ratios of things. A playing card's dimensions are usually roughly the same ratio: 1:1.618 For the past few hundred years print designers have been aware of the Golden Section and have been working it into their page sizes and margins - so wether it's beautiful and that's why we use it, or we use it and that's why it's beautiful - there's no question that we are familiar with seeing this design tool be used in print. This looks like a library to help integrate some of those layout ideals into your code in ways that would be tricky or cost a lot of time to implement otherwise.
- callum85 12y ago
  The 'Golden Section' is mystical bullshit. A 1:1.618 ratio has some geometric properties that are useful in rare situations, but the idea that it is "aesthetically pleasing" is completely unfounded. Explanation here: http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm
  - mbrutsch 12y ago
    That guy's wound a little too tightly.
- drostie 12y ago
  The golden ratio is not particularly magic in aesthetic pleasure; playing cards are in fact made with a ratio of 7:5, being 3.5" high and 2.5" wide. You get closer with bridge cards (a 1.555...) and index cards (1.666..). If you don't believe me, go out and try to buy picture frames for 5" x 8" or 8" x 13" or 13" x 21". They're just not a common ratio. You might as well say that the square root of 2 is aesthetically magical. (It actually is practically magical, as the European paper sizes point out.) What's cool about the golden ratio is that it's the most irrational number by a couple of interesting heuristics, having come from one of the simplest recursive processes you can think of and therefore having the simplest continued fraction. Transforming the definition of a golden rectangle into a process to "goldenize" a rectangle by adding a square to one side and rotating by 90 degrees leads to `goldenize (w, h) = (h + w, w), which implements the Fibonacci recursion rule. In turn if you "lift" the subscripts in that rule into superscripts F^n = F^{n - 1} + F^{n - 2}, you get a quadratic for F and if you solve it, you get the golden means F = φ and F = -1/φ. You can also see this recursion at work in pentagrams: if you work out the three angles at the vertex of the outer pentagon, it turns out they're all the same angle (36 degrees, 180/5). If you then look at the side lengths in the top part of the pentagram, this fact lets you infer that the sideways-pointing triangles are isosceles (36-72-72) and combined with the 36-36-108 isosceles triangle you can derive the golden ratio again. Those things about it are aesthetically pleasing; but I don't find that people unconsciously choose ratios of Fibonaccis as their perfect rectangles moreso than, say, 4x3 rectangles.
rhapsodyv 12y ago
One reason that I love extjs is indeed its layout manager. This golden-layout seems promising...
worldsayshi 12y ago
Looks very neat. But what is the reason for the initial load time?
- wolframhempel 12y ago
  Cheers. Good question about the load time. The library itself is 50k - without gZipping. But the demo on the startpage also includes Highcharts and SlickGrid and all their dependencies...and the examples are in Codepens - which take a while to load
giancarlostoro 12y ago
I love it. Looks stunning, and is straight forward to use.
watty 12y ago
Really nice, might use it for an upcoming project. It's a little buggy in the current state though and no mobile editing support kinda hurts.
j4mie 12y ago
Creative Commons licensed? Q: Can I apply a Creative Commons license to software? A: We recommend against using Creative Commons licenses for software. Instead, we strongly encourage you to use one of the very good software licenses which are already available. We recommend considering licenses made available by the Free Software Foundation or listed as “open source” by the Open Source Initiative. https://wiki.creativecommons.org/Frequently_Asked_Questions#Can_I_apply_a_Creative_Commons_license_to_software.3F https://wiki.creativecommons.org/Frequently_Asked_Questions#...
- wolframhempel 12y ago
  Yup, but its a legal construct that allows to offer something "free for non-commercial use"
  - viggity 12y ago
    I suppose that is true, but most devs that want to do that just offer a dual license. GPL license, but you can purchase commercial license to remove GPL restrictions.
    - wolframhempel 12y ago
      Interesting. Would you happen to know if there any downsides or upsides to either? To be completely honest, I looked at under which model HighCharts operates and did a similar thing.
      - viggity 12y ago
        just that the GPL is meant for code and CC isn't so it has special considerations in it that aren't in CC. CC is meant for media like images, video and text. RavenDB is a company that offers a dual license commercial and AGPL. http://ravendb.net/docs/appendixes/licensing http://ravendb.net/docs/appendixes/licensing You may be able to glean some information on how they do it.
      - btown 12y ago
drglitch 12y ago
Absolutely awesome concept, could not be better timing - need pretty much exactly a dock manager like this for upcoming work! What are the plans for graceful degradation on mobile?
- wolframhempel 12y ago
  Thanks . It’s easy to turn pretty much every feature off individually. Just setting ‘hasHeaders’ and ‘reorderEnabled’ to false for example is effectively enough to switch off any user interaction whilst keeping the component lifecycle and resize behaviour when the phone is tilted.
itry 12y ago
In the "getting started", you should put the .js and .css files somewhere so the examples work. I copypasted all your codelines just to be dissappointed that it doesnt not work. I understand you probably don't want to be a cdn. But for testing purposes, I cannot be assed to copy stuff over to my server. I prefixed them with https://golden-layout.com/assets/ https://golden-layout.com/assets/ and it nicely worked. Nice. Bookmarked.
- wolframhempel 12y ago
  Good idea. Noted.
qwerta 12y ago
This is not layout manager, but docker. "Ultimate Layout Manager" is something like Mig Layout for Swing.
huuu 12y ago
Does anyone know if there is a manager like this one but based on the concept used in Blender (blender.org)? I realy like the concept in Blender where you can divide the screen the way you like and select a view(controller) per division.
- bhouston 12y ago
  Well, https://Clara.io https://Clara.io (our online version of a Blender-like tool) has something similar. It isn't open source... yet. ;)
bhouston 12y ago
We built something like this for our online 3D modeling/publishing/rendering tool: https://Clara.io https://Clara.io I was just looking if it makes sense to adopt, but our needs are pretty customized compared to what is offered here. But a lot of it is similar. Maybe if we were starting over, this would make sense and we could have adopted it. Screenshot of our tab/multiple window UI: http://exocortex.com/img/blog/OneYear_ModelingTab.png http://exocortex.com/img/blog/OneYear_ModelingTab.png I think this is a real contribution though, especially if others build upon it.
eidyia 12y ago
This is great definitely something ill check out. Seems there is a strange behaviour though, in your examples "Adding Items" if you remove both "windows", when you try to drag/drop a new one it places 2, and they also look weird! Happens to anyone else?? Edit: after checking the other 2 seems like there is always something missing if you remove both windows, maybe its how they wanted it to work??
bayesianhorse 12y ago
Commercial javascript libraries have a tough stance. "Free for non-commercial" is essentially meaningless, since there is no clear definition of commercial use. For me, I wouldn't even consider including such a library into any software (OS or commercial) which runs on multiple domains/servers/computers, because it makes licensing and scaling less flexible. To justify a licensing price, a javascript library needs to offer huge, peerless, hard to imitate functionality, stable code base, rapid bug-fixing and preferably a paid team working on it. Which isn't to say that nobody will buy it. At $99 per site even one or two dozens of customers would cover the development costs.
- watty 12y ago
  I think you're underestimating the development costs for a commercial Javascript project which offers "huge, peerless, hard to imitate functionality, stable code base, rapid bug-fixing and preferably a paid team working on it.".
  - bayesianhorse 12y ago
    I was referring to this specific library which isn't really that big and isn't that hard to immitate...
- marknutter 12y ago
  It would seem to me that charging for premium support for libraries would be far more effective than charging for a license. You don't want to do anything to limit its wider use lest it be supplanted by a more widely available library that has a less restrictive license. But it's always painful to get support for very popular libraries, so that pain can be monetized quite easily. This also has the added benefit of locking people into using your library. They can either pay cash for premium support, or they can pay the tax of switching to a different library.
- swah 12y ago
  This isn't good. Developers should have a way to make a quick buck in the web space as well, and not just by selling Wordpress themes. Sandstorm.io could provide a way, but I wish we had alternatives.
nhebb 12y ago
When I maximized and then restored, it put the section in a popup window and removed it from the original layout. I would have expected restore to dock the section back in the original layout as before.
lttlrck 12y ago
I got into a not necessarily unrecoverable but certainly not very nice state just moving things around a little. Chrome Version 39.0.2166.2 dev (64-bit) http://i.imgur.com/OB67q2i.png http://i.imgur.com/OB67q2i.png
danschumann 12y ago
Seems cool but breaks if you rearrage things... windows disappear.
- myrryr 12y ago
  yeah, that is what I noticed.
untog 12y ago
Statements like the "ultimate JS layout manager" just sound hyperbolic. This wouldn't be appropriate for the vast majority of web sites in the world, so I'm not sure how it's the ultimate anything.
- wolframhempel 12y ago
  Hehe, not at all like "AngularJS — Superheroic JavaScript MVW Framework"
  - lowboy 12y ago
    There can be many superheroes, but only one ultimate.
  - bayesianhorse 12y ago
    AngularJS also earned that reputation.
jtwebman 12y ago
This would be easy to do with IE8+. They should have went for IE6+, support older browsers, they might have got those juice enterprise customers that throw $10,000 of dollars away on software. Also why is it so slow?
- GeneralMayhem 12y ago
  Nobody should waste time and money supporting IE6. It's completely unsupported by Microsoft. Those big enterprise customers should have upgraded in April at the absolute latest when XP hit EOL. Even IE8 only has a year left.
  - recursive 12y ago
    > Those big enterprise customers should have upgraded in April at the absolute latest when XP hit EOL. The ones that didn't still have money.
tshadwell 12y ago
I've not looked in detail, but I'm not so sure about the security of generating windows via URL parameters. I feel like there's an XSS in that for sure. Edit: there is https://golden-layout.com/?gl-window=%7B%22g%22%3A%5B%7B%22o%22%3A%22Layout%22%2C%22l%22%3A%225%22%2C%22h%22%3A%22demo%22%2C%22i%22%3A%7B%22bg%22%3A%22%5C%22%3E%3Csvg%20onload%3Dalert(1)%3E%22%7D%2C%22n%22%3A%220%22%7D%5D%7D https://golden-layout.com/?gl-window=%7B%22g%22%3A%5B%7B%22o... Please don't chastise me for disclosure ethics, this one was low-hanging fruit.
- wolframhempel 12y ago
  good point. What it passes via URL parameter is URL encoded JSON - which is parsed using JSON.parse()... so shouldn't expose an attack vector. The alternative - creating about:blank windows and moving DOM elements into them comes with a wealth of glitches and restrictions
  - tshadwell 12y ago
    I realise that, but unless every piece of information in the JSON is dealt with caution (which I doubt from experience) it could be possible to put together an attack. Well, I should probably verify that myself.
  - tshadwell 12y ago
    I edited my original post to include a working XSS exploit.
    - wolframhempel 12y ago
      Wow...impressive. Even though this is not so much a weakness o f Goldenlayout as rather the particular image component I use on the startpage. Still though, thanks. Remind me to hire you if I want to get back at someone.
      - tshadwell 12y ago
        Usually I work to prevent problems rather than create them but hey I could be the antagonist in someone's novel. I doubt that's not the only exploit in the library either. I could go through it with a finer toothed comb if you wanted.
sarciszewski 12y ago
Who the hell licenses SOFTWARE as creative commons these days? :S
silverlight 12y ago
Interesting! Might have to look into replacing our use of jQuery UI with this...
sangd 12y ago
Looks great. Does it have integration with Meteor js? I'm thinking of adopting this to mine at vida.io
- wolframhempel 12y ago
  Wow. Vida.io looks really promising. I can't promise a schedule, but I'll try to add a MeteorJs tutorial as soon as possible. Generally though it's just DOM elements that you put stuff into, so it should be compatible with pretty much anything.
chacham15 12y ago
Looks nice, but one recommendation: when you are moving a window, make the drop box cover the window bar as well. Also, the resize bars can cover the window bar to the point that if there is no content you cant click on the name because all you get is the resize action. Lastly, I somehow dropped a window to vertically split another one and it lost all of its content. I tried to resize the bottom border down but it wont move.
Pxl_Buzzard 12y ago
I've been looking into libraries that do exactly this in the last couple weeks, thank you for sharing this one. The competitors in this space (that I have found) are wcDocker[1] and DockSpawn[2]. One "feature" lacking from GoldenLayout: you aren't hosting your code on Github, or in a way that can be utilized by Bower[3]. GoldenLayout looks like an otherwise better library than the others, could you talk about why or why not for Github hosting? 1. http://docker.webcabin.org http://docker.webcabin.org 2. http://www.dockspawn.com http://www.dockspawn.com 3. http://bower.io http://bower.io
- wolframhempel 12y ago
  Thanks for providing those links. The latest version is on github and bower though, please have a look at the links in the footer.
mkremer90 12y ago
Was literally looking for EXACTLY this for the past two weeks. Will definitely buy in the next week or two :)
malkia 12y ago
I'm simply wondering - how in general html/js applications would work with multiple monitors. A typical set-up at work (game studio) is 2-3 monitors for artists/level builders. We had to write a new docking system for Qt5, since the existing did not allow to dock outside windows to others (or tab in them) - e.g. bit like Visual Studio docking (but not there yet)
- redact207 12y ago
  I'm working on a project that's big into this. I extended dockspawn to support popout windows and give a breakout editor feel. The window you popout can still communicate with its opener until you refresh or navigate away from that page. It's not ideal, but it's the best you can do without using something like signalr or sockets.io to join everything together.
jaunkst 12y ago
Should be free use with commercial grade support.
elwell 12y ago
The windows in demo should resize immediately as I drag them.
V-2 12y ago
The "open in new window" icon looks misleadingly like "restore original size" on Windows. Also, once you do, closing the popup removes the component altogether. You actually need to click the icon in the right bottom corner (why there??) so that it returns back to the original layout.
deleted 12y ago
[deleted]
PointerReaper 12y ago
How do you expect people to do this from a keyboard?

211 points by wolframhempel 12y ago

I am always interested to see ways that people apply different layout ideas to code. The Golden Section is a number considered to produce the most aesthetically pleasing ratios of things. A playing card's dimensions are usually roughly the same ratio: 1:1.618 For the past few hundred years print designers have been aware of the Golden Section and have been working it into their page sizes and margins - so wether it's beautiful and that's why we use it, or we use it and that's why it's beautiful - there's no question that we are familiar with seeing this design tool be used in print. This looks like a library to help integrate some of those layout ideals into your code in ways that would be tricky or cost a lot of time to implement otherwise.

callum85 12y ago
The 'Golden Section' is mystical bullshit. A 1:1.618 ratio has some geometric properties that are useful in rare situations, but the idea that it is "aesthetically pleasing" is completely unfounded. Explanation here: http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm
- mbrutsch 12y ago
  That guy's wound a little too tightly.
drostie 12y ago
The golden ratio is not particularly magic in aesthetic pleasure; playing cards are in fact made with a ratio of 7:5, being 3.5" high and 2.5" wide. You get closer with bridge cards (a 1.555...) and index cards (1.666..). If you don't believe me, go out and try to buy picture frames for 5" x 8" or 8" x 13" or 13" x 21". They're just not a common ratio. You might as well say that the square root of 2 is aesthetically magical. (It actually is practically magical, as the European paper sizes point out.) What's cool about the golden ratio is that it's the most irrational number by a couple of interesting heuristics, having come from one of the simplest recursive processes you can think of and therefore having the simplest continued fraction. Transforming the definition of a golden rectangle into a process to "goldenize" a rectangle by adding a square to one side and rotating by 90 degrees leads to `goldenize (w, h) = (h + w, w), which implements the Fibonacci recursion rule. In turn if you "lift" the subscripts in that rule into superscripts F^n = F^{n - 1} + F^{n - 2}, you get a quadratic for F and if you solve it, you get the golden means F = φ and F = -1/φ. You can also see this recursion at work in pentagrams: if you work out the three angles at the vertex of the outer pentagon, it turns out they're all the same angle (36 degrees, 180/5). If you then look at the side lengths in the top part of the pentagram, this fact lets you infer that the sideways-pointing triangles are isosceles (36-72-72) and combined with the 36-36-108 isosceles triangle you can derive the golden ratio again. Those things about it are aesthetically pleasing; but I don't find that people unconsciously choose ratios of Fibonaccis as their perfect rectangles moreso than, say, 4x3 rectangles.

rhapsodyv 12y ago

One reason that I love extjs is indeed its layout manager. This golden-layout seems promising...

worldsayshi 12y ago

Looks very neat. But what is the reason for the initial load time?

wolframhempel 12y ago
Cheers. Good question about the load time. The library itself is 50k - without gZipping. But the demo on the startpage also includes Highcharts and SlickGrid and all their dependencies...and the examples are in Codepens - which take a while to load

giancarlostoro 12y ago

I love it. Looks stunning, and is straight forward to use.

watty 12y ago

Really nice, might use it for an upcoming project. It's a little buggy in the current state though and no mobile editing support kinda hurts.

j4mie 12y ago

Creative Commons licensed? Q: Can I apply a Creative Commons license to software? A: We recommend against using Creative Commons licenses for software. Instead, we strongly encourage you to use one of the very good software licenses which are already available. We recommend considering licenses made available by the Free Software Foundation or listed as “open source” by the Open Source Initiative. https://wiki.creativecommons.org/Frequently_Asked_Questions#Can_I_apply_a_Creative_Commons_license_to_software.3F https://wiki.creativecommons.org/Frequently_Asked_Questions#...

wolframhempel 12y ago
Yup, but its a legal construct that allows to offer something "free for non-commercial use"
- viggity 12y ago
  I suppose that is true, but most devs that want to do that just offer a dual license. GPL license, but you can purchase commercial license to remove GPL restrictions.
  - wolframhempel 12y ago
    Interesting. Would you happen to know if there any downsides or upsides to either? To be completely honest, I looked at under which model HighCharts operates and did a similar thing.
    - viggity 12y ago
      just that the GPL is meant for code and CC isn't so it has special considerations in it that aren't in CC. CC is meant for media like images, video and text. RavenDB is a company that offers a dual license commercial and AGPL. http://ravendb.net/docs/appendixes/licensing http://ravendb.net/docs/appendixes/licensing You may be able to glean some information on how they do it.
    - btown 12y ago

drglitch 12y ago

Absolutely awesome concept, could not be better timing - need pretty much exactly a dock manager like this for upcoming work! What are the plans for graceful degradation on mobile?

wolframhempel 12y ago
Thanks . It’s easy to turn pretty much every feature off individually. Just setting ‘hasHeaders’ and ‘reorderEnabled’ to false for example is effectively enough to switch off any user interaction whilst keeping the component lifecycle and resize behaviour when the phone is tilted.

itry 12y ago

In the "getting started", you should put the .js and .css files somewhere so the examples work. I copypasted all your codelines just to be dissappointed that it doesnt not work. I understand you probably don't want to be a cdn. But for testing purposes, I cannot be assed to copy stuff over to my server. I prefixed them with https://golden-layout.com/assets/ https://golden-layout.com/assets/ and it nicely worked. Nice. Bookmarked.

wolframhempel 12y ago
Good idea. Noted.

qwerta 12y ago

This is not layout manager, but docker. "Ultimate Layout Manager" is something like Mig Layout for Swing.

huuu 12y ago

Does anyone know if there is a manager like this one but based on the concept used in Blender (blender.org)? I realy like the concept in Blender where you can divide the screen the way you like and select a view(controller) per division.

bhouston 12y ago
Well, https://Clara.io https://Clara.io (our online version of a Blender-like tool) has something similar. It isn't open source... yet. ;)

bhouston 12y ago

We built something like this for our online 3D modeling/publishing/rendering tool: https://Clara.io https://Clara.io I was just looking if it makes sense to adopt, but our needs are pretty customized compared to what is offered here. But a lot of it is similar. Maybe if we were starting over, this would make sense and we could have adopted it. Screenshot of our tab/multiple window UI: http://exocortex.com/img/blog/OneYear_ModelingTab.png http://exocortex.com/img/blog/OneYear_ModelingTab.png I think this is a real contribution though, especially if others build upon it.

eidyia 12y ago

This is great definitely something ill check out. Seems there is a strange behaviour though, in your examples "Adding Items" if you remove both "windows", when you try to drag/drop a new one it places 2, and they also look weird! Happens to anyone else?? Edit: after checking the other 2 seems like there is always something missing if you remove both windows, maybe its how they wanted it to work??

bayesianhorse 12y ago

Commercial javascript libraries have a tough stance. "Free for non-commercial" is essentially meaningless, since there is no clear definition of commercial use. For me, I wouldn't even consider including such a library into any software (OS or commercial) which runs on multiple domains/servers/computers, because it makes licensing and scaling less flexible. To justify a licensing price, a javascript library needs to offer huge, peerless, hard to imitate functionality, stable code base, rapid bug-fixing and preferably a paid team working on it. Which isn't to say that nobody will buy it. At $99 per site even one or two dozens of customers would cover the development costs.

watty 12y ago
I think you're underestimating the development costs for a commercial Javascript project which offers "huge, peerless, hard to imitate functionality, stable code base, rapid bug-fixing and preferably a paid team working on it.".
- bayesianhorse 12y ago
  I was referring to this specific library which isn't really that big and isn't that hard to immitate...
marknutter 12y ago
It would seem to me that charging for premium support for libraries would be far more effective than charging for a license. You don't want to do anything to limit its wider use lest it be supplanted by a more widely available library that has a less restrictive license. But it's always painful to get support for very popular libraries, so that pain can be monetized quite easily. This also has the added benefit of locking people into using your library. They can either pay cash for premium support, or they can pay the tax of switching to a different library.
swah 12y ago
This isn't good. Developers should have a way to make a quick buck in the web space as well, and not just by selling Wordpress themes. Sandstorm.io could provide a way, but I wish we had alternatives.

nhebb 12y ago

When I maximized and then restored, it put the section in a popup window and removed it from the original layout. I would have expected restore to dock the section back in the original layout as before.

lttlrck 12y ago

I got into a not necessarily unrecoverable but certainly not very nice state just moving things around a little. Chrome Version 39.0.2166.2 dev (64-bit) http://i.imgur.com/OB67q2i.png http://i.imgur.com/OB67q2i.png

danschumann 12y ago

Seems cool but breaks if you rearrage things... windows disappear.

myrryr 12y ago
yeah, that is what I noticed.

untog 12y ago

Statements like the "ultimate JS layout manager" just sound hyperbolic. This wouldn't be appropriate for the vast majority of web sites in the world, so I'm not sure how it's the ultimate anything.

wolframhempel 12y ago
Hehe, not at all like "AngularJS — Superheroic JavaScript MVW Framework"
- lowboy 12y ago
  There can be many superheroes, but only one ultimate.
- bayesianhorse 12y ago
  AngularJS also earned that reputation.

jtwebman 12y ago

This would be easy to do with IE8+. They should have went for IE6+, support older browsers, they might have got those juice enterprise customers that throw $10,000 of dollars away on software. Also why is it so slow?

GeneralMayhem 12y ago
Nobody should waste time and money supporting IE6. It's completely unsupported by Microsoft. Those big enterprise customers should have upgraded in April at the absolute latest when XP hit EOL. Even IE8 only has a year left.
- recursive 12y ago
  > Those big enterprise customers should have upgraded in April at the absolute latest when XP hit EOL. The ones that didn't still have money.

tshadwell 12y ago

I've not looked in detail, but I'm not so sure about the security of generating windows via URL parameters. I feel like there's an XSS in that for sure. Edit: there is https://golden-layout.com/?gl-window=%7B%22g%22%3A%5B%7B%22o%22%3A%22Layout%22%2C%22l%22%3A%225%22%2C%22h%22%3A%22demo%22%2C%22i%22%3A%7B%22bg%22%3A%22%5C%22%3E%3Csvg%20onload%3Dalert(1)%3E%22%7D%2C%22n%22%3A%220%22%7D%5D%7D https://golden-layout.com/?gl-window=%7B%22g%22%3A%5B%7B%22o... Please don't chastise me for disclosure ethics, this one was low-hanging fruit.

wolframhempel 12y ago
good point. What it passes via URL parameter is URL encoded JSON - which is parsed using JSON.parse()... so shouldn't expose an attack vector. The alternative - creating about:blank windows and moving DOM elements into them comes with a wealth of glitches and restrictions
- tshadwell 12y ago
  I realise that, but unless every piece of information in the JSON is dealt with caution (which I doubt from experience) it could be possible to put together an attack. Well, I should probably verify that myself.
- tshadwell 12y ago
  I edited my original post to include a working XSS exploit.
  - wolframhempel 12y ago
    Wow...impressive. Even though this is not so much a weakness o f Goldenlayout as rather the particular image component I use on the startpage. Still though, thanks. Remind me to hire you if I want to get back at someone.
    - tshadwell 12y ago
      Usually I work to prevent problems rather than create them but hey I could be the antagonist in someone's novel. I doubt that's not the only exploit in the library either. I could go through it with a finer toothed comb if you wanted.

sarciszewski 12y ago

Who the hell licenses SOFTWARE as creative commons these days? :S

silverlight 12y ago

Interesting! Might have to look into replacing our use of jQuery UI with this...

sangd 12y ago

Looks great. Does it have integration with Meteor js? I'm thinking of adopting this to mine at vida.io

wolframhempel 12y ago
Wow. Vida.io looks really promising. I can't promise a schedule, but I'll try to add a MeteorJs tutorial as soon as possible. Generally though it's just DOM elements that you put stuff into, so it should be compatible with pretty much anything.

chacham15 12y ago

Looks nice, but one recommendation: when you are moving a window, make the drop box cover the window bar as well. Also, the resize bars can cover the window bar to the point that if there is no content you cant click on the name because all you get is the resize action. Lastly, I somehow dropped a window to vertically split another one and it lost all of its content. I tried to resize the bottom border down but it wont move.

Pxl_Buzzard 12y ago

I've been looking into libraries that do exactly this in the last couple weeks, thank you for sharing this one. The competitors in this space (that I have found) are wcDocker[1] and DockSpawn[2]. One "feature" lacking from GoldenLayout: you aren't hosting your code on Github, or in a way that can be utilized by Bower[3]. GoldenLayout looks like an otherwise better library than the others, could you talk about why or why not for Github hosting? 1. http://docker.webcabin.org http://docker.webcabin.org 2. http://www.dockspawn.com http://www.dockspawn.com 3. http://bower.io http://bower.io

wolframhempel 12y ago
Thanks for providing those links. The latest version is on github and bower though, please have a look at the links in the footer.

mkremer90 12y ago

Was literally looking for EXACTLY this for the past two weeks. Will definitely buy in the next week or two :)

malkia 12y ago

I'm simply wondering - how in general html/js applications would work with multiple monitors. A typical set-up at work (game studio) is 2-3 monitors for artists/level builders. We had to write a new docking system for Qt5, since the existing did not allow to dock outside windows to others (or tab in them) - e.g. bit like Visual Studio docking (but not there yet)

redact207 12y ago
I'm working on a project that's big into this. I extended dockspawn to support popout windows and give a breakout editor feel. The window you popout can still communicate with its opener until you refresh or navigate away from that page. It's not ideal, but it's the best you can do without using something like signalr or sockets.io to join everything together.

jaunkst 12y ago

Should be free use with commercial grade support.

elwell 12y ago

The windows in demo should resize immediately as I drag them.

V-2 12y ago

The "open in new window" icon looks misleadingly like "restore original size" on Windows. Also, once you do, closing the popup removes the component altogether. You actually need to click the icon in the right bottom corner (why there??) so that it returns back to the original layout.

deleted 12y ago

[deleted]

PointerReaper 12y ago

How do you expect people to do this from a keyboard?