dockview-core
Version:
Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript
105 lines (104 loc) • 4.9 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabGroupChip = void 0;
var events_1 = require("../../../events");
var lifecycle_1 = require("../../../lifecycle");
var dom_1 = require("../../../dom");
var tabGroupAccent_1 = require("../../tabGroupAccent");
var longPress_1 = require("../../../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).
*/
var TabGroupChip = /** @class */ (function (_super) {
__extends(TabGroupChip, _super);
function TabGroupChip(_palette) {
var _this = _super.call(this) || this;
_this._palette = _palette;
_this._onClick = new events_1.Emitter();
_this.onClick = _this._onClick.event;
_this._onContextMenu = new events_1.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 longPress_1.LongPressDetector(_this._element, {
onLongPress: function (event) {
_this._onContextMenu.fire(event);
},
}), (0, events_1.addDisposableListener)(_this._element, 'click', function (event) {
_this._onClick.fire(event);
}), (0, events_1.addDisposableListener)(_this._element, 'contextmenu', function (event) {
_this._onContextMenu.fire(event);
}));
return _this;
}
Object.defineProperty(TabGroupChip.prototype, "element", {
get: function () {
return this._element;
},
enumerable: false,
configurable: true
});
TabGroupChip.prototype.init = function (params) {
var _this = this;
this._tabGroup = params.tabGroup;
this.updateColor(params.tabGroup.color);
this.updateLabel(params.tabGroup.label);
this.updateCollapsed(params.tabGroup.collapsed);
this.addDisposables(params.tabGroup.onDidChange(function () {
if (_this._tabGroup) {
_this.updateColor(_this._tabGroup.color);
_this.updateLabel(_this._tabGroup.label);
}
}), params.tabGroup.onDidCollapseChange(function (collapsed) {
_this.updateCollapsed(collapsed);
}), this._onClick.event(function () {
var _a;
(_a = _this._tabGroup) === null || _a === void 0 ? void 0 : _a.toggle();
}));
};
TabGroupChip.prototype.update = function (params) {
this._tabGroup = params.tabGroup;
this.updateColor(params.tabGroup.color);
this.updateLabel(params.tabGroup.label);
this.updateCollapsed(params.tabGroup.collapsed);
};
TabGroupChip.prototype.updateColor = function (color) {
var _a;
(0, tabGroupAccent_1.applyTabGroupAccent)(this._element, color, this._palette);
(0, dom_1.toggleClass)(this._element, 'dv-tab-group-chip--accent-off', ((_a = this._palette) === null || _a === void 0 ? void 0 : _a.enabled) === false);
};
TabGroupChip.prototype.updateLabel = function (label) {
this._label.textContent = label;
(0, dom_1.toggleClass)(this._label, 'dv-tab-group-chip-label--empty', !label);
};
TabGroupChip.prototype.updateCollapsed = function (collapsed) {
(0, dom_1.toggleClass)(this._element, 'dv-tab-group-chip--collapsed', collapsed);
};
return TabGroupChip;
}(lifecycle_1.CompositeDisposable));
exports.TabGroupChip = TabGroupChip;