From becf4fde895b6ee27be9484c0caf1cc416275498 Mon Sep 17 00:00:00 2001 From: "Erin E. Sullivan" Date: Tue, 29 Oct 2024 15:50:41 -0400 Subject: [PATCH 1/7] Pulling data from workshop, and only displaying specific keys for cards. --- src/modules/browse/components/ShelfBrowse/index.js | 3 ++- src/modules/browse/components/ShelfBrowseCarousel/index.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/modules/browse/components/ShelfBrowse/index.js b/src/modules/browse/components/ShelfBrowse/index.js index 60fd76e2..062c9333 100644 --- a/src/modules/browse/components/ShelfBrowse/index.js +++ b/src/modules/browse/components/ShelfBrowse/index.js @@ -51,7 +51,8 @@ const ShelfBrowse = () => { const fetchShelfData = useCallback(async () => { setShelfData('loading'); try { - const response = await fetch(`https://search.lib.umich.edu/catalog/browse/carousel?query=${callNumber}`); + // `https://search.lib.umich.edu/catalog/browse/carousel?query=${callNumber}` + const response = await fetch(`https://browse.workshop.search.lib.umich.edu/carousel?query=${callNumber}`); if (!response.ok) { throw new Error(`HTTP Error! status: ${response.status}`); } diff --git a/src/modules/browse/components/ShelfBrowseCarousel/index.js b/src/modules/browse/components/ShelfBrowseCarousel/index.js index a3ae9bae..d4778f43 100644 --- a/src/modules/browse/components/ShelfBrowseCarousel/index.js +++ b/src/modules/browse/components/ShelfBrowseCarousel/index.js @@ -105,7 +105,7 @@ const ShelfBrowseCarousel = ({ callNumber, items, itemsPerPage, setButtonAction, {currentItems.map((item, index) => { const isCurrentItem = currentItem(item); const firstOrLastItem = !isCurrentItem && ((firstPage && index === 0) || (lastPage && currentItems.length - 1 === index)); - const fields = firstOrLastItem ? ['call_number'] : Object.keys(item).slice(0, -1); + const fields = firstOrLastItem ? ['call_number'] : ['title', 'author', 'date', 'call_number']; const basePath = 'https://search.lib.umich.edu'; const anchorAttributes = firstOrLastItem ? { href: `${basePath}/catalog/browse/callnumber?query=${item.call_number}` } From 9fde689e17a6323e00b551714d5d7aca1fe68765 Mon Sep 17 00:00:00 2001 From: "Erin E. Sullivan" Date: Thu, 31 Oct 2024 07:50:49 -0400 Subject: [PATCH 2/7] Creating and applying `ImagePlaceholder` component. --- .../components/ShelfBrowseCarousel/index.js | 23 +++++++++- .../components/ShelfBrowseCarousel/styles.css | 3 ++ .../components/ImagePlaceholder/index.js | 46 +++++++++++++++++++ .../components/ImagePlaceholder/styles.css | 16 +++++++ src/modules/reusable/index.js | 2 + 5 files changed, 89 insertions(+), 1 deletion(-) create mode 100644 src/modules/reusable/components/ImagePlaceholder/index.js create mode 100644 src/modules/reusable/components/ImagePlaceholder/styles.css diff --git a/src/modules/browse/components/ShelfBrowseCarousel/index.js b/src/modules/browse/components/ShelfBrowseCarousel/index.js index d4778f43..93272978 100644 --- a/src/modules/browse/components/ShelfBrowseCarousel/index.js +++ b/src/modules/browse/components/ShelfBrowseCarousel/index.js @@ -1,8 +1,18 @@ import './styles.css'; -import { Anchor, Icon } from '../../../reusable'; +import { Anchor, Icon, ImagePlaceholder } from '../../../reusable'; import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; +const bookCover = (item) => { + let url = 'https://www.syndetics.com/index.php?client=umichaa&pagename=lc.jpg'; + ['isbn', 'issn', 'oclc'].forEach((parameter) => { + if (item[parameter]) { + url += `&${parameter}=${item[parameter]}`; + } + }); + return url; +}; + const ShelfBrowseCarousel = ({ callNumber, items, itemsPerPage, setButtonAction, setDisableButton, uid }) => { const currentItem = (item) => { return item.call_number === callNumber && item.url.endsWith(uid); @@ -125,6 +135,17 @@ const ShelfBrowseCarousel = ({ callNumber, items, itemsPerPage, setButtonAction, Continue browsing in call number list )} + {!firstOrLastItem && ( + <> +
Book cover
+
+ +
+ + )} {fields.map((key) => { return item[key] && ( diff --git a/src/modules/browse/components/ShelfBrowseCarousel/styles.css b/src/modules/browse/components/ShelfBrowseCarousel/styles.css index d371c5c7..29708036 100644 --- a/src/modules/browse/components/ShelfBrowseCarousel/styles.css +++ b/src/modules/browse/components/ShelfBrowseCarousel/styles.css @@ -78,6 +78,9 @@ overflow: hidden; overflow-wrap: anywhere; } +.shelf-browse-item .item-term-book_cover:not(:has(div)) { + align-self: center; +} .shelf-browse-item .this-item, .shelf-browse-item .item-term-title, diff --git a/src/modules/reusable/components/ImagePlaceholder/index.js b/src/modules/reusable/components/ImagePlaceholder/index.js new file mode 100644 index 00000000..0a6c2d0f --- /dev/null +++ b/src/modules/reusable/components/ImagePlaceholder/index.js @@ -0,0 +1,46 @@ +import './styles.css'; +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; + +const ImagePlaceholder = ({ alt, src, ...rest }) => { + const [imageLoaded, setImageLoaded] = useState(false); + const [hasError, setHasError] = useState(false); + + const handleLoad = () => { + setImageLoaded(true); + setHasError(false); + }; + + const handleError = () => { + setImageLoaded(false); + setHasError(true); + }; + + return ( + <> + {alt} + + {(hasError || !imageLoaded) && ( +
+
+
+ )} + + ); +}; + +ImagePlaceholder.propTypes = { + alt: PropTypes.string, + src: PropTypes.string +}; + +export default ImagePlaceholder; diff --git a/src/modules/reusable/components/ImagePlaceholder/styles.css b/src/modules/reusable/components/ImagePlaceholder/styles.css new file mode 100644 index 00000000..bff1cbdc --- /dev/null +++ b/src/modules/reusable/components/ImagePlaceholder/styles.css @@ -0,0 +1,16 @@ +.image-placeholder { + background-color: var(--search-color-grey-200); + border-radius: 4px; + padding-top: 150%; + position: relative; + width: 100%; +} + +.image-placeholder .content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + /* Any other styling you need */ +} diff --git a/src/modules/reusable/index.js b/src/modules/reusable/index.js index 5d1ead74..baaacebc 100644 --- a/src/modules/reusable/index.js +++ b/src/modules/reusable/index.js @@ -7,6 +7,7 @@ import ContextProvider from './components/ContextProvider'; import Dialog from './components/Dialog'; import H1 from './components/H1'; import Icon from './components/Icon'; +import ImagePlaceholder from './components/ImagePlaceholder'; import Metadata from './components/Metadata'; import Tab from './components/Tab'; import TabPanel from './components/TabPanel'; @@ -27,6 +28,7 @@ export { ExpandableProvider, H1, Icon, + ImagePlaceholder, Metadata, Tab, Tabs, From 063cbd8ac64251afa0cad838b74d5c4be80fd004 Mon Sep 17 00:00:00 2001 From: "Erin E. Sullivan" Date: Tue, 12 Nov 2024 09:26:47 -0500 Subject: [PATCH 3/7] Updating list item `key` to prevent repeated images, and updating `ImagePlaceholder` logic to set up for `loading` and `error` states. --- .../components/ShelfBrowseCarousel/index.js | 2 +- .../components/ImagePlaceholder/index.js | 25 +++++++++---------- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/src/modules/browse/components/ShelfBrowseCarousel/index.js b/src/modules/browse/components/ShelfBrowseCarousel/index.js index 93272978..11cad346 100644 --- a/src/modules/browse/components/ShelfBrowseCarousel/index.js +++ b/src/modules/browse/components/ShelfBrowseCarousel/index.js @@ -122,7 +122,7 @@ const ShelfBrowseCarousel = ({ callNumber, items, itemsPerPage, setButtonAction, : { to: item.url.replace(basePath, '') + window.location.search }; return ( -
  • +
  • { - const [imageLoaded, setImageLoaded] = useState(false); - const [hasError, setHasError] = useState(false); + const [imageState, setImageState] = useState('loading'); + const [imgSrc, setImgSrc] = useState(src); - const handleLoad = () => { - setImageLoaded(true); - setHasError(false); + const handleImageLoad = () => { + setImageState('settled'); }; - const handleError = () => { - setImageLoaded(false); - setHasError(true); + const handleImageError = () => { + setImgSrc('/favicon-180x180.png'); + setImageState('settled'); }; return ( <> {alt} - {(hasError || !imageLoaded) && ( + {imageState === 'loading' && (
    Date: Tue, 12 Nov 2024 13:56:54 -0500 Subject: [PATCH 4/7] Adding placeholder images and the logic for picking which one to use. --- public/placeholders/placeholder-0.svg | 1 + public/placeholders/placeholder-1.svg | 1 + public/placeholders/placeholder-10.svg | 1 + public/placeholders/placeholder-11.svg | 1 + public/placeholders/placeholder-12.svg | 1 + public/placeholders/placeholder-13.svg | 1 + public/placeholders/placeholder-14.svg | 1 + public/placeholders/placeholder-2.svg | 1 + public/placeholders/placeholder-3.svg | 1 + public/placeholders/placeholder-4.svg | 1 + public/placeholders/placeholder-5.svg | 1 + public/placeholders/placeholder-6.svg | 1 + public/placeholders/placeholder-7.svg | 1 + public/placeholders/placeholder-8.svg | 1 + public/placeholders/placeholder-9.svg | 1 + src/modules/browse/components/ShelfBrowseCarousel/index.js | 4 +++- src/modules/reusable/components/ImagePlaceholder/index.js | 6 ++++-- 17 files changed, 22 insertions(+), 3 deletions(-) create mode 100644 public/placeholders/placeholder-0.svg create mode 100644 public/placeholders/placeholder-1.svg create mode 100644 public/placeholders/placeholder-10.svg create mode 100644 public/placeholders/placeholder-11.svg create mode 100644 public/placeholders/placeholder-12.svg create mode 100644 public/placeholders/placeholder-13.svg create mode 100644 public/placeholders/placeholder-14.svg create mode 100644 public/placeholders/placeholder-2.svg create mode 100644 public/placeholders/placeholder-3.svg create mode 100644 public/placeholders/placeholder-4.svg create mode 100644 public/placeholders/placeholder-5.svg create mode 100644 public/placeholders/placeholder-6.svg create mode 100644 public/placeholders/placeholder-7.svg create mode 100644 public/placeholders/placeholder-8.svg create mode 100644 public/placeholders/placeholder-9.svg diff --git a/public/placeholders/placeholder-0.svg b/public/placeholders/placeholder-0.svg new file mode 100644 index 00000000..43b074e4 --- /dev/null +++ b/public/placeholders/placeholder-0.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/placeholders/placeholder-1.svg b/public/placeholders/placeholder-1.svg new file mode 100644 index 00000000..be24d30c --- /dev/null +++ b/public/placeholders/placeholder-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/placeholders/placeholder-10.svg b/public/placeholders/placeholder-10.svg new file mode 100644 index 00000000..fd31dbfa --- /dev/null +++ b/public/placeholders/placeholder-10.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/placeholders/placeholder-11.svg b/public/placeholders/placeholder-11.svg new file mode 100644 index 00000000..1d7ae374 --- /dev/null +++ b/public/placeholders/placeholder-11.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/placeholders/placeholder-12.svg b/public/placeholders/placeholder-12.svg new file mode 100644 index 00000000..9766802a --- /dev/null +++ b/public/placeholders/placeholder-12.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/placeholders/placeholder-13.svg b/public/placeholders/placeholder-13.svg new file mode 100644 index 00000000..1c5a7cd1 --- /dev/null +++ b/public/placeholders/placeholder-13.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/placeholders/placeholder-14.svg b/public/placeholders/placeholder-14.svg new file mode 100644 index 00000000..5df6ca0d --- /dev/null +++ b/public/placeholders/placeholder-14.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/placeholders/placeholder-2.svg b/public/placeholders/placeholder-2.svg new file mode 100644 index 00000000..d9603d90 --- /dev/null +++ b/public/placeholders/placeholder-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/placeholders/placeholder-3.svg b/public/placeholders/placeholder-3.svg new file mode 100644 index 00000000..8a95ba13 --- /dev/null +++ b/public/placeholders/placeholder-3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/placeholders/placeholder-4.svg b/public/placeholders/placeholder-4.svg new file mode 100644 index 00000000..0c166bb1 --- /dev/null +++ b/public/placeholders/placeholder-4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/placeholders/placeholder-5.svg b/public/placeholders/placeholder-5.svg new file mode 100644 index 00000000..21943c44 --- /dev/null +++ b/public/placeholders/placeholder-5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/placeholders/placeholder-6.svg b/public/placeholders/placeholder-6.svg new file mode 100644 index 00000000..afe9bf4e --- /dev/null +++ b/public/placeholders/placeholder-6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/placeholders/placeholder-7.svg b/public/placeholders/placeholder-7.svg new file mode 100644 index 00000000..f0e05567 --- /dev/null +++ b/public/placeholders/placeholder-7.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/placeholders/placeholder-8.svg b/public/placeholders/placeholder-8.svg new file mode 100644 index 00000000..11160e2d --- /dev/null +++ b/public/placeholders/placeholder-8.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/placeholders/placeholder-9.svg b/public/placeholders/placeholder-9.svg new file mode 100644 index 00000000..439bd5f3 --- /dev/null +++ b/public/placeholders/placeholder-9.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/modules/browse/components/ShelfBrowseCarousel/index.js b/src/modules/browse/components/ShelfBrowseCarousel/index.js index 11cad346..4d9dd305 100644 --- a/src/modules/browse/components/ShelfBrowseCarousel/index.js +++ b/src/modules/browse/components/ShelfBrowseCarousel/index.js @@ -120,9 +120,10 @@ const ShelfBrowseCarousel = ({ callNumber, items, itemsPerPage, setButtonAction, const anchorAttributes = firstOrLastItem ? { href: `${basePath}/catalog/browse/callnumber?query=${item.call_number}` } : { to: item.url.replace(basePath, '') + window.location.search }; + const trueIndex = (currentPage * currentItems.length) + index; return ( -
  • +
  • diff --git a/src/modules/reusable/components/ImagePlaceholder/index.js b/src/modules/reusable/components/ImagePlaceholder/index.js index 3bbbc0fa..1acf29a7 100644 --- a/src/modules/reusable/components/ImagePlaceholder/index.js +++ b/src/modules/reusable/components/ImagePlaceholder/index.js @@ -2,7 +2,7 @@ import './styles.css'; import React, { useState } from 'react'; import PropTypes from 'prop-types'; -const ImagePlaceholder = ({ alt, src, ...rest }) => { +const ImagePlaceholder = ({ alt, index, src, ...rest }) => { const [imageState, setImageState] = useState('loading'); const [imgSrc, setImgSrc] = useState(src); @@ -11,7 +11,8 @@ const ImagePlaceholder = ({ alt, src, ...rest }) => { }; const handleImageError = () => { - setImgSrc('/favicon-180x180.png'); + // Choosing between 15 placeholder images based on the index's remainder + setImgSrc(`/placeholders/placeholder-${index % 15}.svg`); setImageState('settled'); }; @@ -39,6 +40,7 @@ const ImagePlaceholder = ({ alt, src, ...rest }) => { ImagePlaceholder.propTypes = { alt: PropTypes.string, + index: PropTypes.number, src: PropTypes.string }; From fab07c4c3426d37a19cd80ffe76af6bc023d8e4d Mon Sep 17 00:00:00 2001 From: "Erin E. Sullivan" Date: Tue, 12 Nov 2024 14:00:52 -0500 Subject: [PATCH 5/7] Adding styling for `loading` state. --- src/modules/reusable/components/ImagePlaceholder/index.js | 2 +- src/modules/reusable/components/ImagePlaceholder/styles.css | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/modules/reusable/components/ImagePlaceholder/index.js b/src/modules/reusable/components/ImagePlaceholder/index.js index 1acf29a7..b3179c2a 100644 --- a/src/modules/reusable/components/ImagePlaceholder/index.js +++ b/src/modules/reusable/components/ImagePlaceholder/index.js @@ -28,7 +28,7 @@ const ImagePlaceholder = ({ alt, index, src, ...rest }) => { {imageState === 'loading' && (
    diff --git a/src/modules/reusable/components/ImagePlaceholder/styles.css b/src/modules/reusable/components/ImagePlaceholder/styles.css index bff1cbdc..478caef9 100644 --- a/src/modules/reusable/components/ImagePlaceholder/styles.css +++ b/src/modules/reusable/components/ImagePlaceholder/styles.css @@ -7,10 +7,9 @@ } .image-placeholder .content { + height: 100%; + left: 0; position: absolute; top: 0; - left: 0; width: 100%; - height: 100%; - /* Any other styling you need */ } From ba5a9538bd60832aa846ccef9d609a9f7e521bce Mon Sep 17 00:00:00 2001 From: "Erin E. Sullivan" Date: Wed, 13 Nov 2024 10:31:53 -0500 Subject: [PATCH 6/7] Adding `altPlaceholder` for changing the `alt` attribute on error. --- .../components/ShelfBrowseCarousel/index.js | 10 ++++++---- .../components/ImagePlaceholder/index.js | 17 ++++++++++------- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/modules/browse/components/ShelfBrowseCarousel/index.js b/src/modules/browse/components/ShelfBrowseCarousel/index.js index 4d9dd305..2c64e9df 100644 --- a/src/modules/browse/components/ShelfBrowseCarousel/index.js +++ b/src/modules/browse/components/ShelfBrowseCarousel/index.js @@ -140,10 +140,12 @@ const ShelfBrowseCarousel = ({ callNumber, items, itemsPerPage, setButtonAction, <>
    Book cover
    -
    diff --git a/src/modules/reusable/components/ImagePlaceholder/index.js b/src/modules/reusable/components/ImagePlaceholder/index.js index b3179c2a..5c305e00 100644 --- a/src/modules/reusable/components/ImagePlaceholder/index.js +++ b/src/modules/reusable/components/ImagePlaceholder/index.js @@ -2,31 +2,33 @@ import './styles.css'; import React, { useState } from 'react'; import PropTypes from 'prop-types'; -const ImagePlaceholder = ({ alt, index, src, ...rest }) => { - const [imageState, setImageState] = useState('loading'); +const ImagePlaceholder = ({ alt = '', altPlaceholder = '', index = 0, src = '', ...rest }) => { + const [imgState, setImgState] = useState('loading'); const [imgSrc, setImgSrc] = useState(src); + const [imgAlt, setImgAlt] = useState(alt); const handleImageLoad = () => { - setImageState('settled'); + setImgState('settled'); }; const handleImageError = () => { // Choosing between 15 placeholder images based on the index's remainder setImgSrc(`/placeholders/placeholder-${index % 15}.svg`); - setImageState('settled'); + setImgState('settled'); + setImgAlt(altPlaceholder); }; return ( <> {alt} - {imageState === 'loading' && ( + {imgState === 'loading' && (
    { ImagePlaceholder.propTypes = { alt: PropTypes.string, + altPlaceholder: PropTypes.string, index: PropTypes.number, src: PropTypes.string }; From d6646e9a31b5af2c07a15c723c39d257615796ee Mon Sep 17 00:00:00 2001 From: "Erin E. Sullivan" Date: Wed, 13 Nov 2024 12:47:07 -0500 Subject: [PATCH 7/7] Removing `alt` text from generated images to reduce redundant text in VoiceOver. --- src/modules/browse/components/ShelfBrowseCarousel/index.js | 2 -- src/modules/reusable/components/ImagePlaceholder/index.js | 6 ++---- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/modules/browse/components/ShelfBrowseCarousel/index.js b/src/modules/browse/components/ShelfBrowseCarousel/index.js index 2c64e9df..4ac4481a 100644 --- a/src/modules/browse/components/ShelfBrowseCarousel/index.js +++ b/src/modules/browse/components/ShelfBrowseCarousel/index.js @@ -141,8 +141,6 @@ const ShelfBrowseCarousel = ({ callNumber, items, itemsPerPage, setButtonAction,
    Book cover
    { +const ImagePlaceholder = ({ alt = '', index = 0, src = '', ...rest }) => { const [imgState, setImgState] = useState('loading'); const [imgSrc, setImgSrc] = useState(src); - const [imgAlt, setImgAlt] = useState(alt); const handleImageLoad = () => { setImgState('settled'); @@ -15,14 +14,13 @@ const ImagePlaceholder = ({ alt = '', altPlaceholder = '', index = 0, src = '', // Choosing between 15 placeholder images based on the index's remainder setImgSrc(`/placeholders/placeholder-${index % 15}.svg`); setImgState('settled'); - setImgAlt(altPlaceholder); }; return ( <>