fix(monster-toggle-switch): bouncing effekt #274

source/components/form/toggle-switch.mjs

@@ -12,8 +12,7 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol } from "../../constants.mjs";
-import { internalSymbol } from "../../constants.mjs";
+import {instanceSymbol, internalSymbol} from "../../constants.mjs";
 import {CustomControl} from "../../dom/customcontrol.mjs";
 import {Observer} from "../../types/observer.mjs";
 import {ProxyObserver} from "../../types/proxyobserver.mjs";
@@ -24,12 +23,11 @@ import {
     registerCustomElement,
     updaterTransformerMethodsSymbol,
 } from "../../dom/customelement.mjs";
-import { isObject, isFunction } from "../../types/is.mjs";
+import {isFunction, isObject} from "../../types/is.mjs";
 import {ToggleSwitchStyleSheet} from "./stylesheet/toggle-switch.mjs";
-import {
-	ATTRIBUTE_ERRORMESSAGE,
-	ATTRIBUTE_ROLE,
-} from "../../dom/constants.mjs";
+import {ATTRIBUTE_ERRORMESSAGE, ATTRIBUTE_ROLE,} from "../../dom/constants.mjs";
+import {getWindow} from "../../dom/util.mjs";
+import {fireEvent} from "../../dom/events.mjs";
 
 export {ToggleSwitch};
 
@@ -54,7 +52,7 @@ export const STATE_OFF = "off";
  *
  * @fragments /fragments/components/form/toggle-switch
  *
- * @example /examples/components/form/toggle-switch-simple
+ * @example /examples/components/form/toggle-switch-simple Simple example
  *
  * @since 3.57.0
  * @copyright schukai GmbH
@@ -85,7 +83,7 @@ class ToggleSwitch extends CustomControl {
      * @property {string} actions.on=specifies the action for the on state.
      * @property {string} actions.off=specifies the action for the off state.
      * @property {Object} templates
-	 * @property {string} templates.main=specifies the main template used by the control.
+     * @property {string} templates.main the main template used by the control.
      */
     get defaults() {
         return Object.assign({}, super.defaults, {
@@ -108,21 +106,26 @@ class ToggleSwitch extends CustomControl {
                 main: getTemplate(),
             },
             actions: {
-				on: () => {},
-				off: () => {},
+                on: () => {
+                },
+                off: () => {
+                },
             },
         });
     }
 
     /**
-	 * @return {ToggleSwitch}
+     * @return {void}
      */
     [assembleMethodSymbol]() {
         const self = this;
         super[assembleMethodSymbol]();
+
         initControlReferences.call(this);
         initEventHandler.call(this);
 
+        getWindow().requestAnimationFrame(() => {
+
             /**
              * init value to off
              * if the value was not defined before inserting it into the HTML
@@ -143,25 +146,15 @@ class ToggleSwitch extends CustomControl {
              */
             validateAndSetValue.call(self);
 
+            // this state is a getter
             if (this.state === STATE_ON) {
-			toggleClassOn.call(self);
+                toggleOn.call(self);
             } else {
-			toggleClassOff.call(self);
+                toggleOff.call(self);
             }
 
-		/**
-		 * is called when options changed
-		 */
-		self[internalSymbol].attachObserver(
-			new Observer(function () {
-				if (isObject(this) && this instanceof ProxyObserver) {
-					validateAndSetValue.call(self);
-					toggleClass.call(self);
-				}
-			}),
-		);
+        });
 
-		return this;
     }
 
     /**
@@ -193,7 +186,7 @@ class ToggleSwitch extends CustomControl {
      * ```
      */
     click() {
-		toggleValues.call(this);
+        this.toggle();
     }
 
     /**
@@ -207,8 +200,10 @@ class ToggleSwitch extends CustomControl {
      * @return {ToggleSwitch}
      */
     toggle() {
-		this.click();
-		return this;
+        if (this.getOption("value") === this.getOption("values.on")) {
+            return this.toggleOff()
+        }
+        return this.toggleOn()
     }
 
     /**
@@ -223,6 +218,7 @@ class ToggleSwitch extends CustomControl {
      */
     toggleOn() {
         this.setOption("value", this.getOption("values.on"));
+        fireEvent(this, "change");
         return this;
     }
 
@@ -238,6 +234,7 @@ class ToggleSwitch extends CustomControl {
      */
     toggleOff() {
         this.setOption("value", this.getOption("values.off"));
+        fireEvent(this, "change");
         return this;
     }
 
@@ -270,9 +267,7 @@ class ToggleSwitch extends CustomControl {
      * @return {string}
      */
     get value() {
-		return this.state === STATE_ON
-			? this.getOption("values.on")
-			: this.getOption("values.off");
+        return this.getOption("value");
     }
 
     /**
@@ -286,8 +281,27 @@ class ToggleSwitch extends CustomControl {
      * @property {string} value
      */
     set value(value) {
+
+        if (value === this.getOption("values.on") || value === this.getOption("values.off")) {
+            if (this.state !== (value === this.getOption("values.on") ? STATE_ON : STATE_OFF)) {
                 this.setOption("value", value);
             }
+            return;
+        }
+
+        addAttributeToken(
+            this,
+            ATTRIBUTE_ERRORMESSAGE,
+            'The value "' +
+            value +
+            '" must be "' +
+            this.getOption("values.on") +
+            '" or "' +
+            this.getOption("values.off"),
+        );
+
+
+    }
 
     /**
      * This method is called by the `instanceof` operator.
@@ -299,6 +313,10 @@ class ToggleSwitch extends CustomControl {
         );
     }
 
+    /**
+     *
+     * @returns {string}
+     */
     static getTag() {
         return "monster-toggle-switch";
     }
@@ -313,65 +331,50 @@ function initControlReferences() {
     );
 }
 
+
 /**
  * @private
  */
-function toggleClassOn() {
+function toggleOn() {
+
     this[switchElementSymbol].classList.remove(this.getOption("classes.off")); // change color
     this[switchElementSymbol].classList.add(this.getOption("classes.on")); // change color
-}
 
-/**
- * @private
- */
-function toggleClassOff() {
-	this[switchElementSymbol].classList.remove(this.getOption("classes.on")); // change color
-	this[switchElementSymbol].classList.add(this.getOption("classes.off")); // change color
+    const callback = this.getOption("actions.on");
+    if (isFunction(callback)) {
+        callback.call(this);
     }
 
-/**
- * @private
- */
-function toggleClass() {
-	if (this.getOption("value") === this.getOption("values.on")) {
-		toggleClassOn.call(this);
-	} else {
-		toggleClassOff.call(this);
+    if (typeof this.setFormValue === "function") {
+        this.setFormValue(this.getOption("values.on"));
     }
 }
 
 /**
  * @private
  */
-function toggleValues() {
-	if (this.getOption("disabled") === true) {
-		return;
-	}
-
-	let callback, value;
+function toggleOff() {
 
-	if (this.getOption("value") === this.getOption("values.on")) {
-		value = this.getOption("values.off");
-		callback = this.getOption("actions.off");
-	} else {
-		value = this.getOption("values.on");
-		callback = this.getOption("actions.on");
-	}
-
-	this.setOption("value", value);
-	this?.setFormValue(value);
+    this[switchElementSymbol].classList.remove(this.getOption("classes.on")); // change color
+    this[switchElementSymbol].classList.add(this.getOption("classes.off")); // change color
 
+    const callback = this.getOption("actions.off");
     if (isFunction(callback)) {
         callback.call(this);
     }
 
-	this.setOption("state", this.state);
+    if (typeof this.setFormValue === "function") {
+        this.setFormValue(this.getOption("values.off"));
+    }
+
+
 }
 
 /**
  * @private
  */
 function validateAndSetValue() {
+
     const value = this.getOption("value");
 
     const validatedValues = [];
@@ -391,10 +394,20 @@ function validateAndSetValue() {
         );
         this.setOption("disabled", true);
         this.formDisabledCallback(true);
-	} else {
+        return;
+    }
+
     this.setOption("disabled", false);
     this.formDisabledCallback(false);
+
+    if (value === this.getOption("values.on")) {
+        toggleOn.call(this);
+        return;
     }
+
+    toggleOff.call(this);
+
+
 }
 
 /**
@@ -403,14 +416,35 @@ function validateAndSetValue() {
  */
 function initEventHandler() {
     const self = this;
-	self.addEventListener("keyup", function (event) {
-		if (event.code === "Space") {
-			self[switchElementSymbol].click();
+
+    let lastValue = self.value;
+    self[internalSymbol].attachObserver(
+        new Observer(function () {
+            if (isObject(this) && this instanceof ProxyObserver) {
+                const n = this.getSubject()?.options?.value;
+                if (lastValue !== n) {
+                    lastValue = n;
+                    validateAndSetValue.call(self);
+                }
+            }
+        }),
+    );
+
+
+    self.addEventListener("keyup", (event) => {
+        if (event.keyCode === 32) {
+            self.toggle();
         }
     });
-	self.addEventListener("click", function (event) {
-		toggleValues.call(self);
+
+    self.addEventListener("click", (event) => {
+        self.toggle();
     });
+
+    self.addEventListener("touch", (event) => {
+        self.toggle();
+    });
+
     return this;
 }