Customize the flexible layout using JavaScript

Using JavaScript with Hype
1

I know, we can customize the flexible layout (pins and sizing) from the Metrics Inspector, but my specific scenario requires to customize it dynamically. Is there a way to customize the flexible layout using JavaScript?

2

if you mean the built in capabilities: no.

3

I’m not sure what are the other options rather than the built in one. I was trying to flip the pin to right/left using setElementProperty() and style() functions. Noting worked.

4

@jonathan it would be great if can at least record the flexible layout changes through the timelines.

2 Likes
5

There is another solution. Just use layouts with your desired alignments and control them through JavaScript. You could use Hype LayoutKit or at least the hook used in the code to influence witch layout is displayed dynamical rather then just basing it on the browser width.

1 Like
6

I think he was referring to the UI a solution that doesn’t involve scripting with javascript.

7

Peter, please read the topic title before assuming. Also the OP might know best what he was thinking. And multiple options should be helpful for future visitors and the OP. Regards

8

True, I was referring to what he said, not the title or what it was published under 'javascript' I think because it can't be done with the UI there's no choice for him but to go the Javascript route which is why he's asking for a UI feature :slight_smile:

9

That was just a follow up suggestion because the initial request was blocked with “no” but that answer is not entirely true and that is all I pointed out. Shall we leave it at that then. Regards

10

leaving it at that :wink:

11

Thanks for the request - I think this is the first time it has been asked. There’s presently no user way to change this. Can you elaborate more on your use case for this?

12

@jonathan I have three windows:

  1. left (pin to left, top and bottom. resize horizontally and vertically.)
  2. middle (pin to none. resize horizontally and vertically.)
  3. right (pin to right, top and bottom. resize horizontally and vertically.)

I want to give the user capability to hide either left or right windows. If the user choose to hide the left window, I have to pin the middle window to the left. Similarly, I have to pin the middle window to the right to hide the right window.

13

I was looking for a JavaScript solution initially. As it wasn’t available, I asked for a feature request that will make the job even easier than using JavaScript. @petester @MaxZieb

2 Likes
14

Your description still fits the method used in Hype LayoutKit best for now and the demo shows already the use of a toggle. Alternatively you can wait and hope for a new API function in the next Hype or do the math yourself and use setElementProperty and link that to an resize handler event and your toggles… regards

15

Makes sense, thanks for the extra details!

I’ve filed this on our feature tracker (though I don’t recommend waiting for a built-in solution).