[BUGFIX] Use class for logo carousel aria labels (#426)

* use class for logo carousel aria labels * update css/less
t3kit · Jun 21, 2018 · 13c03d9 · 13c03d9
1 parent cb48742
commit 13c03d9
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 148 deletions.
diff --git a/Resources/Private/Templates/ContentElements/LogoCarousel.html b/Resources/Private/Templates/ContentElements/LogoCarousel.html
@@ -39,7 +39,7 @@
 			<div class="js__logo-carousel__btn-prev logo-carousel__btn-prev swiper-button-prev" role="button" tabindex="0"></div>
 
 			<f:comment> These labels are used in carousel.js for aria-labels in logo carousel.</f:comment>
-			<script id="js__aria-labels" type="application/json">
+			<script class="js__aria-labels" type="application/json">
 				{
 					"ariaLabel": {
 						"prevSlideMessage": "<f:translate key='logoCarousel.ariaLabel.prevSlideMessage' extensionName='theme_t3kit' />",

diff --git a/Resources/Public/css/main.js b/Resources/Public/css/main.js
@@ -214,60 +214,65 @@ jQuery(function ($) {
   $(document).ready(function () {
     // initialize swiper when document ready
     // http://idangero.us/swiper/api/
-    $('.js__logo-carousel').each(function () {
-      // Get json content from element LogoCarousel.html
-      var label = JSON.parse($('#js__aria-labels').html())
-
-      var swiper = $(this).swiper({
-        nextButton: '.js__logo-carousel__btn-next',
-        prevButton: '.js__logo-carousel__btn-prev',
-        slidesPerView: 5,
-        preloadImages: false,
-        lazyLoading: true,
-        watchSlidesVisibility: true,
-        lazyLoadingInPrevNext: true,
-        slideVisibleClass: 'is-visible',
-        spaceBetween: 20,
-        autoplay: $(this).data('autoplay'),
-        a11y: true,
-        prevSlideMessage: label.ariaLabel.prevSlideMessage,
-        nextSlideMessage: label.ariaLabel.nextSlideMessage,
-        firstSlideMessage: label.ariaLabel.firstSlideMessage,
-        lastSlideMessage: label.ariaLabel.lastSlideMessage,
-        paginationBulletMessage: label.ariaLabel.paginationBulletMessage,
-        // Responsive breakpoints
-        breakpoints: {
-          // when window width is <= 480px
-          480: {
-            slidesPerView: 1
-          },
 
-          // when window width is <= 600px
-          600: {
-            slidesPerView: 2
-          },
-
-          // when window width is <= 768px
-          768: {
-            slidesPerView: 3
-          },
-
-          // when window width is <= 992px
-          992: {
-            slidesPerView: 4
-          }
-        }
-      })
-      // if the selected swipe is not visible when focused
-      // put it into view
-      $(swiper.slides).each(function (index, element) {
-        $(element).on('focusin', function (e) {
-          if ($(e.target).not('.is-visible')) {
-            swiper.slideTo(index)
+    // Get json content from element LogoCarousel.html
+    var ariaLabels = document.getElementsByClassName('js__aria-labels')
+    if (ariaLabels) {
+      // Use only first aria label object because they are all equal
+      var label = JSON.parse(ariaLabels[0].innerHTML)
+
+      $('.js__logo-carousel').each(function () {
+        var swiper = $(this).swiper({
+          nextButton: '.js__logo-carousel__btn-next',
+          prevButton: '.js__logo-carousel__btn-prev',
+          slidesPerView: 5,
+          preloadImages: false,
+          lazyLoading: true,
+          watchSlidesVisibility: true,
+          lazyLoadingInPrevNext: true,
+          slideVisibleClass: 'is-visible',
+          spaceBetween: 20,
+          autoplay: $(this).data('autoplay'),
+          a11y: true,
+          prevSlideMessage: label.ariaLabel.prevSlideMessage,
+          nextSlideMessage: label.ariaLabel.nextSlideMessage,
+          firstSlideMessage: label.ariaLabel.firstSlideMessage,
+          lastSlideMessage: label.ariaLabel.lastSlideMessage,
+          paginationBulletMessage: label.ariaLabel.paginationBulletMessage,
+          // Responsive breakpoints
+          breakpoints: {
+            // when window width is <= 480px
+            480: {
+              slidesPerView: 1
+            },
+
+            // when window width is <= 600px
+            600: {
+              slidesPerView: 2
+            },
+
+            // when window width is <= 768px
+            768: {
+              slidesPerView: 3
+            },
+
+            // when window width is <= 992px
+            992: {
+              slidesPerView: 4
+            }
           }
         })
+        // if the selected swipe is not visible when focused
+        // put it into view
+        $(swiper.slides).each(function (index, element) {
+          $(element).on('focusin', function (e) {
+            if ($(e.target).not('.is-visible')) {
+              swiper.slideTo(index)
+            }
+          })
+        })
       })
-    })
+    }
   })
 })(jQuery)
 

diff --git a/Resources/Public/less/main.js b/Resources/Public/less/main.js
@@ -214,60 +214,65 @@ jQuery(function ($) {
   $(document).ready(function () {
     // initialize swiper when document ready
     // http://idangero.us/swiper/api/
-    $('.js__logo-carousel').each(function () {
-      // Get json content from element LogoCarousel.html
-      var label = JSON.parse($('#js__aria-labels').html())
-
-      var swiper = $(this).swiper({
-        nextButton: '.js__logo-carousel__btn-next',
-        prevButton: '.js__logo-carousel__btn-prev',
-        slidesPerView: 5,
-        preloadImages: false,
-        lazyLoading: true,
-        watchSlidesVisibility: true,
-        lazyLoadingInPrevNext: true,
-        slideVisibleClass: 'is-visible',
-        spaceBetween: 20,
-        autoplay: $(this).data('autoplay'),
-        a11y: true,
-        prevSlideMessage: label.ariaLabel.prevSlideMessage,
-        nextSlideMessage: label.ariaLabel.nextSlideMessage,
-        firstSlideMessage: label.ariaLabel.firstSlideMessage,
-        lastSlideMessage: label.ariaLabel.lastSlideMessage,
-        paginationBulletMessage: label.ariaLabel.paginationBulletMessage,
-        // Responsive breakpoints
-        breakpoints: {
-          // when window width is <= 480px
-          480: {
-            slidesPerView: 1
-          },
 
-          // when window width is <= 600px
-          600: {
-            slidesPerView: 2
-          },
-
-          // when window width is <= 768px
-          768: {
-            slidesPerView: 3
-          },
-
-          // when window width is <= 992px
-          992: {
-            slidesPerView: 4
-          }
-        }
-      })
-      // if the selected swipe is not visible when focused
-      // put it into view
-      $(swiper.slides).each(function (index, element) {
-        $(element).on('focusin', function (e) {
-          if ($(e.target).not('.is-visible')) {
-            swiper.slideTo(index)
+    // Get json content from element LogoCarousel.html
+    var ariaLabels = document.getElementsByClassName('js__aria-labels')
+    if (ariaLabels) {
+      // Use only first aria label object because they are all equal
+      var label = JSON.parse(ariaLabels[0].innerHTML)
+
+      $('.js__logo-carousel').each(function () {
+        var swiper = $(this).swiper({
+          nextButton: '.js__logo-carousel__btn-next',
+          prevButton: '.js__logo-carousel__btn-prev',
+          slidesPerView: 5,
+          preloadImages: false,
+          lazyLoading: true,
+          watchSlidesVisibility: true,
+          lazyLoadingInPrevNext: true,
+          slideVisibleClass: 'is-visible',
+          spaceBetween: 20,
+          autoplay: $(this).data('autoplay'),
+          a11y: true,
+          prevSlideMessage: label.ariaLabel.prevSlideMessage,
+          nextSlideMessage: label.ariaLabel.nextSlideMessage,
+          firstSlideMessage: label.ariaLabel.firstSlideMessage,
+          lastSlideMessage: label.ariaLabel.lastSlideMessage,
+          paginationBulletMessage: label.ariaLabel.paginationBulletMessage,
+          // Responsive breakpoints
+          breakpoints: {
+            // when window width is <= 480px
+            480: {
+              slidesPerView: 1
+            },
+
+            // when window width is <= 600px
+            600: {
+              slidesPerView: 2
+            },
+
+            // when window width is <= 768px
+            768: {
+              slidesPerView: 3
+            },
+
+            // when window width is <= 992px
+            992: {
+              slidesPerView: 4
+            }
           }
         })
+        // if the selected swipe is not visible when focused
+        // put it into view
+        $(swiper.slides).each(function (index, element) {
+          $(element).on('focusin', function (e) {
+            if ($(e.target).not('.is-visible')) {
+              swiper.slideTo(index)
+            }
+          })
+        })
       })
-    })
+    }
   })
 })(jQuery)
 

diff --git a/felayout_t3kit/dev/js/main/contentElements/carousel.js b/felayout_t3kit/dev/js/main/contentElements/carousel.js
@@ -6,59 +6,64 @@
   $(document).ready(function () {
     // initialize swiper when document ready
     // http://idangero.us/swiper/api/
-    $('.js__logo-carousel').each(function () {
-      // Get json content from element LogoCarousel.html
-      var label = JSON.parse($('#js__aria-labels').html())
 
-      var swiper = $(this).swiper({
-        nextButton: '.js__logo-carousel__btn-next',
-        prevButton: '.js__logo-carousel__btn-prev',
-        slidesPerView: 5,
-        preloadImages: false,
-        lazyLoading: true,
-        watchSlidesVisibility: true,
-        lazyLoadingInPrevNext: true,
-        slideVisibleClass: 'is-visible',
-        spaceBetween: 20,
-        autoplay: $(this).data('autoplay'),
-        a11y: true,
-        prevSlideMessage: label.ariaLabel.prevSlideMessage,
-        nextSlideMessage: label.ariaLabel.nextSlideMessage,
-        firstSlideMessage: label.ariaLabel.firstSlideMessage,
-        lastSlideMessage: label.ariaLabel.lastSlideMessage,
-        paginationBulletMessage: label.ariaLabel.paginationBulletMessage,
-        // Responsive breakpoints
-        breakpoints: {
-          // when window width is <= 480px
-          480: {
-            slidesPerView: 1
-          },
+    // Get json content from element LogoCarousel.html
+    var ariaLabels = document.getElementsByClassName('js__aria-labels')
+    if (ariaLabels) {
+      // Use only first aria label object because they are all equal
+      var label = JSON.parse(ariaLabels[0].innerHTML)
 
-          // when window width is <= 600px
-          600: {
-            slidesPerView: 2
-          },
+      $('.js__logo-carousel').each(function () {
+        var swiper = $(this).swiper({
+          nextButton: '.js__logo-carousel__btn-next',
+          prevButton: '.js__logo-carousel__btn-prev',
+          slidesPerView: 5,
+          preloadImages: false,
+          lazyLoading: true,
+          watchSlidesVisibility: true,
+          lazyLoadingInPrevNext: true,
+          slideVisibleClass: 'is-visible',
+          spaceBetween: 20,
+          autoplay: $(this).data('autoplay'),
+          a11y: true,
+          prevSlideMessage: label.ariaLabel.prevSlideMessage,
+          nextSlideMessage: label.ariaLabel.nextSlideMessage,
+          firstSlideMessage: label.ariaLabel.firstSlideMessage,
+          lastSlideMessage: label.ariaLabel.lastSlideMessage,
+          paginationBulletMessage: label.ariaLabel.paginationBulletMessage,
+          // Responsive breakpoints
+          breakpoints: {
+            // when window width is <= 480px
+            480: {
+              slidesPerView: 1
+            },
 
-          // when window width is <= 768px
-          768: {
-            slidesPerView: 3
-          },
+            // when window width is <= 600px
+            600: {
+              slidesPerView: 2
+            },
 
-          // when window width is <= 992px
-          992: {
-            slidesPerView: 4
-          }
-        }
-      })
-      // if the selected swipe is not visible when focused
-      // put it into view
-      $(swiper.slides).each(function (index, element) {
-        $(element).on('focusin', function (e) {
-          if ($(e.target).not('.is-visible')) {
-            swiper.slideTo(index)
+            // when window width is <= 768px
+            768: {
+              slidesPerView: 3
+            },
+
+            // when window width is <= 992px
+            992: {
+              slidesPerView: 4
+            }
           }
         })
+        // if the selected swipe is not visible when focused
+        // put it into view
+        $(swiper.slides).each(function (index, element) {
+          $(element).on('focusin', function (e) {
+            if ($(e.target).not('.is-visible')) {
+              swiper.slideTo(index)
+            }
+          })
+        })
       })
-    })
+    }
   })
 })(jQuery)