@openui5/sap.tnt
Version:
OpenUI5 UI Library sap.tnt
256 lines (217 loc) • 7.55 kB
JavaScript
/*!
* OpenUI5
* (c) Copyright 2026 SAP SE or an SAP affiliate company.
* Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
*/
// Provides control sap.t.ToolPage.
sap.ui.define([
"./library",
"sap/m/library",
"sap/ui/base/ManagedObjectObserver",
"sap/ui/core/Control",
"sap/ui/Device",
"sap/ui/core/ResizeHandler",
"./ToolPageRenderer"
], function (library,
mLibrary,
ManagedObjectObserver,
Control,
Device,
ResizeHandler,
ToolPageRenderer) {
"use strict";
var TP_RANGE_SET = "TPRangeSet";
Device.media.initRangeSet(TP_RANGE_SET, [600], "px", ["S", "M"], true);
// shortcut for sap.m.PageBackgroundDesign
var PageBackgroundDesign = mLibrary.PageBackgroundDesign;
/**
* Constructor for a new ToolPage.
*
* @param {string} [sId] ID for the new control, generated automatically if no id is given
* @param {object} [mSettings] Initial settings for the new control
*
* @class
* The ToolPage is a layout control, used to create a basic tools app that has a header, side navigation and contents area.
* <h4>Overview</h4>
* The control has three main areas - a header on top, navigation to the side and a content area that can hold any control. The header and side navigation use custom controls
* - {@link sap.tnt.ToolHeader} and {@link sap.tnt.SideNavigation}.
* <h4>Usage</h4>
* The main usage of the sap.tnt controls is for scenarios in the tooling or administration space.
* @extends sap.ui.core.Control
*
* @author SAP SE
* @version 1.146.0
*
* @constructor
* @public
* @since 1.34
* @alias sap.tnt.ToolPage
*/
var ToolPage = Control.extend("sap.tnt.ToolPage", /** @lends sap.tnt.ToolPage.prototype */ {
metadata: {
library: "sap.tnt",
properties: {
/**
* Indicates if the side menu is expanded.
* Overrides the <code>expanded</code> property of the <code>sideContent</code> aggregation.
* **Note:** By default, on mobile phone devices and small screens, the side content is collapsed to provide more space for the main content.
* On larger screens, excluding mobile phone devices, it is expanded. This behavior can be overridden by setting this property.
*/
sideExpanded: {type: "boolean", group: "Misc", defaultValue: true},
/**
* Specifies the content background design.
* @public
* @since 1.115
*/
contentBackgroundDesign: {
type: "sap.m.PageBackgroundDesign",
group: "Appearance",
defaultValue: PageBackgroundDesign.Standard
}
},
aggregations: {
/**
* The control to appear in the header area.
*/
header: {type: "sap.ui.core.Control", multiple: false},
/**
* The control to appear in the subheader area.
* @since 1.93
*/
subHeader: {type: "sap.ui.core.Control", multiple: false },
/**
* The side menu of the layout.
*/
sideContent: {type: "sap.tnt.SideNavigation", multiple: false},
/**
* The content section.
*/
mainContents: {type: "sap.ui.core.Control", multiple: true, singularName: "mainContent"}
},
events: {}
},
renderer: ToolPageRenderer
});
ToolPage.prototype.init = function () {
this._oContentObserver = new ManagedObjectObserver(this._onContentChange.bind(this));
this._oContentObserver.observe(this, { aggregations: ["subHeader", "sideContent"] });
this._oContentVisibilityObserver = new ManagedObjectObserver(this._onContentVisibilityChange.bind(this));
this._deregisterControl();
};
ToolPage.prototype.exit = function () {
this._deregisterControl();
if (this._oContentObserver) {
this._oContentObserver.disconnect();
this._oContentObserver = null;
}
if (this._oContentVisibilityObserver) {
this._oContentVisibilityObserver.disconnect();
this._oContentVisibilityObserver = null;
}
};
ToolPage.prototype.onBeforeRendering = function () {
this._deregisterControl();
};
ToolPage.prototype.onAfterRendering = function () {
this._resizeHandler = ResizeHandler.register(this.getDomRef(), this._resize.bind(this));
this._updateLayoutSettings();
};
/**
* Toggles the expand/collapse state of the SideContent.
* @returns {this} Pointer to the control instance for chaining.
* @public
*/
ToolPage.prototype.toggleSideContentMode = function () {
return this.setSideExpanded(!this.getSideExpanded());
};
/**
* Sets the expand/collapse state of the SideContent.
* @param {boolean} bSideExpanded defines whether the SideNavigation is expanded.
* @returns {this} Pointer to the control instance for chaining
* @public
*/
ToolPage.prototype.setSideExpanded = function (bSideExpanded) {
this.setProperty("sideExpanded", bSideExpanded, true);
var oSideContent = this.getSideContent();
if (!oSideContent) {
return this;
}
oSideContent.setExpanded(bSideExpanded);
var oDomRef = this.getDomRef();
if (!oDomRef) {
return this;
}
if (bSideExpanded) {
oDomRef.querySelector(".sapTntToolPageContentWrapper").classList.remove("sapTntToolPageAsideCollapsed");
} else {
oDomRef.querySelector(".sapTntToolPageContentWrapper").classList.add("sapTntToolPageAsideCollapsed");
}
return this;
};
/**
* @private
*/
ToolPage.prototype._deregisterControl = function () {
if (this._resizeHandler) {
ResizeHandler.deregister(this._resizeHandler);
this._resizeHandler = null;
}
};
/**
* Handles the change of the screen size.
* @private
*/
ToolPage.prototype._resize = function () {
this._updateLayoutSettings();
};
ToolPage.prototype._updateLayoutSettings = function () {
const oMediaRange = this._getMediaRange();
const sClassName = "sapTntToolPage-Layout" + oMediaRange.name;
if (this._sCurrentLayoutClassName === sClassName) {
return;
}
if (this._sCurrentLayoutClassName) {
this.removeStyleClass(this._sCurrentLayoutClassName);
}
this.setSideExpanded(this.isPropertyInitial("sideExpanded") ? !this._isLayoutS() : this.getSideExpanded());
this.addStyleClass(sClassName);
this._sCurrentLayoutClassName = sClassName;
};
ToolPage.prototype._getMediaRange = function () {
return Device.system.phone ? { name: "S" } : Device.media.getCurrentRange(TP_RANGE_SET, window.innerWidth);
};
ToolPage.prototype._isLayoutS = function () {
return this._getMediaRange().name === "S";
};
ToolPage.prototype._onContentChange = function(oChanges) {
switch (oChanges.mutation) {
case "insert":
this._oContentVisibilityObserver.observe(oChanges.child, { properties: ["visible"] });
if (oChanges.name === "sideContent" && oChanges.child && oChanges.child.isA("sap.tnt.SideNavigation")) {
oChanges.child.attachItemSelect(this._onSideNavigationItemSelect, this);
}
break;
case "remove":
this._oContentVisibilityObserver.unobserve(oChanges.child, { properties: ["visible"] });
if (oChanges.name === "sideContent" && oChanges.child && oChanges.child.isA("sap.tnt.SideNavigation")) {
oChanges.child.detachItemSelect(this._onSideNavigationItemSelect, this);
}
break;
}
};
ToolPage.prototype._onContentVisibilityChange = function(oChanges) {
this.invalidate();
};
/**
* Handles the itemSelect event from the SideNavigation.
* Auto-collapses the side navigation on small screens (< 600px) when an item is selected.
* @param {sap.ui.base.Event} oEvent The itemSelect event
* @private
*/
ToolPage.prototype._onSideNavigationItemSelect = function(oEvent) {
if (this._isLayoutS()) {
this.setSideExpanded(false);
}
};
return ToolPage;
});