grunt2 and refactoring

assets/js/theme/common/carousel/index.js

@@ -1,11 +1,11 @@
 import 'slick-carousel';
 
 import {
-    heroCarouselSetup,
-    getRealSlidesQuantityAndCurrentSlide,
-    arrowAriaLabling,
     dotsSetup,
     setTabindexes,
+    arrowAriaLabling,
+    heroCarouselSetup,
+    getRealSlidesQuantityAndCurrentSlide,
 } from './utils';
 
 const onCarouselChange = (event, carousel) => {
@@ -16,15 +16,15 @@ const onCarouselChange = (event, carousel) => {
         $dots,
         $slider,
         breakpointSettings,
-        activeBreakpoint 
+        activeBreakpoint,
     } = carousel;
 
     const { realSlideCount, realSlide } = getRealSlidesQuantityAndCurrentSlide(
         breakpointSettings,
         activeBreakpoint,
         currentSlide,
         slideCount,
-        $slider.data('slick').slidesToScroll
+        $slider.data('slick').slidesToScroll,
     );
 
     const $prevArrow = $slider.find(prevArrow);

assets/js/theme/common/carousel/utils/arrowAriaLabling.js

@@ -2,7 +2,7 @@ const NUMBER = '[NUMBER]';
 const integerRegExp = /[0-9]+/;
 const lastIntegerRegExp = /(\d+)(?!.*\d)/;
 
-export const arrowAriaLabling = ($prevArrow, $nextArrow, realCurrentSlide, realSlideCount) => {
+export default ($prevArrow, $nextArrow, realCurrentSlide, realSlideCount) => {
     if (realSlideCount < 2) return;
     if ($prevArrow.length === 0 || $nextArrow.length === 0) return;
 

assets/js/theme/common/carousel/utils/dotsSetup.js

@@ -1,4 +1,4 @@
-export const dotsSetup = ($dots, currentSlide, realSlideCount, dotLabels) => {
+export default ($dots, currentSlide, realSlideCount, dotLabels) => {
     if (!$dots) return;
 
     if (realSlideCount === 1) {

assets/js/theme/common/carousel/utils/getRealSlidesQuantityAndCurrentSlide.js

@@ -1,9 +1,9 @@
-export const getRealSlidesQuantityAndCurrentSlide = (
+export default (
     breakpointSettings,
     activeBreakpoint,
     currentSlide,
     slideCount,
-    defaultSlidesToScrollQuantity = 1
+    defaultSlidesToScrollQuantity = 1,
 ) => {
     const slidesToScrollQuantity = activeBreakpoint
         /* eslint-disable dot-notation */
@@ -14,4 +14,4 @@ export const getRealSlidesQuantityAndCurrentSlide = (
         realSlideCount: Math.ceil(slideCount / slidesToScrollQuantity),
         realSlide: Math.ceil(currentSlide / slidesToScrollQuantity),
     };
-}
+};

assets/js/theme/common/carousel/utils/heroCarouselSetup.js

@@ -8,7 +8,7 @@ const showCarouselIfSlidesAnalyzedSetup = ($carousel) => {
     };
 };
 
-export const heroCarouselSetup = ($heroCarousel) => {
+export default ($heroCarousel) => {
     if ($heroCarousel.length === 0) return;
 
     const $slidesNodes = $heroCarousel.find('.heroCarousel-slide');

assets/js/theme/common/carousel/utils/index.js

@@ -1,5 +1,5 @@
-export { heroCarouselSetup } from './heroCarouselSetup';
-export { arrowAriaLabling } from './arrowAriaLabling';
-export { dotsSetup } from './dotsSetup';
-export { getRealSlidesQuantityAndCurrentSlide } from './getRealSlidesQuantityAndCurrentSlide';
-export { setTabindexes } from './setTabindexes';
+export { default as heroCarouselSetup } from './heroCarouselSetup';
+export { default as arrowAriaLabling } from './arrowAriaLabling';
+export { default as dotsSetup } from './dotsSetup';
+export { default as getRealSlidesQuantityAndCurrentSlide } from './getRealSlidesQuantityAndCurrentSlide';
+export { default as setTabindexes } from './setTabindexes';

assets/js/theme/common/carousel/utils/setTabindexes.js

@@ -1,6 +1,6 @@
 const allFocusableElementsSelector = '[href], button, input, textarea, select, details, [contenteditable="true"], [tabindex]';
 
-export const setTabindexes = ($slides, $prevArrow, $nextArrow, realSlide, realSlideCount) => {
+export default ($slides, $prevArrow, $nextArrow, realSlide, realSlideCount) => {
     $slides.each((index, element) => {
         const $element = $(element);
         const tabIndex = $element.hasClass('slick-active') ? 0 : -1;

lang/en.json

@@ -895,7 +895,7 @@
     },
     "carousel": {
         "arrowAriaLabel": "Go to slide [NUMBER] of",
-        "dotAriaLabel": "Go to slide",
+        "dotAriaLabel": "Slide number",
         "activeDotAriaLabel": "active"
     },
     "validation_messages": {

templates/components/carousel.html

@@ -1,5 +1,6 @@
 <section class="heroCarousel"
     data-slick='{
+        "arrows": {{arrows}},
         "mobileFirst": true,
         "slidesToShow": 1,
         "slidesToScroll": 1,