From ca49b9f6decc8a678fb47cedb9d9d0c1d03a0d26 Mon Sep 17 00:00:00 2001 From: Benedict Dudel <14878247+benedictdudel@users.noreply.github.com> Date: Mon, 6 Feb 2023 08:40:13 +0100 Subject: [PATCH] fix(navigation): allow multiple classes in navigation options (#6345) Allow multiple classes in `disabledClass`, `navigationDisabledClass` and `lockClass`. fixes #6344 --- src/modules/navigation/navigation.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/modules/navigation/navigation.js b/src/modules/navigation/navigation.js index d5b20c23b..644dca1ba 100644 --- a/src/modules/navigation/navigation.js +++ b/src/modules/navigation/navigation.js @@ -51,7 +51,7 @@ export default function Navigation({ swiper, extendParams, on, emit }) { el = makeElementsArray(el); el.forEach((subEl) => { if (subEl) { - subEl.classList[disabled ? 'add' : 'remove'](params.disabledClass); + subEl.classList[disabled ? 'add' : 'remove'](...params.disabledClass.split(' ')); if (subEl.tagName === 'BUTTON') subEl.disabled = disabled; if (swiper.params.watchOverflow && swiper.enabled) { subEl.classList[swiper.isLocked ? 'add' : 'remove'](params.lockClass); @@ -112,7 +112,7 @@ export default function Navigation({ swiper, extendParams, on, emit }) { el.addEventListener('click', dir === 'next' ? onNextClick : onPrevClick); } if (!swiper.enabled && el) { - el.classList.add(params.lockClass); + el.classList.add(...params.lockClass.split(' ')); } }; @@ -125,7 +125,7 @@ export default function Navigation({ swiper, extendParams, on, emit }) { prevEl = makeElementsArray(prevEl); const destroyButton = (el, dir) => { el.removeEventListener('click', dir === 'next' ? onNextClick : onPrevClick); - el.classList.remove(swiper.params.navigation.disabledClass); + el.classList.remove(...swiper.params.navigation.disabledClass.split(' ')); }; nextEl.forEach((el) => destroyButton(el, 'next')); prevEl.forEach((el) => destroyButton(el, 'prev')); @@ -191,13 +191,13 @@ export default function Navigation({ swiper, extendParams, on, emit }) { }); const enable = () => { - swiper.el.classList.remove(swiper.params.navigation.navigationDisabledClass); + swiper.el.classList.remove(...swiper.params.navigation.navigationDisabledClass.split(' ')); init(); update(); }; const disable = () => { - swiper.el.classList.add(swiper.params.navigation.navigationDisabledClass); + swiper.el.classList.add(...swiper.params.navigation.navigationDisabledClass.split(' ')); destroy(); };