Open pdfowler opened 6 years ago
I like this proposal. I have some followup comments/questions
PanelGroup
component itself rather than within the panelWidths
object - separate from any collapsing functionality. I've been meaning to allow user-supplied border element for a while now.minSize
and maxSize
when you toggle? Defaults to minSize
first? What other potential behavior can you imagine being useful?onUpdate
(which should be triggered by any resize event)? Can you provide an example where you'd want to know the panelIndex
of the clicked divider?panelWidths
object. That way, a panel essentially subscribes to which border it wants to be controlled by rather than being assumed. That said, I'm not a fan of the name. handle
is a little ambiguous as any panel could have up to two handles without specifying this property at all. The property name should indicate that you're selecting which of the available handles to use as its controller. clickHandle
? borderController
? I'll have to think on this for a while. Whatever we name it, it shouldn't be .direction
as that will be relative to its vertical/horizontal layout. Perhaps .position
which takes values of null
, before
, or after
May be name could be 'dividerHandle' as the handle applies to dividers. Example that I found with 'a handle' (may be not the prettiest one) is https://codepen.io/rstrahl/pen/eJZQej
Also, since this would be great for Mobile, ability to recognize gestures is important (but please do not use Hammer.js for those, as Hammer.JS does not support server-side deployment, which is a problem, at least for me :-) )
I want to remove the cursor in the content tag
I've seen a handful of implementations of panels like this where there's a small "handle" on the resizer divider. This can be really useful for mobile (eg: #16 )since it is often more useful to "toggle" panels on mobile rather than drag to resize.
This is something I'm looking at doing, but wanted to file an issue first to see if anyone in the community had implemented something like this.
Proposed Behavior:
panelWidths
configs objectonHandleClick
called with argumentspanels
(like currentonUpdate
method), along with thepanelIndex
of the selected panel divider.onHandleClick
would only fireonMouseUp
ifisDragging === false
Questions:
What does
panelIndex
refer to?If a handle is placed on panel 0, it is placed on the divider between panels 0 and 1. This is straightforward. In a three column layout with a
stretch
column between two sidebars, does the handle for the righthand sidebar go on panel 1 or panel 2?possible solution:
handle
could take either a single DOM element (as described above, ie: "basic config mode"), or it could take an object with properties:handle.component
,handle.direction
, etc