diff --git a/src/public/app/widgets/switch.js b/src/public/app/widgets/switch.js index 45a0a0307..7d8b61b80 100644 --- a/src/public/app/widgets/switch.js +++ b/src/public/app/widgets/switch.js @@ -19,6 +19,8 @@ const TPL = ` align-items: center; } + /* The track of the toggle switch */ + .switch-widget .switch-button { display: block; position: relative; @@ -35,6 +37,8 @@ const TPL = ` transition: background 100ms ease-out; } + /* The thumb of the toggle switch */ + .switch-widget .switch-button:after { --y: calc((var(--switch-track-height) - var(--switch-thumb-height)) / 2); --x: var(--y); @@ -60,7 +64,9 @@ const TPL = ` background 100ms ease-in; } + .switch-widget .switch-button input[type="checkbox"] { + /* A hidden check box for accesibility purposes */ position: absolute: top: 0; left: 0; @@ -69,6 +75,7 @@ const TPL = ` opacity: 0; } + /* Disabled state */ .switch-widget .switch-button:not(.disabled) input[type="checkbox"], .switch-widget .switch-button:not(.disabled) { cursor: pointer; @@ -113,13 +120,13 @@ const TPL = ` export default class SwitchWidget extends NoteContextAwareWidget { - switchOnName; - switchOnTooltip; + switchOnName = ""; + switchOnTooltip = ""; - switchOffName; - switchOffTooltip; + switchOffName = ""; + switchOffTooltip = ""; - disabledTooltip; + disabledTooltip = ""; currentState = false; @@ -137,7 +144,6 @@ export default class SwitchWidget extends NoteContextAwareWidget { }); this.$switchName = this.$widget.find(".switch-name"); - this.$helpButton = this.$widget.find(".switch-help-button"); } @@ -172,6 +178,7 @@ export default class SwitchWidget extends NoteContextAwareWidget { } } + /** Gets or sets whether the switch is enabled. */ get canToggle() { return (!this.$switchButton.hasClass("disabled")); }