gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 03:29:02 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

ability to remove attribute with mouse + other tweaks

Browse Source
This commit is contained in:
zadam 2020-08-13 23:23:57 +02:00
parent 47a9516ada
commit f6f9f0d2c0
7 changed files with 124 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -7448,9 +7448,9 @@
} }
}, },
"sanitize-html": { "sanitize-html": {
"version": "1.27.2", "version": "1.27.3",
"resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-1.27.2.tgz", "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-1.27.3.tgz",
"integrity": "sha512-REZETvhFFChM3zyQS8XoR02j5U56HtyQkxsc8cb5HEi3XU0AAX9TuKvWe3ESR0F0IA81ZghA+5YpJg8C35AFyQ==", "integrity": "sha512-79tcPlgJ3fuK0/TtUCIBdPeQSvktTSTJP9O/dzrteaO98qw5UV6CATh3ZyPjUzv1LtNjHDlhbq9XOXiKf0zA1w==",
"requires": { "requires": {
"htmlparser2": "^4.1.0", "htmlparser2": "^4.1.0",
"lodash": "^4.17.15", "lodash": "^4.17.15",

2
package.json
View File

@ -60,7 +60,7 @@
"rcedit": "2.2.0", "rcedit": "2.2.0",
"rimraf": "3.0.2", "rimraf": "3.0.2",
"sanitize-filename": "1.6.3", "sanitize-filename": "1.6.3",
"sanitize-html": "1.27.2", "sanitize-html": "1.27.3",
"sax": "1.2.4", "sax": "1.2.4",
"semver": "7.3.2", "semver": "7.3.2",
"serve-favicon": "2.5.0", "serve-favicon": "2.5.0",

158
src/public/app/widgets/attribute_detail.js
View File

@ -2,10 +2,10 @@ import server from "../services/server.js";
import treeCache from "../services/tree_cache.js"; import treeCache from "../services/tree_cache.js";
import treeService from "../services/tree.js"; import treeService from "../services/tree.js";
import linkService from "../services/link.js"; import linkService from "../services/link.js";
import BasicWidget from "./basic_widget.js";
import attributeAutocompleteService from "../services/attribute_autocomplete.js"; import attributeAutocompleteService from "../services/attribute_autocomplete.js";
import noteAutocompleteService from "../services/note_autocomplete.js"; import noteAutocompleteService from "../services/note_autocomplete.js";
import promotedAttributeDefinitionParser from '../services/promoted_attribute_definition_parser.js'; import promotedAttributeDefinitionParser from '../services/promoted_attribute_definition_parser.js';
import TabAwareWidget from "./tab_aware_widget.js";
const TPL = ` const TPL = `
<div class="attr-detail"> <div class="attr-detail">
@ -18,9 +18,10 @@ const TPL = `
z-index: 1000; z-index: 1000;
padding: 15px; padding: 15px;
position: absolute; position: absolute;
max-width: 600px; width: 500px;
max-height: 600px; max-height: 600px;
overflow: auto; overflow: auto;
box-shadow: 10px 10px 93px -25px var(--main-text-color);
} }
.related-notes-list { .related-notes-list {
@ -45,6 +46,11 @@ const TPL = `
font-size: x-large; font-size: x-large;
cursor: pointer; cursor: pointer;
} }
.attr-save-delete-button-container {
display: flex;
margin-top: 15px;
}
</style> </style>
<div style="display: flex; justify-content: space-between;"> <div style="display: flex; justify-content: space-between;">
@ -122,7 +128,14 @@ const TPL = `
</tr> </tr>
</table> </table>
<button class="btn btn-primary btn-sm attr-save-changes-and-close-button" style="width: 100%; margin-top: 15px;">Save & close</button> <div class="attr-save-delete-button-container">
<button class="btn btn-primary btn-sm attr-save-changes-and-close-button"
style="flex-grow: 1; margin-right: 20px">
Save & close</button>
<button class="btn btn-secondary btn-sm attr-delete-button">
Delete</button>
</div>
<div class="related-notes-container"> <div class="related-notes-container">
<br/> <br/>
@ -144,7 +157,7 @@ const ATTR_TITLES = {
"relation-definition": "Relation definition detail" "relation-definition": "Relation definition detail"
}; };
export default class AttributeDetailWidget extends BasicWidget { export default class AttributeDetailWidget extends TabAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
@ -155,52 +168,52 @@ export default class AttributeDetailWidget extends BasicWidget {
this.$relatedNotesList = this.$relatedNotesContainer.find('.related-notes-list'); this.$relatedNotesList = this.$relatedNotesContainer.find('.related-notes-list');
this.$relatedNotesMoreNotes = this.$relatedNotesContainer.find('.related-notes-more-notes'); this.$relatedNotesMoreNotes = this.$relatedNotesContainer.find('.related-notes-more-notes');
this.$attrInputName = this.$widget.find('.attr-input-name'); this.$inputName = this.$widget.find('.attr-input-name');
this.$attrInputName.on('keyup', () => this.updateAttributeInEditor()); this.$inputName.on('keyup', () => this.updateAttributeInEditor());
this.$attrInputName.on('focus', () => { this.$inputName.on('focus', () => {
attributeAutocompleteService.initAttributeNameAutocomplete({ attributeAutocompleteService.initAttributeNameAutocomplete({
$el: this.$attrInputName, $el: this.$inputName,
attributeType: () => ['relation', 'relation-definition'].includes(this.attrType) ? 'relation' : 'label', attributeType: () => ['relation', 'relation-definition'].includes(this.attrType) ? 'relation' : 'label',
open: true open: true
}); });
}); });
this.$attrRowValue = this.$widget.find('.attr-row-value'); this.$rowValue = this.$widget.find('.attr-row-value');
this.$attrInputValue = this.$widget.find('.attr-input-value'); this.$inputValue = this.$widget.find('.attr-input-value');
this.$attrInputValue.on('keyup', () => this.updateAttributeInEditor()); this.$inputValue.on('keyup', () => this.updateAttributeInEditor());
this.$attrInputValue.on('focus', () => { this.$inputValue.on('focus', () => {
attributeAutocompleteService.initLabelValueAutocomplete({ attributeAutocompleteService.initLabelValueAutocomplete({
$el: this.$attrInputValue, $el: this.$inputValue,
open: true, open: true,
nameCallback: () => this.$attrInputName.val() nameCallback: () => this.$inputName.val()
}); });
}); });
this.$attrRowPromoted = this.$widget.find('.attr-row-promoted'); this.$rowPromoted = this.$widget.find('.attr-row-promoted');
this.$attrInputPromoted = this.$widget.find('.attr-input-promoted'); this.$inputPromoted = this.$widget.find('.attr-input-promoted');
this.$attrInputPromoted.on('change', () => this.updateAttributeInEditor()); this.$inputPromoted.on('change', () => this.updateAttributeInEditor());
this.$attrRowMultiplicity = this.$widget.find('.attr-row-multiplicity'); this.$rowMultiplicity = this.$widget.find('.attr-row-multiplicity');
this.$attrInputMultiplicity = this.$widget.find('.attr-input-multiplicity'); this.$inputMultiplicity = this.$widget.find('.attr-input-multiplicity');
this.$attrInputMultiplicity.on('change', () => this.updateAttributeInEditor()); this.$inputMultiplicity.on('change', () => this.updateAttributeInEditor());
this.$attrRowLabelType = this.$widget.find('.attr-row-label-type'); this.$rowLabelType = this.$widget.find('.attr-row-label-type');
this.$attrInputLabelType = this.$widget.find('.attr-input-label-type'); this.$inputLabelType = this.$widget.find('.attr-input-label-type');
this.$attrInputLabelType.on('change', () => this.updateAttributeInEditor()); this.$inputLabelType.on('change', () => this.updateAttributeInEditor());
this.$attrRowNumberPrecision = this.$widget.find('.attr-row-number-precision'); this.$rowNumberPrecision = this.$widget.find('.attr-row-number-precision');
this.$attrInputNumberPrecision = this.$widget.find('.attr-input-number-precision'); this.$inputNumberPrecision = this.$widget.find('.attr-input-number-precision');
this.$attrInputNumberPrecision.on('change', () => this.updateAttributeInEditor()); this.$inputNumberPrecision.on('change', () => this.updateAttributeInEditor());
this.$attrRowInverseRelation = this.$widget.find('.attr-row-inverse-relation'); this.$rowInverseRelation = this.$widget.find('.attr-row-inverse-relation');
this.$attrInputInverseRelation = this.$widget.find('.attr-input-inverse-relation'); this.$inputInverseRelation = this.$widget.find('.attr-input-inverse-relation');
this.$attrInputInverseRelation.on('keyup', () => this.updateAttributeInEditor()); this.$inputInverseRelation.on('keyup', () => this.updateAttributeInEditor());
this.$attrRowTargetNote = this.$widget.find('.attr-row-target-note'); this.$rowTargetNote = this.$widget.find('.attr-row-target-note');
this.$attrInputTargetNote = this.$widget.find('.attr-input-target-note'); this.$inputTargetNote = this.$widget.find('.attr-input-target-note');
noteAutocompleteService.initNoteAutocomplete(this.$attrInputTargetNote) noteAutocompleteService.initNoteAutocomplete(this.$inputTargetNote)
.on('autocomplete:selected', (event, suggestion, dataset) => { .on('autocomplete:selected', (event, suggestion, dataset) => {
if (!suggestion.notePath) { if (!suggestion.notePath) {
return false; return false;
@ -211,12 +224,14 @@ export default class AttributeDetailWidget extends BasicWidget {
this.triggerCommand('updateAttributeList', { attributes: this.allAttributes }); this.triggerCommand('updateAttributeList', { attributes: this.allAttributes });
}); });
this.$attrInputInheritable = this.$widget.find('.attr-input-inheritable'); this.$inputInheritable = this.$widget.find('.attr-input-inheritable');
this.$attrInputInheritable.on('change', () => this.updateAttributeInEditor()); this.$inputInheritable.on('change', () => this.updateAttributeInEditor());
this.$closeAttrDetailButton = this.$widget.find('.close-attr-detail-button'); this.$closeAttrDetailButton = this.$widget.find('.close-attr-detail-button');
this.$attrIsOwnedBy = this.$widget.find('.attr-is-owned-by'); this.$attrIsOwnedBy = this.$widget.find('.attr-is-owned-by');
this.$attrSaveDeleteButtonContainer = this.$widget.find('.attr-save-delete-button-container');
this.$saveAndCloseButton = this.$widget.find('.attr-save-changes-and-close-button'); this.$saveAndCloseButton = this.$widget.find('.attr-save-changes-and-close-button');
this.$saveAndCloseButton.on('click', async () => { this.$saveAndCloseButton.on('click', async () => {
await this.triggerCommand('saveAttributes'); await this.triggerCommand('saveAttributes');
@ -224,6 +239,17 @@ export default class AttributeDetailWidget extends BasicWidget {
this.hide(); this.hide();
}); });
this.$deleteButton = this.$widget.find('.attr-delete-button');
this.$deleteButton.on('click', async () => {
await this.triggerCommand('updateAttributeList', {
attributes: this.allAttributes.filter(attr => attr !== this.attribute)
});
await this.triggerCommand('saveAttributes');
this.hide();
});
this.$closeAttrDetailButton.on('click', () => this.hide()); this.$closeAttrDetailButton.on('click', () => this.hide());
$(window).on('mouseup', e => { $(window).on('mouseup', e => {
@ -295,7 +321,7 @@ export default class AttributeDetailWidget extends BasicWidget {
} }
} }
this.$saveAndCloseButton.toggle(!!isOwned); this.$attrSaveDeleteButtonContainer.toggle(!!isOwned);
if (isOwned) { if (isOwned) {
this.$attrIsOwnedBy.hide(); this.$attrIsOwnedBy.hide();
@ -309,53 +335,53 @@ export default class AttributeDetailWidget extends BasicWidget {
.append(await linkService.createNoteLink(attribute.noteId)) .append(await linkService.createNoteLink(attribute.noteId))
} }
this.$attrInputName this.$inputName
.val(attrName) .val(attrName)
.attr('readonly', () => !isOwned); .attr('readonly', () => !isOwned);
this.$attrRowValue.toggle(this.attrType === 'label'); this.$rowValue.toggle(this.attrType === 'label');
this.$attrRowTargetNote.toggle(this.attrType === 'relation'); this.$rowTargetNote.toggle(this.attrType === 'relation');
this.$attrRowPromoted.toggle(['label-definition', 'relation-definition'].includes(this.attrType)); this.$rowPromoted.toggle(['label-definition', 'relation-definition'].includes(this.attrType));
this.$attrInputPromoted this.$inputPromoted
.prop("checked", !!definition.isPromoted) .prop("checked", !!definition.isPromoted)
.attr('disabled', () => !isOwned); .attr('disabled', () => !isOwned);
this.$attrRowMultiplicity.toggle(['label-definition', 'relation-definition'].includes(this.attrType)); this.$rowMultiplicity.toggle(['label-definition', 'relation-definition'].includes(this.attrType));
this.$attrInputMultiplicity this.$inputMultiplicity
.val(definition.multiplicity) .val(definition.multiplicity)
.attr('disabled', () => !isOwned); .attr('disabled', () => !isOwned);
this.$attrRowLabelType.toggle(this.attrType === 'label-definition'); this.$rowLabelType.toggle(this.attrType === 'label-definition');
this.$attrInputLabelType this.$inputLabelType
.val(definition.labelType) .val(definition.labelType)
.attr('disabled', () => !isOwned); .attr('disabled', () => !isOwned);
this.$attrRowNumberPrecision.toggle(this.attrType === 'label-definition' && definition.labelType === 'number'); this.$rowNumberPrecision.toggle(this.attrType === 'label-definition' && definition.labelType === 'number');
this.$attrInputNumberPrecision this.$inputNumberPrecision
.val(definition.numberPrecision) .val(definition.numberPrecision)
.attr('disabled', () => !isOwned); .attr('disabled', () => !isOwned);
this.$attrRowInverseRelation.toggle(this.attrType === 'relation-definition'); this.$rowInverseRelation.toggle(this.attrType === 'relation-definition');
this.$attrInputInverseRelation this.$inputInverseRelation
.val(definition.inverseRelation) .val(definition.inverseRelation)
.attr('disabled', () => !isOwned); .attr('disabled', () => !isOwned);
if (attribute.type === 'label') { if (attribute.type === 'label') {
this.$attrInputValue this.$inputValue
.val(attribute.value) .val(attribute.value)
.attr('readonly', () => !isOwned); .attr('readonly', () => !isOwned);
} }
else if (attribute.type === 'relation') { else if (attribute.type === 'relation') {
const targetNote = await treeCache.getNote(attribute.value); const targetNote = await treeCache.getNote(attribute.value);
this.$attrInputTargetNote this.$inputTargetNote
.attr('readonly', () => !isOwned) .attr('readonly', () => !isOwned)
.val(targetNote ? targetNote.title : "") .val(targetNote ? targetNote.title : "")
.setSelectedNotePath(attribute.value); .setSelectedNotePath(attribute.value);
} }
this.$attrInputInheritable this.$inputInheritable
.prop("checked", !!attribute.isInheritable) .prop("checked", !!attribute.isInheritable)
.attr('disabled', () => !isOwned); .attr('disabled', () => !isOwned);
@ -390,7 +416,7 @@ export default class AttributeDetailWidget extends BasicWidget {
} }
updateAttributeInEditor() { updateAttributeInEditor() {
let attrName = this.$attrInputName.val(); let attrName = this.$inputName.val();
if (this.attrType === 'label-definition') { if (this.attrType === 'label-definition') {
attrName = 'label:' + attrName; attrName = 'label:' + attrName;
@ -399,16 +425,16 @@ export default class AttributeDetailWidget extends BasicWidget {
} }
this.attribute.name = attrName; this.attribute.name = attrName;
this.attribute.isInheritable = this.$attrInputInheritable.is(":checked"); this.attribute.isInheritable = this.$inputInheritable.is(":checked");
if (this.attrType.endsWith('-definition')) { if (this.attrType.endsWith('-definition')) {
this.attribute.value = this.buildDefinitionValue(); this.attribute.value = this.buildDefinitionValue();
} }
else if (this.attrType === 'relation') { else if (this.attrType === 'relation') {
this.attribute.value = this.$attrInputTargetNote.getSelectedNoteId(); this.attribute.value = this.$inputTargetNote.getSelectedNoteId();
} }
else { else {
this.attribute.value = this.$attrInputValue.val(); this.attribute.value = this.$inputValue.val();
} }
this.triggerCommand('updateAttributeList', { attributes: this.allAttributes }); this.triggerCommand('updateAttributeList', { attributes: this.allAttributes });
@ -417,25 +443,25 @@ export default class AttributeDetailWidget extends BasicWidget {
buildDefinitionValue() { buildDefinitionValue() {
const props = []; const props = [];
if (this.$attrInputPromoted.is(":checked")) { if (this.$inputPromoted.is(":checked")) {
props.push("promoted"); props.push("promoted");
} }
props.push(this.$attrInputMultiplicity.val()); props.push(this.$inputMultiplicity.val());
if (this.attrType === 'label-definition') { if (this.attrType === 'label-definition') {
props.push(this.$attrInputLabelType.val()); props.push(this.$inputLabelType.val());
if (this.$attrInputLabelType.val() === 'number' && this.$attrInputNumberPrecision.val() !== '') { if (this.$inputLabelType.val() === 'number' && this.$inputNumberPrecision.val() !== '') {
props.push('precision=' + this.$attrInputNumberPrecision.val()); props.push('precision=' + this.$inputNumberPrecision.val());
} }
} else if (this.attrType === 'relation-definition' && this.$attrInputInverseRelation.val().trim().length > 0) { } else if (this.attrType === 'relation-definition' && this.$inputInverseRelation.val().trim().length > 0) {
props.push("inverse=" + this.$attrInputInverseRelation.val()); props.push("inverse=" + this.$inputInverseRelation.val());
} }
this.$attrRowNumberPrecision.toggle( this.$rowNumberPrecision.toggle(
this.attrType === 'label-definition' this.attrType === 'label-definition'
&& this.$attrInputLabelType.val() === 'number'); && this.$inputLabelType.val() === 'number');
return props.join(","); return props.join(",");
} }
@ -451,4 +477,8 @@ export default class AttributeDetailWidget extends BasicWidget {
'data-note-path': noteId 'data-note-path': noteId
}); });
} }
async noteSwitched() {
this.hide();
}
} }

4
src/public/app/widgets/attribute_editor.js
View File

@ -410,7 +410,9 @@ export default class AttributeEditorWidget extends TabAwareWidget {
const $attributesContainer = $("<div>"); const $attributesContainer = $("<div>");
for (const attribute of ownedAttributes) { for (const attribute of ownedAttributes) {
attributeRenderer.renderAttribute(attribute, $attributesContainer, true); if (!attribute.isDeleted) {
attributeRenderer.renderAttribute(attribute, $attributesContainer, true);
}
} }
this.textEditor.setData($attributesContainer.html()); this.textEditor.setData($attributesContainer.html());

29
src/public/app/widgets/attribute_list.js
View File

@ -162,18 +162,19 @@ export default class AttributeListWidget extends TabAwareWidget {
this.$widget.append(this.attributeDetailWidget.render()); this.$widget.append(this.attributeDetailWidget.render());
} }
async refreshWithNote(note) { async refreshWithNote(note, updateOnly = false) {
const hasPromotedAttrs = this.promotedAttributesWidget.getPromotedDefinitionAttributes().length > 0; if (!updateOnly) {
const hasPromotedAttrs = this.promotedAttributesWidget.getPromotedDefinitionAttributes().length > 0;
if (hasPromotedAttrs) { if (hasPromotedAttrs) {
this.$promotedExpander.show(); this.$promotedExpander.show();
this.$allAttrWrapper.toggle(options.is('promotedAttributesExpanded')); this.$allAttrWrapper.toggle(options.is('promotedAttributesExpanded'));
this.$ownedAndInheritedWrapper.hide(); this.$ownedAndInheritedWrapper.hide();
this.$inheritedAttributesWrapper.hide(); this.$inheritedAttributesWrapper.hide();
} } else {
else { this.$promotedExpander.hide();
this.$promotedExpander.hide(); this.$ownedAndInheritedWrapper.toggle(options.is('attributeListExpanded'));
this.$ownedAndInheritedWrapper.toggle(options.is('attributeListExpanded')); }
} }
const ownedAttributes = note.getOwnedAttributes().filter(attr => !attr.isAutoLink); const ownedAttributes = note.getOwnedAttributes().filter(attr => !attr.isAutoLink);
@ -254,4 +255,10 @@ export default class AttributeListWidget extends TabAwareWidget {
this.$allAttrWrapper.slideDown(200); this.$allAttrWrapper.slideDown(200);
} }
} }
entitiesReloadedEvent({loadResults}) {
if (loadResults.getAttributes(this.componentId).find(attr => attr.isAffecting(this.note))) {
this.refreshWithNote(this.note, true);
}
}
} }

4
src/public/app/widgets/note_paths.js
View File

@ -59,8 +59,8 @@ export default class NotePathsWidget extends TabAwareWidget {
this.$dropdown.on('show.bs.dropdown', () => this.renderDropdown()); this.$dropdown.on('show.bs.dropdown', () => this.renderDropdown());
} }
async refreshWithNote(note, notePath) { async refreshWithNote(note) {
const noteIdsPath = treeService.parseNotePath(notePath); const noteIdsPath = treeService.parseNotePath(this.notePath);
this.$currentPath.empty(); this.$currentPath.empty();

4
src/public/app/widgets/tab_aware_widget.js
View File

@ -31,7 +31,7 @@ export default class TabAwareWidget extends BasicWidget {
const start = Date.now(); const start = Date.now();
this.toggleInt(true); this.toggleInt(true);
await this.refreshWithNote(this.note, this.notePath); await this.refreshWithNote(this.note);
const end = Date.now(); const end = Date.now();
@ -44,7 +44,7 @@ export default class TabAwareWidget extends BasicWidget {
} }
} }
async refreshWithNote(note, notePath) {} async refreshWithNote(note) {}
async tabNoteSwitchedEvent({tabContext, notePath}) { async tabNoteSwitchedEvent({tabContext, notePath}) {
// if notePath does not match then the tabContext has been switched to another note in the mean time // if notePath does not match then the tabContext has been switched to another note in the mean time