@openui5/sap.m 1.93.3 → 1.96.1

package/src/sap/m/GenericTile.js

@@ -47,7 +47,8 @@ sap.ui.define([
 		Size = library.Size,
 		GenericTileMode = library.GenericTileMode,
 		TileSizeBehavior = library.TileSizeBehavior,
-		WrappingType = library.WrappingType;
+		WrappingType = library.WrappingType,
+		URLHelper = library.URLHelper;
 
 	var DEVICE_SET = "GenericTileDeviceSet";
 	var keyPressed = {};
@@ -63,7 +64,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.93.3
+	 * @version 1.96.1
 	 * @since 1.34.0
 	 *
 	 * @public
@@ -161,6 +162,18 @@ sap.ui.define([
 				 * @since 1.76
 				 */
 				url: {type: "sap.ui.core.URI", group: "Misc", defaultValue: null},
+				/**
+				 * Renders the given link as a button, enabling the option of opening the link in new tab/window functionality.
+				 * Works only in ArticleMode.
+				 * @experimental since 1.96
+				 */
+				enableNavigationButton: {type: "boolean", group: "Misc", defaultValue: false},
+				 /**
+				 * Text for navigate action button. Default Value is "Read More".
+				 * Works only in ArticleMode.
+				 * @experimental since 1.96
+				 */
+				navigationButtonText: {type: "string", group: "Misc", defaultValue: null},
 				/**
 				 * Defines the type of text wrapping to be used (hyphenated or normal).
 				 * @since 1.60
@@ -175,7 +188,25 @@ sap.ui.define([
 				 * Tooltip text which is added at the tooltip generated by the control.
 				 * @since 1.82
 				 */
-				additionalTooltip: {type: "string", group: "Accessibility", defaultValue: null}
+				additionalTooltip: {type: "string", group: "Accessibility", defaultValue: null},
+				/**
+				 * Icon of the GenericTile. Only applicable for IconMode.
+				 * @since 1.96
+				 * @experimental Since 1.96
+				*/
+				tileIcon: {type: "sap.ui.core.URI", multiple: false},
+				/**
+				 * Background color of the GenericTile. Only applicable for IconMode.
+				 * @since 1.96
+				 * @experimental Since 1.96
+				*/
+				backgroundColor: {type: "sap.ui.core.CSSColor", group: "Appearance"},
+				/**
+				 * The semantic color of the value.
+				 * @experimental
+				 * @since 1.95
+				 */
+				valueColor: {type: "sap.m.ValueColor", group: "Appearance", defaultValue: "None"}
 			},
 			defaultAggregation: "tileContent",
 			aggregations: {
@@ -189,6 +220,11 @@ sap.ui.define([
 				 * @deprecated since version 1.36.0. This aggregation is deprecated, use sap.m.ImageContent control to display an icon instead.
 				 */
 				icon: {type: "sap.ui.core.Control", multiple: false, deprecated: true},
+				/**
+				 * Action buttons added in ActionMode.
+				 * @experimental since 1.96
+				 */
+				actionButtons: {type: "sap.m.Button", multiple: true, bindable: "bindable"},
 				/**
 				 * The hidden aggregation for the title.
 				 */
@@ -303,6 +339,10 @@ sap.ui.define([
 		} else {
 			this._handleCoreInitialized();
 		}
+
+		//Navigate Action Button in Article Mode
+		this._oNavigateAction = new Button(this.getId() + "-navigateAction");
+		this.addDependent(this._oNavigateAction);
 	};
 
 	GenericTile.prototype.setWrappingType = function (sWrappingType) {
@@ -431,11 +471,14 @@ sap.ui.define([
 		if (this._oRemoveButton) {
 			this._oRemoveButton.destroy();
 		}
+		if (this._oNavigateAction) {
+			this._oNavigateAction.destroy();
+		}
 	};
 
 	GenericTile.prototype.onBeforeRendering = function () {
 		var bSubheader = !!this.getSubheader();
-		if (this.getMode() === GenericTileMode.HeaderMode) {
+		if (this.getMode() === GenericTileMode.HeaderMode || this.getMode() === GenericTileMode.IconMode) {
 			this._applyHeaderMode(bSubheader);
 		} else {
 			this._applyContentMode(bSubheader);
@@ -465,6 +508,12 @@ sap.ui.define([
 		if (this.getFrameType() === FrameType.Auto) {
 			this.setProperty("frameType", FrameType.OneByOne, true);
 		}
+
+		//Set Navigate Action Button Text - Only in Article Mode
+		if (this._isNavigateActionEnabled()) {
+			var sButtonText = this.getNavigationButtonText() ? this.getNavigationButtonText() : this._oRb.getText("ACTION_READ_MORE");
+			this._oNavigateAction.setText(sButtonText);
+		}
 	};
 
 	GenericTile.prototype.onAfterRendering = function () {
@@ -503,6 +552,15 @@ sap.ui.define([
 			Device.media.attachHandler(this._handleMediaChange, this, DEVICE_SET);
 		}
 
+		//Attach press event handler to Navigate Action Button
+		if (this._isNavigateActionEnabled()) {
+			this._oNavigateAction.attachPress(function (oEvent) {
+				oEvent.preventDefault();
+				var sURL = oEvent.getSource().getParent().getUrl();
+				URLHelper.redirect(sURL, true);
+			});
+		}
+
 		this.onDragComplete();
 	};
 
@@ -863,31 +921,38 @@ sap.ui.define([
 	};
 
 	GenericTile.prototype.ontap = function (event) {
-		var oParams;
-		if (this._bTilePress && this.getState() !== LoadState.Disabled) {
-			this.$().trigger("focus");
-			oParams = this._getEventParams(event);
-			if (!(this.isInActionRemoveScope() && oParams.action === GenericTile._Action.Press)) {
-				this.firePress(oParams);
+		if (!_isInnerTileButtonPressed(event, this)) {
+			var oParams;
+
+			if (this._bTilePress && this.getState() !== LoadState.Disabled) {
+				this.$().trigger("focus");
+				oParams = this._getEventParams(event);
+				if (!(this.isInActionRemoveScope() && oParams.action === GenericTile._Action.Press)) {
+					this.firePress(oParams);
+				}
+				event.preventDefault();
 			}
-			event.preventDefault();
 		}
 	};
 
+	var preventPress = false;
 	GenericTile.prototype.onkeydown = function (event) {
-		var currentKey = keyPressed[event.keyCode];
-		if (!currentKey) {
-			keyPressed[event.keyCode] = true;
-			if (keyPressed[32] || keyPressed[13]) {
-				event.preventDefault();
+		if (!_isInnerTileButtonPressed(event, this)) {
+			preventPress = (event.keyCode === 16 || event.keyCode === 27) ? true : false;
+			var currentKey = keyPressed[event.keyCode];
+			if (!currentKey) {
+				keyPressed[event.keyCode] = true;
+				if (keyPressed[32] || keyPressed[13]) {
+					event.preventDefault();
+				}
 			}
-		}
-		if (PseudoEvents.events.sapselect.fnCheck(event) && this.getState() !== LoadState.Disabled) {
-			this.addStyleClass("sapMGTPressActive");
-			if (this.$("hover-overlay").length > 0) {
-				this.$("hover-overlay").addClass("sapMGTPressActive");
+			if (PseudoEvents.events.sapselect.fnCheck(event) && this.getState() !== LoadState.Disabled) {
+				this.addStyleClass("sapMGTPressActive");
+				if (this.$("hover-overlay").length > 0) {
+					this.$("hover-overlay").addClass("sapMGTPressActive");
+				}
+				event.preventDefault();
 			}
-			event.preventDefault();
 		}
 	};
 
@@ -906,37 +971,44 @@ sap.ui.define([
 	};
 
 	GenericTile.prototype.onkeyup = function (event) {
-		var currentKey = keyPressed[event.keyCode];    //disable navigation to other tiles when one tile is selected
-		if (currentKey) {
-			delete keyPressed[event.keyCode];
-		}
-		var oParams,
-			bFirePress = false,
-			sScope = this.getScope(),
-			bActionsScope = sScope === GenericTileScope.Actions || sScope === GenericTileScope.ActionRemove;
+		if (!_isInnerTileButtonPressed(event, this)) {
+			var currentKey = keyPressed[event.keyCode];    //disable navigation to other tiles when one tile is selected
+			if (currentKey) {
+				delete keyPressed[event.keyCode];
+			}
+			var oParams,
+				bFirePress = false,
+				sScope = this.getScope(),
+				bActionsScope = sScope === GenericTileScope.Actions || sScope === GenericTileScope.ActionRemove;
+
+			if (bActionsScope && (PseudoEvents.events.sapdelete.fnCheck(event) || PseudoEvents.events.sapbackspace.fnCheck(event))) {
+				oParams = {
+					scope: sScope,
+					action: GenericTile._Action.Remove,
+					domRef: this._oRemoveButton.getPopupAnchorDomRef()
+				};
+				bFirePress = true;
+			}
+			if (keyPressed[16] && event.keyCode !== 16 && this.getState() !== LoadState.Disabled) {
+				preventPress === false;
+			}
+			if ((PseudoEvents.events.sapselect.fnCheck(event) || preventPress) && this.getState() !== LoadState.Disabled) {
+				this.removeStyleClass("sapMGTPressActive");
+				if (this.$("hover-overlay").length > 0) {
+					this.$("hover-overlay").removeClass("sapMGTPressActive");
+				}
+				oParams = this._getEventParams(event);
+				bFirePress = true;
 
-		if (bActionsScope && (PseudoEvents.events.sapdelete.fnCheck(event) || PseudoEvents.events.sapbackspace.fnCheck(event))) {
-			oParams = {
-				scope: sScope,
-				action: GenericTile._Action.Remove,
-				domRef: this._oRemoveButton.getPopupAnchorDomRef()
-			};
-			bFirePress = true;
-		}
-		if (PseudoEvents.events.sapselect.fnCheck(event) && this.getState() !== LoadState.Disabled) {
-			this.removeStyleClass("sapMGTPressActive");
-			if (this.$("hover-overlay").length > 0) {
-				this.$("hover-overlay").removeClass("sapMGTPressActive");
 			}
-			oParams = this._getEventParams(event);
-			bFirePress = true;
-		}
-		if (bFirePress) {
-			this.firePress(oParams);
-			event.preventDefault();
-		}
 
-		this._updateAriaLabel();  // To update the Aria Label for Generic Tile on change.
+			if (!preventPress && bFirePress) {
+				this.firePress(oParams);
+				event.preventDefault();
+			}
+
+			this._updateAriaLabel();  // To update the Aria Label for Generic Tile on change.
+		}
 	};
 
 	/* --- Getters and Setters --- */
@@ -992,7 +1064,11 @@ sap.ui.define([
 		// when subheader is unavailable, the header can have maximal 5 lines
 
 		var frameType = this.getFrameType();
-		if (frameType === FrameType.OneByHalf || frameType === FrameType.TwoByHalf) {
+		if (this._isIconMode()) { //Set MaxLines as 2 for IconMode
+
+            this._oTitle.setProperty("maxLines", 2, true);
+
+        } else if (frameType === FrameType.OneByHalf || frameType === FrameType.TwoByHalf) {
 			this._oTitle.setProperty("maxLines", 2, true);
 		} else {
 			if (bSubheader) {
@@ -1203,7 +1279,9 @@ sap.ui.define([
 		var frameType = this.getFrameType();
 		var aTileCnt = tileContent.getAggregation('content');
 
-		if (sState === LoadState.Failed || bActions && sState !== LoadState.Disabled) {
+		if (this._isIconMode()) { //Skip footer creation for IconMode
+			tileContent.setRenderFooter(false);
+		} else if (sState === LoadState.Failed || bActions && sState !== LoadState.Disabled) {
 			tileContent.setRenderFooter(false);
 		} else if (frameType === FrameType.TwoByHalf && (aTileCnt !== null || this.getSubheader())) {
 			tileContent.setRenderFooter(false);
@@ -1431,5 +1509,90 @@ sap.ui.define([
 		}
 	};
 
+	/**
+	 * Returns the icon to be rendered for IconMode
+	 * @param {*} oIcon Icon to be displayed on the GenericTile.
+	 * @private
+	 */
+	 GenericTile.prototype._renderTileIcon = function (oIcon) {
+		this._oIcon = IconPool.createControlByURI({
+			size: this.getFrameType() === FrameType.OneByOne ? "2rem" : "1.25rem",
+			useIconTooltip: false,
+			src: oIcon
+		});
+		if (!this._oIcon){
+			this._oIcon = IconPool.createControlByURI({
+				height: this.getFrameType() === FrameType.OneByOne ? "2rem" : "1.25rem",
+				width: this.getFrameType() === FrameType.OneByOne ? "2rem" : "1.25rem",
+				useIconTooltip: false,
+				src: oIcon
+			}, Image).addStyleClass("sapMPointer").addStyleClass("sapMGTTileIcon");
+		}
+		this._oIcon.addStyleClass("sapMPointer").addStyleClass("sapMGTTileIcon");
+		return this._oIcon;
+	};
+
+	/**
+	 * Returns true if Current Tile is in IconMode, FrameType is OneByOne or TwoByHalf, backgroundColor, TileIcon Properties are set.
+	 */
+	GenericTile.prototype._isIconMode = function () {
+		if (this.getMode() === GenericTileMode.IconMode
+			&& (this.getFrameType() === FrameType.OneByOne || this.getFrameType() === FrameType.TwoByHalf)
+			&& this.getBackgroundColor() && this.getTileIcon()){
+			return true;
+		} else {
+			return false;
+		}
+	};
+
+	/**
+	 * Checks if Navigate Action Button should be used in Article Mode
+	 * @returns {boolean} - true if Navigate Action Button is enabled
+	 * @private
+	 */
+	GenericTile.prototype._isNavigateActionEnabled = function() {
+		return this.getMode() === GenericTileMode.ArticleMode && this.getUrl() && this.getEnableNavigationButton();
+	};
+
+	/**
+	 * Returns true if the GenericTile is in ActionMode and frameType is TwoByOne.
+	 * @returns {boolean} - true if the GenericTile is in ActionMode
+	 */
+	GenericTile.prototype._isActionMode = function () {
+		return this.getFrameType() === FrameType.TwoByOne && this.getMode() === GenericTileMode.ActionMode && this.getActionButtons().length;
+	};
+
+	/**
+	 * Returns Navigate Action Button
+	 * @returns {object} Button Object
+	 * @private
+	*/
+	GenericTile.prototype._getNavigateAction = function() {
+		return this._oNavigateAction;
+	};
+
+	/**
+	 * Checks if any of the inner buttons in the Tile are focused or clicked
+	 * @param {object} event - jQuery event object
+	 * @param {object} oTile - tile object
+	 * @returns {boolean} - returns true if any of the inner buttons are focused or clicked
+	 * @private
+	 */
+	function _isInnerTileButtonPressed(event, oTile) {
+		var bIsActionButtonPressed = false,
+		bIsNavigateActionPressed = false;
+
+		if (oTile._isActionMode()) {
+			var oActionsContainerNode = document.querySelector("#" + oTile.getId() + "-actionButtons");
+			bIsActionButtonPressed = oActionsContainerNode && oActionsContainerNode !== event.target &&  oActionsContainerNode.contains(event.target);
+		}
+
+		if (oTile._isNavigateActionEnabled()) {
+			var oNavigateActionContainerNode = document.querySelector("#" + oTile.getId() + "-navigateActionContainer");
+			bIsNavigateActionPressed = oNavigateActionContainerNode && oNavigateActionContainerNode !== event.target &&  oNavigateActionContainerNode.contains(event.target);
+		}
+		return bIsActionButtonPressed || bIsNavigateActionPressed;
+	}
+
 	return GenericTile;
 });