/*!
* UI development toolkit for HTML5 (OpenUI5)
* (c) Copyright 2009-2018 SAP SE or an SAP affiliate company.
* Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
*/
// Provides control sap.ui.commons.AccordionSection.
sap.ui.define(['jquery.sap.global', './library', 'sap/ui/core/Element'],
function(jQuery, library, Element) {
"use strict";
/**
* Constructor for a new AccordionSection.
*
* @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
* Represents a panel which is a container for other controls. The container does not have any layout function.
* @extends sap.ui.core.Element
*
* @author SAP SE
* @version 1.60.23
*
* @constructor
* @public
* @deprecated Since version 1.38.
* @alias sap.ui.commons.AccordionSection
* @ui5-metamodel This control/element also will be described in the UI5 (legacy) design time metamodel
*/
var AccordionSection = Element.extend("sap.ui.commons.AccordionSection", /** @lends sap.ui.commons.AccordionSection.prototype */ { metadata : {
library : "sap.ui.commons",
properties : {
/**
* When the section content exceeds maxHeight, a vertical scroll bar appears.
*/
maxHeight : {type : "sap.ui.core.CSSSize", group : "Dimension", defaultValue : null},
/**
* It is required that the used theme supports the control.
*/
enabled : {type : "boolean", group : "Behavior", defaultValue : true},
/**
* It is recommended to adjust the settings for the width when the section is set to 'collapsed'.
* @deprecated since 1.34
* Use Accordion's "openedSectionsId" property
*/
collapsed : {type : "boolean", group : "Behavior", defaultValue : false},
/**
* Text for the section header
*/
title : {type : "string", group : "Misc", defaultValue : null}
},
defaultAggregation : "content",
aggregations : {
/**
* Aggregates the controls that are contained in the panel. The control layout is browser-dependent.
* For a stable content layout, use a layout control as direct single child.
* When the panel dimensions are set, the child control may have width and height of 100%;
* when the panel dimensions are not set, the child defines the panel size.
*/
content : {type : "sap.ui.core.Control", multiple : true, singularName : "content"}
},
events : {
/**
* Event is fired when the user scrolls the panel
*/
scroll : {
parameters : {
/**
* Horizontal scroll position
*/
left : {type : "int"},
/**
* Vertical scroll position
*/
top : {type : "int"}
}
}
}
}});
/**
* AccordionSection Behavior Implementation
*
* Open:
* - HeaderDesign not implemented yet
*/
/**
* Initialization
* @private
*/
AccordionSection.prototype.init = function(){
this.oScrollDomRef = null; // points to the content area
this.data("sap-ui-fastnavgroup", "true", true); // Define group for F6 handling
};
/**
* Sets focus on the first control
* @private
*/
AccordionSection.prototype.focusFirstControl = function () {
var aControls = this.getContent();
if (aControls[0]) {
aControls[0].focus();
}
};
/**
* Sets focus the arrow
* @private
*/
AccordionSection.prototype.focus = function () {
var header = this.getDomRef("hdr");
header.focus();
};
/**
* Called after the theme is switched, required for adjustments
* @private
*/
AccordionSection.prototype.onThemeChanged = function () {
var hdrLeft = this.getDomRef("hdrL");
if (hdrLeft) {
hdrLeft.style.width = "auto";
this.onAfterRendering();
}
}
/**
* Adapts size settings of the rendered HTML
* @private
*/;
AccordionSection.prototype.onAfterRendering = function () {
this.oScrollDomRef = this.getDomRef("cont");
var cont = this.oScrollDomRef,
root = this.getDomRef(),
accordion = this.getParent().getDomRef(),
oDomLabel = this.getDomRef("lbl");
// if only height is set, the content area's height needs to be adapted (should be a rare use-case)
if (!AccordionSection._isSizeSet(this.getParent().getWidth()) && AccordionSection._isSizeSet(this.getMaxHeight())) {
if (cont) {
var contTop = cont.offsetTop;
var targetHeight = (root.offsetHeight - contTop);
cont.style.height = targetHeight + "px";
var actualContHeight = cont.offsetHeight;
if (actualContHeight > targetHeight) {
cont.style.height = targetHeight - (actualContHeight - targetHeight) + "px";
}
}
}
oDomLabel.style.width = accordion.offsetWidth - 30 + "px";
//Bind the scroll event (does not bubble)
var fnScrollProxy = this.__scrollproxy__;
if (!fnScrollProxy) {
fnScrollProxy = this.__scrollproxy__ = jQuery.proxy(this.onscroll, this);
}
this.$("cont").bind("scroll", fnScrollProxy);
};
AccordionSection.prototype.onBeforeRendering = function() {
var fnScrollProxy = this.__scrollproxy__;
if (fnScrollProxy) {
this.$("cont").unbind("scroll", fnScrollProxy);
}
};
/**
* Property setter for the "enabled" state
*
* @param {boolean} bEnabled Whether the AccordionSection is enabled or not
* @return {sap.ui.commons.AccordionSection} 'this' to allow method chaining
* @public
*/
AccordionSection.prototype.setEnabled = function(bEnabled) {
this.setProperty("enabled", bEnabled, true); // no re-rendering!
var root = this.getDomRef();
if (root) {
// if already rendered, adapt rendered control without complete re-rendering
if (bEnabled) {
jQuery(root).removeClass("sapUiAcdSectionDis");
} else {
jQuery(root).addClass("sapUiAcdSectionDis");
}
}
return this;
};
/**
* Property setter for the "collapsed" state
*
* @param {boolean} bCollapsed Whether the AccordionSection is collapsed or not
* @private
*/
AccordionSection.prototype._setCollapsed = function(bCollapsed) {
this.setProperty("collapsed", bCollapsed, true); // no re-rendering!
this._setCollapsedState(bCollapsed); // adapt rendered control without complete re-rendering
};
/**
* Property setter for the "collapsed" state
*
* @param {boolean} bCollapsed Whether the AccordionSection is collapsed or not
* @return {sap.ui.commons.AccordionSection} 'this' to allow method chaining
* @public
*/
AccordionSection.prototype.setCollapsed = function(bCollapsed) {
if (this.getParent()) {
if (!bCollapsed) {
this.getParent().openSection(this.getId());
} else {
this.getParent().closeSection(this.getId());
}
} else {
this._setCollapsed(bCollapsed);
}
return this;
};
/**
* Internal method for applying a "collapsed" state to the rendered HTML
*
* @param {boolean} bCollapsed Whether the AccordionSection is collapsed or not
*/
AccordionSection.prototype._setCollapsedState = function(bCollapsed) {
var tb = this.getDomRef("tb"),
cont = this.getDomRef("cont"),
accessibility = sap.ui.getCore().getConfiguration().getAccessibility();
if (this.getDomRef()) {
// after AccordionSection has been rendered
if (bCollapsed) {
// collapsing
if (!this.getParent().getWidth()) {
this.getDomRef().style.width = this.getDomRef().offsetWidth + "px"; // maintain the current width
}
jQuery(this.getDomRef()).addClass("sapUiAcdSectionColl");
if (tb) {
tb.style.display = "none";
}
if (cont) {
cont.style.display = "none";
}
if (accessibility) {
cont.setAttribute("aria-expanded", "false");
cont.setAttribute("aria-hidden", "true");
}
this.invalidate();
} else {
// expanding
if (!cont) {
// content has not been rendered yet, so render it now
this.invalidate();
} else {
// content exists already, just make it visible again
jQuery(this.getDomRef()).removeClass("sapUiAcdSectionColl");
if (tb) {
tb.style.display = "block";
}
cont.style.display = "block";
if (accessibility) {
cont.setAttribute("aria-expanded", "true");
}
if (this.getMaxHeight()) {
this.getDomRef().style.height = this.getMaxHeight(); // restore the set height
}
}
}
}
};
/**
* Static method that determines whether the given CSS size is set
* Returns "true" for absolute and relative sizes, returns "false" if "null", "inherit", or "auto" is given
*
* @static
* @param {sap.ui.core.CSSSize} sCssSize A CSS size string which must be a valid CSS size, or null
* @returns {boolean} Returns "true" when cssSize is not "auto" or "inherit"
* @private
*/
AccordionSection._isSizeSet = function(sCssSize) {
return (sCssSize && !(sCssSize === "auto") && !(sCssSize === "inherit"));
}
/* Event Handling */
/**
* Handles any triggering actions, such as a mouse click or pressing SPACE
*
* @param {jQuery.Event} oEvent . Current event which is processed
* @private
*/;
AccordionSection.prototype._handleTrigger = function(oEvent) {
// minimize button toggled
if ((oEvent.target.id === this.getId() + "-minL") ||
(oEvent.target.id === this.getId() + "-minR")) {
var bCollapsed = !this.getProperty("collapsed");
this._setCollapsed(bCollapsed);
oEvent.preventDefault();
oEvent.stopPropagation();
}
};
return AccordionSection;
}, /* bExport= */ true);