profile: refactor
each view has it's own DOMMap to reference its own elements this can us non-unique keys, i.e. each view can have a header key. changed: - use getViewElem instead of querying the dom - access button.dataset.id directly before traversing the dompull/84/head
parent
636c4610de
commit
208ea6363a
10
src/main.ts
10
src/main.ts
|
@ -198,12 +198,12 @@ const handleRecommendServer = (evt: Event, relay: string) => {
|
|||
};
|
||||
|
||||
const onEventDetails = (evt: Event, relay: string) => {
|
||||
if (getViewElem(`detail-${evt.id}`)) {
|
||||
if (getViewElem(evt.id)) {
|
||||
return;
|
||||
}
|
||||
const art = renderEventDetails(evt, relay);
|
||||
getViewContent().append(art);
|
||||
setViewElem(`detail-${evt.id}`, art);
|
||||
const article = renderEventDetails(evt, relay);
|
||||
getViewContent().append(article);
|
||||
setViewElem(evt.id, article);
|
||||
};
|
||||
|
||||
const onEvent = (evt: Event, relay: string) => {
|
||||
|
@ -307,7 +307,7 @@ const handleButton = (button: HTMLButtonElement) => {
|
|||
closePublishView();
|
||||
return;
|
||||
}
|
||||
const id = (button.closest('[data-id]') as HTMLElement)?.dataset.id;
|
||||
const id = button.dataset.id || (button.closest('[data-id]') as HTMLElement)?.dataset.id;
|
||||
if (id) {
|
||||
switch(button.name) {
|
||||
case 'reply':
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import {Event} from 'nostr-tools';
|
||||
import {elem, elemCanvas, parseTextContent} from './utils/dom';
|
||||
import {getNoxyUrl} from './utils/url';
|
||||
import {getViewContent, getViewElem} from './view';
|
||||
import {getViewElem} from './view';
|
||||
import {parseJSON} from './media';
|
||||
import {sortByCreatedAt} from './events';
|
||||
|
||||
|
@ -104,10 +104,9 @@ export const getMetadata = (pubkey: string) => {
|
|||
};
|
||||
|
||||
export const renderProfile = (pubkey: string) => {
|
||||
const content = getViewContent();
|
||||
const header = getViewElem(pubkey);
|
||||
const header = getViewElem('header');
|
||||
const metadata = profileMap[pubkey];
|
||||
if (!content || !header || !metadata) {
|
||||
if (!header || !metadata) {
|
||||
return;
|
||||
}
|
||||
if (metadata.name) {
|
||||
|
@ -119,8 +118,8 @@ export const renderProfile = (pubkey: string) => {
|
|||
header.append(elem('h1', {}, metadata.name));
|
||||
}
|
||||
}
|
||||
const detail = getViewElem('detail');
|
||||
if (metadata.about) {
|
||||
const detail = getViewElem(`detail-${pubkey}`);
|
||||
if (!detail.children.length) {
|
||||
const [content] = parseTextContent(metadata.about);
|
||||
detail?.append(...content);
|
||||
|
|
|
@ -25,18 +25,20 @@ export const renderViewTemplate = (options: ViewTemplateOptions) => {
|
|||
switch (options.type) {
|
||||
case 'profile':
|
||||
const pubkey = options.id;
|
||||
const detail = elem('p', {data: {'profileDetails': pubkey}});
|
||||
dom[`detail-${pubkey}`] = detail;
|
||||
const header = elem('header', {className: 'hero'}, [
|
||||
elem('small', {}, nip19.npubEncode(pubkey)),
|
||||
elem('h1', {}, pubkey),
|
||||
const detail = elem('p');
|
||||
const following = elem('span');
|
||||
const profileHeader = elem('header', {className: 'hero'}, [
|
||||
elem('small', {className: 'hero-npub'}, nip19.npubEncode(pubkey)),
|
||||
elem('div', {className: 'hero-title'}, [
|
||||
elem('h1', {}, pubkey),
|
||||
]),
|
||||
detail,
|
||||
elem('footer', {}, [
|
||||
elem('span', {data:{following: pubkey}})
|
||||
])
|
||||
elem('footer', {}, following),
|
||||
]);
|
||||
dom[pubkey] = header;
|
||||
content.append(header);
|
||||
dom.header = profileHeader;
|
||||
dom.detail = detail;
|
||||
dom.following = following;
|
||||
content.append(profileHeader);
|
||||
document.title = pubkey;
|
||||
break;
|
||||
case 'note':
|
||||
|
@ -45,14 +47,14 @@ export const renderViewTemplate = (options: ViewTemplateOptions) => {
|
|||
break;
|
||||
case 'event':
|
||||
const id = options.id;
|
||||
const eventHeader = elem('header', {className: 'hero'}, [
|
||||
elem('h1', {}, id),
|
||||
]);
|
||||
dom[id] = eventHeader;
|
||||
content.append(eventHeader);
|
||||
content.append(
|
||||
elem('header', {className: 'hero'}, [
|
||||
elem('h1', {}, id),
|
||||
])
|
||||
);
|
||||
document.title = id;
|
||||
break;
|
||||
}
|
||||
const view = elem('section', {className: 'view'}, [content]);
|
||||
return {content, dom, view};
|
||||
};
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue