dockview-core
Version:
Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript
169 lines (168 loc) • 7.81 kB
JavaScript
"use strict";
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.Scrollbar = void 0;
var dom_1 = require("./dom");
var events_1 = require("./events");
var lifecycle_1 = require("./lifecycle");
var math_1 = require("./math");
var Scrollbar = /** @class */ (function (_super) {
__extends(Scrollbar, _super);
function Scrollbar(scrollableElement) {
var _this = _super.call(this) || this;
_this.scrollableElement = scrollableElement;
_this._scrollOffset = 0;
_this._orientation = 'horizontal';
_this._element = document.createElement('div');
_this._element.className = 'dv-scrollable';
_this._scrollbar = document.createElement('div');
_this._scrollbar.className = 'dv-scrollbar dv-scrollbar-horizontal';
_this.element.appendChild(scrollableElement);
_this.element.appendChild(_this._scrollbar);
_this.addDisposables((0, events_1.addDisposableListener)(_this.element, 'wheel', function (event) {
_this._scrollOffset += event.deltaY * Scrollbar.MouseWheelSpeed;
_this.calculateScrollbarStyles();
}), (0, events_1.addDisposableListener)(_this._scrollbar, 'pointerdown', function (event) {
event.preventDefault();
(0, dom_1.toggleClass)(_this.element, 'dv-scrollable-scrolling', true);
var originalClient = _this._orientation === 'horizontal'
? event.clientX
: event.clientY;
var originalScrollOffset = _this._scrollOffset;
var onPointerMove = function (event) {
var delta = _this._orientation === 'horizontal'
? event.clientX - originalClient
: event.clientY - originalClient;
var clientSize = _this._orientation === 'horizontal'
? _this.element.clientWidth
: _this.element.clientHeight;
var scrollSize = _this._orientation === 'horizontal'
? _this.scrollableElement.scrollWidth
: _this.scrollableElement.scrollHeight;
var p = clientSize / scrollSize;
_this._scrollOffset = originalScrollOffset + delta / p;
_this.calculateScrollbarStyles();
};
var onEnd = function () {
(0, dom_1.toggleClass)(_this.element, 'dv-scrollable-scrolling', false);
document.removeEventListener('pointermove', onPointerMove);
document.removeEventListener('pointerup', onEnd);
document.removeEventListener('pointercancel', onEnd);
};
document.addEventListener('pointermove', onPointerMove);
document.addEventListener('pointerup', onEnd);
document.addEventListener('pointercancel', onEnd);
}), (0, events_1.addDisposableListener)(_this.element, 'scroll', function () {
_this.calculateScrollbarStyles();
}), (0, events_1.addDisposableListener)(_this.scrollableElement, 'scroll', function () {
_this._scrollOffset =
_this._orientation === 'horizontal'
? _this.scrollableElement.scrollLeft
: _this.scrollableElement.scrollTop;
_this.calculateScrollbarStyles();
}), (0, dom_1.watchElementResize)(_this.element, function () {
(0, dom_1.toggleClass)(_this.element, 'dv-scrollable-resizing', true);
if (_this._animationTimer) {
clearTimeout(_this._animationTimer);
}
_this._animationTimer = setTimeout(function () {
clearTimeout(_this._animationTimer);
(0, dom_1.toggleClass)(_this.element, 'dv-scrollable-resizing', false);
}, 500);
_this.calculateScrollbarStyles();
}));
return _this;
}
Object.defineProperty(Scrollbar.prototype, "element", {
get: function () {
return this._element;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Scrollbar.prototype, "orientation", {
get: function () {
return this._orientation;
},
set: function (value) {
if (this._orientation === value) {
return;
}
this._scrollOffset = 0;
this._orientation = value;
(0, dom_1.removeClasses)(this._scrollbar, 'dv-scrollbar-vertical', 'dv-scrollbar-horizontal');
if (value === 'vertical') {
(0, dom_1.addClasses)(this._scrollbar, 'dv-scrollbar-vertical');
}
else {
(0, dom_1.addClasses)(this._scrollbar, 'dv-scrollbar-horizontal');
}
},
enumerable: false,
configurable: true
});
Scrollbar.prototype.calculateScrollbarStyles = function () {
var clientSize = this._orientation === 'horizontal'
? this.element.clientWidth
: this.element.clientHeight;
var scrollSize = this._orientation === 'horizontal'
? this.scrollableElement.scrollWidth
: this.scrollableElement.scrollHeight;
var hasScrollbar = scrollSize > clientSize;
if (hasScrollbar) {
var px = clientSize * (clientSize / scrollSize);
if (this._orientation === 'horizontal') {
this._scrollbar.style.width = "".concat(px, "px");
this._scrollbar.style.height = '';
}
else {
this._scrollbar.style.height = "".concat(px, "px");
this._scrollbar.style.width = '';
}
this._scrollOffset = (0, math_1.clamp)(this._scrollOffset, 0, scrollSize - clientSize);
if (this._orientation === 'horizontal') {
this.scrollableElement.scrollLeft = this._scrollOffset;
}
else {
this.scrollableElement.scrollTop = this._scrollOffset;
}
var percentageComplete = this._scrollOffset / (scrollSize - clientSize);
if (this._orientation === 'horizontal') {
this._scrollbar.style.left = "".concat((clientSize - px) * percentageComplete, "px");
this._scrollbar.style.top = '';
}
else {
this._scrollbar.style.top = "".concat((clientSize - px) * percentageComplete, "px");
this._scrollbar.style.left = '';
}
}
else {
if (this._orientation === 'horizontal') {
this._scrollbar.style.width = '0px';
this._scrollbar.style.left = '0px';
}
else {
this._scrollbar.style.height = '0px';
this._scrollbar.style.top = '0px';
}
this._scrollOffset = 0;
}
};
Scrollbar.MouseWheelSpeed = 1;
return Scrollbar;
}(lifecycle_1.CompositeDisposable));
exports.Scrollbar = Scrollbar;