Skip to content

client: Middle click on title to open entry in new tab + mark entry as read when opening external link #1472

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from
Draft

client: Middle click on title to open entry in new tab + mark entry as read when opening external link #1472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
845c857
Middle click on title to open entry in new tab
PhrozenByte Nov 23, 2023
6df2a6a
client: Code cleanup
PhrozenByte Nov 23, 2023
dfa4df6
Mark entry as read when opening external link
PhrozenByte Nov 23, 2023
db0ad24
Merge branch 'enhancement/MdlClkOpen' into enhancement/MdlClkOpenRead
PhrozenByte Nov 23, 2023
7bb86ba
Merge branch 'enhancement/ReadOnExtOpen' into enhancement/MdlClkOpenRead
PhrozenByte Nov 23, 2023
d7d15dc
Middle click on title to mark entry as read
PhrozenByte Nov 24, 2023
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 27 additions & 10 deletions client/js/templates/Item.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,6 @@ function setupLightbox({
}));
}

function stopPropagation(event) {
event.stopPropagation();
}

function lazyLoadImages(content) {
content.querySelectorAll('img').forEach((img) => {
img.setAttribute('src', img.getAttribute('data-selfoss-src'));
Expand Down Expand Up @@ -257,6 +253,8 @@ export default function Item({ currentTime, item, selected, expanded, setNavExpa
[currentTime, item.datetime]
);

const canWrite = useAllowedToWrite();

const previouslyExpanded = usePreviousImmediate(expanded);
const configuration = useContext(ConfigurationContext);

Expand Down Expand Up @@ -369,6 +367,15 @@ export default function Item({ currentTime, item, selected, expanded, setNavExpa
[history, location, expanded, item.id]
);

const titleOnAuxClick = useCallback(
(event) => {
if (event.button === 1 && canWrite) {
selfoss.entriesPage.markEntryRead(item.id, true);
}
},
[canWrite, item.id]
);

const starOnClick = useCallback(
(event) => {
event.preventDefault();
Expand All @@ -387,6 +394,17 @@ export default function Item({ currentTime, item, selected, expanded, setNavExpa
[item]
);

const externalLinkOnClick = useCallback(
(event) => {
event.stopPropagation();

if (canWrite) {
selfoss.entriesPage.markEntryRead(item.id, true);
}
},
[canWrite, item.id]
);

const loadImagesOnClick = useCallback(
(event) => loadImages({ event, setImagesLoaded, contentBlock }),
[]
Expand All @@ -411,8 +429,6 @@ export default function Item({ currentTime, item, selected, expanded, setNavExpa
[item.source]
);

const canWrite = useAllowedToWrite();

const _ = useContext(LocalizationContext);

const sharers = useSharers({ configuration, _ });
Expand Down Expand Up @@ -446,12 +462,13 @@ export default function Item({ currentTime, item, selected, expanded, setNavExpa
className="entry-title"
onClick={titleOnClick}
>
<span
<a
href={item.link}
className="entry-title-link"
aria-expanded={expanded}
aria-current={selected}
role="link"
tabIndex="0"
onAuxClick={titleOnAuxClick}
onKeyUp={handleKeyUp}
dangerouslySetInnerHTML={titleHtml}
/>
Expand Down Expand Up @@ -544,7 +561,7 @@ export default function Item({ currentTime, item, selected, expanded, setNavExpa
target="_blank"
rel="noreferrer"
accessKey="o"
onClick={stopPropagation}
onClick={externalLinkOnClick}
>
<FontAwesomeIcon icon={icons.openWindow} /> {_('open_window')}
</a>
Expand Down Expand Up @@ -599,7 +616,7 @@ export default function Item({ currentTime, item, selected, expanded, setNavExpa
target="_blank"
rel="noreferrer"
accessKey="o"
onClick={stopPropagation}
onClick={externalLinkOnClick}
>
<FontAwesomeIcon icon={icons.openWindow} /> {_('open_window')}
</a>
Expand Down
3 changes: 2 additions & 1 deletion client/styles/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -526,7 +526,8 @@ span.offline-count.diff {
}

.entry-title a {
color: var(--primary);
color: inherit;
text-decoration: none;
}

.entry.unread .entry-title {
Expand Down