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/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..4ac4481a 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); @@ -105,14 +115,15 @@ 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}` } : { to: item.url.replace(basePath, '') + window.location.search }; + const trueIndex = (currentPage * currentItems.length) + index; return ( -
  • +
  • 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..ef5813c8 --- /dev/null +++ b/src/modules/reusable/components/ImagePlaceholder/index.js @@ -0,0 +1,48 @@ +import './styles.css'; +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; + +const ImagePlaceholder = ({ alt = '', index = 0, src = '', ...rest }) => { + const [imgState, setImgState] = useState('loading'); + const [imgSrc, setImgSrc] = useState(src); + + const handleImageLoad = () => { + setImgState('settled'); + }; + + const handleImageError = () => { + // Choosing between 15 placeholder images based on the index's remainder + setImgSrc(`/placeholders/placeholder-${index % 15}.svg`); + setImgState('settled'); + }; + + return ( + <> + {alt} + + {imgState === 'loading' && ( +
    +
    +
    + )} + + ); +}; + +ImagePlaceholder.propTypes = { + alt: PropTypes.string, + altPlaceholder: PropTypes.string, + index: PropTypes.number, + 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..478caef9 --- /dev/null +++ b/src/modules/reusable/components/ImagePlaceholder/styles.css @@ -0,0 +1,15 @@ +.image-placeholder { + background-color: var(--search-color-grey-200); + border-radius: 4px; + padding-top: 150%; + position: relative; + width: 100%; +} + +.image-placeholder .content { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} 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,