fix(esl-carousel): touch behaviour fix - incorrect touch-action targe…

…t is used Co-authored-by: Anna Barmina <abarmina@exadel.com>
exadel-inc · Jul 30, 2024 · 18b1ba1 · 18b1ba1
1 parent 085f977
commit 18b1ba1
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/site/views/examples/carousel/centered-siblings.sample.njk b/site/views/examples/carousel/centered-siblings.sample.njk
@@ -11,7 +11,7 @@ tags: carousel-sample
   </button>
 
   <esl-carousel demo-options-target
-                style="padding-inline: 60px; margin-inline: 0;"
+                style="padding-inline: 60px; margin-inline: 0"
                 esl-carousel-touch
                 type="centered"
                 media="all|@+MD"
@@ -20,10 +20,13 @@ tags: carousel-sample
     <ul esl-carousel-slides>
       {% for i in range(0, 6) -%}
         <li esl-carousel-slide style="max-width: 400px">
-          <div class="card">
+          <div class="card img-container">
             <esl-image mode="cover" lazy
                        data-alt="Alt Text Test"
                        data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
+            <button type="button" class="close close-icon close-remove inverse"
+                    title="Remove" aria-label="Remove"
+                    onclick="this.closest('li').remove()"></button>
           </div>
         </li>
       {%- endfor %}

diff --git a/site/views/examples/carousel/siblings.sample.njk b/site/views/examples/carousel/siblings.sample.njk
@@ -9,7 +9,7 @@ tags: carousel-sample
   </button>
 
   <esl-carousel demo-options-target
-                style="padding-inline: 60px; margin-inline: 0;"
+                style="padding-inline: 60px; margin-inline: 0"
                 esl-carousel-touch
                 count="2"
                 loop="true">
@@ -20,6 +20,9 @@ tags: carousel-sample
             <esl-image mode="cover" lazy
                        data-alt="Alt Text Test"
                        data-src="{{ '/assets/carousel/' + loop.index + '-sm.jpg' | url }}"></esl-image>
+            <button type="button" class="close close-icon close-remove inverse"
+                    title="Remove" aria-label="Remove"
+                    onclick="this.closest('li').remove()"></button>
           </div>
         </li>
       {%- endfor %}

diff --git a/src/modules/esl-carousel/core/esl-carousel.less b/src/modules/esl-carousel/core/esl-carousel.less
@@ -17,12 +17,16 @@ esl-carousel {
   overflow: clip;
   /* stylelint-enable */
 
-  &.esl-carousel-vertical [esl-carousel-slides] {
-    flex-direction: column;
+  &.esl-carousel-vertical {
+    [esl-carousel-slides] {
+      flex-direction: column;
+    }
     touch-action: pan-x;
   }
-  &.esl-carousel-horizontal [esl-carousel-slides] {
-    flex-direction: row;
+  &.esl-carousel-horizontal {
+    [esl-carousel-slides] {
+      flex-direction: row;
+    }
     touch-action: pan-y;
   }
 
@@ -37,7 +41,6 @@ esl-carousel {
 
   &[dragging] [esl-carousel-slides],
   &[animating] [esl-carousel-slides] {
-    touch-action: none;
     user-select: none;
     pointer-events: none;
   }