CIF-2706: Improve Carousel to support margins and other layout gaps (#830)

* improve carousel frontend logic

Instead of navigating based on the fixed width of the cards, the transitions are now between
the left upper corners of them. This does also not require to calculate the full width of the
content anymore as a large horizontal rail is given by css

* support for rtl in the carousel

* add tests for rtl, fixed contentWidth calculation

* better handle fractional scrolling

* use only absolute max-widths for demo components

* imporve responsive styling of the carousel in the examples

* adapt ui tests to new responsive styling of the carousel

Author: buuhuu

examples/ui.apps/src/main/content/jcr_root/apps/cif-components-examples/clientlibs/venia-theme/cif-demo.css

@@ -14,20 +14,46 @@
  ~ limitations under the License.
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 .cif-demo .productteaser {
-    width: 50%;
+    max-width: 360px;
     margin: 0 auto;
 }
 
 .cif-demo .productteaser .item__image {
     border: none !important;
 }
 
-.cif-demo .productcarousel__container {
-    max-width: 50%;
+.cif-demo .productcarousel__container,
+.cif-demo .carousel__container {
+    /* 3x the item width, 4 items */
+    max-width: 720px;
+    width: 100%;
 }
 
-.cif-demo .carousel__container {
-    max-width: 50%;
+/*
+ * there is a layout gap for 32px left and right of the container
+ * and for a viewport >= 1024px there is the navigation of 280px width
+ */
+
+/* 720 + 64 + 280 */
+@media screen and (max-width:1064px) {
+    .cif-demo .productcarousel__container {
+        max-width: 480px;
+    }
+}
+
+/* 480 + 64 */
+@media screen and (max-width:544px) {
+    .cif-demo .productcarousel__container {
+        max-width: 240px;
+    }
+}
+
+/* undo the styles from the core components */
+
+@media screen and (min-width:790px) {
+    .cif-demo .productcarousel__container {
+        width: 100%;
+    }
 }
 
 .cif-demo .searchBar__root {

ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/clientlibs/css.txt

@@ -1,3 +1,4 @@
 #base=css
 
-carousel.css
+carousel.css
+rtl.css

ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/clientlibs/css/carousel.css

@@ -59,6 +59,16 @@
 
 .carousel__cardscontainer {
     margin: auto;
+    /*
+     * the cardscontainer is within the cardsroot with overflow hidden.
+     * in the default style with a card width of 240px the 12000px width
+     * give enough space for 41 cards, this should be sufficient for all
+     * practical cases.
+     */
+    width: 12000px;
+    transition-property: margin-left, margin-right;
+    transition-duration: 300ms;
+    transition-timing-function: linear;
 }
 
 .carousel__cardsroot {

ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/clientlibs/css/rtl.css

@@ -0,0 +1,35 @@
+/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ ~ Copyright 2022 Adobe
+ ~
+ ~ Licensed under the Apache License, Version 2.0 (the "License");
+ ~ you may not use this file except in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+
+[dir='rtl'] .carousel__container {
+    direction: rtl;
+}
+
+[dir='rtl'] .carousel__btn--prev {
+    -moz-transform: rotate(225deg);
+    -webkit-transform: rotate(225deg);
+    transform: rotate(225deg);
+    right: 0;
+    left: unset;
+}
+
+[dir='rtl'] .carousel__btn--next {
+    -moz-transform: rotate(135deg);
+    -webkit-transform: rotate(135deg);
+    transform: rotate(135deg);
+    left: 0;
+    right: unset;
+}

ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/carousel/v1/carousel/clientlibs/js/carousel.js

@@ -20,26 +20,27 @@
  */
 class Carousel {
     constructor(rootElement, selectors = Carousel.selectors) {
-        this._cardsContainer = rootElement.querySelector(selectors.container);
-        if (!this._cardsContainer) {
+        const cardsContainer = rootElement.querySelector(selectors.container);
+        if (!cardsContainer) {
             // the carousel is empty
             return;
         }
 
+        this._cardsContainer = cardsContainer;
+
         // Re-calculate carousel state when the window size changes
         this._calculate = this._calculate.bind(this);
         window.addEventListener('resize', this._calculate);
 
-        this._speed = 300;
-        this._delay = 0;
-        this._effect = 'linear';
-        this._carousel_root = rootElement.querySelector(selectors.root);
+        this._currentPos = 0;
+        this._currentOffset = 0;
         this._currentRootWidth = 0;
+        this._carousel_root = rootElement.querySelector(selectors.root);
         this._carousel_parent = rootElement.querySelector(selectors.parent);
-        this._cards = this._cardsContainer.querySelectorAll(selectors.card);
+        this._cards = cardsContainer.querySelectorAll(selectors.card);
         this._btnPrev = rootElement.querySelector(selectors.btnPrev);
         this._btnNext = rootElement.querySelector(selectors.btnNext);
-        this._currentPos = 0;
+        this._direction = getComputedStyle(cardsContainer).direction;
 
         this._calculate();
 
@@ -49,80 +50,122 @@ class Carousel {
 
     _calculate() {
         // Only re-calculate when one of the screen size breakpoints changes the size of the component
-        if (this._carousel_root.offsetWidth == this._currentRootWidth) {
+        if (this._cards.length === 0 || this._carousel_root.offsetWidth == this._currentRootWidth) {
             return;
         }
 
-        this._minPos = this._carousel_parent.offsetWidth - this._cards.length * this._cards[0].offsetWidth;
-        this._cardsContainer.style.width = this._cards[0].offsetWidth * this._cards.length + 'px';
-        this._maxPosIndex =
-            (this._cardsContainer.offsetWidth - this._carousel_parent.offsetWidth) / this._cards[0].offsetWidth;
-
-        if (this._minPos >= 0) {
+        const lastCard = this._cards[this._cards.length - 1];
+        const lastCardBB = lastCard.getBoundingClientRect();
+        const lastCardStyle = getComputedStyle(lastCard);
+        const firstCard = this._cards[0];
+        const firstCardBB = firstCard.getBoundingClientRect();
+        const firstCardStyle = getComputedStyle(firstCard);
+        const contentWidth =
+            this._direction === 'ltr'
+                ? lastCardBB.right +
+                  parseInt(lastCardStyle.marginRight) -
+                  (firstCardBB.left + parseInt(firstCardStyle.marginLeft))
+                : firstCardBB.right +
+                  parseInt(firstCardStyle.marginRight) -
+                  (lastCardBB.left + parseInt(lastCardStyle.marginLeft));
+
+        if (this._carousel_parent.offsetWidth >= contentWidth) {
             // Hide buttons if all fit on the screen
             this._btnNext.style.display = 'none';
             this._btnPrev.style.display = 'none';
         } else {
             this._btnNext.style.display = 'block';
             this._btnPrev.style.display = 'block';
-            this._btnPrev.disabled = true;
         }
 
         // Reset carousel to first item
-        this._goToCard(0, 'reset');
+        this._goToCard(0);
         this._currentRootWidth = this._carousel_root.offsetWidth;
     }
 
     // click event handler for Next Button
     _goToNextCard() {
         if (this._btnNext.disabled === false) {
-            var newCurrentPos = 0;
-            newCurrentPos = this._currentPos + 1;
-            this._goToCard(newCurrentPos, 'next');
+            this._goToCard(this._currentPos + 1);
         }
     }
 
     // Click event handler for Prev Button
     _goToPrevCard() {
         if (this._btnPrev.disabled === false) {
-            var newCurrentPos = 0;
-            newCurrentPos = this._currentPos - 1;
-            this._goToCard(newCurrentPos, 'prev');
+            this._goToCard(this._currentPos - 1);
         }
     }
 
     // create card and transition
-    _goToCard(n, dir) {
-        var cardwidth = this._cards[0].offsetWidth,
-            currentPos = Math.max(-cardwidth * this._currentPos, this._minPos),
-            scrollWidth = cardwidth,
-            newPos;
-
-        if (dir === 'next') {
-            newPos = Math.max(this._minPos, currentPos - scrollWidth);
-        } else if (dir === 'prev') {
-            newPos = Math.min(0, currentPos + scrollWidth);
-        } else {
-            newPos = 0;
+    _goToCard(nextPos) {
+        if (nextPos < 0) {
+            // index out of bounds
+            return;
+        }
+
+        const lastCard = this._cards[this._cards.length - 1];
+        const lastCardBB = lastCard.getBoundingClientRect();
+        const carouselParentBB = this._carousel_parent.getBoundingClientRect();
+
+        if (
+            nextPos > this._currentPos &&
+            ((this._direction === 'ltr' && lastCardBB.right <= carouselParentBB.right) ||
+                (this._direction === 'rtl' && lastCardBB.left >= carouselParentBB.left))
+        ) {
+            return;
         }
 
-        this._cardsContainer.style.transition =
-            'margin-left ' + this._speed + 'ms' + ' ' + this._effect + ' ' + this._delay + 'ms';
-        this._cardsContainer.style.marginLeft = newPos == 0 && this._minPos >= 0 ? 'auto' : newPos + 'px';
-        this._currentPos = n;
+        const firstCard = this._cards[0];
+        const firstCardBB = firstCard.getBoundingClientRect();
+        const currentCard = this._cards[this._currentPos];
+        const currentCardBB = currentCard.getBoundingClientRect();
+        const targetCard = this._cards[nextPos];
+        const targetCardBB = targetCard.getBoundingClientRect();
+
+        // difference that needs to be added on the margin-left
+        let offsetDiff;
+        let newOffset;
+        let diffCarouselToLast;
+        let diffCarouselToFirst;
+
+        if (this._direction === 'rtl') {
+            offsetDiff = currentCardBB.right - targetCardBB.right;
+            diffCarouselToLast = carouselParentBB.left - lastCardBB.left;
+            diffCarouselToFirst = carouselParentBB.right - firstCardBB.right;
+        } else {
+            offsetDiff = currentCardBB.left - targetCardBB.left;
+            diffCarouselToLast = carouselParentBB.right - lastCardBB.right;
+            diffCarouselToFirst = carouselParentBB.left - firstCardBB.left;
+        }
 
-        this._btnNext.disabled = false;
-        this._btnPrev.disabled = false;
+        if (nextPos > this._currentPos && Math.abs(diffCarouselToLast) < Math.abs(offsetDiff)) {
+            // navigating forward to the last card (fractional)
+            offsetDiff = diffCarouselToLast;
+        } else if (nextPos < this._currentPos && Math.abs(diffCarouselToFirst) < Math.abs(offsetDiff)) {
+            // navigating backward to the second-last card (fractional)
+            offsetDiff = diffCarouselToFirst;
+        }
 
-        if (this._currentPos >= this._maxPosIndex) {
-            this._btnNext.disabled = true;
-            this._btnPrev.disabled = false;
+        if (this._direction === 'ltr') {
+            newOffset = this._currentOffset + offsetDiff;
+            this._cardsContainer.style.marginLeft = newOffset + 'px';
+        } else {
+            newOffset = this._currentOffset - offsetDiff;
+            this._cardsContainer.style.marginRight = newOffset + 'px';
         }
 
-        if (this._currentPos <= 0) {
-            this._btnPrev.disabled = true;
-            this._btnNext.disabled = false;
+        this._currentPos = nextPos;
+        this._currentOffset = newOffset;
+
+        // disable _btnNext when the last card is in the carousel parent
+        if (this._direction === 'ltr') {
+            this._btnNext.disabled = lastCardBB.right <= carouselParentBB.right - offsetDiff;
+        } else {
+            this._btnNext.disabled = lastCardBB.left >= carouselParentBB.left - offsetDiff;
         }
+        // disable _btnPrev when the we are at the first card
+        this._btnPrev.disabled = this._currentPos == 0;
     }
 }
 

ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productcarousel/v1/productcarousel/clientlibs/css.txt

@@ -1,3 +1,4 @@
 #base=css
 
-productcarousel.css
+productcarousel.css
+rtl.css

ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productcarousel/v1/productcarousel/clientlibs/css/productcarousel.css

@@ -65,6 +65,10 @@
 
 .productcarousel__cardscontainer {
     margin: auto;
+    width: 12000px;
+    transition-property: margin-left, margin-right;
+    transition-duration: 300ms;
+    transition-timing-function: linear;
 }
 
 .productcarousel__container {

ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/productcarousel/v1/productcarousel/clientlibs/css/rtl.css

@@ -0,0 +1,35 @@
+/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ ~ Copyright 2022 Adobe
+ ~
+ ~ Licensed under the Apache License, Version 2.0 (the "License");
+ ~ you may not use this file except in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+
+[dir='rtl'] .productcarousel__container {
+    direction: rtl;
+}
+
+[dir='rtl'] .productcarousel__btn--prev {
+    -moz-transform: rotate(225deg);
+    -webkit-transform: rotate(225deg);
+    transform: rotate(225deg);
+    right: 0;
+    left: unset;
+}
+
+[dir='rtl'] .productcarousel__btn--next {
+    -moz-transform: rotate(135deg);
+    -webkit-transform: rotate(135deg);
+    transform: rotate(135deg);
+    left: 0;
+    right: unset;
+}