Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-17 18:50:41 +01:00
Code Issues Packages Projects Releases Activity

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

Browse Source
This commit is contained in:
Adorian Doran
2025-01-21 04:21:01 +02:00
parent 8f612f4683
commit 76b99a00f4
5 changed files with 81 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,64 +3,34 @@ 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;
display: block;
width: 50px;
height: 24px;
margin: 0;
}
.switch-on, .switch-off {
.switch {
display: flex;
position: relative;
}
/* The slider */
.switch-widget .slider {
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 .switch-button {
position: relative;
}
.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 {
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;
@@ -68,47 +38,43 @@ 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">
<span class="switch-on-name"></span>
<div class="switch">
<span class="switch-name"></span>
&nbsp;
<span class="switch-on-button">
<label class="switch">
<span class="slider"></span>
<span class="switch-button">
[...]
</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>
<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 {
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.$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.$switchName = this.$widget.find(".switch-name");
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");
}
}
}