Skip to content
Snippets Groups Projects
Verified Commit 660b649e authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

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

parent 7e1dd97a
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
source/components/form/toggle-switch.mjs
+ 364
− 330
View file @ 660b649e
......@@ -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;
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment