fix(core): fix pagination and a11y classes escaping

fixes #4403
nolimits4web · Apr 5, 2021 · 49e06f9 · 49e06f9
1 parent 1103688
commit 49e06f9
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/src/components/a11y/a11y.js b/src/components/a11y/a11y.js
@@ -1,5 +1,5 @@
 import $ from '../../utils/dom';
-import { bindModuleMethods } from '../../utils/utils';
+import { bindModuleMethods, classesToSelector } from '../../utils/utils';
 
 const A11y = {
   getRandomNumber(size = 16) {
@@ -71,9 +71,10 @@ const A11y = {
         swiper.a11y.notify(params.prevSlideMessage);
       }
     }
+
     if (
       swiper.pagination &&
-      $targetEl.is(`.${swiper.params.pagination.bulletClass.replace(/ /g, '.')}`)
+      $targetEl.is(classesToSelector(swiper.params.pagination.bulletClass))
     ) {
       $targetEl[0].click();
     }
@@ -211,7 +212,7 @@ const A11y = {
     ) {
       swiper.pagination.$el.on(
         'keydown',
-        `.${swiper.params.pagination.bulletClass.replace(/ /g, '.')}`,
+        classesToSelector(swiper.params.pagination.bulletClass),
         swiper.a11y.onEnterOrSpaceKey,
       );
     }
@@ -245,7 +246,7 @@ const A11y = {
     ) {
       swiper.pagination.$el.off(
         'keydown',
-        `.${swiper.params.pagination.bulletClass.replace(/ /g, '.')}`,
+        classesToSelector(swiper.params.pagination.bulletClass),
         swiper.a11y.onEnterOrSpaceKey,
       );
     }

diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js
@@ -1,5 +1,5 @@
 import $ from '../../utils/dom';
-import { extend, bindModuleMethods } from '../../utils/utils';
+import { extend, bindModuleMethods, classesToSelector } from '../../utils/utils';
 
 const Pagination = {
   update() {
@@ -152,8 +152,10 @@ const Pagination = {
       }
     }
     if (params.type === 'fraction') {
-      $el.find(`.${params.currentClass}`).text(params.formatFractionCurrent(current + 1));
-      $el.find(`.${params.totalClass}`).text(params.formatFractionTotal(total));
+      $el
+        .find(classesToSelector(params.currentClass))
+        .text(params.formatFractionCurrent(current + 1));
+      $el.find(classesToSelector(params.totalClass)).text(params.formatFractionTotal(total));
     }
     if (params.type === 'progressbar') {
       let progressbarDirection;
@@ -171,7 +173,7 @@ const Pagination = {
         scaleY = scale;
       }
       $el
-        .find(`.${params.progressbarFillClass}`)
+        .find(classesToSelector(params.progressbarFillClass))
         .transform(`translate3d(0,0,0) scaleX(${scaleX}) scaleY(${scaleY})`)
         .transition(swiper.params.speed);
     }
@@ -218,7 +220,8 @@ const Pagination = {
         }
       }
       $el.html(paginationHTML);
-      swiper.pagination.bullets = $el.find(`.${params.bulletClass.replace(/ /g, '.')}`);
+
+      swiper.pagination.bullets = $el.find(classesToSelector(params.bulletClass));
     }
     if (params.type === 'fraction') {
       if (params.renderFraction) {
@@ -273,7 +276,7 @@ const Pagination = {
     }
 
     if (params.clickable) {
-      $el.on('click', `.${params.bulletClass.replace(/ /g, '.')}`, function onClick(e) {
+      $el.on('click', classesToSelector(params.bulletClass), function onClick(e) {
         e.preventDefault();
         let index = $(this).index() * swiper.params.slidesPerGroup;
         if (swiper.params.loop) index += swiper.loopedSlides;
@@ -302,7 +305,7 @@ const Pagination = {
     $el.removeClass(params.modifierClass + params.type);
     if (swiper.pagination.bullets) swiper.pagination.bullets.removeClass(params.bulletActiveClass);
     if (params.clickable) {
-      $el.off('click', `.${params.bulletClass.replace(/ /g, '.')}`);
+      $el.off('click', classesToSelector(params.bulletClass));
     }
   },
 };

diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -139,6 +139,13 @@ function bindModuleMethods(instance, obj) {
   });
 }
 
+function classesToSelector(classes = '') {
+  return `.${classes
+    .trim()
+    .replace(/([\.:\/])/g, '\\$1') // eslint-disable-line
+    .replace(/ /g, '.')}`;
+}
+
 export {
   deleteProps,
   nextTick,
@@ -148,4 +155,5 @@ export {
   extend,
   bindModuleMethods,
   getComputedStyle,
+  classesToSelector,
 };