/*!
* 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.Button.
sap.ui.define([
'jquery.sap.global',
'./library',
'sap/ui/core/Control',
'sap/ui/core/EnabledPropagator',
'sap/ui/core/IconPool',
"./ButtonRenderer"
],
function(jQuery, library, Control, EnabledPropagator, IconPool, ButtonRenderer) {
"use strict";
/**
* Constructor for a new Button.
*
* @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
* Enables users to trigger actions such as save or print. For the button UI, you can define some text or an icon, or both.
* @extends sap.ui.core.Control
* @implements sap.ui.commons.ToolbarItem, sap.ui.core.IFormContent
*
* @author SAP SE
* @version 1.60.23
*
* @constructor
* @public
* @deprecated as of version 1.38, replaced by {@link sap.m.Button}
* @alias sap.ui.commons.Button
* @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
*/
var Button = Control.extend("sap.ui.commons.Button", /** @lends sap.ui.commons.Button.prototype */ { metadata : {
interfaces : [
"sap.ui.commons.ToolbarItem",
"sap.ui.core.IFormContent"
],
library : "sap.ui.commons",
properties : {
/**
*
* Button text displayed at runtime.
*/
text : {type : "string", group : "Appearance", defaultValue : ''},
/**
*
* Boolean property to enable the control (default is true). Buttons that are disabled have other colors than enabled ones, depending on custom settings.
*/
enabled : {type : "boolean", group : "Behavior", defaultValue : true},
/**
*
* Control width as common CSS-size (px or % as unit, for example)
*/
width : {type : "sap.ui.core.CSSSize", group : "Dimension", defaultValue : null},
/**
*
* Unique identifier used for help service
*/
helpId : {type : "string", group : "Behavior", defaultValue : ''},
/**
* Icon to be displayed as graphical element within the button.
* This can be a URI to an image or an icon font URI.
*/
icon : {type : "sap.ui.core.URI", group : "Appearance", defaultValue : ''},
/**
* Icon to be displayed as graphical element within the button when it is hovered (only if also a base icon was specified). If not specified the base icon is used.
* If an icon font icon is used, this property is ignored.
*/
iconHovered : {type : "sap.ui.core.URI", group : "Appearance", defaultValue : ''},
/**
* Icon to be displayed as graphical element within the button when it is selected (only if also a base icon was specified). If not specified the base or hovered icon is used.
* If an icon font icon is used, this property is ignored.
*/
iconSelected : {type : "sap.ui.core.URI", group : "Appearance", defaultValue : ''},
/**
*
* If set to true (default), the display sequence is 1. icon 2. control text .
*/
iconFirst : {type : "boolean", group : "Appearance", defaultValue : true},
/**
* Specifies the button height. If this property is set, the height which is specified by the underlying theme is not used any longer.
*/
height : {type : "sap.ui.core.CSSSize", group : "Dimension", defaultValue : null},
/**
* Indicates if the button is styled. If not it is rendered as native HTML-button. In this case a custom styling can be added usig addStyleClass.
*/
styled : {type : "boolean", group : "Appearance", defaultValue : true},
/**
* The button is rendered as lite button.
*/
lite : {type : "boolean", group : "Appearance", defaultValue : false},
/**
* Style of the button.
* (e.g. emphasized)
*/
style : {type : "sap.ui.commons.ButtonStyle", group : "Appearance", defaultValue : sap.ui.commons.ButtonStyle.Default}
},
associations : {
/**
* Association to controls / ids which describe this control (see WAI-ARIA attribute aria-describedby).
*/
ariaDescribedBy : {type : "sap.ui.core.Control", multiple : true, singularName : "ariaDescribedBy"},
/**
* Association to controls / ids which label this control (see WAI-ARIA attribute aria-labelledby).
*/
ariaLabelledBy : {type : "sap.ui.core.Control", multiple : true, singularName : "ariaLabelledBy"}
},
events : {
/**
*
* Event is fired when the user presses the control.
*/
press : {}
}
}});
/**
* Puts the focus to the button.
*
* @name sap.ui.commons.Button#focus
* @function
* @type void
* @public
* @ui5-metamodel This method also will be described in the UI5 (legacy) designtime metamodel
*/
EnabledPropagator.call(Button.prototype);
/**
* Function is called when button is clicked.
*
* @param {jQuery.Event} oEvent The event fired
* @private
*/
Button.prototype.onclick = function(oEvent) {
if (this.getEnabled() && this.getVisible()) {
this.firePress({/* no parameters */});
}
oEvent.preventDefault();
oEvent.stopPropagation();
};
/**
* Handles the sapenter event does not bubble.
*
* @param {jQuery.Event} oEvent The event fired
* @private
*/
Button.prototype.onsapenter = function(oEvent) {
oEvent.stopPropagation();
};
/**
* Function is called when mouse key is clicked down. The button style classes
* are replaced then.
*
* @param {jQuery.Event} oEvent The event fired
* @private
*/
Button.prototype.onmousedown = function(oEvent) {
this.handleMouseDown(oEvent, true);
};
/**
* Function to handle the mouse down event.
*
* @param {jQuery.Event} oEvent The causing event.
* @param {boolean} [bFocus=false] Whether to set the focus on the selected element in a delayed call.
* @private
*/
Button.prototype.handleMouseDown = function(oEvent, bFocus) {
if (this.getEnabled() && this.getRenderer().onactive) {
this.getRenderer().onactive(this);
}
// webkit && firefox on mac does not focus a Button on click, it even unfocuses it onmousedown!
if (bFocus && (!!sap.ui.Device.browser.webkit || (!!sap.ui.Device.browser.firefox && navigator.platform.indexOf("Mac") === 0))) {
if (sap.ui.Device.browser.mobile && !!sap.ui.Device.browser.webkit) {
//In mobile Webkit Browsers (IPad) the focus must be set immediately to ensure that a focusout happens wherever the
//focus currently is. The deleayedCall below is still needed due to the reason described above. (CSN 2536817 2012)
this.focus();
}
jQuery.sap.delayedCall(0, this, function(){
this.focus();
});
}
};
/**
* When mouse key is up again, reset the background images to normal.
*
* @param {jQuery.Event} oEvent The event fired
* @private
*/
Button.prototype.onmouseup = function(oEvent) {
if (this.getEnabled() && this.getRenderer().ondeactive) {
this.getRenderer().ondeactive(this);
}
};
/**
* When mouse is going out of the control, reset the background images to normal.
*
* @param {jQuery.Event} oEvent The event fired
* @private
*/
Button.prototype.onmouseout = function(oEvent) {
if (this.getEnabled() && this.getRenderer().onmouseout) {
this.getRenderer().onmouseout(this);
}
};
/**
* When mouse is going over the control a hover effect is done.
*
* @param {jQuery.Event} oEvent The event fired
* @private
*/
Button.prototype.onmouseover = function(oEvent) {
if (this.getEnabled() && this.getRenderer().onmouseover) {
this.getRenderer().onmouseover(this);
}
};
/**
* When the button looses the focus, this method is called.
*
* @param {jQuery.Event} oEvent The event fired
* @private
*/
Button.prototype.onfocusout = function(oEvent) {
if (this.getEnabled() && this.getRenderer().onblur) {
this.getRenderer().onblur(this);
}
};
/**
* When the button gets the focus, this method is called.
*
* @param {jQuery.Event} oEvent The event fired
* @private
*/
Button.prototype.onfocusin = function(oEvent) {
if (this.getEnabled() && this.getRenderer().onfocus) {
this.getRenderer().onfocus(this);
}
};
/*
* If Icon has just changed don't rerender.
*/
Button.prototype.setIcon = function(sIcon) {
this._setIcon(sIcon, "icon");
return this;
};
Button.prototype.setIconHovered = function(sIcon) {
this._setIcon(sIcon, "iconHovered");
return this;
};
Button.prototype.setIconSelected = function(sIcon) {
this._setIcon(sIcon, "iconSelected");
return this;
};
/*
* helper function to set different icons
*/
Button.prototype._setIcon = function(sIcon, sProperty) {
var sIconOld = this.getProperty(sProperty);
if (sIconOld == sIcon) {
// icon not changed -> nothing to do
return;
}
var bUseIconFontOld = false;
if (IconPool.isIconURI(sIconOld)) {
bUseIconFontOld = true;
}
var bUseIconFontNew = false;
if (IconPool.isIconURI(sIcon)) {
bUseIconFontNew = true;
}
var bSupressRerender = true;
if ((!sIconOld && sIcon) || (sIconOld && !sIcon) || (bUseIconFontOld != bUseIconFontNew)) {
// Icon new added or removed -> need to rerender
bSupressRerender = false;
}
this.setProperty(sProperty, sIcon, bSupressRerender);
if (bSupressRerender == true && this.getDomRef() && this.getRenderer().changeIcon) {
this.getRenderer().changeIcon(this);
}
};
/**
* @see sap.ui.core.Control#getAccessibilityInfo
* @returns {Object} Current accessibility state of the control.
* @protected
*/
Button.prototype.getAccessibilityInfo = function() {
var sDesc = this.getText() || this.getTooltip_AsString();
if (!sDesc && this.getIcon()) {
var oIconInfo = sap.ui.core.IconPool.getIconInfo(this.getIcon());
if (oIconInfo) {
sDesc = oIconInfo.text || oIconInfo.name;
}
}
return {
role: "button",
type: sap.ui.getCore().getLibraryResourceBundle("sap.ui.commons").getText("ACC_CTR_TYPE_BUTTON"),
description: sDesc,
focusable: this.getEnabled(),
enabled: this.getEnabled()
};
};
return Button;
}, /* bExport= */ true);