;
async refresh() {
// switching note/tab should close the widget
this.hide();
}
doRender() {
this.relatedNotesSpacedUpdate = new SpacedUpdate(async () => this.updateRelatedNotes(), 1000);
this.$widget = $(TPL);
shortcutService.bindElShortcut(this.$widget, "ctrl+return", () => this.saveAndClose());
shortcutService.bindElShortcut(this.$widget, "esc", () => this.cancelAndClose());
this.$title = this.$widget.find(".attr-detail-title");
this.$inputName = this.$widget.find(".attr-input-name");
this.$inputName.on("input", (ev) => {
if (!(ev.originalEvent as KeyboardEvent)?.isComposing) {
// https://github.com/zadam/trilium/pull/3812
this.userEditedAttribute();
}
});
this.$inputName.on("change", () => this.userEditedAttribute());
this.$inputName.on("autocomplete:closed", () => this.userEditedAttribute());
this.$inputName.on("focus", () => {
attributeAutocompleteService.initAttributeNameAutocomplete({
$el: this.$inputName,
attributeType: () => (["relation", "relation-definition"].includes(this.attrType || "") ? "relation" : "label"),
open: true
});
});
this.$rowValue = this.$widget.find(".attr-row-value");
this.$inputValue = this.$widget.find(".attr-input-value");
this.$inputValue.on("input", (ev) => {
if (!(ev.originalEvent as KeyboardEvent)?.isComposing) {
// https://github.com/zadam/trilium/pull/3812
this.userEditedAttribute();
}
});
this.$inputValue.on("change", () => this.userEditedAttribute());
this.$inputValue.on("autocomplete:closed", () => this.userEditedAttribute());
this.$inputValue.on("focus", () => {
attributeAutocompleteService.initLabelValueAutocomplete({
$el: this.$inputValue,
open: true,
nameCallback: () => String(this.$inputName.val())
});
});
this.$rowPromoted = this.$widget.find(".attr-row-promoted");
this.$inputPromoted = this.$widget.find(".attr-input-promoted");
this.$inputPromoted.on("change", () => this.userEditedAttribute());
this.$rowPromotedAlias = this.$widget.find(".attr-row-promoted-alias");
this.$inputPromotedAlias = this.$widget.find(".attr-input-promoted-alias");
this.$inputPromotedAlias.on("change", () => this.userEditedAttribute());
this.$rowMultiplicity = this.$widget.find(".attr-row-multiplicity");
this.$inputMultiplicity = this.$widget.find(".attr-input-multiplicity");
this.$inputMultiplicity.on("change", () => this.userEditedAttribute());
this.$rowLabelType = this.$widget.find(".attr-row-label-type");
this.$inputLabelType = this.$widget.find(".attr-input-label-type");
this.$inputLabelType.on("change", () => this.userEditedAttribute());
this.$rowNumberPrecision = this.$widget.find(".attr-row-number-precision");
this.$inputNumberPrecision = this.$widget.find(".attr-input-number-precision");
this.$inputNumberPrecision.on("change", () => this.userEditedAttribute());
this.$rowInverseRelation = this.$widget.find(".attr-row-inverse-relation");
this.$inputInverseRelation = this.$widget.find(".attr-input-inverse-relation");
this.$inputInverseRelation.on("input", (ev) => {
if (!(ev.originalEvent as KeyboardEvent)?.isComposing) {
// https://github.com/zadam/trilium/pull/3812
this.userEditedAttribute();
}
});
this.$rowTargetNote = this.$widget.find(".attr-row-target-note");
this.$inputTargetNote = this.$widget.find(".attr-input-target-note");
noteAutocompleteService.initNoteAutocomplete(this.$inputTargetNote, { allowCreatingNotes: true }).on("autocomplete:noteselected", (event, suggestion, dataset) => {
if (!suggestion.notePath) {
return false;
}
const pathChunks = suggestion.notePath.split("/");
this.attribute.value = pathChunks[pathChunks.length - 1]; // noteId
this.triggerCommand("updateAttributeList", { attributes: this.allAttributes ?? [] });
this.updateRelatedNotes();
});
this.$inputInheritable = this.$widget.find(".attr-input-inheritable");
this.$inputInheritable.on("change", () => this.userEditedAttribute());
this.$closeAttrDetailButton = this.$widget.find(".close-attr-detail-button");
this.$closeAttrDetailButton.on("click", () => this.cancelAndClose());
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.on("click", () => this.saveAndClose());
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.$attrHelp = this.$widget.find(".attr-help");
this.$relatedNotesContainer = this.$widget.find(".related-notes-container");
this.$relatedNotesTitle = this.$relatedNotesContainer.find(".related-notes-tile");
this.$relatedNotesList = this.$relatedNotesContainer.find(".related-notes-list");
this.$relatedNotesMoreNotes = this.$relatedNotesContainer.find(".related-notes-more-notes");
$(window).on("mousedown", (e) => {
if (!$(e.target).closest(this.$widget[0]).length && !$(e.target).closest(".algolia-autocomplete").length && !$(e.target).closest("#context-menu-container").length) {
this.hide();
}
});
}
async showAttributeDetail({ allAttributes, attribute, isOwned, x, y, focus, hideMultiplicity }: AttributeDetailOpts) {
if (!attribute) {
this.hide();
return;
}
saveFocusedElement();
this.attrType = this.getAttrType(attribute);
const attrName = this.attrType === "label-definition" ? attribute.name.substr(6) : this.attrType === "relation-definition" ? attribute.name.substr(9) : attribute.name;
const definition = this.attrType?.endsWith("-definition") ? promotedAttributeDefinitionParser.parse(attribute.value || "") : {};
if (this.attrType) {
this.$title.text(ATTR_TITLES[this.attrType]);
}
this.allAttributes = allAttributes;
this.attribute = attribute;
// can be slightly slower so just make it async
this.updateRelatedNotes();
this.$attrSaveDeleteButtonContainer.toggle(!!isOwned);
if (isOwned) {
this.$attrIsOwnedBy.hide();
} else if (attribute.noteId) {
this.$attrIsOwnedBy
.show()
.empty()
.append(attribute.type === "label" ? "Label" : "Relation")
.append(` ${t("attribute_detail.is_owned_by_note")} `)
.append(await linkService.createLink(attribute.noteId));
}
const disabledFn = () => (!isOwned ? "true" : undefined);
this.$inputName.val(attrName).attr("readonly", disabledFn);
this.$rowValue.toggle(this.attrType === "label");
this.$rowTargetNote.toggle(this.attrType === "relation");
this.$rowPromoted.toggle(["label-definition", "relation-definition"].includes(this.attrType || ""));
this.$inputPromoted.prop("checked", !!definition.isPromoted).attr("disabled", disabledFn);
this.$rowPromotedAlias.toggle(!!definition.isPromoted);
this.$inputPromotedAlias.val(definition.promotedAlias || "").attr("disabled", disabledFn);
this.$rowMultiplicity.toggle(["label-definition", "relation-definition"].includes(this.attrType || "") && !hideMultiplicity);
this.$inputMultiplicity.val(definition.multiplicity || "").attr("disabled", disabledFn);
this.$rowLabelType.toggle(this.attrType === "label-definition");
this.$inputLabelType.val(definition.labelType || "").attr("disabled", disabledFn);
this.$rowNumberPrecision.toggle(this.attrType === "label-definition" && definition.labelType === "number");
this.$inputNumberPrecision.val(definition.numberPrecision || "").attr("disabled", disabledFn);
this.$rowInverseRelation.toggle(this.attrType === "relation-definition");
this.$inputInverseRelation.val(definition.inverseRelation || "").attr("disabled", disabledFn);
if (attribute.type === "label") {
this.$inputValue.val(attribute.value || "").attr("readonly", disabledFn);
} else if (attribute.type === "relation") {
this.$inputTargetNote.attr("readonly", disabledFn).val("").setSelectedNotePath("");
if (attribute.value) {
const targetNote = await froca.getNote(attribute.value);
if (targetNote) {
this.$inputTargetNote.val(targetNote ? targetNote.title : "").setSelectedNotePath(attribute.value);
}
}
}
this.$inputInheritable.prop("checked", !!attribute.isInheritable).attr("disabled", disabledFn);
this.updateHelp();
this.toggleInt(true);
const offset = this.parent?.$widget?.offset() || { top: 0, left: 0 };
const detPosition = this.getDetailPosition(x, offset);
const outerHeight = this.$widget.outerHeight();
const height = $(window).height();
if (!detPosition || !outerHeight || !height) {
console.warn("Can't position popup, is it attached?");
return;
}
this.$widget
.css("left", detPosition.left)
.css("right", detPosition.right)
.css("top", y - offset.top + 70)
.css("max-height", outerHeight + y > height - 50 ? height - y - 50 : 10000);
if (focus === "name") {
this.$inputName.trigger("focus").trigger("select");
}
}
getDetailPosition(x: number, offset: { left: number }) {
const outerWidth = this.$widget.outerWidth();
if (!outerWidth) {
return null;
}
let left: number | string = x - offset.left - outerWidth / 2;
let right: number | string = "";
if (left < 0) {
left = 10;
} else {
const rightEdge = left + outerWidth;
if (rightEdge > outerWidth - 10) {
left = "";
right = 10;
}
}
return { left, right };
}
async saveAndClose() {
await this.triggerCommand("saveAttributes");
this.hide();
focusSavedElement();
}
async cancelAndClose() {
await this.triggerCommand("reloadAttributes");
this.hide();
focusSavedElement();
}
userEditedAttribute() {
this.updateAttributeInEditor();
this.updateHelp();
this.relatedNotesSpacedUpdate.scheduleUpdate();
}
updateHelp() {
const attrName = String(this.$inputName.val());
if (this.attrType && this.attrType in ATTR_HELP && attrName && attrName in ATTR_HELP[this.attrType]) {
this.$attrHelp
.empty()
.append($("| ").append($("").text(attrName)).append(" - ").append(ATTR_HELP[this.attrType][attrName]))
.show();
} else {
this.$attrHelp.empty().hide();
}
}
async updateRelatedNotes() {
let { results, count } = await server.post("search-related", this.attribute);
for (const res of results) {
res.noteId = res.notePathArray[res.notePathArray.length - 1];
}
results = results.filter(({ noteId }) => noteId !== this.noteId);
if (results.length === 0) {
this.$relatedNotesContainer.hide();
} else {
this.$relatedNotesContainer.show();
this.$relatedNotesTitle.text(t("attribute_detail.other_notes_with_name", { attributeType: this.attribute.type, attributeName: this.attribute.name }));
this.$relatedNotesList.empty();
const displayedResults = results.length <= DISPLAYED_NOTES ? results : results.slice(0, DISPLAYED_NOTES);
const displayedNotes = await froca.getNotes(displayedResults.map((res) => res.noteId));
const hoistedNoteId = appContext.tabManager.getActiveContext()?.hoistedNoteId;
for (const note of displayedNotes) {
const notePath = note.getBestNotePathString(hoistedNoteId);
const $noteLink = await linkService.createLink(notePath, { showNotePath: true });
this.$relatedNotesList.append($("").append($noteLink));
}
if (results.length > DISPLAYED_NOTES) {
this.$relatedNotesMoreNotes.show().text(t("attribute_detail.and_more", { count: count - DISPLAYED_NOTES }));
} else {
this.$relatedNotesMoreNotes.hide();
}
}
}
getAttrType(attribute: Attribute) {
if (attribute.type === "label") {
if (attribute.name.startsWith("label:")) {
return "label-definition";
} else if (attribute.name.startsWith("relation:")) {
return "relation-definition";
} else {
return "label";
}
} else if (attribute.type === "relation") {
return "relation";
} else {
this.$title.text("");
}
}
updateAttributeInEditor() {
let attrName = String(this.$inputName.val());
if (!utils.isValidAttributeName(attrName)) {
// invalid characters are simply ignored (from user perspective they are not even entered)
attrName = utils.filterAttributeName(attrName);
this.$inputName.val(attrName);
}
if (this.attrType === "label-definition") {
attrName = `label:${attrName}`;
} else if (this.attrType === "relation-definition") {
attrName = `relation:${attrName}`;
}
this.attribute.name = attrName;
this.attribute.isInheritable = this.$inputInheritable.is(":checked");
if (this.attrType?.endsWith("-definition")) {
this.attribute.value = this.buildDefinitionValue();
} else if (this.attrType === "relation") {
this.attribute.value = this.$inputTargetNote.getSelectedNoteId() || "";
} else {
this.attribute.value = String(this.$inputValue.val());
}
this.triggerCommand("updateAttributeList", { attributes: this.allAttributes ?? [] });
}
buildDefinitionValue() {
const props: string[] = [];
if (this.$inputPromoted.is(":checked")) {
props.push("promoted");
if (this.$inputPromotedAlias.val() !== "") {
props.push(`alias=${this.$inputPromotedAlias.val()}`);
}
}
props.push(this.$inputMultiplicity.val() as string);
if (this.attrType === "label-definition") {
props.push(this.$inputLabelType.val() as string);
if (this.$inputLabelType.val() === "number" && this.$inputNumberPrecision.val() !== "") {
props.push(`precision=${this.$inputNumberPrecision.val()}`);
}
} else if (this.attrType === "relation-definition" && String(this.$inputInverseRelation.val())?.trim().length > 0) {
const inverseRelationName = this.$inputInverseRelation.val();
props.push(`inverse=${utils.filterAttributeName(String(inverseRelationName))}`);
}
this.$rowNumberPrecision.toggle(this.attrType === "label-definition" && this.$inputLabelType.val() === "number");
this.$rowPromotedAlias.toggle(this.$inputPromoted.is(":checked"));
return props.join(",");
}
hide() {
this.toggleInt(false);
}
createLink(noteId: string) {
return $("", {
href: `#root/${noteId}`,
class: "reference-link"
});
}
async noteSwitched() {
this.hide();
}
}
|