@openui5/sap.ui.integration 1.112.2 → 1.114.0

package/src/sap/ui/integration/designtime/editor/CardPreview.js

@@ -19,7 +19,8 @@ sap.ui.define([
 ) {
 	"use strict";
 
-	var CardDataMode = library.CardDataMode;
+	var CardDataMode = library.CardDataMode,
+		CardPreviewMode = library.CardPreviewMode;
 
 	/**
 	 * Constructor for a new <code>Preview</code> that show a image, abstract live preview
@@ -29,7 +30,7 @@ sap.ui.define([
 	 * @alias sap.ui.integration.designtime.editor.CardPreview
 	 * @author SAP SE
 	 * @since 1.83.0
-	 * @version 1.112.2
+	 * @version 1.114.0
 	 * @private
 	 * @experimental since 1.83.0
 	 * @ui5-restricted
@@ -97,11 +98,12 @@ sap.ui.define([
 				oRm.openEnd();
 				oRm.close("div");
 				// TODO unsupported DOM structure: button is not a child of the root element
-				if ((oControl._getModes().indexOf("Live") > -1 && oControl._getModes().indexOf("Abstract") > -1)
-				|| (oControl._getModes().indexOf("Mock") > -1 && oControl._getModes().indexOf("Abstract") > -1)) {
+				var sModes = oControl._getModes();
+				if (sModes.indexOf("Abstract") > -1 && (sModes.indexOf("Live") > -1 || sModes.indexOf("Mock") > -1 || sModes.indexOf("MockData") > -1)) {
 					oRm.renderControl(oControl._getModeToggleButton());
 				}
-				if (oControl._getModes() !== "Abstract" && (!sPreviewPosition || sPreviewPosition === "right" || sPreviewPosition === "left")) {
+
+				if (sModes !== "Abstract" && (!sPreviewPosition || sPreviewPosition === "right" || sPreviewPosition === "left")) {
 					oRm.renderControl(oControl._getResizeToggleButton());
 				}
 				if (sPreviewPosition === "top" || sPreviewPosition === "bottom") {
@@ -157,7 +159,7 @@ sap.ui.define([
 	CardPreview.prototype.onAfterRendering = function () {
 		var oPreview = this.getAggregation("cardPreview"),
 		    sModes = this._getModes();
-		if ((sModes.indexOf("Live") > -1 || sModes.indexOf("Mock") > -1) && oPreview && oPreview.getDomRef() && oPreview.getDomRef().getElementsByClassName("sapVizFrame")) {
+		if ((sModes.indexOf("Live") > -1 || sModes.indexOf("Mock") > -1 || sModes.indexOf("MockData") > -1) && oPreview && oPreview.getDomRef() && oPreview.getDomRef().getElementsByClassName("sapVizFrame")) {
 			window.setTimeout(function() {
 				try {
 					var vizFrameId = oPreview.getDomRef().getElementsByClassName("sapVizFrame")[0].id;
@@ -182,13 +184,9 @@ sap.ui.define([
 	 */
 	CardPreview.prototype._getCardPreview = function () {
 		var oPreview = null;
-		if (this._getCurrentMode() === "Abstract") {
-			if (this.getSettings().preview.src) {
-				oPreview = this._getImagePlaceholder();
-			} else {
-				oPreview = this._getCardPlaceholderPreview();
-			}
-		} else if (this._getCurrentMode() === "Live" || this._getCurrentMode() === "Mock") {
+		if (this._getCurrentMode() === "Abstract" && this.getSettings().preview.src) {
+			oPreview = this._getImagePlaceholder();
+		} else if (this._getCurrentMode() !== "None") {
 			oPreview = this._getCardRealPreview();
 		}
 		if (oPreview) {
@@ -212,96 +210,6 @@ sap.ui.define([
 		return oPreview;
 	};
 
-	/**
-	 * returns the a scaled placeholder of the card based on the current settings
-	 */
-	CardPreview.prototype._getCardPlaceholderPreview = function () {
-		var oCard = this.getCard(),
-			placeholder;
-
-		function _map(s, x) {
-			return oCard.getManifestEntry(s) ? x || "{bound}" : null;
-		}
-		var header = null;
-		if (oCard.getManifestEntry("/sap.card/header")) {
-			var type = oCard.getManifestEntry("/sap.card/header/type");
-			if (type && type.toUpperCase() === "NUMERIC") {
-				header = {
-					"title": _map("/sap.card/header/title"),
-					"type": "Numeric",
-					"subTitle": _map("/sap.card/header/subTitle"),
-					"unitOfMeasurement": _map("/sap.card/header/unitOfMeasurement"),
-					"mainIndicator": _map("/sap.card/header/mainIndicator", {
-						"number": "{bound}",
-						"unit": "{bound}",
-						"trend": "{bound}",
-						"state": "{bound}"
-					}),
-					"details": _map("/sap.card/header/details"),
-					"sideIndicators": [
-						_map("/sap.card/header/sideIndicators/0", {
-							"title": "Deviation",
-							"number": "{bound}",
-							"unit": "{bound}"
-						}),
-						_map("/sap.card/header/sideIndicators/1", {
-							"title": "Target",
-							"number": "{bound}",
-							"unit": "{bound}"
-						})
-					]
-				};
-			} else {
-				header = {
-					"title": _map("/sap.card/header/title"),
-					"subTitle": _map("/sap.card/header/subTitle"),
-					"status": _map("/sap.card/header/status"),
-					"icon": _map("/sap.card/header/icon", {
-						"src": "{bound}"
-					})
-				};
-			}
-		}
-		var oCurrent = this.getEditor().getCurrentSettings();
-		placeholder = {
-			"sap.app": {
-				"type": "card",
-				"id": oCard.getManifestEntry("/sap.app/id") + ".abstractPreview"
-			},
-			"sap.card": {
-				"type": oCard.getManifestEntry("/sap.card/type") === "List" ? "List" : "Component",
-				"header": header,
-				"content": {
-					"maxItems": Math.min(oCurrent["/sap.card/content/maxItems"] || 6, 6),
-					"item": {
-						"title": {
-							"value": _map("/sap.card/content/item/value")
-						},
-						"icon": _map("/sap.card/content/item/icon", {
-							"src": "{bound}"
-						}),
-						"description": _map("/sap.card/content/item/description"),
-						"info": {
-							"value": _map("/sap.card/content/item/info")
-						}
-					}
-				}
-			}
-		};
-
-		if (!this._oCardPlaceholder) {
-			this._oCardPlaceholder = new Card({
-				dataMode: CardDataMode.Active,
-				readonly: true
-			});
-			this._oCardPlaceholder._setPreviewMode(true);
-			this._oCardPlaceholder.onfocusin = this._onfocusin.bind(this);
-		}
-		this._oCardPlaceholder.setManifest(placeholder);
-		this._oCardPlaceholder.refresh();
-		return this._oCardPlaceholder;
-	};
-
 	/**
 	 * Information that can be requested by the card to adapt the preview to the transformation scale if needed
 	 * It needs to know the original height and width and the current transformation style.
@@ -329,13 +237,18 @@ sap.ui.define([
 				readonlyZIndex: this.getEditor()._iZIndex + 1
 			});
 			this._oCardPreview.setBaseUrl(this.getCard().getBaseUrl());
-			if (this._currentMode === "Mock") {
-				this._oCardPreview.setProperty("useMockData", true);
-			}
 			if (bReadonly) {
 				this._oCardPreview.onfocusin = this._onfocusin.bind(this);
 			}
 		}
+		if (this._currentMode === "MockData") {
+			this._oCardPreview.setProperty("useMockData", true);
+			this._oCardPreview.setPreviewMode(CardPreviewMode.MockData);
+		} else if (this._currentMode === "Abstract") {
+			this._oCardPreview.setPreviewMode(CardPreviewMode.Abstract);
+		} else if (this._currentMode === "Live") {
+			this._oCardPreview.setPreviewMode(CardPreviewMode.Off);
+		}
 		this._initalChanges = this._initalChanges || this._oCardPreview.getManifestChanges() || [];
 		var aChanges = this._initalChanges.concat([this.getEditor().getCurrentSettings()]);
 		this._oCardPreview.setManifestChanges(aChanges);
@@ -399,16 +312,17 @@ sap.ui.define([
 		//default setting - abstract preview
 		mSettings.preview = mSettings.preview || {};
 		mSettings.preview.modes = mSettings.preview.modes || "Abstract";
-		// Mock mode is only used for Component Card now, replace it with "Live" for other Cards
+		// MockData mode is only used for Component Card now, replace it with "Live" for other Cards
 		var sType = this.getCard().getManifestEntry("/sap.card/type");
 		if (sType !== "Component") {
+			mSettings.preview.modes = mSettings.preview.modes.replace("MockData", "Live");
 			mSettings.preview.modes = mSettings.preview.modes.replace("Mock", "Live");
 		}
 		return mSettings.preview.modes;
 	};
 
 	/**
-	 * returns the current mode of the preview, "Abstract" or "Live" or "Mock"
+	 * returns the current mode of the preview, "Abstract" or "Live" or "MockData"
 	 */
 	CardPreview.prototype._getCurrentMode = function () {
 		var sModes = this._getModes();
@@ -417,13 +331,16 @@ sap.ui.define([
 				case "Abstract":
 				case "AbstractLive":
 				case "AbstractMock":
+				case "AbstractMockData":
 					this._currentMode = "Abstract"; break;
 				case "Live":
 				case "LiveAbstract":
 					this._currentMode = "Live"; break;
 				case "Mock":
 				case "MockAbstract":
-					this._currentMode = "Mock"; break;
+				case "MockData":
+				case "MockDataAbstract":
+					this._currentMode = "MockData"; break;
 				default: this._currentMode = "None";
 			}
 		}
@@ -431,19 +348,21 @@ sap.ui.define([
 	};
 
 	/**
-	 * toggles the current mode from "Abstract" to "Live" or "Mock" and vice versa
+	 * toggles the current mode from "Abstract" to "Live" or "MockData" and vice versa
 	 */
 	CardPreview.prototype._toggleCurrentMode = function () {
 		var sModes = this._getModes();
-		if (sModes.indexOf("Live") > -1 && sModes.indexOf("Abstract") > -1) {
-			this._currentMode = this._getCurrentMode() === "Abstract" ? "Live" : "Abstract";
-		} else if (sModes.indexOf("Mock") > -1 && sModes.indexOf("Abstract") > -1) {
-			this._currentMode = this._getCurrentMode() === "Abstract" ? "Mock" : "Abstract";
+		if (sModes.indexOf("Abstract") > -1) {
+			if (sModes.indexOf("Live") > -1) {
+				this._currentMode = this._getCurrentMode() === "Abstract" ? "Live" : "Abstract";
+			} else if (sModes.indexOf("Mock") > -1 || sModes.indexOf("MockData") > -1) {
+				this._currentMode = this._getCurrentMode() === "Abstract" ? "MockData" : "Abstract";
+			}
 		}
 	};
 
 	/**
-	 * toggles the current mode from "Abstract" to "Live" or "Mock" and vice versa
+	 * toggles the current mode from "Abstract" to "Live" or "MockData" and vice versa
 	 * @returns {sap.m.ToggleButton}
 	 */
 	 CardPreview.prototype._getModeToggleButton = function () {
@@ -492,12 +411,12 @@ sap.ui.define([
 		if (currentMode === "Abstract") {
 			tb.setIcon("sap-icon://media-play");
 			tb.setPressed(false);
-			if (this._getModes().indexOf("Mock") > -1) {
-				tb.setTooltip(oBundle.getText("CARDEDITOR_PREVIEW_BTN_MOCKPREVIEW"));
+			if (this._getModes().indexOf("Mock") > -1 || this._getModes().indexOf("MockData") > -1) {
+				tb.setTooltip(oBundle.getText("CARDEDITOR_PREVIEW_BTN_MOCKDATAPREVIEW"));
 			} else {
 				tb.setTooltip(oBundle.getText("CARDEDITOR_PREVIEW_BTN_LIVEPREVIEW"));
 			}
-		} else if (currentMode === "Live" || currentMode === "Mock") {
+		} else if (currentMode === "Live" || currentMode === "MockData") {
 			tb.setIcon("sap-icon://media-pause");
 			tb.setPressed(true);
 			tb.setTooltip(oBundle.getText("CARDEDITOR_PREVIEW_BTN_SAMPLEPREVIEW"));
@@ -558,7 +477,7 @@ sap.ui.define([
 		this._oSizeToggleButton.removeStyleClass("sapUiIntegrationDTPreviewResizeButtonOnlyFull");
 		this._oSizeToggleButton.removeStyleClass("sapUiIntegrationDTPreviewResizeButtonOnlyFullSpec");
 		var sLanguge = Core.getConfiguration().getLanguage().replaceAll('_', '-');
-		if (this._getModes() === "Mock" || this._getModes() === "Live") {
+		if (this._getModes() === "Mock" || this._getModes() === "MockData" || this._getModes() === "Live") {
 			if (this._getCurrentSize() === "Full") {
 				if (sLanguge.startsWith("ar") || sLanguge.startsWith("he")) {
 					this._oSizeToggleButton.addStyleClass("sapUiIntegrationDTPreviewResizeButtonOnlyFullSpec");