@sapui5/sap.ui.vbm 1.119.0 → 1.121.0

package/src/sap/ui/vbm/ListPanel.js

@@ -0,0 +1,336 @@
+/*!
+ * SAP UI development toolkit for HTML5 (SAPUI5) (c) Copyright 2009-2012 SAP AG. All rights reserved
+ */
+
+// Provides control sap.ui.vbm.ListPanel.
+sap.ui.define([
+	"./library",
+	"sap/ui/core/Control",
+	"sap/m/library",
+	"./ListPanelRenderer"
+], function(
+	library,
+	Control,
+	mobileLibrary,
+	ListPanelRenderer
+) {
+	"use strict";
+
+	/**
+	 * Constructor for a new ListPanel.
+	 *
+	 * @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 Aggregation control for the Legend
+	 * @extends sap.ui.core.Control
+	 * @constructor
+	 * @public
+	 * @alias sap.ui.vbm.ListPanel
+	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
+	 * @experimental Since 1.38.0 This class is experimental and might be modified or removed in future versions.
+	 */
+	var ListPanel = Control.extend("sap.ui.vbm.ListPanel", /** @lends sap.ui.vbm.ListPanel.prototype */ {
+		metadata: {
+
+			library: "sap.ui.vbm",
+			properties: {
+				/**
+				 * Header text
+				 */
+				"headerText": {
+					type: "string",
+					group: "Misc"
+				},
+				/**
+				 * Header icon
+				 */
+				"headerIcon": {
+					type: "sap.ui.core.URI",
+					group: "Misc"
+				},
+				/**
+				 * Expansion state
+				 */
+				"expanded": {
+					type: "boolean",
+					group: "Misc",
+					defaultValue: true
+				},
+				/**
+				 * Expand animation
+				 */
+				"expandAnimation": {
+					type: "boolean",
+					group: "Misc",
+					defaultValue: true
+				},
+				/**
+				 * Selection Mode
+				 */
+				"selectionMode": {
+					type: "sap.m.ListMode",
+					group: "Misc",
+					defaultValue: sap.m.ListMode.MultiSelect
+				}
+
+			},
+			aggregations: {
+				/**
+				 * Item aggregation
+				 */
+				"items": {
+					type: "sap.m.ListItemBase",
+					multiple: true,
+					singularName: "item"
+				},
+				/**
+				 * hidden panel aggregation needed for binding
+				 */
+				"panel": {
+					type: "sap.m.Panel",
+					multiple: false,
+					visibility: "hidden"
+				}
+			},
+			events: {
+				/**
+				 * Event is fired if the header icon is pressed
+				 */
+				headerIconPress: {},
+				/**
+				 * Event is fired if the panel is expanded of collapsed
+				 */
+				expand: {},
+				/**
+				 * Event is fired when selection is changed via user interaction inside the control.
+				 */
+				selectionChange: {
+					parameters: {
+
+						/**
+						 * The item whose selection has changed. In <code>MultiSelect</code> mode, only the up-most selected item is returned. This
+						 * parameter can be used for single-selection modes.
+						 */
+						listItem: {
+							type: "sap.m.ListItemBase"
+						},
+
+						/**
+						 * Array of items whose selection has changed. This parameter can be used for <code>MultiSelect</code> mode.
+						 */
+						listItems: {
+							type: "sap.m.ListItemBase[]"
+						},
+
+						/**
+						 * Indicates whether the <code>listItem</code> parameter is selected or not.
+						 */
+						selected: {
+							type: "boolean"
+						}
+					}
+				},
+				/**
+				 * Event is fired when an item is pressed unless the item's <code>type</code> property is <code>Inactive</code>.
+				 */
+				itemPress: {
+					parameters: {
+
+						/**
+						 * The item which fired the pressed event.
+						 */
+						listItem: { type: "sap.m.ListItemBase" },
+
+						/**
+						 * The control which caused the press event within the container.
+						 */
+						srcControl: { type: "sap.ui.core.Control" }
+					}
+				}
+			}
+		}
+	});
+
+	// ...........................................................................//
+	// This file defines behavior for the control,...............................//
+	// ...........................................................................//
+	// Public API functions
+	// ............................................................................//
+
+	/**
+	 * Returns selected list item. When no item is selected, "null" is returned. When "multi-selection" is enabled and multiple items are selected, only the up-most selected item is returned.
+	 * @returns {sap.m.ListItemBase} Selected item.
+	 * @public
+	 * @ui5-metamodel This method also will be described in the UI5 (legacy) designtime metamodel
+	 */
+	ListPanel.prototype.getSelectedItem = function() {
+		return this._oList.getSelectedItem();
+	};
+
+	/**
+	 * Selects or deselects the given list item.
+	 *
+	 * @param {sap.m.ListItemBase} oListItem
+	 *         The list item whose selection to be changed. This parameter is mandatory.
+	 * @param {boolean} bSelect
+	 *         Sets selected status of the list item. Default value is true.
+	 * @param {boolean} bFireEvent Whether to fire the event or not.
+	 * @public
+	 * @ui5-metamodel This method also will be described in the UI5 (legacy) designtime metamodel
+	 */
+	ListPanel.prototype.setSelectedItem = function(oListItem, bSelect, bFireEvent) {
+		this._oList.setSelectedItem(oListItem, bSelect, bFireEvent);
+	};
+
+	/**
+	 * Returns an array containing the selected list items. If no items are selected, an empty array is returned.
+	 *
+	 * @returns {sap.m.ListItemBase[]} Selected items
+	 * @public
+	 * @ui5-metamodel This method also will be described in the UI5 (legacy) designtime metamodel
+	 */
+	ListPanel.prototype.getSelectedItems = function() {
+		return this._oList.getSelectedItems();
+	};
+
+	// ........................................................................//
+	// Implementation of UI5 Interface functions
+	// ........................................................................//
+	ListPanel.prototype.init = function() {
+		// do something for initialization...
+		this._oList = new sap.m.ListBase({
+			mode: this.getSelectionMode(),
+			itemPress: this.fireItemPress.bind(this),
+			selectionChange: this.fireSelectionChange.bind(this)
+		});
+
+		this._oPanel = new sap.m.Panel({
+			expandable: true,
+			expanded: true,
+			expandAnimation: true,
+			headerToolbar: new sap.m.Toolbar({
+				active: false
+			}),
+			content: [
+				this._oList
+			],
+			expand: this.fireExpand.bind(this)
+		});
+		this._oPanel.getHeaderToolbar().addStyleClass("sapUiVkLPTb");
+		this.setAggregation("panel", this._oPanel, /* bSuppressInvalidate= */ true);
+
+		this._oHeaderIcon = null;
+		this._oHeaderText = null;
+		this._bHeaderToolbarChanged = true;
+
+	};
+
+	ListPanel.prototype.exit = function() {
+		this._destroyControl(this._oList);
+		this._destroyControl(this._oPanel);
+		this._destroyControl(this._oHeaderIcon);
+		this._destroyControl(this._oHeaderText);
+	};
+
+	ListPanel.prototype.getItems = function() {
+		return this._oList.getItems();
+	};
+
+	ListPanel.prototype.addItem = function(oObject) {
+		return this._oList.addItem(oObject);
+	};
+
+	ListPanel.prototype.insertItem = function(oObject, iIndex) {
+		return this._oList.insertItem(oObject, iIndex);
+	};
+
+	ListPanel.prototype.removeItem = function(oObject) {
+		return this._oList.removeItem(oObject);
+	};
+
+	ListPanel.prototype.removeAllItems = function() {
+		return this._oList.removeAllItems();
+	};
+
+	ListPanel.prototype.setHeaderText = function(value) {
+		if (!this._oHeaderText) {
+			this._oHeaderText = new sap.m.Title();
+		}
+		this._oHeaderText.setText(value);
+		this._bHeaderToolbarChanged = true;
+
+		if (this._oHeaderIcon) {
+			this._oHeaderIcon.setTooltip(value);
+			this._oHeaderIcon.addAriaLabelledBy(this._oHeaderText);
+			this._oHeaderIcon.addAriaDescribedBy(this._oHeaderText);
+		}
+		return this.setProperty("headerText", value);
+	};
+
+	ListPanel.prototype.getExpanded = function() {
+		return this._oPanel.getExpanded();
+	};
+
+	ListPanel.prototype.setExpanded = function(value) {
+		return this._oPanel.setExpanded(value);
+	};
+
+	ListPanel.prototype.getExpandAnimation = function() {
+		return this._oPanel.getExpandAnimation();
+	};
+
+	ListPanel.prototype.setExpandAnimation = function(value) {
+		return this._oPanel.setExpandAnimation(value);
+	};
+
+	ListPanel.prototype.setHeaderIcon = function(value) {
+		if (!this._oHeaderIcon) {
+			this._oHeaderIcon = new sap.m.Button({
+				press: this.fireHeaderIconPress.bind(this),
+				type: sap.m.ButtonType.Transparent,
+				tooltip: this.getHeaderText()
+			});
+		}
+		this._oHeaderIcon.setIcon(value);
+		this._bHeaderToolbarChanged = true;
+
+		if (this._oHeaderText) {
+			this._oHeaderIcon.addAriaLabelledBy(this._oHeaderText);
+		}
+
+		return this.setProperty("headerIcon", value);
+	};
+
+	ListPanel.prototype.setSelectionMode = function(value) {
+		this._oList.setMode(value);
+		return this.setProperty("selectionMode", value);
+	};
+
+	ListPanel.prototype.onBeforeRendering = function() {
+		if (this._bHeaderToolbarChanged) {
+			var oToolbar = this._oPanel.getHeaderToolbar();
+			oToolbar.removeAllContent();
+			if (this._oHeaderIcon) {
+				oToolbar.addContent(this._oHeaderIcon);
+			}
+			if (this._oHeaderText) {
+				oToolbar.addContent(this._oHeaderText);
+			}
+			this._bHeaderToolbarChanged = false;
+		}
+	};
+
+	// ...............................................................................
+	// Internal functions
+	// ...............................................................................
+
+	ListPanel.prototype._destroyControl = function(oControl) {
+		if (oControl) {
+			oControl.destroy();
+			oControl = undefined;
+		}
+	};
+
+	return ListPanel;
+
+});

package/src/sap/ui/vbm/ListPanelRenderer.js

@@ -0,0 +1,36 @@
+/*!
+ * SAP UI development toolkit for HTML5 (SAPUI5) (c) Copyright 2009-2012 SAP AG. All rights reserved
+ */
+
+sap.ui.define(function() {
+	"use strict";
+
+	/*
+	 * @class ListPanel renderer. @static
+	 */
+	var ListPanelRenderer = {
+		apiVersion: 2
+	};
+
+	/**
+	 * Renders the HTML for the given control, using the provided {@link sap.ui.core.RenderManager}.
+	 *
+	 * @param {sap.ui.core.RenderManager} oRm the RenderManager that can be used for writing to the render output buffer
+	 * @param {sap.ui.core.Control} oControl an object representation of the control that should be rendered
+	 */
+	ListPanelRenderer.render = function(oRm, oControl) {
+		// just render the internal Panel. The purpose is to only provide more specific properties.
+		var oPanel = oControl._oPanel;
+		oPanel.addStyleClass("sapUiVkListPanel");
+
+		oRm.openStart("div", oControl);
+		oRm.attr("role", sap.ui.core.AccessibleRole.Presentation);
+		oRm.openEnd();
+		oRm.renderControl(oPanel);
+		oRm.close("div");
+
+	};
+
+	return ListPanelRenderer;
+
+}, /* bExport= */true);

package/src/sap/ui/vbm/ListPanelStack.js

@@ -0,0 +1,254 @@
+/*!
+ * SAP UI development toolkit for HTML5 (SAPUI5) (c) Copyright 2009-2012 SAP AG. All rights reserved
+ */
+
+// Provides control sap.ui.vbm.ListPanelStack.
+sap.ui.define([
+	"./library",
+	"sap/ui/core/Control",
+	"sap/ui/layout/library",
+	"./ListPanelStackRenderer"
+], function(
+	library,
+	Control,
+	layoutLibrary,
+	ListPanelStackRenderer
+) {
+	"use strict";
+
+	/**
+	 * Constructor for a new ListPanelStack.
+	 *
+	 * @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 ListPanelStack control
+	 * @extends sap.ui.core.Control
+	 * @constructor
+	 * @public
+	 * @alias sap.ui.vbm.ListPanelStack
+	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
+	 * @experimental Since 1.38.0 This class is experimental and might be modified or removed in future versions.
+	 */
+	var ListPanelStack = Control.extend("sap.ui.vbm.ListPanelStack", /** @lends sap.ui.vbm.ListPanelStack.prototype */ {
+		metadata: {
+
+			library: "sap.ui.vbm",
+			properties: {
+				/**
+				 * Control width
+				 */
+				"width": {
+					type: "sap.ui.core.CSSSize",
+					group: "Misc",
+					defaultValue: "100%"
+				},
+				/**
+				 * Expansion state
+				 */
+				"expanded": {
+					type: "boolean",
+					group: "Misc",
+					defaultValue: true
+				},
+				/**
+				 * Expand animation
+				 */
+				"expandAnimation": {
+					type: "boolean",
+					group: "Misc",
+					defaultValue: true
+				},
+				/**
+				 * Ability to collapse
+				 */
+				"collapsible": {
+					type: "boolean",
+					group: "Misc",
+					defaultValue: true
+				}
+			},
+			aggregations: {
+
+				"content": {
+					type: "sap.ui.vbm.ListPanel",
+					multiple: true,
+					singularName: "content"
+				},
+				/**
+				 * hidden layout aggregation needed for binding
+				 */
+				"layout": {
+					type: "sap.ui.layout.VerticalLayout",
+					multiple: false,
+					visibility: "hidden"
+				}
+			}
+		}
+	});
+
+	// ...........................................................................//
+	// This file defines behavior for the control,...............................//
+	// ...........................................................................//
+	// Public API functions
+	// ............................................................................//
+
+	// ........................................................................//
+	// Implementation of UI5 Interface functions
+	// ........................................................................//
+	ListPanelStack.prototype.init = function() {
+		// do something for initialization...
+		this._oLayout = new sap.ui.layout.VerticalLayout();
+		// default expandAnimation: true
+		this._oLayout.addStyleClass("sapUiVkLPSTrans");
+		this.setAggregation("layout", this._oLayout, /* bSuppressInvalidate= */ true);
+		this._bFirstTime = true;
+	};
+
+	ListPanelStack.prototype.exit = function() {
+		if (this._oLayout) {
+			this._oLayout.destroy();
+			this._oLayout = undefined;
+		}
+	};
+
+	ListPanelStack.prototype.getContent = function() {
+		return this._oLayout.getContent();
+	};
+
+	ListPanelStack.prototype.addContent = function(oObject) {
+		oObject.attachExpand(this._onContentExpand.bind(this));
+		oObject.attachHeaderIconPress(this._onContentHeaderIconPress.bind(this));
+		return this._oLayout.addContent(oObject);
+	};
+
+	ListPanelStack.prototype.removeContent = function(oObject) {
+		return this._oLayout.removeContent(oObject);
+	};
+
+	ListPanelStack.prototype.insertContent = function(oObject, iIndex) {
+		return this._oLayout.insertContent(oObject, iIndex);
+	};
+
+	ListPanelStack.prototype.removeAllContent = function() {
+		return this._oLayout.removeAllContent();
+	};
+
+	ListPanelStack.prototype.getWidth = function() {
+		return this._oLayout.getWidth();
+	};
+
+	ListPanelStack.prototype.setWidth = function(value) {
+		this.setProperty("width", value, true);
+		return this._oLayout.setWidth(value);
+	};
+
+	ListPanelStack.prototype.setExpanded = function(value) {
+		if (value != this.getExpanded()) {
+			if (value) {
+				this._expand();
+			} else {
+				this._collapse();
+			}
+		}
+		return this;
+	};
+
+	ListPanelStack.prototype.setExpandAnimation = function(value) {
+		this._oLayout.removeStyleClass("sapUiVkLPSTrans");
+		if (value) {
+			this._oLayout.addStyleClass("sapUiVkLPSTrans");
+		}
+		return this.setProperty("expandAnimation", value, true);
+	};
+
+	ListPanelStack.prototype.onBeforeRendering = function() {
+		if (this._bFirstTime) {
+			// check expand state of all content panels to determine initial expand state for stack
+			var bExpanded = false;
+			var aContent = this.getContent();
+			for (var i = 0; i < aContent.length; ++i) {
+				if (aContent[i].getExpanded()) {
+					bExpanded = true;
+				}
+			}
+			this.setExpanded(bExpanded);
+			this._bFirstTime = false;
+		}
+	};
+
+	ListPanelStack.prototype.onAfterRendering = function() {
+		// If the control is not expanded, then it means it's collapsed
+		// so we applied the required width.
+		if (!this.getExpanded()) {
+			this._updateCollapsedLayoutWidth();
+		}
+	};
+
+	// ...............................................................................
+	// Internal functions
+	// ...............................................................................
+
+	ListPanelStack.prototype._onContentExpand = function(oEvent) {
+		var expanded = false;
+		var aContent = this._oLayout.getContent();
+		for (var i = 0; i < aContent.length; ++i) {
+			if (aContent[i].getExpanded()) {
+				expanded = true;
+			}
+		}
+		this.setExpanded(expanded);
+	};
+
+	ListPanelStack.prototype._onContentHeaderIconPress = function(oEvent) {
+		var bsetExpand = oEvent.oSource.getExpanded() ? false : true;
+		oEvent.oSource.setExpanded(bsetExpand);
+		var bExpand = false;
+		var aContent = this._oLayout.getContent();
+		for (var i = 0; i < aContent.length; ++i) {
+			if (aContent[i].getExpanded()) {
+				bExpand = true;
+				break;
+			}
+		}
+		this.setExpanded(bExpand);
+
+	};
+
+	ListPanelStack.prototype._expand = function() {
+		this._oLayout.removeStyleClass("sapUiVkLPSCollapse");
+		this._oLayout.setWidth(this.getProperty("width"));
+		this.setProperty("expanded", true, true);
+	};
+
+	ListPanelStack.prototype._collapse = function() {
+		if (!this.getCollapsible()) {
+			return;
+		}
+
+		// make sure all panels are collapsed
+		var aContent = this.getContent();
+		for (var i = 0; i < aContent.length; ++i) {
+			aContent[i].setExpanded(false);
+		}
+		// collapse the stack
+		this._oLayout.addStyleClass("sapUiVkLPSCollapse");
+
+		this._updateCollapsedLayoutWidth();
+
+		this.setProperty("expanded", false, true);
+	};
+
+	ListPanelStack.prototype._updateCollapsedLayoutWidth = function() {
+		// Checking if any ancestor of this element has the compact class;
+		// we do not to apply the cozy size if the sapUiSizeCompact class
+		// exists on an element which is not an ancestor.
+		if (this._oLayout.$().closest(".sapUiSizeCompact").length === 0) {
+			this._oLayout.setWidth("3rem");
+		} else {
+			this._oLayout.setWidth("2.5rem");
+		}
+	};
+
+	return ListPanelStack;
+
+});

package/src/sap/ui/vbm/ListPanelStackRenderer.js

@@ -0,0 +1,29 @@
+/*!
+ * SAP UI development toolkit for HTML5 (SAPUI5) (c) Copyright 2009-2012 SAP AG. All rights reserved
+ */
+
+sap.ui.define(function() {
+	"use strict";
+
+	/*
+	 * @class Legend renderer. @static
+	 */
+	var ListPanelStackRenderer = {
+		apiVersion: 2
+	};
+
+	/**
+	 * Renders the HTML for the given control, using the provided {@link sap.ui.core.RenderManager}.
+	 *
+	 * @param {sap.ui.core.RenderManager} oRm the RenderManager that can be used for writing to the render output buffer
+	 * @param {sap.ui.core.Control} oControl an object representation of the control that should be rendered
+	 */
+	ListPanelStackRenderer.render = function(oRm, oControl) {
+		oControl._oLayout.addStyleClass("sapUiVkListPanelStack");
+		// render the internal Panel.
+		oRm.renderControl(oControl._oLayout);
+	};
+
+	return ListPanelStackRenderer;
+
+}, /* bExport= */true);