Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-03 20:06:08 +01:00
Code Issues Packages Projects Releases Activity

WIP of attribute view on click

Browse Source
This commit is contained in:
zadam
2020-06-18 12:52:16 +02:00
parent a04aa6fd36
commit a87e59cecb
6 changed files with 146 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/public/app/widgets/note_attributes.js
View File

@@ -7,6 +7,8 @@ import utils from "../services/utils.js";
import ws from "../services/ws.js";
import SpacedUpdate from "../services/spaced_update.js";
import attributesParser from "../services/attribute_parser.js";
import linkService from "../services/link.js";
import treeService from "../services/tree.js";
const mentionSetup = {
feeds: [
@@ -72,10 +74,41 @@ const mentionSetup = {
const TPL = `
<div class="note-attributes">
<style>
.note-attributes-editor p {
color: var(--muted-text-color);
margin-top: 5px !important;
margin-bottom: 5px !important;
}
.attr-extras {
display: block;
background-color: var(--accented-background-color);
border: 1px solid var(--main-border-color);
border-radius: 4px;
z-index: 1000;
padding: 10px;
position: absolute;
max-width: 400px;
max-height: 500px;
overflow: auto;
}
</style>
<div class="attr-extras" style="display: none;">
<div class="attr-extras-title"></div>
<div class="attr-extras-list"></div>
<div class="attr-extras-more-notes"></div>
</div>
<div class="note-attributes-editor"></div>
</div>
`;
const DISPLAYED_NOTES = 10;
export default class NoteAttributesWidget extends TabAwareWidget {
constructor() {
super();
@@ -90,6 +123,10 @@ export default class NoteAttributesWidget extends TabAwareWidget {
doRender() {
this.$widget = $(TPL);
this.$editor = this.$widget.find('.note-attributes-editor');
this.$attrExtras = this.$widget.find('.attr-extras');
this.$attrExtrasTitle = this.$widget.find('.attr-extras-title');
this.$attrExtrasList = this.$widget.find('.attr-extras-list');
this.$attrExtrasMoreNotes = this.$widget.find('.attr-extras-more-notes');
this.initialized = this.initEditor();
this.$editor.keypress(async e => {
@@ -114,18 +151,85 @@ export default class NoteAttributesWidget extends TabAwareWidget {
// display of $widget in both branches.
this.$widget.show();
this.$editor.on("click", () => {
this.$editor.on("click", async e => {
const pos = this.textEditor.model.document.selection.getFirstPosition();
if (pos && pos.textNode && pos.textNode.data) {
const attr = pos.textNode.data;
const index = pos.offset - pos.textNode.startOffset;
const attrText = pos.textNode.data;
const clickIndex = pos.offset - pos.textNode.startOffset;
const attrs = attributesParser.lexAndParse(attr, true);
const parsedAttrs = attributesParser.lexAndParse(attrText, true);
console.log(attrs);
let matchedAttr = null;
let matchedPart = null;
console.log(attr.substr(0, index) + '|' + attr.substr(index));
for (const attr of parsedAttrs) {
if (clickIndex >= attr.nameStartIndex && clickIndex <= attr.nameEndIndex) {
matchedAttr = attr;
matchedPart = 'name';
break;
}
if (clickIndex >= attr.valueStartIndex && clickIndex <= attr.valueEndIndex) {
matchedAttr = attr;
matchedPart = 'value';
break;
}
}
if (!matchedAttr) {
console.log(`Not found attribute for index ${clickIndex}, attr: ${JSON.stringify(parsedAttrs)}, text: ${attrText}`);
return;
}
let noteIds = await server.post('attributes/notes-with-attribute', {
type: matchedAttr.type,
name: matchedAttr.name,
value: matchedPart === 'value' ? matchedAttr.value : undefined
});
noteIds = noteIds.filter(noteId => noteId !== this.noteId);
if (noteIds.length === 0) {
this.$attrExtrasTitle.text(
`There are no other notes with ${matchedAttr.type} name "${matchedAttr.name}"`
// not displaying value since it can be long
+ (matchedPart === 'value' ? " and matching value" : ""));
}
else {
this.$attrExtrasTitle.text(
`Notes with ${matchedAttr.type} name "${matchedAttr.name}"`
// not displaying value since it can be long
+ (matchedPart === 'value' ? " and matching value" : "")
+ ":"
);
}
this.$attrExtrasList.empty();
const displayedNoteIds = noteIds.length <= DISPLAYED_NOTES ? noteIds : noteIds.slice(0, DISPLAYED_NOTES);
const displayedNotes = await treeCache.getNotes(displayedNoteIds);
console.log(displayedNoteIds, displayedNotes);
for (const note of displayedNotes) {
const notePath = treeService.getSomeNotePath(note);
const $noteLink = await linkService.createNoteLink(notePath, {showNotePath: true});
this.$attrExtrasList.append(
$("<li>").append($noteLink)
);
}
if (noteIds.length > DISPLAYED_NOTES) {
this.$attrExtrasMoreNotes.show().text(`... and ${noteIds.length - DISPLAYED_NOTES} more.`);
}
else {
this.$attrExtrasMoreNotes.hide();
}
this.$attrExtras.css("left", e.pageX - this.$attrExtras.width() / 2);
this.$attrExtras.css("top", e.pageY + 20);
this.$attrExtras.show();
}
});