style(esl-carousel): apply fixes from code review

exadel-inc · Jan 24, 2024 · 02e3777 · 02e3777
1 parent e265447
commit 02e3777
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 7 deletions.
diff --git a/site/views/draft/multi-carousel.njk b/site/views/draft/multi-carousel.njk
@@ -177,7 +177,7 @@ icon: examples/carousel.svg
     <button type="button" esl-carousel-nav="group:prev"></button>
 
     <esl-carousel id="first-carousel"
-                  esl-carousel-touch="+@XS => swipe | +@SM => drag"
+                  esl-carousel-touch="@XS => swipe | @+SM => drag"
                   esl-carousel-relate-to="#second-carousel"
                   media="@XL|@LG|@MD|@SM|@XS"
                   count="6|5|4|3|1">

diff --git a/site/views/examples/carousel.njk b/site/views/examples/carousel.njk
@@ -54,7 +54,7 @@ icon: examples/carousel.svg
         <span class="sr-only">Previous Slide</span>
      </button>
 
-     <esl-carousel esl-carousel-touch="@XS => drag | none"
+     <esl-carousel esl-carousel-touch="none | @XS => drag"
                    media="@XS|@SM|@MD|@LG|@XL"
                    count="2|3|4|5|6"
                    loop="true">

diff --git a/src/modules/esl-carousel/README.md b/src/modules/esl-carousel/README.md
@@ -42,5 +42,5 @@ By default, `drag` event is specified, but there is possibility to declare other
 
 #### Use cases
 ```html
-<esl-carousel esl-carousel-touch="+@XS => swipe | +@SM => drag | +LG => none" esl-carousel-swipe-mode="slide" />
+<esl-carousel esl-carousel-touch="swipe | @+SM => drag | @+LG => none" esl-carousel-swipe-mode="slide" />
 ```
diff --git a/src/modules/esl-carousel/plugin/touch/esl-carousel.touch.mixin.ts b/src/modules/esl-carousel/plugin/touch/esl-carousel.touch.mixin.ts
@@ -15,7 +15,7 @@ import type {Point} from '../../../esl-utils/dom';
 
 export type TouchType = 'drag' | 'swipe' | 'none';
 
-const touchParser = (value: string): TouchType => {
+const toTouchType = (value: string): TouchType => {
   value = value.toLowerCase();
   if (value === ESLCarouselTouchMixin.DRAG_TYPE || value === ESLCarouselTouchMixin.SWIPE_TYPE) return value;
   return 'none';
@@ -49,7 +49,7 @@ export class ESLCarouselTouchMixin extends ESLCarouselPlugin {
   /** @returns rule {@link ESLMediaRuleList} for touch types */
   @memoize()
   public get typeRule(): ESLMediaRuleList<TouchType> {
-    return ESLMediaRuleList.parse(this.type, touchParser);
+    return ESLMediaRuleList.parse(this.type, toTouchType);
   }
 
   /** Point to start from */
@@ -59,8 +59,6 @@ export class ESLCarouselTouchMixin extends ESLCarouselPlugin {
 
   /** @returns marker whether the event should be ignored. */
   protected isIgnoredEvent(event: TouchEvent | PointerEvent | MouseEvent): boolean | undefined {
-    // Check for inactive type value
-    if (this.typeRule.value === 'none') return true;
     // No nav required
     if (this.$host.size <= this.$host.config.count) return true;
     // Multi-touch gesture