Dock open and close on breakpoint shift

Ignition
1

I feel like this question has been sort of asked, but if there was an answer I didn’t understand it completely. I can see from forum posts that direct access to the actual window “size” is not available yet. So what I would like to do is open and close docks depending on which size is selected in a breakpoint container on opening.

Is the current size in a BP container (small or large) available in any way for scripting or binding?

Thanks…

2

Not that I’m aware of, but you can apply an auto-breakpoint for Docked Views, which determines the width (I don’t think the setting applies to height for Docked Views on the sides, but I could be wrong) the screen must be at before the Docked View will open.

So setting a Docked View’s auto-breakpoint value to 600 would mean that the Docked View would not be visible below a viewport width of 600px, but on viewports larger than 600px the Docked View is expanded.

3

Thanks. I wound up using embedded views on each of the ‘sides’ of the breakpoint, and then using onStartup event script to open/close the docks. As a minor “feature request”, the script to close a dock does not actually close the dock, it just controls if it is hidden or not. So if you want a dock to have a handle when it IS available, and not be there at all (including handle), you can’t do that. Maybe a parameter on the closeDock function for “handle too”.

4

From a communication point of view, we can’t remove Docked Views from the browser when they’re collapsed, because we fully expect users will have listeners in their Docked Views. If we were to remove the Docked View from the browser, then listeners would not exist to hear broadcast messages.

Even configuration of a Docked View (hiding the handle) at runtime would be a mess, because you’d leave yourself open to states where a Docked View exists and you’d like to expand it, but the runtime configuration has hidden the handle.

In instances like this where the handle is a sticking point, you’re better off removing the handles entirely - regardless of dimensions - and operating the Docked Views with your own logic and buttons.

5

That’s what I did. Sounds good.

6

What if I want to do the opposite of what your saying?

I only want a dock visible when the screen is down to a phone size. How do I do that?

1 Like
7

This is pretty tricky because we don’t have a “display under breakpoint” setting for Docked Views, but here’s the trick I used in my project where I want footer navigation (like Instagram) for smaller displays:

  • I actually use a breakpoint Container for my Views where I want a Docked View visible at only smaller resolutions.
  • Within the small breakpoint of the Breakpoint Container I have a Flex Container with direction set to “column-reverse” (so the View displays components in order from the bottom to the top) which contains an Embedded View (which is my disguised Docked View) and a Flex Container (which is the “primary” View in use.
  • Set the Embedded View’s path to that of the View you’d like to be a Docked View only visible at smaller dimensions.
  • Set the small breakpoint of the Breakpoint Container to be whatever width you would want the Docked View to be visible below.
  • Copy the Flex Container Component, and paste it into the Large Breakpoint.

Using this setup, my “footer” is only visible at narrow widths (like phones), while the rest of my View is more-or-less identical regardless of width.

This obviously isn’t the greatest solution, but until we get to our planned improvements for Docked Views it’s pretty much the only way to do this.

2 Likes
8

This worked well. Thank you

1 Like