Options
All
  • Public
  • Public/Protected
  • All
Menu

Class SideTabBar

A specialized tab bar for side areas.

Hierarchy

Implements

  • IMessageHandler
  • IObservableDisposable

Index

Constructors

constructor

Properties

allowDeselect

allowDeselect: boolean

Whether a tab can be deselected by the user.

Notes

Tabs can be always be deselected programmatically.

Readonly collapseRequested

collapseRequested: Signal<this, Title<Widget>> = new Signal<this, Title<Widget>>(this)

Side panels can be collapsed by clicking on the currently selected tab. This signal is emitted when the mouse is released on the selected tab without initiating a drag.

Readonly contentNode

contentNode: HTMLUListElement

The tab bar content node.

Notes

This is the node which holds the tab nodes.

Modifying this node directly can lead to undefined behavior.

Readonly currentChanged

currentChanged: ISignal<this, ICurrentChangedArgs<Widget>>

A signal emitted when the current tab is changed.

Notes

This signal is emitted when the currently selected tab is changed either through user or programmatic interaction.

Notably, this signal is not emitted when the index of the current tab changes due to tabs being inserted, removed, or moved. It is only emitted when the actual current tab node is changed.

currentIndex

currentIndex: number

Set the index of the currently selected tab.

Notes

If the value is out of range, the index will be set to -1.

currentTitle

currentTitle: Title<Widget> | null

Set the currently selected title.

Notes

If the title does not exist, the title will be set to null.

Readonly dataset

dataset: DOMStringMap

The dataset for the widget's DOM node.

Readonly disposed

disposed: ISignal<this, void>

A signal emitted when the widget is disposed.

id

id: string

Set the id of the widget's DOM node.

insertBehavior

insertBehavior: TabBar.InsertBehavior

The selection behavior when inserting a tab.

Readonly isAttached

isAttached: boolean

Test whether the widget's node is attached to the DOM.

Readonly isDisposed

isDisposed: boolean

Test whether the widget has been disposed.

Readonly isHidden

isHidden: boolean

Test whether the widget is explicitly hidden.

Readonly isVisible

isVisible: boolean

Test whether the widget is visible.

Notes

A widget is visible when it is attached to the DOM, is not explicitly hidden, and has no explicitly hidden ancestors.

layout

layout: Layout | null

Set the layout for the widget.

Notes

The layout is single-use only. It cannot be changed after the first assignment.

The layout is disposed automatically when the widget is disposed.

Private Optional mouseData

mouseData: undefined | { mouseDownTabIndex: number; pressX: number; pressY: number }

Readonly node

node: HTMLElement

Get the DOM node owned by the widget.

orientation

orientation: TabBar.Orientation

Set the orientation of the tab bar.

Notes

This controls whether the tabs are arranged in a row or column.

parent

parent: Widget | null

Set the parent of the widget.

Notes

Children are typically added to a widget by using a layout, which means user code will not normally set the parent widget directly.

The widget will be automatically removed from its old parent.

This is a no-op if there is no effective parent change.

removeBehavior

removeBehavior: TabBar.RemoveBehavior

The selection behavior when removing a tab.

Readonly renderer

renderer: IRenderer<Widget>

The renderer used by the tab bar.

Protected Optional scrollBar

scrollBar: PerfectScrollbar

Readonly tabActivateRequested

tabActivateRequested: ISignal<this, ITabActivateRequestedArgs<Widget>>

A signal emitted when a tab is clicked by the user.

Notes

If the clicked tab is not the current tab, the clicked tab will be made current and the currentChanged signal will be emitted first.

This signal is emitted even if the clicked tab is the current tab.

Readonly tabAdded

tabAdded: Signal<this, { title: Title<Widget> }> = new Signal<this, { title: Title<Widget> }>(this)

Emitted when a tab is added to the tab bar.

Readonly tabCloseRequested

tabCloseRequested: ISignal<this, ITabCloseRequestedArgs<Widget>>

A signal emitted when a tab close icon is clicked.

Notes

This signal is not emitted unless the tab title is closable.

Readonly tabDetachRequested

tabDetachRequested: ISignal<this, ITabDetachRequestedArgs<Widget>>

A signal emitted when a tab is dragged beyond the detach threshold.

Notes

This signal is emitted when the user drags a tab with the mouse, and mouse is dragged beyond the detach threshold.

The consumer of the signal should call releaseMouse and remove the tab in order to complete the detach.

This signal is only emitted once per drag cycle.

Readonly tabMoved

tabMoved: ISignal<this, ITabMovedArgs<Widget>>

A signal emitted when a tab is moved by the user.

Notes

This signal is emitted when a tab is moved by user interaction.

This signal is not emitted when a tab is moved programmatically.

tabsMovable

tabsMovable: boolean

Whether the tabs are movable by the user.

Notes

Tabs can always be moved programmatically.

Readonly title

title: Title<Widget>

The title object for the widget.

Notes

The title object is used by some container widgets when displaying the widget alongside some title, such as a tab panel or side bar.

Since not all widgets will use the title, it is created on demand.

The owner property of the title is set to this widget.

Readonly titles

titles: ReadonlyArray<Title<Widget>>

A read-only array of the titles in the tab bar.

Protected Readonly toDispose

toDispose: DisposableCollection = new DisposableCollection()

Static Private Readonly DRAG_THRESHOLD

DRAG_THRESHOLD: 5 = 5

Accessors

hiddenContentNode

  • get hiddenContentNode(): HTMLUListElement
  • Tab bars of the left and right side panel are arranged vertically by rotating their labels. Rotation is realized with the CSS transform property, which disrupts the browser's ability to arrange the involved elements automatically. Therefore the elements are arranged explicitly by the TabBarRenderer using inline height and top styles. However, the size of labels must still be computed by the browser, so the rendering is performed in two steps: first the tab bar is rendered horizontally inside a _hidden content node_, then it is rendered again vertically inside the proper content node. After the first step, size information is gathered from all labels so it can be applied during the second step.

    Returns HTMLUListElement

Protected scrollbarHost

  • get scrollbarHost(): HTMLElement

Methods

activate

  • activate(): void
  • Post an 'activate-request' message to the widget.

    Notes

    This is a simple convenience method for posting the message.

    Returns void

addClass

  • addClass(name: string): void
  • Add a class name to the widget's DOM node.

    Parameters

    • name: string

      The class name to add to the node.

      Notes

      If the class name is already added to the node, this is a no-op.

      The class name must not contain whitespace.

    Returns void

addTab

  • addTab(value: Title<Widget> | IOptions<Widget>): Title<Widget>
  • Add a tab to the end of the tab bar.

    Parameters

    • value: Title<Widget> | IOptions<Widget>

      The title which holds the data for the tab, or an options object to convert to a title.

    Returns Title<Widget>

    The title object added to the tab bar.

    Notes

    If the title is already added to the tab bar, it will be moved.

children

  • children(): IIterator<Widget>
  • Create an iterator over the widget's children.

    Returns IIterator<Widget>

    A new iterator over the children of the widget.

    Notes

    The widget must have a populated layout in order to have children.

    If a layout is not installed, the returned iterator will be empty.

clearFlag

  • clearFlag(flag: Flag): void
  • Clear the given widget flag.

    Notes

    This will not typically be called directly by user code.

    Parameters

    Returns void

clearTabs

  • clearTabs(): void
  • Remove all tabs from the tab bar.

    Returns void

close

  • close(): void
  • Send a 'close-request' message to the widget.

    Notes

    This is a simple convenience method for sending the message.

    Returns void

contains

  • contains(widget: Widget): boolean
  • Test whether a widget is a descendant of this widget.

    Parameters

    • widget: Widget

      The descendant widget of interest.

    Returns boolean

    true if the widget is a descendant, false otherwise.

dispose

  • dispose(): void

fit

  • fit(): void
  • Post a 'fit-request' message to the widget.

    Notes

    This is a simple convenience method for posting the message.

    Returns void

handleEvent

  • handleEvent(event: Event): void
  • The following event processing is used to generate collapseRequested signals when the mouse goes up on the currently selected tab without too much movement between mousedown and mouseup. The movement threshold is the same that is used by the superclass to detect a drag event. The allowDeselect option of the TabBar constructor cannot be used here because it is triggered when the mouse goes down, and thus collides with dragging.

    Parameters

    Returns void

hasClass

  • hasClass(name: string): boolean
  • Test whether the widget's DOM node has the given class name.

    Parameters

    • name: string

      The class name of interest.

    Returns boolean

    true if the node has the class, false otherwise.

hide

  • hide(): void
  • Hide the widget and make it hidden to its parent widget.

    Notes

    This causes the isHidden property to be true.

    If the widget is explicitly hidden, this is a no-op.

    Returns void

insertTab

  • insertTab(index: number, value: Title<Widget> | IOptions<Widget>): Title<Widget>

Protected notifyLayout

  • notifyLayout(msg: Message): void
  • Invoke the message processing routine of the widget's layout.

    Parameters

    • msg: Message

      The message to dispatch to the layout.

      Notes

      This is a no-op if the widget does not have a layout.

      This will not typically be called directly by user code.

    Returns void

Protected onActivateRequest

  • onActivateRequest(msg: Message): void
  • A message handler invoked on an 'activate-request' message.

    Notes

    The default implementation of this handler is a no-op.

    Parameters

    • msg: Message

    Returns void

Protected onAfterAttach

  • onAfterAttach(msg: Message): void

Protected onAfterDetach

  • onAfterDetach(msg: Message): void

Protected onAfterHide

  • onAfterHide(msg: Message): void
  • A message handler invoked on an 'after-hide' message.

    Notes

    The default implementation of this handler is a no-op.

    Parameters

    • msg: Message

    Returns void

Protected onAfterShow

  • onAfterShow(msg: Message): void
  • A message handler invoked on an 'after-show' message.

    Notes

    The default implementation of this handler is a no-op.

    Parameters

    • msg: Message

    Returns void

Protected onBeforeAttach

  • onBeforeAttach(msg: Message): void

Protected onBeforeDetach

  • onBeforeDetach(msg: Message): void

Protected onBeforeHide

  • onBeforeHide(msg: Message): void
  • A message handler invoked on a 'before-hide' message.

    Notes

    The default implementation of this handler is a no-op.

    Parameters

    • msg: Message

    Returns void

Protected onBeforeShow

  • onBeforeShow(msg: Message): void
  • A message handler invoked on a 'before-show' message.

    Notes

    The default implementation of this handler is a no-op.

    Parameters

    • msg: Message

    Returns void

Protected onChildAdded

  • A message handler invoked on a 'child-added' message.

    Notes

    The default implementation of this handler is a no-op.

    Parameters

    Returns void

Protected onChildRemoved

  • A message handler invoked on a 'child-removed' message.

    Notes

    The default implementation of this handler is a no-op.

    Parameters

    Returns void

Protected onCloseRequest

  • onCloseRequest(msg: Message): void
  • A message handler invoked on a 'close-request' message.

    Notes

    The default implementation unparents or detaches the widget.

    Parameters

    • msg: Message

    Returns void

Protected onFitRequest

  • onFitRequest(msg: Message): void
  • A message handler invoked on a 'fit-request' message.

    Notes

    The default implementation of this handler is a no-op.

    Parameters

    • msg: Message

    Returns void

Private onMouseDown

  • onMouseDown(event: MouseEvent): void

Private onMouseMove

  • onMouseMove(event: MouseEvent): void

Private onMouseUp

  • onMouseUp(event: MouseEvent): void

Protected onResize

Protected onUpdateRequest

  • onUpdateRequest(msg: Message): void

processMessage

  • processMessage(msg: Message): void
  • Process a message sent to the widget.

    Parameters

    • msg: Message

      The message sent to the widget.

      Notes

      Subclasses may reimplement this method as needed.

    Returns void

releaseMouse

  • releaseMouse(): void
  • Release the mouse and restore the non-dragged tab positions.

    Notes

    This will cause the tab bar to stop handling mouse events and to restore the tabs to their non-dragged positions.

    Returns void

removeClass

  • removeClass(name: string): void
  • Remove a class name from the widget's DOM node.

    Parameters

    • name: string

      The class name to remove from the node.

      Notes

      If the class name is not yet added to the node, this is a no-op.

      The class name must not contain whitespace.

    Returns void

removeTab

  • removeTab(title: Title<Widget>): void
  • Remove a tab from the tab bar.

    Parameters

    • title: Title<Widget>

      The title for the tab to remove.

      Notes

      This is a no-op if the title is not in the tab bar.

    Returns void

removeTabAt

  • removeTabAt(index: number): void
  • Remove the tab at a given index from the tab bar.

    Parameters

    • index: number

      The index of the tab to remove.

      Notes

      This is a no-op if the index is out of range.

    Returns void

Protected renderTabBar

  • renderTabBar(): void
  • Render the tab bar in the hidden content node (see hiddenContentNode for explanation), then gather size information for labels and render it again in the proper content node.

    Returns void

Protected renderTabs

revealTab

  • revealTab(index: number): Promise<void>

setFlag

  • setFlag(flag: Flag): void
  • Set the given widget flag.

    Notes

    This will not typically be called directly by user code.

    Parameters

    Returns void

setHidden

  • setHidden(hidden: boolean): void
  • Show or hide the widget according to a boolean value.

    Parameters

    • hidden: boolean

      true to hide the widget, or false to show it.

      Notes

      This is a convenience method for hide() and show().

    Returns void

show

  • show(): void
  • Show the widget and make it visible to its parent widget.

    Notes

    This causes the isHidden property to be false.

    If the widget is not explicitly hidden, this is a no-op.

    Returns void

testFlag

  • testFlag(flag: Flag): boolean
  • Test whether the given widget flag is set.

    Notes

    This will not typically be called directly by user code.

    Parameters

    Returns boolean

toggleClass

  • toggleClass(name: string, force?: undefined | false | true): boolean
  • Toggle a class name on the widget's DOM node.

    Parameters

    • name: string

      The class name to toggle on the node.

    • Optional force: undefined | false | true

      Whether to force add the class (true) or force remove the class (false). If not provided, the presence of the class will be toggled from its current state.

    Returns boolean

    true if the class is now present, false otherwise.

    Notes

    The class name must not contain whitespace.

update

  • update(): void
  • Post an 'update-request' message to the widget.

    Notes

    This is a simple convenience method for posting the message.

    Returns void