feed: navigate by clicking on profile image and content
ci/woodpecker/pr/woodpecker Pipeline was successful Details
ci/woodpecker/push/woodpecker Pipeline was successful Details

before npub and note links was only supported on profile name and
date/time.

added support to click on profile image and note content (unless
a link was clicked).
pull/80/head
OFF0 1 year ago
parent 543d327b5c
commit 3a1bf6f56f
Signed by: offbyn
GPG Key ID: 94A2F643C51F37FA

@ -277,6 +277,19 @@ const handleButton = (button: HTMLButtonElement) => {
// }
};
const handleContentClick = (content: HTMLElement) => {
const card = content.closest('article[data-id]') as HTMLElement;
if (
!card || !card.dataset.id
|| getSelection()?.toString() // do not navigate if user selects text
) {
return;
}
const href = `/${nip19.noteEncode(card.dataset.id)}`;
route(href);
history.pushState({}, '', href);
};
document.body.addEventListener('click', (event: MouseEvent) => {
// dont intercept command or shift-click
if (event.metaKey || event.shiftKey) {
@ -291,5 +304,10 @@ document.body.addEventListener('click', (event: MouseEvent) => {
const button = target?.closest('button');
if (button) {
handleButton(button);
return;
}
const content = target?.closest('.mbox-content');
if (content) {
handleContentClick(content as HTMLElement);
}
});

@ -27,6 +27,9 @@
position: relative;
z-index: 2;
}
a.mbox-img:focus {
--focus-border-radius: var(--profileimg-size);
}
.mbox-img canvas,
.mbox-img img {

@ -48,7 +48,7 @@ export const createTextNote = (
}
const replyFeed: Array<HTMLElement> = replies[0] ? replies.map(e => setViewElem(e.id, createTextNote(e, relay))) : [];
return elemArticle([
elem('div', {className: 'mbox-img'}, img),
elem('a', {className: 'mbox-img', href: `/${evt.nip19.npub}`}, img),
elem('div', {className: 'mbox-body'}, [
elem('header', {
className: 'mbox-header',
@ -60,7 +60,7 @@ export const createTextNote = (
' ',
elem('a', {href: `/${evt.nip19.note}`}, elem('time', {dateTime: time.toISOString()}, formatTime(time))),
]),
elem('div', {/* data: isLongContent ? {append: evt.content.slice(280)} : null*/}, content /*[
elem('div', {className: 'mbox-content'/* data: isLongContent ? {append: evt.content.slice(280)} : null*/}, content /*[
...content,
(firstLink && validatePow(evt)) ? linkPreview(firstLink, evt.id, relay) : null,
]*/),

Loading…
Cancel
Save