diff --git a/public/placeholders/placeholder-0.svg b/public/placeholders/placeholder-0.svg new file mode 100644 index 00000000..7e7d3bc5 --- /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..31bb3f19 --- /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..fab8ee94 --- /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..0e227890 --- /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..970dfe60 --- /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..b42e995e --- /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..d5005b04 --- /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..5b3a7f0f --- /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..a0372e88 --- /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..802e5346 --- /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..24f00a5a --- /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..72d645ac --- /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..21a329ec --- /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..97442693 --- /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..28c10fbc --- /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 9c7334a1..a5ec6599 100644 --- a/src/modules/browse/components/ShelfBrowse/index.js +++ b/src/modules/browse/components/ShelfBrowse/index.js @@ -51,6 +51,7 @@ const ShelfBrowse = () => { const fetchShelfData = useCallback(async () => { setShelfData('loading'); try { + // `https://browse.workshop.search.lib.umich.edu/carousel?query=${callNumber}` const response = await fetch(`https://search.lib.umich.edu/catalog/browse/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 1a3cf1d4..5c76bd9a 100644 --- a/src/modules/browse/components/ShelfBrowseCarousel/index.js +++ b/src/modules/browse/components/ShelfBrowseCarousel/index.js @@ -1,7 +1,20 @@ import './styles.css'; +/* Import { Anchor, Icon, ImagePlaceholder } from '../../../reusable'; */ import { Anchor, Icon } from '../../../reusable'; import React, { useEffect, useState } from 'react'; +/* +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); @@ -104,14 +117,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 978248a5..2b0722f5 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 Tab from './components/Tab'; import TabPanel from './components/TabPanel'; import Tabs from './components/Tabs'; @@ -26,6 +27,7 @@ export { ExpandableProvider, H1, Icon, + ImagePlaceholder, Tab, Tabs, TabPanel,