sharing WIP

This commit is contained in:
zadam
2021-12-20 17:30:47 +01:00
parent 16d97b95af
commit 3860028a9e
25 changed files with 342 additions and 203 deletions

View File

@@ -1,89 +1,28 @@
import NoteContextAwareWidget from "./note_context_aware_widget.js";
import protectedSessionService from "../services/protected_session.js";
import SwitchWidget from "./switch.js";
const TPL = `
<div class="protected-note-switch">
<style>
/* The switch - the box around the slider */
.protected-note-switch .switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
float: right;
}
/* The slider */
.protected-note-switch .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;
}
.protected-note-switch .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;
}
.protected-note-switch .slider.checked {
background-color: var(--main-text-color);
}
.protected-note-switch .slider.checked:before {
transform: translateX(26px);
}
</style>
<div class="protect-button">
Protect the note
&nbsp;
<span title="Note is not protected, click to make it protected">
<label class="switch">
<span class="slider"></span>
</span>
</div>
<div class="unprotect-button">
Unprotect the note
&nbsp;
<span title="Note is protected, click to make it unprotected">
<label class="switch">
<span class="slider checked"></span>
</span>
</div>
</div>`;
export default class ProtectedNoteSwitchWidget extends NoteContextAwareWidget {
export default class ProtectedNoteSwitchWidget extends SwitchWidget {
doRender() {
this.$widget = $(TPL);
super.doRender();
this.$protectButton = this.$widget.find(".protect-button");
this.$protectButton.on('click', () => protectedSessionService.protectNote(this.noteId, true, false));
this.$switchOnName.text("Protect the note");
this.$switchOnButton.attr("title", "Note is not protected, click to make it protected");
this.$unprotectButton = this.$widget.find(".unprotect-button");
this.$unprotectButton.on('click', () => protectedSessionService.protectNote(this.noteId, false, false));
this.$switchOffName.text("Unprotect the note");
this.$switchOffButton.attr("title", "Note is protected, click to make it unprotected");
}
switchOn() {
protectedSessionService.protectNote(this.noteId, true, false);
}
switchOff() {
protectedSessionService.protectNote(this.noteId, false, false)
}
refreshWithNote(note) {
this.$protectButton.toggle(!note.isProtected);
this.$unprotectButton.toggle(!!note.isProtected);
this.$switchOn.toggle(!note.isProtected);
this.$switchOff.toggle(!!note.isProtected);
}
entitiesReloadedEvent({loadResults}) {