diff --git a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts index 9017673f3..9b66aa6f9 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts @@ -295,6 +295,7 @@ interface AttributeDetailOpts { x: number; y: number; focus?: "name"; + parent?: HTMLElement; } interface SearchRelatedResponse { @@ -560,19 +561,22 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget { this.toggleInt(true); - const offset = this.parent?.$widget.offset() || { top: 0, left: 0 }; + 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) { - 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 (!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"); } diff --git a/apps/client/src/widgets/note_list.ts b/apps/client/src/widgets/note_list.ts index 1b00bd8c2..74602c921 100644 --- a/apps/client/src/widgets/note_list.ts +++ b/apps/client/src/widgets/note_list.ts @@ -3,8 +3,6 @@ import NoteListRenderer from "../services/note_list_renderer.js"; import type FNote from "../entities/fnote.js"; import type { CommandListener, CommandListenerData, CommandMappings, CommandNames, EventData, EventNames } from "../components/app_context.js"; import type ViewMode from "./view_widgets/view_mode.js"; -import AttributeDetailWidget from "./attribute_widgets/attribute_detail.js"; -import { Attribute } from "../services/attribute_parser.js"; const TPL = /*html*/`
@@ -39,7 +37,6 @@ export default class NoteListWidget extends NoteContextAwareWidget { private noteIdRefreshed?: string; private shownNoteId?: string | null; private viewMode?: ViewMode | null; - private attributeDetailWidget: AttributeDetailWidget; private displayOnlyCollections: boolean; /** @@ -47,9 +44,7 @@ export default class NoteListWidget extends NoteContextAwareWidget { */ constructor(displayOnlyCollections: boolean) { super(); - this.attributeDetailWidget = new AttributeDetailWidget() - .contentSized() - .setParent(this); + this.displayOnlyCollections = displayOnlyCollections; } @@ -72,7 +67,6 @@ export default class NoteListWidget extends NoteContextAwareWidget { this.$widget = $(TPL); this.contentSized(); this.$content = this.$widget.find(".note-list-widget-content"); - this.$widget.append(this.attributeDetailWidget.render()); const observer = new IntersectionObserver( (entries) => { @@ -91,23 +85,6 @@ export default class NoteListWidget extends NoteContextAwareWidget { setTimeout(() => observer.observe(this.$widget[0]), 10); } - addNoteListItemEvent() { - const attr: Attribute = { - type: "label", - name: "label:myLabel", - value: "promoted,single,text" - }; - - this.attributeDetailWidget!.showAttributeDetail({ - attribute: attr, - allAttributes: [ attr ], - isOwned: true, - x: 100, - y: 200, - focus: "name" - }); - } - checkRenderStatus() { // console.log("this.isIntersecting", this.isIntersecting); // console.log(`${this.noteIdRefreshed} === ${this.noteId}`, this.noteIdRefreshed === this.noteId); diff --git a/apps/client/src/widgets/view_widgets/table_view/index.ts b/apps/client/src/widgets/view_widgets/table_view/index.ts index 031c7dcc5..a56039cbe 100644 --- a/apps/client/src/widgets/view_widgets/table_view/index.ts +++ b/apps/client/src/widgets/view_widgets/table_view/index.ts @@ -14,6 +14,7 @@ import buildFooter from "./footer.js"; import getAttributeDefinitionInformation, { buildRowDefinitions, TableData } from "./rows.js"; import { AttributeDefinitionInformation, buildColumnDefinitions } from "./columns.js"; import { setupContextMenu } from "./context_menu.js"; +import AttributeDetailWidget from "../../attribute_widgets/attribute_detail.js"; const TPL = /*html*/`
@@ -105,6 +106,8 @@ export default class TableView extends ViewMode { private api?: Tabulator; private newAttribute?: Attribute; private persistentData: StateInfo["tableData"]; + private attributeDetailWidget: AttributeDetailWidget; + constructor(args: ViewModeArgs) { super(args, "table"); @@ -114,6 +117,11 @@ export default class TableView extends ViewMode { this.spacedUpdate = new SpacedUpdate(() => this.onSave(), 5_000); this.persistentData = {}; args.$parent.append(this.$root); + + this.attributeDetailWidget = new AttributeDetailWidget() + .contentSized() + .setParent(glob.getComponentByEl(args.$parent[0])); + args.$parent.append(this.attributeDetailWidget.render()); } async renderList() { @@ -226,6 +234,23 @@ export default class TableView extends ViewMode { console.log("Save attributes", this.newAttribute); } + addNoteListItemEvent() { + const attr: Attribute = { + type: "label", + name: "label:myLabel", + value: "promoted,single,text" + }; + + this.attributeDetailWidget!.showAttributeDetail({ + attribute: attr, + allAttributes: [ attr ], + isOwned: true, + x: 0, + y: 75, + focus: "name" + }); + } + addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) { const parentNotePath = customNotePath ?? this.args.parentNotePath; if (parentNotePath) {