Class orion.webui.Splitter
A splitter manages the layout of two panels, a side panel and a main panel.
Defined in: </jobs/genie.orion/orion-client-stable/workspace/bundles/org.eclipse.orion.client.ui/web/orion/webui/splitter.js>.
Constructor Attributes | Constructor Name and Description |
---|---|
orion.webui.Splitter(options)
Constructs a new Splitter with the given options.
|
Method Attributes | Method Name and Description |
---|---|
addEventListener(type, listener, useCapture)
Adds an event listener to this event target.
|
|
addResizeListener(listener)
Adds an event listener for resizing the main and side panels.
|
|
dispatchEvent(evt)
Dispatches the given event to the listeners added to this event target.
|
|
isClosed()
|
|
Close the side panel.
|
|
removeEventListener(type, listener, useCapture)
Removes an event listener from the event target.
|
|
resize()
|
|
setOrientation(value, force)
|
|
Toggle the open/closed state of the side panel.
|
The relative proportions of the side and main panels are determined by the initial style of the splitter bar in the document. The panels will pin themselves to the splitter by default. Once the user moves the splitter, the positions are remembered. If the splitter is *not* proportional but *is* vertical then its position is stored separately from its horizontal position.
The splitter defines the CSS to position the nodes it's splitting based on which of the nodes 'collapses' when it's 'closed'. If the left (leading) node collapses then everything is defined relative to the left; if the trailing node collapses (closeReversely=true) then everything is relative to the right. In either case the CSS is defined so that the non-collapsing node gets the extra space if the browser grows.
By default, a splitter is open. The client can create a closed splitter by setting a
data-initial-state
attribute with value "closed"
on the
splitter's node
element. Note that the user can drag a splitter 'closed' or 'open'
and the correct state is maintained (i.e. if it were open and we dragged it all the way to its closed
position then hitting the thumb would open it and vice versa.
- Parameters:
- {Object} options
- The options object which must specify the split dom node
- {Element} options.node
- The node for the splitter presentation. Required.
- {Element} options.sidePanel
- The node for the side (toggling) panel. Required.
- {Element} options.mainPanel
- The node for the main panel. Required.
- {Boolean} options.toggle Optional, Default: false
- Specifies that the side node should be able to toggle.
- {Boolean} options.vertical Optional, Default: false
- Specifies that the nodes are stacked vertically rather than horizontal.
- {Boolean} options.closeReversely Optional, Default: false
- Specifies that the splitter moves to right when nodes are stacked horizontally, or to bottom when nodes are stacked vertically.
- {Boolean} options.proportional Optional, Default: false
- Specifies that the splitter is proportional so that growing the browser allocates space to both nodes.
Defined in: </jobs/genie.orion/orion-client-stable/workspace/bundles/org.eclipse.orion.client.editor/web/orion/editor/eventTarget.js>.
- Parameters:
- {String} type
- The event type.
- {Function|EventListener} listener
- The function or the EventListener that will be executed when the event happens.
- {Boolean} useCapture Optional, Default: false
true
if the listener should be trigged in the capture phase.
- Parameters:
- {Function} listener
- The function called when a resize occurs. The DOM node that has been resized is passed as an argument.
- Deprecated:
- use addEventListener instead
Defined in: </jobs/genie.orion/orion-client-stable/workspace/bundles/org.eclipse.orion.client.editor/web/orion/editor/eventTarget.js>.
- Parameters:
- {Event} evt
- The event to dispatch.
All the parameters must be the same ones used to add the listener.
Defined in: </jobs/genie.orion/orion-client-stable/workspace/bundles/org.eclipse.orion.client.editor/web/orion/editor/eventTarget.js>.
- Parameters:
- {String} type
- The event type
- {Function|EventListener} listener
- The function or the EventListener that will be executed when the event happens.
- {Boolean} useCapture Optional, Default: false
true
if the listener should be trigged in the capture phase.
- Parameters:
- value
- force