client: switch widget: use a simpler HTML structure and refactor its internals

src/public/app/widgets/bookmark_switch.js

@@ -15,11 +15,11 @@ export default class BookmarkSwitchWidget extends SwitchWidget {
     doRender() {
         super.doRender();
 
-        this.$switchOnName.text(t("bookmark_switch.bookmark"));
+        this.switchOnName = t("bookmark_switch.bookmark");
-        this.$switchOnButton.attr("title", t("bookmark_switch.bookmark_this_note"));
+        this.switchOnTooltip = t("bookmark_switch.bookmark_this_note");
 
-        this.$switchOffName.text(t("bookmark_switch.bookmark"));
+        this.switchOffName = t("bookmark_switch.bookmark");
-        this.$switchOffButton.attr("title", t("bookmark_switch.remove_bookmark"));
+        this.switchOffTooltip = t("bookmark_switch.remove_bookmark");
     }
 
     async toggle(state) {
@@ -33,8 +33,7 @@ export default class BookmarkSwitchWidget extends SwitchWidget {
     async refreshWithNote(note) {
         const isBookmarked = !!note.getParentBranches().find((b) => b.parentNoteId === "_lbBookmarks");
 
-        this.$switchOn.toggle(!isBookmarked);
+        this.isToggled = isBookmarked;
-        this.$switchOff.toggle(isBookmarked);
     }
 
     entitiesReloadedEvent({ loadResults }) {

src/public/app/widgets/protected_note_switch.js

@@ -6,11 +6,11 @@ export default class ProtectedNoteSwitchWidget extends SwitchWidget {
     doRender() {
         super.doRender();
 
-        this.$switchOnName.text(t("protect_note.toggle-on"));
+        this.switchOnName = t("protect_note.toggle-on");
-        this.$switchOnButton.attr("title", t("protect_note.toggle-on-hint"));
+        this.switchOnTooltip =  t("protect_note.toggle-on-hint");
 
-        this.$switchOffName.text(t("protect_note.toggle-off"));
+        this.switchOffName = t("protect_note.toggle-off");
-        this.$switchOffButton.attr("title", t("protect_note.toggle-off-hint"));
+        this.switchOffTooltip = t("protect_note.toggle-off-hint");
     }
 
     switchOn() {
@@ -22,8 +22,7 @@ export default class ProtectedNoteSwitchWidget extends SwitchWidget {
     }
 
     async refreshWithNote(note) {
-        this.$switchOn.toggle(!note.isProtected);
+        this.isToggled = note.isProtected;
-        this.$switchOff.toggle(!!note.isProtected);
     }
 
     entitiesReloadedEvent({ loadResults }) {

src/public/app/widgets/shared_switch.js

@@ -14,11 +14,11 @@ export default class SharedSwitchWidget extends SwitchWidget {
     doRender() {
         super.doRender();
 
-        this.$switchOnName.text(t("shared_switch.shared"));
+        this.switchOnName = t("shared_switch.shared");
-        this.$switchOnButton.attr("title", t("shared_switch.toggle-on-title"));
+        this.switchOnTooltip = t("shared_switch.toggle-on-title");
 
-        this.$switchOffName.text(t("shared_switch.shared"));
+        this.switchOffName = t("shared_switch.shared");
-        this.$switchOffButton.attr("title", t("shared_switch.toggle-off-title"));
+        this.switchOffTooltip = t("shared_switch.toggle-off-title");
 
         this.$helpButton.attr("data-help-page", "sharing.html").show();
         this.$helpButton.on("click", (e) => utils.openHelp($(e.target)));
@@ -53,15 +53,14 @@ export default class SharedSwitchWidget extends SwitchWidget {
         const canBeUnshared = isShared && note.getParentBranches().find((b) => b.parentNoteId === "_share");
         const switchDisabled = isShared && !canBeUnshared;
 
-        this.$switchOn.toggle(!isShared);
+        this.isToggled = isShared;
-        this.$switchOff.toggle(!!isShared);
 
         if (switchDisabled) {
-            this.$widget.attr("title", t("shared_switch.inherited"));
+            //this.$widget.attr("title", t("shared_switch.inherited"));
-            this.$switchOff.addClass("switch-disabled");
+            //this.$switchOff.addClass("switch-disabled");
         } else {
-            this.$widget.removeAttr("title");
+            //this.$widget.removeAttr("title");
-            this.$switchOff.removeClass("switch-disabled");
+            //this.$switchOff.removeClass("switch-disabled");
         }
     }
 

src/public/app/widgets/switch.js

@@ -9,43 +9,13 @@ const TPL = `
         align-items: center;
     }
 
-    /* The switch - the box around the slider */
+    .switch {
-    .switch-widget .switch {
-        position: relative;
-        display: block;
-        width: 50px;
-        height: 24px;
-        margin: 0;
-    }
-    
-    .switch-on, .switch-off {
         display: flex;
+        position: relative;
     }
 
-    /* The slider */
+    .switch-widget .switch-button {
-    .switch-widget .slider {
+        position: relative;
-        border-radius: 24px;
-        position: absolute;
-        cursor: pointer;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: var(--more-accented-background-color);
-        transition: .4s;
-    }
-    
-    .switch-widget .slider:before {
-        border-radius: 50%;
-        position: absolute;
-        content: "";
-        height: 16px;
-        width: 16px;
-        left: 4px;
-        bottom: 4px;
-        background-color: var(--main-background-color);
-        -webkit-transition: .4s;
-        transition: .4s;
     }
 
     .switch-widget .slider.checked {
@@ -68,26 +38,21 @@ const TPL = `
         cursor: pointer;
         color: var(--main-text-color);
     }
+
+    .switch-widget .switch-button {
+        background: red !important;
+    }
+
+    .switch-widget .switch-button.on {
+        background: green !important;
+    }
     </style>
 
-    <div class="switch-on">
+    <div class="switch">
-        <span class="switch-on-name"></span>
+        <span class="switch-name"></span>
-    
         &nbsp;
-    
+        <span class="switch-button">
-        <span class="switch-on-button">
+            [...]
-            <label class="switch">
-            <span class="slider"></span>
-        </span>
-    </div>
-    <div class="switch-off">
-        <span class="switch-off-name"></span>
-        
-        &nbsp;
-    
-        <span class="switch-off-button">
-            <label class="switch">
-            <span class="slider checked"></span>
         </span>
     </div>
 
@@ -95,20 +60,21 @@ const TPL = `
 </div>`;
 
 export default class SwitchWidget extends NoteContextAwareWidget {
+
+    switchOnName;
+    switchOnTooltip;
+
+    switchOffName;
+    switchOffTooltip;
+
+    currentState = false;
+
     doRender() {
         this.$widget = $(TPL);
+        this.$switchButton = this.$widget.find(".switch-button");
+        this.$switchButton.on("click", () => this.toggle(!this.currentState));
 
-        this.$switchOn = this.$widget.find(".switch-on");
+        this.$switchName = this.$widget.find(".switch-name");
-        this.$switchOnName = this.$widget.find(".switch-on-name");
-        this.$switchOnButton = this.$widget.find(".switch-on-button");
-
-        this.$switchOnButton.on("click", () => this.toggle(true));
-
-        this.$switchOff = this.$widget.find(".switch-off");
-        this.$switchOffName = this.$widget.find(".switch-off-name");
-        this.$switchOffButton = this.$widget.find(".switch-off-button");
-
-        this.$switchOffButton.on("click", () => this.toggle(false));
 
         this.$helpButton = this.$widget.find(".switch-help-button");
     }
@@ -123,4 +89,25 @@ export default class SwitchWidget extends NoteContextAwareWidget {
 
     switchOff() {}
     switchOn() {}
+
+    /** Gets or sets whether the switch is toggled. */
+    get isToggled() {
+        return this.currentState;
+    }
+
+    set isToggled(state) {
+        this.currentState = !!state;
+
+        if (this.currentState) {
+            this.$switchName.text(this.switchOffName);
+
+            this.$switchButton.attr("title", this.switchOffTooltip);
+            this.$switchButton.addClass("on");
+        } else {
+            this.$switchName.text(this.switchOnName);
+
+            this.$switchButton.attr("title", this.switchOnTooltip);
+            this.$switchButton.removeClass("on");
+        }
+    }
 }

src/public/app/widgets/template_switch.js

@@ -13,11 +13,11 @@ export default class TemplateSwitchWidget extends SwitchWidget {
     doRender() {
         super.doRender();
 
-        this.$switchOnName.text(t("template_switch.template"));
+        this.switchOnName = t("template_switch.template");
-        this.$switchOnButton.attr("title", t("template_switch.toggle-on-hint"));
+        this.switchOnTooltip =  t("template_switch.toggle-on-hint");
 
-        this.$switchOffName.text("Template");
+        this.switchOffName = t("template_switch.template");
-        this.$switchOffButton.attr("title", t("template_switch.toggle-off-hint"));
+        this.switchOffTooltip =  t("template_switch.toggle-off-hint");
 
         this.$helpButton.attr("data-help-page", "template.html").show();
     }
@@ -34,8 +34,7 @@ export default class TemplateSwitchWidget extends SwitchWidget {
 
     async refreshWithNote(note) {
         const isTemplate = note.hasLabel("template");
-        this.$switchOn.toggle(!isTemplate);
+        this.isToggled = isTemplate;
-        this.$switchOff.toggle(!!isTemplate);
     }
 
     entitiesReloadedEvent({ loadResults }) {