dockview-core
Version:
Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript
78 lines (77 loc) • 3.36 kB
JavaScript
import { addDisposableListener, Emitter } from '../../../events';
import { CompositeDisposable } from '../../../lifecycle';
import { toggleClass } from '../../../dom';
import { applyTabGroupAccent, } from '../../tabGroupAccent';
import { LongPressDetector } from '../../../dnd/pointer/longPress';
/**
* Visual chip for a tab group. Owns the DOM element, label, click /
* context-menu interactions, and exposes a long-press gesture as a
* second `onContextMenu` source. Drag-and-drop wiring lives in
* `TabGroupManager` — the manager constructs the drag sources on this
* chip's element so it can include tabs-list context (custom group
* drag image, tab-group transfer payload).
*/
export class TabGroupChip extends CompositeDisposable {
get element() {
return this._element;
}
constructor(_palette) {
super();
this._palette = _palette;
this._onClick = new Emitter();
this.onClick = this._onClick.event;
this._onContextMenu = new Emitter();
/** Fires on right-click and on touch long-press. */
this.onContextMenu = this._onContextMenu.event;
this._element = document.createElement('div');
this._element.className = 'dv-tab-group-chip';
this._element.tabIndex = 0;
this._label = document.createElement('span');
this._label.className = 'dv-tab-group-chip-label';
this._element.appendChild(this._label);
this.addDisposables(this._onClick, this._onContextMenu, new LongPressDetector(this._element, {
onLongPress: (event) => {
this._onContextMenu.fire(event);
},
}), addDisposableListener(this._element, 'click', (event) => {
this._onClick.fire(event);
}), addDisposableListener(this._element, 'contextmenu', (event) => {
this._onContextMenu.fire(event);
}));
}
init(params) {
this._tabGroup = params.tabGroup;
this.updateColor(params.tabGroup.color);
this.updateLabel(params.tabGroup.label);
this.updateCollapsed(params.tabGroup.collapsed);
this.addDisposables(params.tabGroup.onDidChange(() => {
if (this._tabGroup) {
this.updateColor(this._tabGroup.color);
this.updateLabel(this._tabGroup.label);
}
}), params.tabGroup.onDidCollapseChange((collapsed) => {
this.updateCollapsed(collapsed);
}), this._onClick.event(() => {
var _a;
(_a = this._tabGroup) === null || _a === void 0 ? void 0 : _a.toggle();
}));
}
update(params) {
this._tabGroup = params.tabGroup;
this.updateColor(params.tabGroup.color);
this.updateLabel(params.tabGroup.label);
this.updateCollapsed(params.tabGroup.collapsed);
}
updateColor(color) {
var _a;
applyTabGroupAccent(this._element, color, this._palette);
toggleClass(this._element, 'dv-tab-group-chip--accent-off', ((_a = this._palette) === null || _a === void 0 ? void 0 : _a.enabled) === false);
}
updateLabel(label) {
this._label.textContent = label;
toggleClass(this._label, 'dv-tab-group-chip-label--empty', !label);
}
updateCollapsed(collapsed) {
toggleClass(this._element, 'dv-tab-group-chip--collapsed', collapsed);
}
}