gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 13:39:01 +01:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

client: switch widget: refactor

Browse Source
This commit is contained in:
Adorian Doran 2025-01-21 04:49:07 +02:00
parent 76b99a00f4
commit 039112f106
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/public/app/widgets/switch.js
View File

@ -9,7 +9,7 @@ const TPL = `
align-items: center; align-items: center;
} }
.switch { .switch-widget {
display: flex; display: flex;
position: relative; position: relative;
} }
@ -48,12 +48,13 @@ const TPL = `
} }
</style> </style>
<div class="switch"> <div class="switch-widget">
<span class="switch-name"></span> <span class="switch-name"></span>
&nbsp; &nbsp;
<span class="switch-button"> <label class="switch-button">
[...] [...]
</span> <input class="switch-toggle" type="checkbox" />
</label>
</div> </div>
<button class="switch-help-button" type="button" data-help-page="" title="${t("open-help-page")}" style="display: none;">?</button> <button class="switch-help-button" type="button" data-help-page="" title="${t("open-help-page")}" style="display: none;">?</button>
@ -72,7 +73,9 @@ export default class SwitchWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.$switchButton = this.$widget.find(".switch-button"); this.$switchButton = this.$widget.find(".switch-button");
this.$switchButton.on("click", () => this.toggle(!this.currentState));
this.$switchToggle = this.$widget.find(".switch-toggle");
this.$switchToggle.on("click", () => this.toggle(!this.currentState));
this.$switchName = this.$widget.find(".switch-name"); this.$switchName = this.$widget.find(".switch-name");
@ -98,16 +101,15 @@ export default class SwitchWidget extends NoteContextAwareWidget {
set isToggled(state) { set isToggled(state) {
this.currentState = !!state; this.currentState = !!state;
this.$switchButton.toggleClass("on", this.currentState);
this.$switchToggle.prop("checked", this.currentState);
if (this.currentState) { if (this.currentState) {
this.$switchName.text(this.switchOffName); this.$switchName.text(this.switchOffName);
this.$switchButton.attr("title", this.switchOffTooltip); this.$switchButton.attr("title", this.switchOffTooltip);
this.$switchButton.addClass("on");
} else { } else {
this.$switchName.text(this.switchOnName); this.$switchName.text(this.switchOnName);
this.$switchButton.attr("title", this.switchOnTooltip); this.$switchButton.attr("title", this.switchOnTooltip);
this.$switchButton.removeClass("on");
} }
} }
} }