Skip to content

Commit

Permalink
Reader 2: Add options to open all compatible files
Browse files Browse the repository at this point in the history
  • Loading branch information
@tnajdek
tnajdek committed Sep 25, 2023
1 parent 1a6270e commit b98168b
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 61 deletions.
30 changes: 12 additions & 18 deletions src/js/component/item-details/attachment-details.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import { get } from 'utils';
import { getAttachmentUrl, updateItem, exportAttachmentWithAnnotations } from 'actions';
import { useForceUpdate } from 'hooks';
import { makePath } from '../../common/navigation';
import { READER_CONTENT_TYPES } from '../../constants/reader';


const AttachmentDetails = ({ attachmentKey, isReadOnly }) => {
const dispatch = useDispatch();
Expand Down Expand Up @@ -47,6 +49,7 @@ const AttachmentDetails = ({ attachmentKey, isReadOnly }) => {
tags: tags,
});

const isReaderCompatible = Object.keys(READER_CONTENT_TYPES).includes(attachment.contentType);
const isPDF = attachment.contentType === 'application/pdf';
const hasURL = !!attachment[Symbol.for('links')]?.enclosure;
const urlIsFresh = url && Date.now() - timestamp < 60000;
Expand Down Expand Up @@ -75,15 +78,6 @@ const AttachmentDetails = ({ attachmentKey, isReadOnly }) => {
}
}, [focusNext, focusPrev]);

// const handleClick = useCallback(ev => {
// if (isTriggerEvent(ev) && !ev.currentTarget?.classList.contains('dropdown-toggle')) {
// // simulate click() on button or link, except for droppdown toggle which handles its own events
// ev.currentTarget.click();
// ev.preventDefault();
// ev.stopPropagation();
// }
// }, [focusBySelector, focusNext, focusPrev]);

const handleToggleDropdown = useCallback(() => {
setIsDropdownOpen(state => !state);
}, []);
Expand Down Expand Up @@ -176,8 +170,7 @@ const AttachmentDetails = ({ attachmentKey, isReadOnly }) => {
className="download-options"
ref={ downloadOptionsRef }
>
{ isPDF ? (
<Fragment>
{ isReaderCompatible && (
<a
className="btn btn-default"
href={ openInReaderPath }
Expand All @@ -190,6 +183,8 @@ const AttachmentDetails = ({ attachmentKey, isReadOnly }) => {
>
Open
</a>
) }
{ isPDF ? (
<Dropdown
isOpen={ isDropdownOpen }
onToggle={ handleToggleDropdown }
Expand Down Expand Up @@ -242,20 +237,19 @@ const AttachmentDetails = ({ attachmentKey, isReadOnly }) => {
</DropdownItem>
</DropdownMenu>
</Dropdown>
</Fragment>
) : (
) : (
<a
className="btn btn-default"
disabled={ !url }
href={ url }
disabled={!url}
href={url}
rel="noreferrer"
role="button"
tabIndex={ isTouchOrSmall ? null : -2 }
tabIndex={isTouchOrSmall ? null : -2}
target="_blank"
title="Download attachment"
title={ isReaderCompatible ? "Download (no annotations)" : "Download Attachment" }
onKeyDown={handleKeyDown}
>
Download
{ isReaderCompatible ? "Download (no annotations)" : "Download Attachment" }
</a>
) }
</div>
Expand Down
87 changes: 44 additions & 43 deletions src/js/component/item-details/attachments.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import AddLinkedUrlForm from './add-linked-url-form';
import AttachmentDetails from './attachment-details';
import { ADD_LINKED_URL_TOUCH } from '../../constants/modals';
import { ATTACHMENT } from '../../constants/dnd';
import { READER_CONTENT_TYPES } from '../../constants/reader.js';
import { createAttachments, createAttachmentsFromDropped, exportAttachmentWithAnnotations, moveToTrash, fetchChildItems, navigate,
tryGetAttachmentURL, toggleModal, updateItem } from '../../actions';
import { get, getScrollContainerPageCount, getUniqueId, openDelayedURL, stopPropagation, sortByKey } from '../../utils';
Expand Down Expand Up @@ -63,6 +64,7 @@ const AttachmentActions = memo(props => {
const search = useSelector(state => state.current.search);
const tags = useSelector(state => state.current.tags);
const config = useSelector(state => state.config);
const isReaderCompatible = Object.keys(READER_CONTENT_TYPES).includes(attachment.contentType);
const isPDF = attachment.contentType === 'application/pdf';

const openInReaderPath = makePath(config, {
Expand Down Expand Up @@ -107,47 +109,46 @@ const AttachmentActions = memo(props => {

return attachment.linkMode.startsWith('imported') && attachment[Symbol.for('links')].enclosure && !isUploading ? (
<Fragment>
{ isPDF ? (
<Fragment>
<a
className="btn btn-icon"
href={ openInReaderPath }
onClick={ stopPropagation }
rel="noreferrer"
role="button"
tabIndex={ -3 }
target="_blank"
title="Open In Reader"
>
<Icon type={ `${iconSize}/reader` } width={ iconSize } height={ iconSize } />
</a>
{
isPreppingPDF ? <Spinner className="small" /> :
preppedPDFURL ? (
<a
className="btn btn-icon"
onClick={ stopPropagation }
href={ preppedPDFURL }
rel="noreferrer"
role="button"
tabIndex={ -3 }
download={ preppedPDFFileName }
title="Export Attachment With Annotations"
>
<Icon type={`${iconSize}/open-link`} width={iconSize} height={iconSize} />
</a>
) : (
<a
className="btn btn-icon"
onClick={ handleExportClick }
role="button"
tabIndex={ -3 }
title="Export Attachment With Annotations"
>
<Icon type={`${iconSize}/open-link` } width={ iconSize } height={ iconSize } />
</a>
) }
</Fragment>
{ isReaderCompatible && (
<a
className="btn btn-icon"
href={ openInReaderPath }
onClick={ stopPropagation }
rel="noreferrer"
role="button"
tabIndex={ -3 }
target="_blank"
title="Open In Reader"
>
<Icon type={ `${iconSize}/reader` } width={ iconSize } height={ iconSize } />
</a>
) }
{ isPDF ? (
isPreppingPDF ? <Spinner className="small" /> :
preppedPDFURL ? (
<a
className="btn btn-icon"
onClick={ stopPropagation }
href={ preppedPDFURL }
rel="noreferrer"
role="button"
tabIndex={ -3 }
download={ preppedPDFFileName }
title="Export Attachment With Annotations"
>
<Icon type={`${iconSize}/open-link`} width={iconSize} height={iconSize} />
</a>
) : (
<a
className="btn btn-icon"
onClick={ handleExportClick }
role="button"
tabIndex={ -3 }
title="Export Attachment With Annotations"
>
<Icon type={`${iconSize}/open-link` } width={ iconSize } height={ iconSize } />
</a>
)
) : urlIsFresh ? (
<a
className="btn btn-icon"
Expand All @@ -157,7 +158,7 @@ const AttachmentActions = memo(props => {
role="button"
tabIndex={ -3 }
target="_blank"
title="Download Attachment"
title={ isReaderCompatible ? "Download (no annotations)" : "Download Attachment" }
>
<Icon type={ `${iconSize}/open-link` } width={ iconSize } height={ iconSize } />
</a>
Expand All @@ -167,7 +168,7 @@ const AttachmentActions = memo(props => {
onClick={ handleClick }
role="button"
tabIndex={ -3 }
title="Download Attachment"
title={isReaderCompatible ? "Download (no annotations)" : "Download Attachment"}
>
<Icon type={ `${iconSize}/open-link` } width={ iconSize } height={ iconSize } />
</a>
Expand Down

0 comments on commit b98168b

Please sign in to comment.