chore(client/ts): port switch

src/public/app/widgets/switch.ts

@@ -3,12 +3,12 @@ import NoteContextAwareWidget from "./note_context_aware_widget.js";
 
 const TPL = `
 <div class="switch-widget">
-    <style>    
+    <style>
     .switch-widget {
         display: flex;
         align-items: center;
     }
-    
+
     /* The switch - the box around the slider */
     .switch-widget .switch {
         position: relative;
@@ -17,11 +17,11 @@ const TPL = `
         height: 24px;
         margin: 0;
     }
-    
+
     .switch-on, .switch-off {
         display: flex;
     }
-    
+
     /* The slider */
     .switch-widget .slider {
         border-radius: 24px;
@@ -34,7 +34,7 @@ const TPL = `
         background-color: var(--more-accented-background-color);
         transition: .4s;
     }
-    
+
     .switch-widget .slider:before {
         border-radius: 50%;
         position: absolute;
@@ -47,20 +47,20 @@ const TPL = `
         -webkit-transition: .4s;
         transition: .4s;
     }
-    
+
     .switch-widget .slider.checked {
         background-color: var(--main-text-color);
     }
-    
+
     .switch-widget .slider.checked:before {
         transform: translateX(26px);
     }
-    
+
     .switch-widget .switch-disabled {
         opacity: 70%;
         pointer-events: none;
     }
-    
+
     .switch-widget .switch-help-button {
         font-weight: 900;
         border: 0;
@@ -72,9 +72,9 @@ const TPL = `
 
     <div class="switch-on">
         <span class="switch-on-name"></span>
-    
+
         &nbsp;
-    
+
         <span class="switch-on-button">
             <label class="switch">
             <span class="slider"></span>
@@ -82,19 +82,28 @@ const TPL = `
     </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>
-    
+
     <button class="switch-help-button" type="button" data-help-page="" title="${t("open-help-page")}" style="display: none;">?</button>
 </div>`;
 
 export default class SwitchWidget extends NoteContextAwareWidget {
+
+    private $switchOn!: JQuery<HTMLElement>;
+    private $switchOnName!: JQuery<HTMLElement>;
+    private $switchOnButton!: JQuery<HTMLElement>;
+    private $switchOff!: JQuery<HTMLElement>;
+    private $switchOffName!: JQuery<HTMLElement>;
+    private $switchOffButton!: JQuery<HTMLElement>;
+    private $helpButton!: JQuery<HTMLElement>;
+
     doRender() {
         this.$widget = $(TPL);
 
@@ -113,7 +122,7 @@ export default class SwitchWidget extends NoteContextAwareWidget {
         this.$helpButton = this.$widget.find(".switch-help-button");
     }
 
-    toggle(state) {
+    toggle(state: boolean) {
         if (state) {
             this.switchOn();
         } else {