feat: add animationMode configuration (#905)

- Add animationMode to configure the degree of components animations.
Available options are: 'full' (by default), 'basic', 'minimal', 'none'.
- Switch on/off the ui5-panel toggle animation based on the 'animationMode'

Author: ilhan007

docs/Configuration.md

@@ -11,6 +11,7 @@ theme        | sap_fiori_3, sap_belize, sap_belize_hcb         | sap_fiori_3   |
 language     | en, de, es, etc...                              | en            | Language to be used for translatable texts
 [RTL](#rtl)          | true, false                                     | false         | When true, sets global text direction to right-to-left
 compactSize  | true, false                                     | false         | When set, enforces compact density (smaller margins/paddings)
+[animationMode](#animationMode)  | full, basic, minimal, none  | full          | Defines different animation scenarios or levels
 calendarType | Gregorian, Islamic, Buddhist, Japanese, Persian | Gregorian     | Default calendar type for date-related web components
 [noConflict](#noConflict)  | true, false | Object                            | false         | When set to true, all events will be fired with a "ui5-" prefix only
 [formatSettings](#formatSettings)| See the [Format settings](#formatSettings) section below		| Empty object | Allows to override locale-specific configuration
@@ -22,6 +23,17 @@ When the `rtl` setting is set to `true`, UI5 Web Components will adjust their st
 However, you should also set the HTML attribute `dir` to `rtl` on the `body` or `html` or any other relevant region of your application
 so that the rest of your application is also affected. 
 
+<a name="animationMode"></a>
+###Animation Mode
+
+Animation modes allow to specify different animation scenarios or levels.
+ - When `full` all animations run unrestricted.
+ - When `basic` more light-weight set of animations would run.
+ - When `minimal` animations of fundamental functionality are included.
+ - When `none` all animations are completely suspended.
+
+*Please note that each component determines which animations would run for a specific mode.*
+
 <a name="noConflict"></a>
 ### No conflict
 
@@ -100,6 +112,7 @@ import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js
 import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
 import { getCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js";
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
+import { getCompactSize } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
 import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
 import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";

packages/base/src/InitialConfiguration.js

@@ -1,6 +1,7 @@
 let initialized = false;
 
 const initialConfig = {
+	animationMode: "full",
 	theme: "sap_fiori_3",
 	rtl: null,
 	language: null,
@@ -11,6 +12,11 @@ const initialConfig = {
 };
 
 /* General settings */
+const getAnimationMode = () => {
+	initConfiguration();
+	return initialConfig.animationMode;
+};
+
 const getTheme = () => {
 	initConfiguration();
 	return initialConfig.theme;
@@ -109,6 +115,7 @@ const initConfiguration = () => {
 };
 
 export {
+	getAnimationMode,
 	getTheme,
 	getRTL,
 	getLanguage,

packages/base/src/config/AnimationMode.js

@@ -0,0 +1,9 @@
+import { getAnimationMode as getConfiguredAnimationMode } from "../InitialConfiguration.js";
+
+const animationMode = getConfiguredAnimationMode();
+
+const getAnimationMode = () => {
+	return animationMode;
+};
+
+export { getAnimationMode }; // eslint-disable-line

packages/base/src/types/AnimationMode.js

@@ -0,0 +1,7 @@
+const AnimationMode = {
+	Full: "full",
+	Basic: "basic",
+	Minimal: "minimal",
+	None: "none",
+};
+export default AnimationMode;

packages/main/bundle.esm.js

@@ -63,13 +63,15 @@ window.isIE = isIE; // attached to the window object for testing purposes
 
 
 // Note: keep in sync with rollup.config value for IIFE
+import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
 import { setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
 import { getCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js";
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import { getRegisteredNames as getIconNames } from  "@ui5/webcomponents-base/dist/SVGIconRegistry.js"
 window["sap-ui-webcomponents-main-bundle"] = {
 	configuration : {
+		getAnimationMode,
 		getTheme,
 		setTheme,
 		setNoConflict,

packages/main/src/Panel.hbs

@@ -19,7 +19,7 @@
 		>
 			<ui5-button
 				design="Transparent"
-				class="ui5-panel-header-button"
+				class="ui5-panel-header-button {{classes.headerBtn}}"
 				icon="sap-icon://navigation-right-arrow"
 				?non-focusable="{{nonFocusableButton}}"
 				@click="{{_toggleButtonClick}}"

packages/main/src/Panel.js

@@ -3,6 +3,8 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import slideDown from "@ui5/webcomponents-base/dist/animations/slideDown.js";
 import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
+import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
+import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Button from "./Button.js";
 import "./icons/navigation-right-arrow.js";
@@ -223,6 +225,10 @@ class Panel extends UI5Element {
 		return true;
 	}
 
+	shouldAnimate() {
+		return getAnimationMode() !== AnimationMode.None;
+	}
+
 	_headerClick(event) {
 		if (!this.shouldToggle(event.target)) {
 			return;
@@ -268,6 +274,12 @@ class Panel extends UI5Element {
 		}
 
 		this.collapsed = !this.collapsed;
+
+		if (!this.shouldAnimate()) {
+			this.fireEvent("toggle");
+			return;
+		}
+
 		this._animationRunning = true;
 
 		const elements = this.getDomRef().querySelectorAll(".ui5-panel-content");
@@ -296,6 +308,14 @@ class Panel extends UI5Element {
 		return target.classList.contains("sapMPanelWrappingDiv");
 	}
 
+	get classes() {
+		return {
+			headerBtn: {
+				"ui5-panel-header-button-animated": this.shouldAnimate(),
+			},
+		};
+	}
+
 	get toggleButtonTitle() {
 		return this.i18nBundle.getText(PANEL_ICON);
 	}

packages/main/src/themes/Panel.css

@@ -37,7 +37,7 @@
 	border-bottom: 1px solid transparent;
 }
 
-.ui5-panel-header-button {
+.ui5-panel-header-button-animated {
 	transition: transform 0.4s ease-out;
 }
 

packages/main/test/pages/AnimanitionOff.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta charset="utf-8">
+	<title>Animations off</title>
+
+	<script data-ui5-config type="application/json">
+		{
+			"animationMode": "none"
+		}
+	</script>
+	<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+	<script src="../../resources/bundle.esm.js" type="module"></script>
+	<script nomodule src="../../resources/bundle.es5.js"></script>
+
+	<style>.panel {border: 1px dotted #bad0e3;}.header {display: flex;align-items: center;width: 100%;}</style>
+
+	<script>
+		document.addEventListener("DOMContentLoaded", function () {
+			panel1.addEventListener("ui5-toggle", function (event) {
+				console.log(event);
+				event.target.headerText = event.target.collapsed ? "Click to expand!" : "Click to collapse!";
+				field1.value = parseInt(field1.value) + 1;
+			});
+			panel2.addEventListener("ui5-toggle", function (event) {
+				field2.value = parseInt(field2.value) + 1;
+			});
+		});
+	</script>
+</head>
+
+<body>
+	<ui5-panel id="panel1" collapsed header-text="Click to expand!" class="panel">
+		<ui5-title>This is a demo how to use the &quot;expand&quot; event.</ui5-title><br>
+		<ui5-label>Some short text.</ui5-label>
+	</ui5-panel>
+
+	<ui5-panel id="panel2" collapsed accessible-role="Complementary" class="panel">
+		<div slot="header" class="header">
+			<ui5-title>Expandable but not expanded</ui5-title>
+		</div>
+		<ui5-title>This is a demo how to use the &quot;expand&quot; event.</ui5-title><br>
+		<ui5-label>Some short text.</ui5-label>
+	</ui5-panel><br>
+
+	<ui5-input id="field1" value="0"></ui5-input>
+	<ui5-input id="field2" value="0"></ui5-input>
+</body>
+</html>