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 01:05:06 +08:00
|
|
|
import treeCache from "../services/tree_cache.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-01-20 03:18:02 +08:00
|
|
|
constructor(appContext) {
|
|
|
|
super(appContext);
|
|
|
|
|
|
|
|
this.spacedUpdate = new SpacedUpdate(async () => {
|
|
|
|
const noteId = this.tabContext.note.noteId;
|
|
|
|
const title = this.$noteTitle.val();
|
|
|
|
|
2020-02-02 01:29:18 +08:00
|
|
|
await server.put(`notes/${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-01-20 01:05:06 +08:00
|
|
|
this.$noteTitle.on('input', () => this.titleChanged());
|
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-20 01:05:06 +08:00
|
|
|
async titleChanged() {
|
|
|
|
const {note} = this.tabContext;
|
|
|
|
|
|
|
|
if (!note) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
note.title = this.$noteTitle.val();
|
|
|
|
|
2020-01-20 03:18:02 +08:00
|
|
|
this.spacedUpdate.scheduleUpdate();
|
|
|
|
|
2020-01-20 01:05:06 +08:00
|
|
|
const noteFromCache = await treeCache.getNote(note.noteId);
|
|
|
|
noteFromCache.title = note.title;
|
|
|
|
|
|
|
|
this.trigger(`noteTitleChanged`, {
|
|
|
|
tabId: this.tabContext.tabId, // used to identify that the event comes from this tab so we should not update this tab's input
|
|
|
|
title: note.title,
|
|
|
|
noteId: note.noteId
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
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-01-13 02:05:09 +08:00
|
|
|
}
|