mirror/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2026-01-21 20:50:05 -06:00
Code Issues Packages Projects Releases Wiki Activity

various widget refactorings

Browse Source
This commit is contained in:
zadam
2020-02-02 20:02:08 +01:00
parent 62a80ef016
commit 7c6cd63a53
17 changed files with 158 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/public/javascripts/services/app_context.js
View File

@@ -29,6 +29,7 @@ import protectedSessionHolder from "./protected_session_holder.js";
import bundleService from "./bundle.js";
import DialogEventComponent from "./dialog_events.js";
import Entrypoints from "./entrypoints.js";
import CalendarWidget from "../widgets/calendar.js";
class AppContext {
constructor() {
@@ -98,6 +99,7 @@ class AppContext {
const rightPaneWidgets = [
new NoteInfoWidget(this),
new TabCachingWidget(this, () => new CalendarWidget(this)),
new TabCachingWidget(this, () => new AttributesWidget(this)),
new TabCachingWidget(this, () => new LinkMapWidget(this)),
new TabCachingWidget(this, () => new NoteRevisionsWidget(this)),

2
src/public/javascripts/services/frontend_script_api.js
View File

@@ -7,7 +7,7 @@ import treeCache from './tree_cache.js';
import noteTooltipService from './note_tooltip.js';
import protectedSessionService from './protected_session.js';
import dateNotesService from './date_notes.js';
import CollapsibleWidget from '../widgets/standard_widget.js';
import CollapsibleWidget from '../widgets/collapsible_widget.js';
import ws from "./ws.js";
import hoistedNoteService from "./hoisted_note.js";
import appContext from "./app_context.js";

16
src/public/javascripts/services/link_map.js
View File

@@ -19,7 +19,8 @@ export default class LinkMap {
this.options = Object.assign({
maxDepth: 10,
maxNotes: 30,
zoom: 1.0
zoom: 1.0,
stopCheckerCallback: () => false
}, options);
this.$linkMapContainer = $linkMapContainer;
@@ -30,6 +31,10 @@ export default class LinkMap {
await libraryLoader.requireLibrary(libraryLoader.LINK_MAP);
jsPlumb.ready(() => {
if (this.options.stopCheckerCallback()) {
return;
}
this.initJsPlumbInstance();
this.initPanZoom();
@@ -43,6 +48,10 @@ export default class LinkMap {
this.cleanup();
if (this.options.stopCheckerCallback()) {
return;
}
const links = await server.post(`notes/${this.note.noteId}/link-map`, {
maxNotes: this.options.maxNotes,
maxDepth: this.options.maxDepth
@@ -63,6 +72,7 @@ export default class LinkMap {
const layout = new Springy.Layout.ForceDirected(
graph,
this.options.stopCheckerCallback,
// param explanation here: https://github.com/dhotson/springy/issues/58
400.0, // Spring stiffness
600.0, // Node repulsion
@@ -122,6 +132,10 @@ export default class LinkMap {
return $noteBox;
};
if (this.options.stopCheckerCallback()) {
return;
}
this.renderer = new Springy.Renderer(layout);
await this.renderer.start(500);

2
src/public/javascripts/services/tree.js
View File

@@ -461,7 +461,7 @@ async function duplicateNote(noteId, parentNoteId) {
await ws.waitForMaxKnownSyncId();
await activateNote(note.noteId);
await appContext.activateOrOpenNote(note.noteId);
const origNote = await treeCache.getNote(noteId);
toastService.showMessage(`Note "${origNote.title}" has been duplicated`);

2
src/public/javascripts/widgets/attributes.js
View File

@@ -1,7 +1,7 @@
import utils from "../services/utils.js";
import linkService from "../services/link.js";
import ws from "../services/ws.js";
import CollapsibleWidget from "./standard_widget.js";
import CollapsibleWidget from "./collapsible_widget.js";
class AttributesWidget extends CollapsibleWidget {
getWidgetTitle() { return "Attributes"; }

56
src/public/javascripts/widgets/calendar.js
View File

@@ -1,4 +1,4 @@
import CollapsibleWidget from "./standard_widget.js";
import CollapsibleWidget from "./collapsible_widget.js";
import libraryLoader from "../services/library_loader.js";
import utils from "../services/utils.js";
import dateNoteService from "../services/date_notes.js";
@@ -10,7 +10,7 @@ const TPL = `
<div class="calendar-header">
<button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
<div class="calendar-header__label" data-calendar-label="month">
<div class="calendar-header-label" data-calendar-label="month">
March 2017
</div>
@@ -29,45 +29,29 @@ class CalendarWidget extends CollapsibleWidget {
async isEnabled() {
return await super.isEnabled()
&& await this.tabContext.note.hasLabel("dateNote");
&& this.tabContext.note.hasOwnedLabel("dateNote");
}
async doRenderBody() {
await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
this.$body.html(TPL);
}
async refreshWithNote() {
this.init(this.$body, await this.tabContext.note.getLabelValue("dateNote"));
}
init($el, activeDate) {
this.activeDate = new Date(activeDate + "T12:00:00"); // attaching time fixes local timezone handling
this.todaysDate = new Date();
this.date = new Date(this.activeDate.getTime());
this.$month = $el.find('[data-calendar-area="month"]');
this.$next = $el.find('[data-calendar-toggle="next"]');
this.$previous = $el.find('[data-calendar-toggle="previous"]');
this.$month = this.$body.find('[data-calendar-area="month"]');
this.$next = this.$body.find('[data-calendar-toggle="next"]');
this.$previous = this.$body.find('[data-calendar-toggle="previous"]');
this.$label = this.$body.find('[data-calendar-label="month"]');
this.$next.on('click', () => {
this.clearCalendar();
this.date.setMonth(this.date.getMonth() + 1);
this.createMonth();
});
this.$previous.on('click', () => {
this.clearCalendar();
this.date.setMonth(this.date.getMonth() - 1);
this.createMonth();
});
this.$label = $el.find('[data-calendar-label="month"]');
this.date.setDate(1);
this.createMonth();
this.$body.on('click', '.calendar-date', async ev => {
const date = $(ev.target).closest('.calendar-date').attr('data-calendar-date');
@@ -82,6 +66,19 @@ class CalendarWidget extends CollapsibleWidget {
});
}
async refreshWithNote(note) {
this.init(this.$body, note.getOwnedLabelValue("dateNote"));
}
init($el, activeDate) {
this.activeDate = new Date(activeDate + "T12:00:00"); // attaching time fixes local timezone handling
this.todaysDate = new Date();
this.date = new Date(this.activeDate.getTime());
this.date.setDate(1);
this.createMonth();
}
createDay(dateNotesForMonth, num, day) {
const $newDay = $('<a>')
.addClass("calendar-date")
@@ -113,7 +110,7 @@ class CalendarWidget extends CollapsibleWidget {
}
$newDay.append($date);
this.$month.append($newDay);
return $newDay;
}
isEqual(a, b) {
@@ -126,14 +123,19 @@ class CalendarWidget extends CollapsibleWidget {
const month = utils.formatDateISO(this.date).substr(0, 7);
const dateNotesForMonth = await server.get('date-notes/notes-for-month/' + month);
this.$month.empty();
const currentMonth = this.date.getMonth();
while (this.date.getMonth() === currentMonth) {
this.createDay(
const $day = this.createDay(
dateNotesForMonth,
this.date.getDate(),
this.date.getDay(),
this.date.getFullYear()
);
this.$month.append($day);
this.date.setDate(this.date.getDate() + 1);
}
// while loop trips over and day is at 30/31, bring it back
@@ -159,10 +161,6 @@ class CalendarWidget extends CollapsibleWidget {
'December'
][monthIndex];
}
clearCalendar() {
this.$month.html('');
}
}
export default CalendarWidget;

17
src/public/javascripts/widgets/collapsible_widget.js
View File

@@ -1,4 +1,3 @@
import utils from "../services/utils.js";
import TabAwareWidget from "./tab_aware_widget.js";
const WIDGET_TPL = `
@@ -21,7 +20,7 @@ const WIDGET_TPL = `
</div>
`;
class CollapsibleWidget extends TabAwareWidget {
export default class CollapsibleWidget extends TabAwareWidget {
getWidgetTitle() { return "Untitled widget"; }
getHeaderActions() { return []; }
@@ -30,7 +29,7 @@ class CollapsibleWidget extends TabAwareWidget {
getMaxHeight() { return null; }
render() {
doRender() {
this.$widget = $(WIDGET_TPL);
this.$widget.find('[data-target]').attr('data-target', "#" + this.componentId);
@@ -69,23 +68,15 @@ class CollapsibleWidget extends TabAwareWidget {
this.$headerActions = this.$widget.find('.widget-header-actions');
this.$headerActions.append(...this.getHeaderActions());
this.initialized = this.renderBody();
this.initialized = this.doRenderBody();
return this.$widget;
}
async renderBody() {
await this.doRenderBody();
}
/** for overriding */
async doRenderBody() {}
isExpanded() {
return this.$bodyWrapper.hasClass("show");
}
cleanup() {}
}
export default CollapsibleWidget;
}

11
src/public/javascripts/widgets/edited_notes.js
View File

@@ -1,9 +1,9 @@
import CollapsibleWidget from "./standard_widget.js";
import CollapsibleWidget from "./collapsible_widget.js";
import linkService from "../services/link.js";
import server from "../services/server.js";
import treeCache from "../services/tree_cache.js";
class EditedNotesWidget extends CollapsibleWidget {
export default class EditedNotesWidget extends CollapsibleWidget {
getWidgetTitle() { return "Edited notes on this day"; }
getHelp() {
@@ -19,8 +19,7 @@ class EditedNotesWidget extends CollapsibleWidget {
&& await this.tabContext.note.hasLabel("dateNote");
}
async refreshWithNote() {
const note = this.tabContext.note;
async refreshWithNote(note) {
// remember which title was when we found the similar notes
this.title = note.title;
let editedNotes = await server.get('edited-notes/' + await note.getLabelValue("dateNote"));
@@ -53,6 +52,4 @@ class EditedNotesWidget extends CollapsibleWidget {
this.$body.empty().append($list);
}
}
export default EditedNotesWidget;
}

9
src/public/javascripts/widgets/link_map.js
View File

@@ -1,4 +1,4 @@
import CollapsibleWidget from "./standard_widget.js";
import CollapsibleWidget from "./collapsible_widget.js";
let linkMapContainerIdCtr = 1;
@@ -28,7 +28,7 @@ class LinkMapWidget extends CollapsibleWidget {
return [$showFullButton];
}
async refreshWithNote() {
async refreshWithNote(note) {
this.$body.css('opacity', 0);
this.$body.html(TPL);
@@ -38,9 +38,10 @@ class LinkMapWidget extends CollapsibleWidget {
const LinkMapServiceClass = (await import('../services/link_map.js')).default;
this.linkMapService = new LinkMapServiceClass(this.tabContext.note, $linkMapContainer, {
this.linkMapService = new LinkMapServiceClass(note, $linkMapContainer, {
maxDepth: 1,
zoom: 0.6
zoom: 0.6,
stopCheckerCallback: () => this.noteId !== note.noteId // stop when current note is not what was originally requested
});
await this.linkMapService.render();

2
src/public/javascripts/widgets/note_info.js
View File

@@ -1,4 +1,4 @@
import CollapsibleWidget from "./standard_widget.js";
import CollapsibleWidget from "./collapsible_widget.js";
const TPL = `
<table class="note-info-widget-table">

2
src/public/javascripts/widgets/note_revisions.js
View File

@@ -1,5 +1,5 @@
import server from "../services/server.js";
import CollapsibleWidget from "./standard_widget.js";
import CollapsibleWidget from "./collapsible_widget.js";
const TPL = `
<ul class="note-revision-list" style="max-height: 150px; overflow: auto;">

2
src/public/javascripts/widgets/similar_notes.js
View File

@@ -1,4 +1,4 @@
import CollapsibleWidget from "./standard_widget.js";
import CollapsibleWidget from "./collapsible_widget.js";
import linkService from "../services/link.js";
import server from "../services/server.js";
import treeCache from "../services/tree_cache.js";

18
src/public/javascripts/widgets/tab_aware_widget.js
View File

@@ -43,10 +43,22 @@ export default class TabAwareWidget extends BasicWidget {
this.refresh();
}
refresh() {
if (this.note) {
async isEnabled() {
return !!this.note;
}
async refresh() {
if (await this.isEnabled()) {
const start = Date.now();
this.toggle(true);
this.refreshWithNote(this.note, this.notePath);
await this.refreshWithNote(this.note, this.notePath);
const end = Date.now();
if (end - start > 10) {
console.log(`Refresh of ${this.componentId} took ${end-start}ms`);
}
}
else {
this.toggle(false);

2
src/public/javascripts/widgets/what_links_here.js
View File

@@ -1,4 +1,4 @@
import CollapsibleWidget from "./standard_widget.js";
import CollapsibleWidget from "./collapsible_widget.js";
import linkService from "../services/link.js";
class WhatLinksHereWidget extends CollapsibleWidget {

2
src/public/stylesheets/calendar.css
View File

@@ -31,7 +31,7 @@
padding: 0 0.5rem 0.5rem 0.5rem;
}
.calendar-widget .calendar-header__label {
.calendar-widget .calendar-header-label {
font-weight: bold;
text-align: center;
width: 100%;