feat: Add gallery for attachments

2025-07-18 20:59:44 +02:00 · 2022-06-20 18:27:39 +02:00 · 2022-06-20 18:27:39 +02:00 · 8f4d60c46f
commit 8f4d60c46f
parent 0bf4004046
22 changed files with 351 additions and 102 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -17,6 +17,7 @@
        "js-cookie": "^3.0.1",
        "lodash": "^4.17.20",
        "node-sass": "^7.0.1",
+        "photoswipe": "^5.2.7",
        "prop-types": "^15.8.1",
        "react": "^17.0.2",
        "react-beautiful-dnd": "^13.0.0",
@ -26,6 +27,7 @@
        "react-i18next": "^11.16.6",
        "react-input-mask": "^2.0.4",
        "react-markdown": "^8.0.2",
+        "react-photoswipe-gallery": "^2.2.1",
        "react-redux": "^7.2.8",
        "react-router-dom": "^5.3.1",
        "react-scripts": "5.0.1",
@ -16224,6 +16226,14 @@
      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
    },
+    "node_modules/photoswipe": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.2.7.tgz",
+      "integrity": "sha512-AogMba7W/O5gOtDIZ8cQuou1ltwxlaLNoZY1qi1s+kbYXpZk9D6rXxnNGAfDppl+bfe+sKLW2w2sx+3uQ8oPzg==",
+      "engines": {
+        "node": ">= 0.12.0"
+      }
+    },
    "node_modules/picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@ -18230,6 +18240,16 @@
        "react-dom": "^15.5.x || ^16.x || ^17.x"
      }
    },
+    "node_modules/react-photoswipe-gallery": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-photoswipe-gallery/-/react-photoswipe-gallery-2.2.1.tgz",
+      "integrity": "sha512-xaUKKmwRLCpEzB8+bU7yxjXvRBHaInpBcI6YQY0UOeFctHAL3jGRDk9j2YbwmlgN7kRStHTcyrSNxr+zSaOnKg==",
+      "peerDependencies": {
+        "photoswipe": ">= 5.2.2",
+        "prop-types": ">= 15.7.0",
+        "react": ">= 16.8.0"
+      }
+    },
    "node_modules/react-popper": {
      "version": "2.2.5",
      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
@ -35010,6 +35030,11 @@
      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
    },
+    "photoswipe": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.2.7.tgz",
+      "integrity": "sha512-AogMba7W/O5gOtDIZ8cQuou1ltwxlaLNoZY1qi1s+kbYXpZk9D6rXxnNGAfDppl+bfe+sKLW2w2sx+3uQ8oPzg=="
+    },
    "picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@ -36319,6 +36344,12 @@
      "integrity": "sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q==",
      "requires": {}
    },
+    "react-photoswipe-gallery": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-photoswipe-gallery/-/react-photoswipe-gallery-2.2.1.tgz",
+      "integrity": "sha512-xaUKKmwRLCpEzB8+bU7yxjXvRBHaInpBcI6YQY0UOeFctHAL3jGRDk9j2YbwmlgN7kRStHTcyrSNxr+zSaOnKg==",
+      "requires": {}
+    },
    "react-popper": {
      "version": "2.2.5",
      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
--- a/client/package.json
+++ b/client/package.json
@ -74,6 +74,7 @@
    "js-cookie": "^3.0.1",
    "lodash": "^4.17.20",
    "node-sass": "^7.0.1",
+    "photoswipe": "^5.2.7",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-beautiful-dnd": "^13.0.0",
@ -83,6 +84,7 @@
    "react-i18next": "^11.16.6",
    "react-input-mask": "^2.0.4",
    "react-markdown": "^8.0.2",
+    "react-photoswipe-gallery": "^2.2.1",
    "react-redux": "^7.2.8",
    "react-router-dom": "^5.3.1",
    "react-scripts": "5.0.1",
--- a/client/src/components/CardModal/Attachments/Attachments.jsx
+++ b/client/src/components/CardModal/Attachments/Attachments.jsx
@ -1,88 +1,153 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { Button } from 'semantic-ui-react';
+import { Gallery, Item as GalleryItem } from 'react-photoswipe-gallery';
+import { Button, Grid } from 'semantic-ui-react';
 import { useToggle } from '../../../lib/hooks';

 import Item from './Item';

 import styles from './Attachments.module.scss';

-const Attachments = React.memo(({ items, onUpdate, onDelete, onCoverUpdate }) => {
-  const [t] = useTranslation();
-  const [isOpened, toggleOpened] = useToggle();
+const INITIALLY_VISIBLE = 4;

-  const handleToggleClick = useCallback(() => {
-    toggleOpened();
-  }, [toggleOpened]);
+const Attachments = React.memo(
+  ({ items, onUpdate, onDelete, onCoverUpdate, onGalleryOpen, onGalleryClose }) => {
+    const [t] = useTranslation();
+    const [isAllVisible, toggleAllVisible] = useToggle();

-  const handleCoverSelect = useCallback(
-    (id) => {
-      onCoverUpdate(id);
-    },
-    [onCoverUpdate],
-  );
+    const handleCoverSelect = useCallback(
+      (id) => {
+        onCoverUpdate(id);
+      },
+      [onCoverUpdate],
+    );

-  const handleCoverDeselect = useCallback(() => {
-    onCoverUpdate(null);
-  }, [onCoverUpdate]);
+    const handleCoverDeselect = useCallback(() => {
+      onCoverUpdate(null);
+    }, [onCoverUpdate]);

-  const handleUpdate = useCallback(
-    (id, data) => {
-      onUpdate(id, data);
-    },
-    [onUpdate],
-  );
+    const handleUpdate = useCallback(
+      (id, data) => {
+        onUpdate(id, data);
+      },
+      [onUpdate],
+    );

-  const handleDelete = useCallback(
-    (id) => {
-      onDelete(id);
-    },
-    [onDelete],
-  );
+    const handleDelete = useCallback(
+      (id) => {
+        onDelete(id);
+      },
+      [onDelete],
+    );

-  const visibleItems = isOpened ? items : items.slice(0, 4);
+    const handleBeforeGalleryOpen = useCallback(
+      (gallery) => {
+        onGalleryOpen();

-  return (
-    <>
-      {visibleItems.map((item) => (
-        <Item
-          key={item.id}
-          name={item.name}
-          url={item.url}
-          coverUrl={item.coverUrl}
-          createdAt={item.createdAt}
-          isCover={item.isCover}
-          isPersisted={item.isPersisted}
-          onCoverSelect={() => handleCoverSelect(item.id)}
-          onCoverDeselect={handleCoverDeselect}
-          onUpdate={(data) => handleUpdate(item.id, data)}
-          onDelete={() => handleDelete(item.id)}
-        />
-      ))}
-      {items.length > 4 && (
-        <Button
-          fluid
-          content={
-            isOpened
-              ? t('action.showFewerAttachments')
-              : t('action.showAllAttachments', {
-                  hidden: items.length - visibleItems.length,
-                })
+        gallery.on('destroy', () => {
+          onGalleryClose();
+        });
+      },
+      [onGalleryOpen, onGalleryClose],
+    );
+
+    const handleToggleAllVisibleClick = useCallback(() => {
+      toggleAllVisible();
+    }, [toggleAllVisible]);
+
+    const galleryItemsNode = items.map((item, index) => {
+      const props = item.coverUrl
+        ? {
+            width: item.imageWidth,
+            height: item.imageHeight,
          }
-          className={styles.toggleButton}
-          onClick={handleToggleClick}
-        />
-      )}
-    </>
-  );
-});
+        : {
+            content: (
+              <Grid verticalAlign="middle" className={styles.contentWrapper}>
+                <Grid.Column textAlign="center" className={styles.content}>
+                  {t('common.thereIsNoPreviewAvailableForThisAttachment')}
+                </Grid.Column>
+              </Grid>
+            ),
+          };
+
+      const isVisible = isAllVisible || index < INITIALLY_VISIBLE;
+
+      return (
+        <GalleryItem
+          {...props} // eslint-disable-line react/jsx-props-no-spreading
+          key={item.id}
+          original={item.url}
+          caption={item.name}
+        >
+          {({ ref, open }) =>
+            isVisible ? (
+              <Item
+                ref={ref}
+                name={item.name}
+                url={item.url}
+                coverUrl={item.coverUrl}
+                createdAt={item.createdAt}
+                isCover={item.isCover}
+                isPersisted={item.isPersisted}
+                onClick={item.coverUrl ? open : undefined}
+                onCoverSelect={() => handleCoverSelect(item.id)}
+                onCoverDeselect={handleCoverDeselect}
+                onUpdate={(data) => handleUpdate(item.id, data)}
+                onDelete={() => handleDelete(item.id)}
+              />
+            ) : (
+              <span ref={ref} />
+            )
+          }
+        </GalleryItem>
+      );
+    });
+
+    return (
+      <>
+        <Gallery
+          withCaption
+          withDownloadButton
+          options={{
+            showHideAnimationType: 'none',
+            closeTitle: '',
+            zoomTitle: '',
+            arrowPrevTitle: '',
+            arrowNextTitle: '',
+            errorMsg: '',
+          }}
+          onBeforeOpen={handleBeforeGalleryOpen}
+        >
+          {galleryItemsNode}
+        </Gallery>
+        {items.length > INITIALLY_VISIBLE && (
+          <Button
+            fluid
+            content={
+              isAllVisible
+                ? t('action.showFewerAttachments')
+                : t('action.showAllAttachments', {
+                    hidden: items.length - INITIALLY_VISIBLE,
+                  })
+            }
+            className={styles.toggleButton}
+            onClick={handleToggleAllVisibleClick}
+          />
+        )}
+      </>
+    );
+  },
+);

 Attachments.propTypes = {
  items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
  onUpdate: PropTypes.func.isRequired,
  onDelete: PropTypes.func.isRequired,
  onCoverUpdate: PropTypes.func.isRequired,
+  onGalleryOpen: PropTypes.func.isRequired,
+  onGalleryClose: PropTypes.func.isRequired,
 };

 export default Attachments;
--- a/client/src/components/CardModal/Attachments/Attachments.module.scss
+++ b/client/src/components/CardModal/Attachments/Attachments.module.scss
@ -1,4 +1,14 @@
 :global(#app) {
+  .content {
+    color: #fff;
+    font-size: 20px;
+    font-weight: 700;
+  }
+
+  .contentWrapper {
+    height: 100%;
+  }
+
  .toggleButton {
    background: transparent;
    box-shadow: none;
--- a/client/src/components/CardModal/Attachments/Item.jsx
+++ b/client/src/components/CardModal/Attachments/Item.jsx
@ -8,24 +8,32 @@ import EditPopup from './EditPopup';

 import styles from './Item.module.scss';

-const Item = React.memo(
-  ({
-    name,
-    url,
-    coverUrl,
-    createdAt,
-    isCover,
-    isPersisted,
-    onCoverSelect,
-    onCoverDeselect,
-    onUpdate,
-    onDelete,
-  }) => {
+const Item = React.forwardRef(
+  (
+    {
+      name,
+      url,
+      coverUrl,
+      createdAt,
+      isCover,
+      isPersisted,
+      onCoverSelect,
+      onCoverDeselect,
+      onClick,
+      onUpdate,
+      onDelete,
+    },
+    ref,
+  ) => {
    const [t] = useTranslation();

    const handleClick = useCallback(() => {
-      window.open(url, '_blank');
-    }, [url]);
+      if (onClick) {
+        onClick();
+      } else {
+        window.open(url, '_blank');
+      }
+    }, [url, onClick]);

    const handleToggleCoverClick = useCallback(
      (event) => {
@ -54,7 +62,7 @@ const Item = React.memo(
    return (
      /* eslint-disable jsx-a11y/click-events-have-key-events,
                        jsx-a11y/no-static-element-interactions */
-      <div className={styles.wrapper} onClick={handleClick}>
+      <div ref={ref} className={styles.wrapper} onClick={handleClick}>
        {/* eslint-enable jsx-a11y/click-events-have-key-events,
                          jsx-a11y/no-static-element-interactions */}
        <div
@ -133,6 +141,7 @@ Item.propTypes = {
  createdAt: PropTypes.instanceOf(Date),
  isCover: PropTypes.bool.isRequired,
  isPersisted: PropTypes.bool.isRequired,
+  onClick: PropTypes.func,
  onCoverSelect: PropTypes.func.isRequired,
  onCoverDeselect: PropTypes.func.isRequired,
  onUpdate: PropTypes.func.isRequired,
@ -143,6 +152,7 @@ Item.defaultProps = {
  url: undefined,
  coverUrl: undefined,
  createdAt: undefined,
+  onClick: undefined,
 };

-export default Item;
+export default React.memo(Item);
--- a/client/src/components/CardModal/CardModal.jsx
+++ b/client/src/components/CardModal/CardModal.jsx
@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
@ -73,6 +73,8 @@ const CardModal = React.memo(
  }) => {
    const [t] = useTranslation();

+    const isGalleryOpened = useRef(false);
+
    const handleNameUpdate = useCallback(
      (newName) => {
        onUpdate({
@ -124,6 +126,22 @@ const CardModal = React.memo(
      });
    }, [isSubscribed, onUpdate]);

+    const handleGalleryOpen = useCallback(() => {
+      isGalleryOpened.current = true;
+    }, []);
+
+    const handleGalleryClose = useCallback(() => {
+      isGalleryOpened.current = false;
+    }, []);
+
+    const handleClose = useCallback(() => {
+      if (isGalleryOpened.current) {
+        return;
+      }
+
+      onClose();
+    }, [onClose]);
+
    const userIds = users.map((user) => user.id);
    const labelIds = labels.map((label) => label.id);

@ -328,6 +346,8 @@ const CardModal = React.memo(
                    onUpdate={onAttachmentUpdate}
                    onDelete={onAttachmentDelete}
                    onCoverUpdate={handleCoverUpdate}
+                    onGalleryOpen={handleGalleryOpen}
+                    onGalleryClose={handleGalleryClose}
                  />
                </div>
              </div>
@ -445,7 +465,7 @@ const CardModal = React.memo(
    );

    return (
-      <Modal open closeIcon size="small" centered={false} onClose={onClose}>
+      <Modal open closeIcon size="small" centered={false} onClose={handleClose}>
        {canEdit ? (
          <AttachmentAddZone onCreate={onAttachmentCreate}>{contentNode}</AttachmentAddZone>
        ) : (
--- a/client/src/components/Root.jsx
+++ b/client/src/components/Root.jsx
@ -10,6 +10,7 @@ import CoreWrapperContainer from '../containers/CoreWrapperContainer';
 import NotFound from './NotFound';

 import 'react-datepicker/dist/react-datepicker.css';
+import 'photoswipe/dist/photoswipe.css';
 import '../lib/custom-ui/styles.css';

 import '../styles.module.scss';
--- a/client/src/components/TimerEditStep/TimerEditStep.jsx
+++ b/client/src/components/TimerEditStep/TimerEditStep.jsx
@ -32,7 +32,7 @@ const createData = (timer) => {
 const TimerEditStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) => {
  const [t] = useTranslation();
  const [data, handleFieldChange, setData] = useForm(() => createData(defaultValue));
-  const [isEditing, toggleEdit] = useToggle();
+  const [isEditing, toggleEditing] = useToggle();

  const hoursField = useRef(null);
  const minutesField = useRef(null);
@ -55,10 +55,10 @@ const TimerEditStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) =
    onClose();
  }, [defaultValue, onUpdate, onClose]);

-  const handleToggleEditClick = useCallback(() => {
+  const handleToggleEditingClick = useCallback(() => {
    setData(createData(defaultValue));
-    toggleEdit();
-  }, [defaultValue, setData, toggleEdit]);
+    toggleEditing();
+  }, [defaultValue, setData, toggleEditing]);

  const handleSubmit = useCallback(() => {
    const parts = {
@ -149,7 +149,7 @@ const TimerEditStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) =
              type="button"
              icon={isEditing ? 'close' : 'edit'}
              className={styles.iconButton}
-              onClick={handleToggleEditClick}
+              onClick={handleToggleEditingClick}
            />
          </div>
          {isEditing && <Button positive content={t('action.save')} />}
--- a/client/src/locales/de/core.js
+++ b/client/src/locales/de/core.js
@ -134,6 +134,7 @@ export default {
      subscribeToMyOwnCardsByDefault: 'Standardmäßig meine eigenen Karten abonnieren',
      taskActions_title: 'Aufgabenaktionen',
      tasks: 'Aufgaben',
+      thereIsNoPreviewAvailableForThisAttachment: 'Für diesen Anhang ist keine Vorschau verfügbar',
      time: 'Zeit',
      timer: 'Timer',
      title: 'Titel',
--- a/client/src/locales/en/core.js
+++ b/client/src/locales/en/core.js
@ -127,6 +127,8 @@ export default {
      subscribeToMyOwnCardsByDefault: 'Subscribe to my own cards by default',
      taskActions_title: 'Task Actions',
      tasks: 'Tasks',
+      thereIsNoPreviewAvailableForThisAttachment:
+        'There is no preview available for this attachment',
      time: 'Time',
      timer: 'Timer',
      title: 'Title',
--- a/client/src/locales/ru/core.js
+++ b/client/src/locales/ru/core.js
@ -122,6 +122,7 @@ export default {
      subscribeToMyOwnCardsByDefault: 'По умолчанию подписаться на мои собственные карточки',
      taskActions: 'Действия с задачей',
      tasks: 'Задачи',
+      thereIsNoPreviewAvailableForThisAttachment: 'Предпросмотр для этого вложения недоступен',
      time: 'Время',
      timer: 'Таймер',
      title: 'Название',
--- a/client/src/styles.module.scss
+++ b/client/src/styles.module.scss
@ -101,6 +101,10 @@
        border-radius: 0;
      }
    }
+
+    .pswp .pswp__img--placeholder {
+      display: none !important;
+    }
  }

  #root {