dockview
Version:
Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support
183 lines • 8.03 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 __());
};
})();
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tab = exports.MouseEventKind = void 0;
var events_1 = require("../events");
var lifecycle_1 = require("../lifecycle");
var dataTransfer_1 = require("../dnd/dataTransfer");
var dom_1 = require("../dom");
var droptarget_1 = require("../dnd/droptarget");
var dnd_1 = require("./dnd");
var MouseEventKind;
(function (MouseEventKind) {
MouseEventKind["CLICK"] = "CLICK";
MouseEventKind["CONTEXT_MENU"] = "CONTEXT_MENU";
})(MouseEventKind = exports.MouseEventKind || (exports.MouseEventKind = {}));
var Tab = /** @class */ (function (_super) {
__extends(Tab, _super);
function Tab(panelId, accessor, group) {
var _this = _super.call(this) || this;
_this.panelId = panelId;
_this.accessor = accessor;
_this.group = group;
_this._onChanged = new events_1.Emitter();
_this.onChanged = _this._onChanged.event;
_this._onDropped = new events_1.Emitter();
_this.onDrop = _this._onDropped.event;
_this.panelTransfer = dataTransfer_1.LocalSelectionTransfer.getInstance();
_this.iframes = [];
_this.addDisposables(_this._onChanged, _this._onDropped);
_this._element = document.createElement('div');
_this._element.className = 'tab';
_this._element.tabIndex = 0;
_this._element.draggable = true;
_this.addDisposables((0, events_1.addDisposableListener)(_this._element, 'dragstart', function (event) {
var e_1, _a;
_this.iframes = __spreadArray(__spreadArray([], __read((0, dom_1.getElementsByTagName)('iframe')), false), __read((0, dom_1.getElementsByTagName)('webview')), false);
try {
for (var _b = __values(_this.iframes), _c = _b.next(); !_c.done; _c = _b.next()) {
var iframe = _c.value;
iframe.style.pointerEvents = 'none';
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
_this.element.classList.add('dragged');
setTimeout(function () { return _this.element.classList.remove('dragged'); }, 0);
_this.panelTransfer.setData([
new dataTransfer_1.PanelTransfer(_this.accessor.id, _this.group.id, _this.panelId),
], dataTransfer_1.PanelTransfer.prototype);
if (event.dataTransfer) {
event.dataTransfer.effectAllowed = 'move';
}
}), (0, events_1.addDisposableListener)(_this._element, 'dragend', function (ev) {
var e_2, _a;
try {
for (var _b = __values(_this.iframes), _c = _b.next(); !_c.done; _c = _b.next()) {
var iframe = _c.value;
iframe.style.pointerEvents = 'auto';
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_2) throw e_2.error; }
}
_this.iframes = [];
_this.panelTransfer.clearData(dataTransfer_1.PanelTransfer.prototype);
}), (0, events_1.addDisposableListener)(_this._element, 'mousedown', function (event) {
if (event.defaultPrevented) {
return;
}
/**
* TODO: alternative to stopPropagation
*
* I need to stop the event propagation here since otherwise it'll be intercepted by event handlers
* on the tabs-container. I cannot use event.preventDefault() since I need the on DragStart event to occur
*/
event.stopPropagation();
_this._onChanged.fire({ kind: MouseEventKind.CLICK, event: event });
}), (0, events_1.addDisposableListener)(_this._element, 'contextmenu', function (event) {
_this._onChanged.fire({
kind: MouseEventKind.CONTEXT_MENU,
event: event,
});
}));
_this.droptarget = new droptarget_1.Droptarget(_this._element, {
validOverlays: 'none',
canDisplayOverlay: function (event) {
var data = (0, dataTransfer_1.getPanelData)();
if (data) {
return _this.panelId !== data.panelId;
}
return _this.group.model.canDisplayOverlay(event, dnd_1.DockviewDropTargets.Tab);
},
});
_this.addDisposables(_this.droptarget.onDrop(function (event) {
_this._onDropped.fire(event);
}));
return _this;
}
Object.defineProperty(Tab.prototype, "element", {
get: function () {
return this._element;
},
enumerable: false,
configurable: true
});
Tab.prototype.setActive = function (isActive) {
(0, dom_1.toggleClass)(this.element, 'active-tab', isActive);
(0, dom_1.toggleClass)(this.element, 'inactive-tab', !isActive);
};
Tab.prototype.setContent = function (part) {
if (this.content) {
this._element.removeChild(this.content.element);
}
this.content = part;
this._element.appendChild(this.content.element);
};
Tab.prototype.dispose = function () {
_super.prototype.dispose.call(this);
this.droptarget.dispose();
};
return Tab;
}(lifecycle_1.CompositeDisposable));
exports.Tab = Tab;
//# sourceMappingURL=tab.js.map