Feature/scihub 718 open lightbox when clicking on image (#69)

Co-authored-by: Krzysztof Nofz <[email protected]>

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to this project will be documented in this file.
 
+## [v0.1.4]
+
+### Added
+- Open the image when you click on it full screen. Lightbox-like behavior.
+
 ## [v0.1.3]
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "altos-text-editor",
   "private": false,
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "files": [
     "dist"

src/lib/common/Image.tsx

@@ -62,12 +62,12 @@ export const Image: React.FC<ImageProps> = ({
   );
 };
 
-const ImageStyled = styled.img`
+export const ImageStyled = styled.img`
   aspect-ratio: auto;
   max-width: ${pxToRem(500)};
   max-height: ${pxToRem(500)};
 `;
 
-const ImageLoaderStyled = styled(ImageLoader)`
+export const ImageLoaderStyled = styled(ImageLoader)`
   display: flex;
 `;

src/lib/common/Lightbox.tsx

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+
+import { Image, ImageStyled } from './Image';
+import { ControlledModal } from './Modal/ControlledModal';
+import { CloseButtonStyled, ModalBoxStyled } from './Modal/ModalContainer';
+import { theme } from '../styles/theme';
+import { pxToRem } from '../styles/utils';
+
+type LightboxProps = {
+  src: string;
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+};
+
+export const Lightbox: React.FC<LightboxProps> = ({ src, ...rest }) => {
+  return (
+    <ControlledModalStyled {...rest}>
+      <LightboxImageStyled {...{ src }} />
+    </ControlledModalStyled>
+  );
+};
+
+const ControlledModalStyled = styled(ControlledModal)`
+  ${ModalBoxStyled} {
+    @media (min-width: ${theme.queries.laptop}) {
+      width: auto;
+      border: ${pxToRem(4)} solid ${props => props.theme.colors.white};
+      border-radius: 0;
+    }
+  }
+
+  ${CloseButtonStyled} {
+    svg {
+      width: ${pxToRem(30)};
+      height: ${pxToRem(30)};
+      fill: ${props => props.theme.colors.white};
+    }
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+`;
+
+const LightboxImageStyled = styled(Image)`
+  height: 100%;
+  width: 100%;
+
+  @media (min-width: ${theme.queries.laptop}) {
+    width: auto;
+    height: auto;
+  }
+
+  ${ImageStyled} {
+    max-width: 100vw;
+    max-height: 100vh;
+
+    @media (min-width: ${theme.queries.laptop}) {
+      max-width: 90vw;
+      max-height: 90vh;
+    }
+  }
+`;

src/lib/common/Modal/ModalContainer.tsx

@@ -95,7 +95,7 @@ const ModalContainerStyled = styled.div`
   }
 `;
 
-const ModalBoxStyled = styled(motion.div)`
+export const ModalBoxStyled = styled(motion.div)`
   width: 100vw;
   height: 100vh;
   max-height: 100vh;
@@ -115,7 +115,7 @@ const ModalBoxStyled = styled(motion.div)`
   }
 `;
 
-const CloseButtonStyled = styled(Button)`
+export const CloseButtonStyled = styled(Button)`
   position: absolute;
   top: ${pxToRem(16)};
   right: ${pxToRem(16)};

src/lib/components/DocumentNode/ImageNode/ImageEditorModal.tsx

@@ -28,12 +28,18 @@ export const ImageEditorModal: React.FC<ImageEditorModalProps> = ({
   const $top = isImageSmall ? pxToRem(0) : pxToRem(8);
   const $right = isImageSmall ? pxToRem(-38) : pxToRem(8);
 
+  const onEditButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    modal.on();
+  };
+
   return (
     <>
       <ButtonStyled
         {...{ $top, $right }}
         oval
-        onClick={modal.on}
+        onClick={onEditButtonClick}
         color="secondary"
         variant="contained"
         space="small"

src/lib/components/DocumentNode/ImageNode/ImageNode.tsx

@@ -8,7 +8,9 @@ import styled from 'styled-components';
 import { ImageEditorFormValues } from './hooks/useImageEditorForm';
 import { ImageEditorModal } from './ImageEditorModal';
 import { Image } from '../../../common/Image';
+import { Lightbox } from '../../../common/Lightbox';
 import { useIsNodeSelected } from '../../../hooks/useIsNodeSelected';
+import { useToggler } from '../../../hooks/useToggler';
 import { pxToRem } from '../../../styles/utils';
 import { useTextEditorContext } from '../../TextEditorContext/useTextEditoContext';
 
@@ -23,6 +25,7 @@ export const ImageNode: React.FC = () => {
   const { node, contentRef, setAttrs } = useNodeViewContext();
   const { attrs } = node;
   const [loading, getEditor] = useInstance();
+  const lightboxState = useToggler();
 
   const onImageEdit = ({ alt, title }: ImageEditorFormValues) => {
     setAttrs({ alt, title });
@@ -56,7 +59,12 @@ export const ImageNode: React.FC = () => {
     <ImageNodeContainerStyled ref={contentRef} $isSelected={isSelected}>
       {attrs.src && (
         <>
-          <Image src={attrs.src} onLoad={onImageLoad} {...{ alt, title }}>
+          <ImageStyled
+            src={attrs.src}
+            onClick={lightboxState.on}
+            onLoad={onImageLoad}
+            {...{ alt, title }}
+          >
             {isLoading => (
               <>
                 {mode === 'active' && !isLoading && (
@@ -68,7 +76,13 @@ export const ImageNode: React.FC = () => {
                 )}
               </>
             )}
-          </Image>
+          </ImageStyled>
+          <Lightbox
+            src={attrs.src}
+            onOpen={lightboxState.on}
+            isOpen={lightboxState.state}
+            onClose={lightboxState.off}
+          />
         </>
       )}
     </ImageNodeContainerStyled>
@@ -85,3 +99,12 @@ const ImageNodeContainerStyled = styled.div<{ $isSelected: boolean }>`
       props.$isSelected ? props.theme.colors.lightBlack : 'transparent'};
   transition: outline-color 0.2s ease-in;
 `;
+
+const ImageStyled = styled(Image)`
+  cursor: pointer;
+  transition: opacity 0.1s ease-in;
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;