devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
236 lines (231 loc) • 10.9 kB
JavaScript
/**
* DevExtreme (cjs/ui/splitter.js)
* Version: 23.2.6
* Build date: Wed May 01 2024
*
* Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
exports.default = void 0;
var _renderer = _interopRequireDefault(require("../core/renderer"));
var _ui = _interopRequireDefault(require("./widget/ui.widget"));
var _dom_adapter = _interopRequireDefault(require("../core/dom_adapter"));
var _events_engine = _interopRequireDefault(require("../events/core/events_engine"));
var _pointer = _interopRequireDefault(require("../events/pointer"));
var _window = require("../core/utils/window");
var _index = require("../events/utils/index");
var _guid = _interopRequireDefault(require("../core/guid"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
}
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass)
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o, p) {
o.__proto__ = p;
return o
};
return _setPrototypeOf(o, p)
}
const window = (0, _window.getWindow)();
const SPLITTER_CLASS = "dx-splitter";
const SPLITTER_WRAPPER_CLASS = "".concat("dx-splitter", "-wrapper");
const SPLITTER_INACTIVE_CLASS = "".concat("dx-splitter", "-inactive");
const SPLITTER_BORDER_CLASS = "".concat("dx-splitter", "-border");
const SPLITTER_INITIAL_STATE_CLASS = "".concat("dx-splitter", "-initial");
const STATE_DISABLED_CLASS = "dx-state-disabled";
const SPLITTER_MODULE_NAMESPACE = "dxSplitterResizing";
let SplitterControl = function(_Widget) {
_inheritsLoose(SplitterControl, _Widget);
function SplitterControl() {
return _Widget.apply(this, arguments) || this
}
var _proto = SplitterControl.prototype;
_proto._init = function() {
_Widget.prototype._init.call(this);
const eventGuid = (new _guid.default).toString();
this.SPLITTER_POINTER_DOWN_EVENT_NAME = (0, _index.addNamespace)(_pointer.default.down, "dxSplitterResizing" + eventGuid);
this.SPLITTER_POINTER_MOVE_EVENT_NAME = (0, _index.addNamespace)(_pointer.default.move, "dxSplitterResizing" + eventGuid);
this.SPLITTER_POINTER_UP_EVENT_NAME = (0, _index.addNamespace)(_pointer.default.up, "dxSplitterResizing" + eventGuid)
};
_proto._initMarkup = function() {
_Widget.prototype._initMarkup.call(this);
this._initActions();
this._$container = this.option("container");
this._$leftElement = this.option("leftElement");
this._$rightElement = this.option("rightElement");
this.$element().addClass(SPLITTER_WRAPPER_CLASS).addClass(SPLITTER_INITIAL_STATE_CLASS);
this._$splitterBorder = (0, _renderer.default)("<div>").addClass(SPLITTER_BORDER_CLASS).appendTo(this.$element());
this._$splitter = (0, _renderer.default)("<div>").addClass("dx-splitter").addClass(SPLITTER_INACTIVE_CLASS).appendTo(this._$splitterBorder)
};
_proto._initActions = function() {
this._actions = {
onApplyPanelSize: this._createActionByOption("onApplyPanelSize"),
onActiveStateChanged: this._createActionByOption("onActiveStateChanged")
}
};
_proto._render = function() {
_Widget.prototype._render.call(this);
this._detachEventHandlers();
this._attachEventHandlers()
};
_proto._clean = function() {
this._detachEventHandlers();
_Widget.prototype._clean.call(this)
};
_proto._attachEventHandlers = function() {
const document = _dom_adapter.default.getDocument();
_events_engine.default.on(this._$splitterBorder, this.SPLITTER_POINTER_DOWN_EVENT_NAME, this._onMouseDownHandler.bind(this));
_events_engine.default.on(document, this.SPLITTER_POINTER_MOVE_EVENT_NAME, this._onMouseMoveHandler.bind(this));
_events_engine.default.on(document, this.SPLITTER_POINTER_UP_EVENT_NAME, this._onMouseUpHandler.bind(this))
};
_proto._detachEventHandlers = function() {
const document = _dom_adapter.default.getDocument();
_events_engine.default.off(this._$splitterBorder, this.SPLITTER_POINTER_DOWN_EVENT_NAME);
_events_engine.default.off(document, this.SPLITTER_POINTER_MOVE_EVENT_NAME);
_events_engine.default.off(document, this.SPLITTER_POINTER_UP_EVENT_NAME)
};
_proto._dimensionChanged = function(dimension) {
if (!dimension || "height" !== dimension) {
this._containerWidth = this._$container.get(0).clientWidth;
this._setSplitterPositionLeft({
needUpdatePanels: true,
usePercentagePanelsWidth: true
})
}
};
_proto._onMouseDownHandler = function(e) {
e.preventDefault();
this._offsetX = e.pageX - this._$splitterBorder.offset().left <= this._getSplitterBorderWidth() ? e.pageX - this._$splitterBorder.offset().left : 0;
this._containerWidth = this._$container.get(0).clientWidth;
this.$element().removeClass(SPLITTER_INITIAL_STATE_CLASS);
this._toggleActive(true);
this._setSplitterPositionLeft({
needUpdatePanels: true
})
};
_proto._onMouseMoveHandler = function(e) {
if (!this._isSplitterActive) {
return
}
this._setSplitterPositionLeft({
splitterPositionLeft: this._getNewSplitterPositionLeft(e),
needUpdatePanels: true
})
};
_proto._onMouseUpHandler = function() {
if (!this._isSplitterActive) {
return
}
this._leftPanelPercentageWidth = null;
this._toggleActive(false);
this._setSplitterPositionLeft({
needUpdatePanels: true,
usePercentagePanelsWidth: true
})
};
_proto._getNewSplitterPositionLeft = function(e) {
let newSplitterPositionLeft = e.pageX - this._getContainerLeftOffset() - this._offsetX;
newSplitterPositionLeft = Math.max(0 - this._getSplitterOffset(), newSplitterPositionLeft);
newSplitterPositionLeft = Math.min(this._containerWidth - this._getSplitterOffset() - this._getSplitterWidth(), newSplitterPositionLeft);
return newSplitterPositionLeft
};
_proto._getContainerLeftOffset = function() {
let offsetLeft = this._$container.offset().left;
if (window) {
const style = window.getComputedStyle(this._$container.get(0));
const paddingLeft = parseFloat(style.paddingLeft) || 0;
const borderLeft = parseFloat(style.borderLeftWidth) || 0;
offsetLeft += paddingLeft + borderLeft
}
return offsetLeft
};
_proto._getSplitterOffset = function() {
return (this._getSplitterBorderWidth() - this._getSplitterWidth()) / 2
};
_proto._getSplitterWidth = function() {
return this._$splitter.get(0).clientWidth
};
_proto._getSplitterBorderWidth = function() {
return this._$splitterBorder.get(0).clientWidth
};
_proto._getLeftPanelWidth = function() {
return this._$leftElement.get(0).clientWidth
};
_proto.getSplitterBorderElement = function() {
return this._$splitterBorder
};
_proto._toggleActive = function(isActive) {
this.$element().toggleClass(SPLITTER_INACTIVE_CLASS, !isActive);
this._$splitter.toggleClass(SPLITTER_INACTIVE_CLASS, !isActive);
this._isSplitterActive = isActive;
this._actions.onActiveStateChanged({
isActive: isActive
})
};
_proto.toggleDisabled = function(isDisabled) {
this.$element().toggleClass("dx-state-disabled", isDisabled);
this._$splitter.toggleClass("dx-state-disabled", isDisabled)
};
_proto.isSplitterMoved = function() {
return !this.$element().hasClass(SPLITTER_INITIAL_STATE_CLASS)
};
_proto.disableSplitterCalculation = function(value) {
this._isSplitterCalculationDisabled = value
};
_proto._setSplitterPositionLeft = function() {
let {
splitterPositionLeft: splitterPositionLeft = null,
needUpdatePanels: needUpdatePanels = false,
usePercentagePanelsWidth: usePercentagePanelsWidth = false
} = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
splitterPositionLeft = splitterPositionLeft || this._getLeftPanelWidth() - this._getSplitterOffset();
const leftPanelWidth = splitterPositionLeft + this._getSplitterOffset();
const rightPanelWidth = this._containerWidth - leftPanelWidth;
if (!this._isSplitterCalculationDisabled) {
this.$element().css("left", splitterPositionLeft)
}
this._leftPanelPercentageWidth = this._leftPanelPercentageWidth || this._convertToPercentage(leftPanelWidth);
const rightPanelPercentageWidth = this._convertToPercentage(this._containerWidth - this._convertToPixels(this._leftPanelPercentageWidth));
if (!needUpdatePanels) {
return
}
this._actions.onApplyPanelSize({
leftPanelWidth: usePercentagePanelsWidth ? "".concat(this._leftPanelPercentageWidth, "%") : leftPanelWidth,
rightPanelWidth: usePercentagePanelsWidth ? "".concat(rightPanelPercentageWidth, "%") : rightPanelWidth
})
};
_proto._optionChanged = function(args) {
switch (args.name) {
case "initialLeftPanelWidth":
this._leftPanelPercentageWidth = this._convertToPercentage(args.value);
this._dimensionChanged();
break;
case "leftElement":
this.repaint();
break;
case "onActiveStateChanged":
case "onApplyPanelSize":
this._actions[args.name] = this._createActionByOption(args.name);
break;
default:
_Widget.prototype._optionChanged.call(this, args)
}
};
_proto._convertToPercentage = function(pixelWidth) {
return pixelWidth / this._$container.get(0).clientWidth * 100
};
_proto._convertToPixels = function(percentageWidth) {
return percentageWidth / 100 * this._$container.get(0).clientWidth
};
return SplitterControl
}(_ui.default);
exports.default = SplitterControl;
module.exports = exports.default;
module.exports.default = exports.default;