devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
179 lines (178 loc) • 7.98 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/file_manager/ui.file_manager.adaptivity.js)
* Version: 25.2.7
* Build date: Tue May 05 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import $ from "../../../core/renderer";
import {
getWidth
} from "../../../core/utils/size";
import {
isFunction
} from "../../../core/utils/type";
import {
getWindow,
hasWindow
} from "../../../core/utils/window";
import SplitterControl from "../../../ui/splitter_control";
import Widget from "../../core/widget/widget";
import Drawer from "../../ui/drawer/drawer";
const window = getWindow();
const ADAPTIVE_STATE_SCREEN_WIDTH = 573;
const FILE_MANAGER_ADAPTIVITY_DRAWER_PANEL_CLASS = "dx-filemanager-adaptivity-drawer-panel";
const DRAWER_PANEL_CONTENT_INITIAL = "dx-drawer-panel-content-initial";
const DRAWER_PANEL_CONTENT_ADAPTIVE = "dx-drawer-panel-content-adaptive";
class FileManagerAdaptivityControl extends Widget {
_initMarkup() {
super._initMarkup();
this._initActions();
this._isInAdaptiveState = false;
const $drawer = $("<div>").appendTo(this.$element());
$("<div>").addClass("dx-filemanager-adaptivity-drawer-panel").appendTo($drawer);
this._drawer = this._createComponent($drawer, Drawer);
this._drawer.option({
opened: true,
template: this._createDrawerTemplate.bind(this)
});
$(this._drawer.content()).addClass(DRAWER_PANEL_CONTENT_INITIAL);
const $drawerContent = $drawer.find(".dx-filemanager-adaptivity-drawer-panel").first();
const {
contentTemplate: contentRenderer
} = this.option();
if (isFunction(contentRenderer)) {
contentRenderer($drawerContent)
}
this._updateDrawerMaxSize()
}
_createDrawerTemplate(container) {
var _this$_drawer, _this$_drawer2;
const {
drawerTemplate: drawerTemplate
} = this.option();
null === drawerTemplate || void 0 === drawerTemplate || drawerTemplate(container);
this._splitter = this._createComponent("<div>", SplitterControl, {
container: this.$element(),
leftElement: $(null === (_this$_drawer = this._drawer) || void 0 === _this$_drawer ? void 0 : _this$_drawer.content()),
rightElement: $(null === (_this$_drawer2 = this._drawer) || void 0 === _this$_drawer2 ? void 0 : _this$_drawer2.viewContent()),
onApplyPanelSize: this._onApplyPanelSize.bind(this),
onActiveStateChanged: this._onActiveStateChanged.bind(this)
});
this._splitter.$element().appendTo(container);
this._splitter.disableSplitterCalculation(true)
}
_render() {
super._render();
this._checkAdaptiveState()
}
_onApplyPanelSize(e) {
var _this$_splitter, _this$_drawer3;
if (!hasWindow()) {
return
}
if (!(null !== (_this$_splitter = this._splitter) && void 0 !== _this$_splitter && _this$_splitter.isSplitterMoved())) {
this._setDrawerWidth("");
return
}
$(null === (_this$_drawer3 = this._drawer) || void 0 === _this$_drawer3 ? void 0 : _this$_drawer3.content()).removeClass(DRAWER_PANEL_CONTENT_INITIAL);
this._setDrawerWidth(e.leftPanelWidth)
}
_onActiveStateChanged(e) {
var _this$_splitter2;
null === (_this$_splitter2 = this._splitter) || void 0 === _this$_splitter2 || _this$_splitter2.disableSplitterCalculation(!e.isActive);
if (!e.isActive) {
var _this$_splitter3;
null === (_this$_splitter3 = this._splitter) || void 0 === _this$_splitter3 || _this$_splitter3.$element().css("left", "auto")
}
}
_setDrawerWidth(width) {
var _this$_drawer4, _this$_drawer5;
$(null === (_this$_drawer4 = this._drawer) || void 0 === _this$_drawer4 ? void 0 : _this$_drawer4.content()).css("width", width);
this._updateDrawerMaxSize();
null === (_this$_drawer5 = this._drawer) || void 0 === _this$_drawer5 || _this$_drawer5.resizeViewContent()
}
_updateDrawerMaxSize() {
var _this$_drawer6;
null === (_this$_drawer6 = this._drawer) || void 0 === _this$_drawer6 || _this$_drawer6.option("maxSize", this._drawer.getRealPanelWidth())
}
_dimensionChanged(dimension) {
if (!dimension || "height" !== dimension) {
this._checkAdaptiveState()
}
}
_checkAdaptiveState() {
const oldState = this._isInAdaptiveState;
this._isInAdaptiveState = this._isSmallScreen();
if (oldState !== this._isInAdaptiveState) {
var _this$_drawer7;
this.toggleDrawer(!this._isInAdaptiveState, true);
$(null === (_this$_drawer7 = this._drawer) || void 0 === _this$_drawer7 ? void 0 : _this$_drawer7.content()).toggleClass(DRAWER_PANEL_CONTENT_ADAPTIVE, this._isInAdaptiveState);
this._raiseAdaptiveStateChanged(this._isInAdaptiveState)
}
if (this._isInAdaptiveState && this._isDrawerOpened()) {
this._updateDrawerMaxSize()
}
}
_isSmallScreen() {
return getWidth(window) <= 573
}
_isDrawerOpened() {
var _this$_drawer8;
const {
opened: opened
} = (null === (_this$_drawer8 = this._drawer) || void 0 === _this$_drawer8 ? void 0 : _this$_drawer8.option()) ?? {};
return opened
}
_initActions() {
this._actions = {
onAdaptiveStateChanged: this._createActionByOption("onAdaptiveStateChanged")
}
}
_raiseAdaptiveStateChanged(enabled) {
var _this$_actions, _this$_actions$onAdap;
null === (_this$_actions = this._actions) || void 0 === _this$_actions || null === (_this$_actions$onAdap = _this$_actions.onAdaptiveStateChanged) || void 0 === _this$_actions$onAdap || _this$_actions$onAdap.call(_this$_actions, {
enabled: enabled
})
}
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), {
drawerTemplate: void 0,
contentTemplate: void 0,
onAdaptiveStateChanged: void 0
})
}
_optionChanged(args) {
const {
name: name
} = args;
switch (name) {
case "drawerTemplate":
case "contentTemplate":
this.repaint();
break;
case "onAdaptiveStateChanged":
this._actions[name] = this._createActionByOption(name);
break;
default:
super._optionChanged(args)
}
}
isInAdaptiveState() {
return this._isInAdaptiveState
}
toggleDrawer(showing, skipAnimation) {
var _this$_drawer9, _this$_drawer0, _this$_splitter4;
this._updateDrawerMaxSize();
null === (_this$_drawer9 = this._drawer) || void 0 === _this$_drawer9 || _this$_drawer9.option("animationEnabled", !skipAnimation);
null === (_this$_drawer0 = this._drawer) || void 0 === _this$_drawer0 || _this$_drawer0.toggle(showing);
const isSplitterActive = this._isDrawerOpened() && !this.isInAdaptiveState();
null === (_this$_splitter4 = this._splitter) || void 0 === _this$_splitter4 || _this$_splitter4.toggleDisabled(!isSplitterActive)
}
getSplitterElement() {
var _this$_splitter5;
return null === (_this$_splitter5 = this._splitter) || void 0 === _this$_splitter5 || null === (_this$_splitter5 = _this$_splitter5.getSplitterBorderElement()) || void 0 === _this$_splitter5 ? void 0 : _this$_splitter5.get(0)
}
}
export default FileManagerAdaptivityControl;