v1.0.6

Set RWD layout to react-grid-carousel Remove reload button Use css animation for loading spinner
x3388638 · Feb 2, 2020 · bac3c85 · bac3c85
1 parent 0d46238
commit bac3c85
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 90 deletions.
diff --git a/__e2e__/functional.test.js b/__e2e__/functional.test.js
@@ -4,7 +4,6 @@ const el = {
   root: { css: '#dcard-images-root' },
   BrowseBtn: { css: '[class*=BrowseBtn_]' },
   CloseBtn: { css: '[class*=Gallery__CloseBtn]' },
-  ReloadBtn: { css: '[class*=Gallery__ReloadBtn]' },
   Grid: { css: '[class*=ImageItem__Item]' },
   Carousel: { css: '[class*=Carousel_]' }
 }
@@ -20,7 +19,6 @@ Scenario('Click the BrowseBtn to open Gallery', I => {
   I.click(locate(el.root).find(el.BrowseBtn))
   I.wait(2)
   I.seeElement(locate(el.root).find(el.CloseBtn))
-  I.seeElement(locate(el.root).find(el.ReloadBtn))
   I.seeElement(locate(el.root).find(el.Grid))
   I.saveScreenshot('Gallery.png')
 })

diff --git a/components/Carousel.js b/components/Carousel.js
@@ -1,11 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
-  faAngleLeft,
-  faCaretLeft,
-  faCaretRight
-} from '@fortawesome/free-solid-svg-icons'
+import { faAngleLeft, faCaretLeft } from '@fortawesome/free-solid-svg-icons'
 
 const Conatienr = styled.div`
   width: 100%;
@@ -97,6 +93,7 @@ const PrevBtn = styled(btnBase)`
 
 const NextBtn = styled(btnBase)`
   right: 50px;
+  transform: translateY(-50%) rotate(180deg);
 `
 
 const Carousel = ({ images, index, onClose }) => {
@@ -108,20 +105,19 @@ const Carousel = ({ images, index, onClose }) => {
 
   const handleIndex = amount => {
     let nextPage = currentIndex + amount
-    if (nextPage >= images.length) {
-      nextPage = 0
-    }
-
-    if (nextPage < 0) {
-      nextPage = images.length - 1
-    }
-
-    setCurrentIndex(nextPage)
+    setCurrentIndex(
+      nextPage >= images.length
+        ? 0
+        : nextPage < 0
+        ? images.length - 1
+        : nextPage
+    )
   }
 
   const { floor, host, school, department, createdAt, gender, img } = images[
     currentIndex
   ]
+
   return (
     <Conatienr>
       <Label gender={gender}>
@@ -143,7 +139,7 @@ const Carousel = ({ images, index, onClose }) => {
         <FontAwesomeIcon icon={faCaretLeft} />
       </PrevBtn>
       <NextBtn onClick={() => handleIndex(1)}>
-        <FontAwesomeIcon icon={faCaretRight} />
+        <FontAwesomeIcon icon={faCaretLeft} />
       </NextBtn>
       <Index>
         {currentIndex + 1} / {images.length}

diff --git a/components/Gallery.js b/components/Gallery.js
@@ -1,11 +1,7 @@
 import React, { useState, useCallback } from 'react'
 import styled, { keyframes } from 'styled-components'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
-  faTimesCircle,
-  faRedo,
-  faSpinner
-} from '@fortawesome/free-solid-svg-icons'
+import { faTimesCircle } from '@fortawesome/free-solid-svg-icons'
 import { Transition } from 'react-transition-group'
 import ImageGrids from 'react-grid-carousel'
 import Carousel from './Carousel'
@@ -48,28 +44,38 @@ const CloseBtn = styled(ToolBtn)`
   top: 10px;
 `
 
-const ReloadBtn = styled(ToolBtn)`
-  top: 50px;
-`
-
-const rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
+const pulse = keyframes`
+  0% { opacity: 0.1 }
+  50% { opacity: 1 }
+  60% { opacity: 1 }
+  100% { opacity: 0.1 }
 `
 
 const Loading = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  animation: ${rotate} 1s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
   color: #f3f3f3;
   font-size: 24px;
   height: 100%;
+
+  span {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background: #f3f3f3;
+    border-radius: 50%;
+    margin: 0 5px;
+    animation: ${pulse} 1s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
+
+    &.nd {
+      animation-delay: 0.2s;
+    }
+
+    &.rd {
+      animation-delay: 0.4s;
+    }
+  }
 `
 
 const Gallery = ({
@@ -78,11 +84,7 @@ const Gallery = ({
   images = [],
   onClose
 }) => {
-  const [reload, setReload] = useState(0)
   const [carouselIndex, setCarouselIndex] = useState(null)
-  const handleReload = useCallback(() => {
-    setReload(c => c + 1)
-  }, [])
 
   const closeCarousel = useCallback(() => {
     setCarouselIndex(null)
@@ -95,6 +97,8 @@ const Gallery = ({
     exited: { opacity: 0 }
   }
 
+  const itemAmount = images.length + (isFetching ? 1 : 0)
+
   return (
     <Transition
       in={isOpen}
@@ -107,35 +111,47 @@ const Gallery = ({
           <CloseBtn onClick={onClose}>
             <FontAwesomeIcon icon={faTimesCircle} />
           </CloseBtn>
-          <ReloadBtn onClick={handleReload}>
-            <FontAwesomeIcon icon={faRedo} />
-          </ReloadBtn>
-          <ImageGrids
-            cols={4}
-            rows={Math.ceil((images.length + (isFetching ? 1 : 0)) / 4)}
-            gap={0}
-            containerStyle={{ margin: '50px 0' }}
-          >
-            {images.map((imageData, i) => (
-              <ImageGrids.Item key={i}>
-                <ImageItem
-                  key={i}
-                  reload={reload}
-                  imageData={imageData}
-                  onClick={() => {
-                    setCarouselIndex(i)
-                  }}
-                />
-              </ImageGrids.Item>
-            ))}
-            {isFetching && (
-              <ImageGrids.Item>
-                <Loading>
-                  <FontAwesomeIcon icon={faSpinner} />
-                </Loading>
-              </ImageGrids.Item>
-            )}
-          </ImageGrids>
+          {itemAmount && (
+            <ImageGrids
+              cols={4}
+              rows={Math.ceil(itemAmount / 4)}
+              gap={0}
+              containerStyle={{ margin: '50px 0' }}
+              responsiveLayout={[
+                {
+                  breakpoint: 999,
+                  cols: 3,
+                  rows: Math.ceil(itemAmount / 3)
+                },
+                {
+                  breakpoint: 767,
+                  cols: 2,
+                  rows: Math.ceil(itemAmount / 2)
+                }
+              ]}
+              mobileBreakpoint={0}
+            >
+              {images.map((imageData, i) => (
+                <ImageGrids.Item key={i}>
+                  <ImageItem
+                    imageData={imageData}
+                    onClick={() => {
+                      setCarouselIndex(i)
+                    }}
+                  />
+                </ImageGrids.Item>
+              ))}
+              {isFetching && (
+                <ImageGrids.Item>
+                  <Loading>
+                    <span className="st" />
+                    <span className="nd" />
+                    <span className="rd" />
+                  </Loading>
+                </ImageGrids.Item>
+              )}
+            </ImageGrids>
+          )}
           {carouselIndex !== null && (
             <Carousel
               onClose={closeCarousel}

diff --git a/components/ImageItem.js b/components/ImageItem.js
@@ -18,10 +18,6 @@ const Item = styled.div`
   &:hover {
     box-shadow: 0 0 10px 0px #f3f3f3;
   }
-
-  @media screen and (min-width: 1400px) {
-    height: 250px;
-  }
 `
 
 const Label = styled.span`
@@ -40,7 +36,7 @@ const Label = styled.span`
   }
 `
 
-const ImageItem = ({ imageData, reload, onClick }) => {
+const ImageItem = ({ imageData, onClick }) => {
   const [isIntersected, setIsIntersected] = useState(false)
   const itemRef = useRef(null)
   const { observe, disconnect, entries } = useIntersectionObserver()
@@ -65,7 +61,7 @@ const ImageItem = ({ imageData, reload, onClick }) => {
   return (
     <Item
       ref={itemRef}
-      img={isIntersected ? `${img}?_=${reload}` : defaultImg}
+      img={isIntersected ? img : defaultImg}
       onClick={onClick}
     >
       <Label gender={gender}>

diff --git a/index.user.js b/index.user.js
diff --git a/meta.js b/meta.js
@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         dcard-images
 // @namespace    https://2yc.tw
-// @version      1.0.5
+// @version      1.0.6
 // @description  Dcard gallery to browse all images in both article and comments
 // @author       Y.Y.
 // @match        https://www.dcard.tw/*

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dcard-images",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Dcard gallery for all images in the article and comments",
   "main": "index.js",
   "scripts": {
@@ -71,7 +71,7 @@
     "intersection-observer": "^0.7.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-grid-carousel": "^0.1.6",
+    "react-grid-carousel": "^0.2.0",
     "react-transition-group": "^4.3.0",
     "styled-components": "^4.4.1"
   }