From db63446794418b0b641ad32f181df269b6821033 Mon Sep 17 00:00:00 2001 From: Mel Wong <46764557+melwong-jcc@users.noreply.github.com> Date: Fri, 12 Jan 2024 15:49:51 -0800 Subject: [PATCH] TCI-1129: fix support for multiple card sections (#869) --- source/_patterns/02-molecules/card/card.js | 49 ------------------- source/_patterns/03-organisms/cards/cards.js | 43 ++++++++++++++++ ...ds~media-background-with-color-overlay.yml | 8 +-- .../cards/cards~media-two-75-25.yml | 25 ++++++++++ 4 files changed, 72 insertions(+), 53 deletions(-) delete mode 100644 source/_patterns/02-molecules/card/card.js create mode 100644 source/_patterns/03-organisms/cards/cards.js create mode 100644 source/_patterns/03-organisms/cards/cards~media-two-75-25.yml diff --git a/source/_patterns/02-molecules/card/card.js b/source/_patterns/02-molecules/card/card.js deleted file mode 100644 index b22669374..000000000 --- a/source/_patterns/02-molecules/card/card.js +++ /dev/null @@ -1,49 +0,0 @@ -/* - * Consistent image height for mixed card widths. - */ -function adjustMixedWidthMediaHeight(medias) { - if (medias.length > 0) { - // Reset media height to default. - medias.forEach(function (media) { - let image = media.getElementsByTagName("img"); - media.removeAttribute("style"); - image[0].removeAttribute("style"); - }); - - // Determine max height from smallest media found. - let maxHeight = medias[0].offsetHeight; - medias.forEach(function (media) { - maxHeight = Math.min(maxHeight, media.offsetHeight); - }); - - // Adjust all container and image heights to max allowed. - medias.forEach(function (media) { - let mediaHeight = maxHeight / 16 + "rem"; - let image = media.getElementsByTagName("img"); - media.style.height = mediaHeight; - image[0].setAttribute("style", "height: " + mediaHeight + ";"); - }); - } -} - -document.addEventListener("DOMContentLoaded", function () { - // Detect any mixed card widths. - const cards = Array.from( - document.querySelectorAll(".jcc-cards--2-60-40-cols, .jcc-cards--2-75-25-cols") - ); - - if (cards) { - cards.forEach(function (cardset) { - // If media exist. - let medias = Array.from(cardset.getElementsByClassName("usa-card__media")); - - if (medias) { - adjustMixedWidthMediaHeight(medias); - - window.onresize = function () { - adjustMixedWidthMediaHeight(medias); - }; - } - }); - } -}); diff --git a/source/_patterns/03-organisms/cards/cards.js b/source/_patterns/03-organisms/cards/cards.js new file mode 100644 index 000000000..4abe6241e --- /dev/null +++ b/source/_patterns/03-organisms/cards/cards.js @@ -0,0 +1,43 @@ +/* + * Function to display consistent image height for mixed card widths. + */ +function setConsistentMediaHeight(cards) { + cards.forEach(function(cardset) { + const medias = Array.from(cardset.getElementsByClassName("usa-card__media")); + + if (medias.length > 0) { + // Reset media height to default. + medias.forEach(function(media) { + let image = media.getElementsByTagName("img"); + media.removeAttribute("style"); + image[0].removeAttribute("style"); + }); + + // Determine max height from smallest media found. + let maxHeight = medias[0].offsetHeight; + medias.forEach(function(media) { + maxHeight = Math.min(maxHeight, media.offsetHeight); + }); + + // Adjust all container and image heights to max allowed. + medias.forEach(function(media) { + let mediaHeight = maxHeight / 16 + "rem"; + let image = media.getElementsByTagName("img"); + media.style.height = mediaHeight; + image[0].setAttribute("style", "height: " + mediaHeight + ";"); + }); + } + }); +} + +document.addEventListener("DOMContentLoaded", function() { + // Detect any mixed card widths. + const cards = Array.from(document.querySelectorAll(".jcc-cards--2-60-40-cols, .jcc-cards--2-75-25-cols")); + + if (cards) { + setConsistentMediaHeight(cards); + window.onresize = function() { + setConsistentMediaHeight(cards); + }; + } +}); diff --git a/source/_patterns/03-organisms/cards/cards~media-background-with-color-overlay.yml b/source/_patterns/03-organisms/cards/cards~media-background-with-color-overlay.yml index 1dac0f5c5..33da259f5 100644 --- a/source/_patterns/03-organisms/cards/cards~media-background-with-color-overlay.yml +++ b/source/_patterns/03-organisms/cards/cards~media-background-with-color-overlay.yml @@ -9,7 +9,7 @@ cards: title: "Posuere et ornare" body: "
Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.
" media: - src: "https://placeimg.com/350/250/nature" + src: "https://source.unsplash.com/random/350x250/?nature" alt: "Cupidatat non proident, sunt in culpa qui" link: url: "#" @@ -19,7 +19,7 @@ cards: title: "Posuere et ornare" body: "In torquent consequat quam vulputate himenaeos semper ut aliquam at, iaculis ac platea laoreet ridiculus mattis sagittis volutpat hendrerit, vehicula orci dictum dictumst nunc scelerisque lacus auctor.
" media: - src: "https://placeimg.com/350/250/animals" + src: "https://source.unsplash.com/random/350x250/?animals" alt: "Cupidatat non proident, sunt in culpa qui" link: url: "#" @@ -30,7 +30,7 @@ cards: title: "Visual Hover" body: "The selected overlay color will appear 90% opaque on hover. Habitasse nec dui adipiscing massa magna mollis morbi netus malesuada, odio varius id eu integer felis tellus at feugiat.
" media: - src: "https://placeimg.com/350/250/people" + src: "https://source.unsplash.com/random/350x250/?people" alt: "Cupidatat non proident, sunt in culpa qui" link: url: "#" @@ -40,7 +40,7 @@ cards: title: "Posuere et ornare" body: "Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.
" media: - src: "https://placeimg.com/350/250/tech" + src: "https://source.unsplash.com/random/350x250/?tech" alt: "Cupidatat non proident, sunt in culpa qui" link: url: "#" diff --git a/source/_patterns/03-organisms/cards/cards~media-two-75-25.yml b/source/_patterns/03-organisms/cards/cards~media-two-75-25.yml new file mode 100644 index 000000000..96fd92b44 --- /dev/null +++ b/source/_patterns/03-organisms/cards/cards~media-two-75-25.yml @@ -0,0 +1,25 @@ +cards: + heading: + title: "Cards" + lead: "Ipsum velit bibendum class id sit justo, at fermentum suscipit rhoncus hac sociis blandit, ante tincidunt imperdiet himenaeos felis.
" + num_cols: "2-75-25" + items: + - style: "media-top" + title: "Posuere et ornare" + body: "Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.
" + media: + src: "https://source.unsplash.com/random/350x250/?people" + alt: "green" + link: + url: "#" + text: "Luctus nunc quam" + - style: "media-top" + title: "Posuere et ornare" + body: "Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.
" + media: + src: "https://source.unsplash.com/random/350x250/?face" + alt: "green" + link: + url: "#" + text: "Luctus nunc quam" +