From d674d82ddbbb7030136935d765b2b8055033be1a Mon Sep 17 00:00:00 2001 From: Yurii Zusik Date: Fri, 3 Jul 2020 10:33:25 +0300 Subject: [PATCH 1/7] fix(Cornnerstone): BCTHEME-52 stretch & no strech carousel images option works --- assets/js/theme/common/carousel.js | 7 +- .../stencil/heroCarousel/_heroCarousel.scss | 120 +++++++++++++++--- templates/components/carousel.html | 4 +- 3 files changed, 104 insertions(+), 27 deletions(-) diff --git a/assets/js/theme/common/carousel.js b/assets/js/theme/common/carousel.js index 5d297f3fec..6ed8b6da6d 100644 --- a/assets/js/theme/common/carousel.js +++ b/assets/js/theme/common/carousel.js @@ -10,12 +10,7 @@ export default function () { // Alternative image styling for IE, which doesn't support objectfit if (typeof document.documentElement.style.objectFit === 'undefined') { $('.heroCarousel-slide').each((index, element) => { - const $container = $(element); - const imgUrl = $container.find('img').data('lazy'); - - if (imgUrl) { - $container.css('backgroundImage', `url(${imgUrl})`).addClass('compat-object-fit'); - } + $(element).addClass('compat-object-fit'); }); } } diff --git a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss index 2113e68f52..e91b4dd1b5 100644 --- a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss +++ b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss @@ -28,8 +28,18 @@ } &.slick-initialized { // 2 - max-height: remCalc(1000); + // max-height: remCalc(1000); + // max-height: remCalc(250px); opacity: 1; + + @include breakpoint("small") { + max-height: remCalc(400px); + } + + @include breakpoint("medium") { + max-height: remCalc(600px); + } + } &:not(.slick-initialized) :not(.heroCarousel-slide--first).heroCarousel-slide { @@ -40,9 +50,17 @@ text-decoration: none; } + .slick-track { + // display: flex; + // justify-content: flex-start; + // align-items: center; + } + .slick-next, .slick-prev { top: 50%; + transform: translateY(-50%); + margin: 0; } .slick-next { @@ -77,39 +95,98 @@ .heroCarousel-slide { position: relative; + // max-height: remCalc(400px); a { text-decoration: none; } + + // @include breakpoint("medium") { + // max-height: remCalc(600px); + // } .heroCarousel-image { - @include breakpoint("medium") { - object-fit: cover; // 1 - max-height: remCalc(600px); - width: 100%; + object-fit: contain; + width: 100%; + height: 100%; + object-position: 50% 0%; + // width: 50px; + // max-height: remCalc(250px); + + @include breakpoint("small") { + // object-fit: cover; // 1 + // max-height: remCalc(600px); + // width: 100%; + // max-height: remCalc(400px); + object-position: 50% 50%; } - } - .heroCarousel-image-wrapper { @include breakpoint("medium") { - max-height: remCalc(600px); + // object-fit: cover; // 1 + // max-height: remCalc(600px); + // width: 100%; + // max-height: remCalc(600px); } + } - &.compat-object-fit { // 1 - background-size: cover; - background-position: 50%; - background-repeat: no-repeat; + &.stretch { + + .heroCarousel-image { + // display: block; + // width: 100vw; + // height: 100vh; + object-fit: cover; + object-position: 50% 50%; + } - &.stretch { - @include breakpoint("large") { // 4 - background-size: 100% 100%; + &.compat-object-fit { + .heroCarousel-image { + width: 100%; } } + } + + + + &.compat-object-fit { // 1 .heroCarousel-image { - opacity: 0; + width: auto; + height: auto; + margin: 0 auto; + } + } + + .heroCarousel-image-wrapper { + // max-height: remCalc(400px); + + // @include breakpoint("medium") { + // max-height: remCalc(600px); + // } + // height: 100%; + + height: remCalc(250px); + display: flex; + justify-content: center; + align-items: flex-start; + + @include breakpoint("small") { + // object-fit: cover; // 1 + // max-height: remCalc(600px); + // width: 100%; + height: remCalc(400px); } + + @include breakpoint("medium") { + // object-fit: cover; // 1 + // max-height: remCalc(600px); + // width: 100%; + height: remCalc(600px); + } + + } + } .heroCarousel-content { @@ -117,17 +194,22 @@ padding: spacing("half") spacing("single") (spacing("double")); text-align: center; - @include breakpoint("medium") { + @include breakpoint("small") { @include carouselOpaqueBackgrounds; + width: remCalc(700px); + padding: spacing("single") * 1.5; + + + width: 70%; background-color: rgba($carousel-bgColor, 0.9); left: 0; + padding: spacing("single"); margin: 0 auto; - padding: spacing("single") * 1.5; position: absolute; right: 0; top: 50%; transform: translateY(-50%); - width: remCalc(700px); + &.heroCarousel-content--empty { background-color: transparent; diff --git a/templates/components/carousel.html b/templates/components/carousel.html index 0563d1739e..b9d7c3ccab 100644 --- a/templates/components/carousel.html +++ b/templates/components/carousel.html @@ -6,12 +6,12 @@ "slidesToScroll": 1, "autoplay": true, "autoplaySpeed": {{carousel.swap_frequency}}, - "lazyLoad": "anticipated" + "lazyLoad": "anticipated", }'> {{#each carousel.slides}}
-
+
{{#if @first}} {{> components/common/responsive-img image=stencil_image From 98cd5760be7f6ae0926c0e638f26687be10c525a Mon Sep 17 00:00:00 2001 From: Yurii Zusik Date: Fri, 3 Jul 2020 10:48:01 +0300 Subject: [PATCH 2/7] fix(Cornnerstone): BCTHEME-52 height depends on width for aspect ratio of images 16x9 --- .../stencil/heroCarousel/_heroCarousel.scss | 56 ++----------------- 1 file changed, 5 insertions(+), 51 deletions(-) diff --git a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss index e91b4dd1b5..647dfe276e 100644 --- a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss +++ b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss @@ -28,8 +28,6 @@ } &.slick-initialized { // 2 - // max-height: remCalc(1000); - // max-height: remCalc(250px); opacity: 1; @include breakpoint("small") { @@ -50,12 +48,6 @@ text-decoration: none; } - .slick-track { - // display: flex; - // justify-content: flex-start; - // align-items: center; - } - .slick-next, .slick-prev { top: 50%; @@ -95,46 +87,24 @@ .heroCarousel-slide { position: relative; - // max-height: remCalc(400px); a { text-decoration: none; - } - - // @include breakpoint("medium") { - // max-height: remCalc(600px); - // } + } .heroCarousel-image { object-fit: contain; width: 100%; height: 100%; object-position: 50% 0%; - // width: 50px; - // max-height: remCalc(250px); @include breakpoint("small") { - // object-fit: cover; // 1 - // max-height: remCalc(600px); - // width: 100%; - // max-height: remCalc(400px); object-position: 50% 50%; } - - @include breakpoint("medium") { - // object-fit: cover; // 1 - // max-height: remCalc(600px); - // width: 100%; - // max-height: remCalc(600px); - } - } &.stretch { .heroCarousel-image { - // display: block; - // width: 100vw; - // height: 100vh; object-fit: cover; object-position: 50% 50%; } @@ -146,8 +116,6 @@ } } - - &.compat-object-fit { // 1 .heroCarousel-image { @@ -158,35 +126,22 @@ } .heroCarousel-image-wrapper { - // max-height: remCalc(400px); - - // @include breakpoint("medium") { - // max-height: remCalc(600px); - // } - // height: 100%; height: remCalc(250px); display: flex; justify-content: center; align-items: flex-start; + height: 56.25vw; + @include breakpoint("small") { - // object-fit: cover; // 1 - // max-height: remCalc(600px); - // width: 100%; - height: remCalc(400px); + max-height: remCalc(400px); } @include breakpoint("medium") { - // object-fit: cover; // 1 - // max-height: remCalc(600px); - // width: 100%; - height: remCalc(600px); + max-height: remCalc(600px); } - - } - } .heroCarousel-content { @@ -209,7 +164,6 @@ right: 0; top: 50%; transform: translateY(-50%); - &.heroCarousel-content--empty { background-color: transparent; From 489fdcddc02a62327838564ff9f90068b05e0aab Mon Sep 17 00:00:00 2001 From: Yurii Zusik Date: Fri, 3 Jul 2020 15:14:01 +0300 Subject: [PATCH 3/7] fix(Cornnerstone): BCTHEME-52 script for vertical images --- assets/js/theme/common/carousel.js | 39 ++++++++++++++++--- .../stencil/heroCarousel/_heroCarousel.scss | 22 +++++++++++ 2 files changed, 56 insertions(+), 5 deletions(-) diff --git a/assets/js/theme/common/carousel.js b/assets/js/theme/common/carousel.js index 6ed8b6da6d..f7464b0b4f 100644 --- a/assets/js/theme/common/carousel.js +++ b/assets/js/theme/common/carousel.js @@ -2,14 +2,43 @@ import 'slick-carousel'; export default function () { const $carousel = $('[data-slick]'); - if ($carousel.length) { - const multipleSlides = $carousel[0].childElementCount > 1; - $carousel.slick({ dots: multipleSlides }); - } + + if ($carousel.length === 0) return; + + const multipleSlides = $carousel[0].childElementCount > 1; + $carousel.slick({ dots: multipleSlides }); + + const $slidesNodes = $('.heroCarousel-slide'); + + $slidesNodes.each((index, element) => { + const $element = $(element); + const isContentBlock = !!$element.find('.heroCarousel-content').length; + + if (isContentBlock) return true; + + const $image = $element.find('.heroCarousel-image-wrapper img'); + $('') // Make in memory copy of image to avoid css issues + .attr('src', $($image).attr('src')) + .load(function getImageSizes() { + const imageRealWidth = this.width; // Note: $(this).width() will not + const imageRealHeight = this.height; // work for in memory images. + + const imageAspectRatio = imageRealHeight / imageRealWidth; + + const isImageSquare = imageAspectRatio > 0.8 && imageAspectRatio <= 1.2; + const isImageVertical = imageAspectRatio > 1.2; + + const slideClass = isImageSquare && 'is-square-image-type' + || isImageVertical && 'is-vertical-image-type' + || ''; + + $element.addClass(slideClass); + }); + }); // Alternative image styling for IE, which doesn't support objectfit if (typeof document.documentElement.style.objectFit === 'undefined') { - $('.heroCarousel-slide').each((index, element) => { + $slidesNodes.each((index, element) => { $(element).addClass('compat-object-fit'); }); } diff --git a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss index 647dfe276e..56853cd30a 100644 --- a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss +++ b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss @@ -142,6 +142,28 @@ max-height: remCalc(600px); } } + + &.is-square-image-type { + + .heroCarousel-image-wrapper { + height: 100vw; + + @include breakpoint("small") { + height: 56.25vw; + } + } + } + + &.is-vertical-image-type { + + .heroCarousel-image-wrapper { + height: 110vw; + + @include breakpoint("small") { + height: 56.25vw; + } + } + } } .heroCarousel-content { From a6b573a3b77b868e8faf12f6931fd7903c0e2e24 Mon Sep 17 00:00:00 2001 From: Yurii Zusik Date: Fri, 3 Jul 2020 15:48:41 +0300 Subject: [PATCH 4/7] fix(Cornnerstone): BCTHEME-52 carousel.js updated in context of ie11 + _heroCarousel.scss cleared --- assets/js/theme/common/carousel.js | 2 +- .../stencil/heroCarousel/_heroCarousel.scss | 18 ++++++++---------- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/assets/js/theme/common/carousel.js b/assets/js/theme/common/carousel.js index f7464b0b4f..99323624bc 100644 --- a/assets/js/theme/common/carousel.js +++ b/assets/js/theme/common/carousel.js @@ -37,7 +37,7 @@ export default function () { }); // Alternative image styling for IE, which doesn't support objectfit - if (typeof document.documentElement.style.objectFit === 'undefined') { + if (document.documentElement.style.objectFit === undefined) { $slidesNodes.each((index, element) => { $(element).addClass('compat-object-fit'); }); diff --git a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss index 56853cd30a..17bc60c15a 100644 --- a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss +++ b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss @@ -9,10 +9,6 @@ // object-fit and instead copy the image src to a the background-image of the // wrapper div and add the compat-object-fit class. // -// 2. Visually overrides the top margin for '.body' defined in _body.scss. -// The '.body' top margin creates space between the header and page content. -// However, on the homepage, we want the carousel to be flush with the header. -// // 3. Allows image to scale on large screens while preventing the top and bottom // from becoming cut off. // ----------------------------------------------------------------------------- @@ -22,14 +18,16 @@ min-width: 100%; margin-bottom: (spacing("double") + spacing("single")); margin-top: -(spacing("single")); // 3 + overflow: hidden; @include breakpoint("medium") { margin-top: -(spacing("single") + spacing("base")); // 3 } - &.slick-initialized { // 2 + &.slick-initialized { opacity: 1; - + max-height: 100vh; + @include breakpoint("small") { max-height: remCalc(400px); } @@ -109,19 +107,19 @@ object-position: 50% 50%; } - &.compat-object-fit { + &.compat-object-fit { // 1 .heroCarousel-image { width: 100%; + height: 100%; } } } &.compat-object-fit { // 1 - + overflow: hidden; + .heroCarousel-image { width: auto; - height: auto; - margin: 0 auto; } } From abd0a6c3ed9e12fe547346e7266e712ef233bec3 Mon Sep 17 00:00:00 2001 From: Yurii Zusik Date: Mon, 6 Jul 2020 12:49:14 +0300 Subject: [PATCH 5/7] BCTHEME-52 - Allowing carousel image to stretch distorts image (unnecessary spaces in scss disabled) --- .../components/stencil/heroCarousel/_heroCarousel.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss index 17bc60c15a..65cba9a04b 100644 --- a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss +++ b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss @@ -87,7 +87,7 @@ position: relative; a { text-decoration: none; - } + } .heroCarousel-image { object-fit: contain; @@ -101,7 +101,6 @@ } &.stretch { - .heroCarousel-image { object-fit: cover; object-position: 50% 50%; @@ -124,12 +123,10 @@ } .heroCarousel-image-wrapper { - height: remCalc(250px); display: flex; justify-content: center; align-items: flex-start; - height: 56.25vw; @include breakpoint("small") { @@ -173,8 +170,6 @@ @include carouselOpaqueBackgrounds; width: remCalc(700px); padding: spacing("single") * 1.5; - - width: 70%; background-color: rgba($carousel-bgColor, 0.9); left: 0; From 78390b2493a6b360334370b0a7ef8b44da6a333c Mon Sep 17 00:00:00 2001 From: Yurii Zusik Date: Mon, 6 Jul 2020 14:04:56 +0300 Subject: [PATCH 6/7] BCTHEME-52 - Allowing carousel image to stretch distorts image (algo for showing carousel after analyzing size of images) --- assets/js/theme/common/carousel.js | 19 ++++++++++++++++--- .../stencil/heroCarousel/_heroCarousel.scss | 6 +++++- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/assets/js/theme/common/carousel.js b/assets/js/theme/common/carousel.js index 99323624bc..be09ea3ebd 100644 --- a/assets/js/theme/common/carousel.js +++ b/assets/js/theme/common/carousel.js @@ -1,20 +1,32 @@ import 'slick-carousel'; +const showCarouselIfSlidesAnalizedSetup = ($carousel) => { + const analizedSlides = []; + return ($slides) => ($slide) => { + analizedSlides.push($slide); + return $slides.length === analizedSlides.length && $carousel.addClass('is-visible'); + }; +}; + export default function () { const $carousel = $('[data-slick]'); if ($carousel.length === 0) return; - const multipleSlides = $carousel[0].childElementCount > 1; - $carousel.slick({ dots: multipleSlides }); + $carousel.slick({ dots: $carousel[0].childElementCount > 1 }); const $slidesNodes = $('.heroCarousel-slide'); + const showCarouselIfSlidesAnalized = showCarouselIfSlidesAnalizedSetup($carousel)($slidesNodes); + $slidesNodes.each((index, element) => { const $element = $(element); const isContentBlock = !!$element.find('.heroCarousel-content').length; - if (isContentBlock) return true; + if (isContentBlock) { + showCarouselIfSlidesAnalized($element); + return true; + } const $image = $element.find('.heroCarousel-image-wrapper img'); $('') // Make in memory copy of image to avoid css issues @@ -33,6 +45,7 @@ export default function () { || ''; $element.addClass(slideClass); + showCarouselIfSlidesAnalized($element); }); }); diff --git a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss index 65cba9a04b..6c5f5c237e 100644 --- a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss +++ b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss @@ -19,6 +19,11 @@ margin-bottom: (spacing("double") + spacing("single")); margin-top: -(spacing("single")); // 3 overflow: hidden; + visibility: hidden; + + &.is-visible { + visibility: visible; + } @include breakpoint("medium") { margin-top: -(spacing("single") + spacing("base")); // 3 @@ -35,7 +40,6 @@ @include breakpoint("medium") { max-height: remCalc(600px); } - } &:not(.slick-initialized) :not(.heroCarousel-slide--first).heroCarousel-slide { From cad679c5354f09e1ebcdeac5c8e58da59d5b99ba Mon Sep 17 00:00:00 2001 From: Yurii Zusik Date: Mon, 6 Jul 2020 14:43:41 +0300 Subject: [PATCH 7/7] fix(Cornnerstone): BCTHEME-52 - Allowing carousel image to stretch distorts image (switch implementation) --- assets/js/theme/common/carousel.js | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/assets/js/theme/common/carousel.js b/assets/js/theme/common/carousel.js index be09ea3ebd..077ceed7bb 100644 --- a/assets/js/theme/common/carousel.js +++ b/assets/js/theme/common/carousel.js @@ -4,7 +4,8 @@ const showCarouselIfSlidesAnalizedSetup = ($carousel) => { const analizedSlides = []; return ($slides) => ($slide) => { analizedSlides.push($slide); - return $slides.length === analizedSlides.length && $carousel.addClass('is-visible'); + return $slides.length === analizedSlides.length + && $carousel.addClass('is-visible'); }; }; @@ -29,22 +30,25 @@ export default function () { } const $image = $element.find('.heroCarousel-image-wrapper img'); - $('') // Make in memory copy of image to avoid css issues + $('') .attr('src', $($image).attr('src')) .load(function getImageSizes() { - const imageRealWidth = this.width; // Note: $(this).width() will not - const imageRealHeight = this.height; // work for in memory images. + const imageRealWidth = this.width; + const imageRealHeight = this.height; const imageAspectRatio = imageRealHeight / imageRealWidth; - const isImageSquare = imageAspectRatio > 0.8 && imageAspectRatio <= 1.2; - const isImageVertical = imageAspectRatio > 1.2; + $element.addClass(() => { + switch (true) { + case imageAspectRatio > 0.8 && imageAspectRatio <= 1.2: + return 'is-square-image-type'; + case imageAspectRatio > 1.2: + return 'is-vertical-image-type'; + default: + return ''; + } + }); - const slideClass = isImageSquare && 'is-square-image-type' - || isImageVertical && 'is-vertical-image-type' - || ''; - - $element.addClass(slideClass); showCarouselIfSlidesAnalized($element); }); });