2020-01-13 02:05:09 +08:00
|
|
|
import TabAwareWidget from "./tab_aware_widget.js";
|
|
|
|
import utils from "../services/utils.js";
|
|
|
|
import protectedSessionHolder from "../services/protected_session_holder.js";
|
2020-01-20 03:18:02 +08:00
|
|
|
import server from "../services/server.js";
|
2020-01-20 04:40:23 +08:00
|
|
|
import SpacedUpdate from "../services/spaced_update.js";
|
2020-01-13 02:05:09 +08:00
|
|
|
|
|
|
|
const TPL = `
|
2020-01-19 22:44:18 +08:00
|
|
|
<div class="note-title-container">
|
2020-01-15 03:27:40 +08:00
|
|
|
<style>
|
2020-01-19 22:44:18 +08:00
|
|
|
.note-title-container {
|
|
|
|
flex-grow: 100;
|
|
|
|
}
|
|
|
|
|
|
|
|
.note-title-container input.note-title {
|
2020-01-15 03:27:40 +08:00
|
|
|
margin-left: 15px;
|
|
|
|
margin-right: 10px;
|
|
|
|
font-size: 150%;
|
|
|
|
border: 0;
|
2020-01-20 01:05:06 +08:00
|
|
|
min-width: 5em;
|
|
|
|
width: 100%;
|
2020-01-15 03:27:40 +08:00
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
2020-01-19 02:46:30 +08:00
|
|
|
<input autocomplete="off" value="" class="note-title" tabindex="1">
|
2020-01-13 02:05:09 +08:00
|
|
|
</div>`;
|
|
|
|
|
|
|
|
export default class NoteTitleWidget extends TabAwareWidget {
|
2020-02-15 16:43:47 +08:00
|
|
|
constructor(appContext, parent) {
|
|
|
|
super(appContext, parent);
|
2020-01-20 03:18:02 +08:00
|
|
|
|
|
|
|
this.spacedUpdate = new SpacedUpdate(async () => {
|
|
|
|
const title = this.$noteTitle.val();
|
|
|
|
|
2020-02-04 04:56:45 +08:00
|
|
|
await server.put(`notes/${this.noteId}/change-title`, {title});
|
2020-01-20 03:18:02 +08:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-01-13 03:15:05 +08:00
|
|
|
doRender() {
|
2020-01-15 03:27:40 +08:00
|
|
|
this.$widget = $(TPL);
|
|
|
|
this.$noteTitle = this.$widget.find(".note-title");
|
2020-01-13 02:05:09 +08:00
|
|
|
|
2020-02-09 03:53:07 +08:00
|
|
|
this.$noteTitle.on('input', () => this.spacedUpdate.scheduleUpdate());
|
2020-01-13 02:05:09 +08:00
|
|
|
|
2020-01-20 02:33:35 +08:00
|
|
|
utils.bindElShortcut(this.$noteTitle, 'return', () => {
|
|
|
|
this.trigger('focusOnDetail', {tabId: this.tabContext.tabId});
|
|
|
|
});
|
2020-01-13 03:15:05 +08:00
|
|
|
|
2020-01-15 03:27:40 +08:00
|
|
|
return this.$widget;
|
2020-01-13 02:05:09 +08:00
|
|
|
}
|
|
|
|
|
2020-01-19 22:36:42 +08:00
|
|
|
async refreshWithNote(note) {
|
2020-01-13 06:03:55 +08:00
|
|
|
this.$noteTitle.val(note.title);
|
2020-01-13 02:05:09 +08:00
|
|
|
|
2020-02-02 05:29:32 +08:00
|
|
|
this.$noteTitle.prop("readonly", note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable());
|
2020-01-13 02:05:09 +08:00
|
|
|
}
|
2020-01-20 03:18:02 +08:00
|
|
|
|
2020-01-20 04:12:53 +08:00
|
|
|
async beforeNoteSwitchListener({tabId}) {
|
|
|
|
if (this.isTab(tabId)) {
|
|
|
|
await this.spacedUpdate.updateNowIfNecessary();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
async beforeTabRemoveListener({tabId}) {
|
2020-01-20 03:18:02 +08:00
|
|
|
if (this.isTab(tabId)) {
|
|
|
|
await this.spacedUpdate.updateNowIfNecessary();
|
|
|
|
}
|
|
|
|
}
|
2020-01-25 00:54:47 +08:00
|
|
|
|
|
|
|
focusOnTitleListener() {
|
|
|
|
if (this.tabContext && this.tabContext.isActive()) {
|
|
|
|
this.$noteTitle.trigger('focus');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
focusAndSelectTitleListener() {
|
|
|
|
if (this.tabContext && this.tabContext.isActive()) {
|
|
|
|
this.$noteTitle
|
|
|
|
.trigger('focus')
|
|
|
|
.trigger('select');
|
|
|
|
}
|
|
|
|
}
|
2020-02-02 17:41:43 +08:00
|
|
|
|
|
|
|
beforeUnloadListener() {
|
|
|
|
this.spacedUpdate.updateNowIfNecessary();
|
|
|
|
}
|
2020-01-13 02:05:09 +08:00
|
|
|
}
|