fix(element): remove/re-add navigation, pagination, scrollbar elements based on prop value

fixes #6672

Author: nolimits4web

src/components-shared/update-swiper.js

@@ -22,7 +22,6 @@ function updateSwiper({
   let loopNeedDestroy;
   let loopNeedEnable;
   let loopNeedReloop;
-
   if (
     changedParams.includes('thumbs') &&
     passedParams.thumbs &&
@@ -109,6 +108,13 @@ function updateSwiper({
   updateParams.forEach((key) => {
     if (isObject(currentParams[key]) && isObject(passedParams[key])) {
       extend(currentParams[key], passedParams[key]);
+      if (
+        (key === 'navigation' || key === 'pagination' || key === 'scrollbar') &&
+        'enabled' in passedParams[key] &&
+        !passedParams[key].enabled
+      ) {
+        destroyModule(key);
+      }
     } else {
       const newValue = passedParams[key];
       if (

src/element/get-params.js

@@ -37,7 +37,7 @@ const modulesParamsList = [
   'zoom',
 ];
 
-function getParams(element) {
+function getParams(element, propName, propValue) {
   const params = {};
   const passedParams = {};
   extend(params, defaults);
@@ -55,14 +55,18 @@ function getParams(element) {
   });
 
   // Attributes
-  [...element.attributes].forEach((attr) => {
+  const attrsList = [...element.attributes];
+  if (typeof propName === 'string' && typeof propValue !== 'undefined') {
+    attrsList.push({ name: propName, value: propValue });
+  }
+  attrsList.forEach((attr) => {
     const moduleParam = modulesParamsList.filter(
       (mParam) => attr.name.indexOf(`${mParam}-`) === 0,
     )[0];
     if (moduleParam) {
       const parentObjName = attrToProp(moduleParam);
       const subObjName = attrToProp(attr.name.split(`${moduleParam}-`)[1]);
-      if (!passedParams[parentObjName]) passedParams[parentObjName] = {};
+      if (typeof passedParams[parentObjName] === 'undefined') passedParams[parentObjName] = {};
       if (passedParams[parentObjName] === true) {
         passedParams[parentObjName] = { enabled: true };
       }
@@ -111,7 +115,6 @@ function getParams(element) {
   } else if (params.pagination === false) {
     delete params.pagination;
   }
-
   return { params, passedParams };
 }
 

src/element/swiper-element.js

@@ -165,8 +165,8 @@ class SwiperContainer extends ClassToExtend {
     this.initialized = false;
   }
 
-  updateSwiperOnPropChange(propName) {
-    const { params: swiperParams, passedParams } = getParams(this);
+  updateSwiperOnPropChange(propName, propValue) {
+    const { params: swiperParams, passedParams } = getParams(this, propName, propValue);
     this.passedParams = passedParams;
     this.swiperParams = swiperParams;
 
@@ -195,6 +195,9 @@ class SwiperContainer extends ClassToExtend {
 
   attributeChangedCallback(attr, prevValue, newValue) {
     if (!this.initialized) return;
+    if (prevValue === 'true' && newValue === null) {
+      newValue = false;
+    }
     this.updateSwiperOnPropChange(attr, newValue);
   }
 
@@ -223,7 +226,7 @@ paramsList.forEach((paramName) => {
       if (!this.passedParams) this.passedParams = {};
       this.passedParams[paramName] = value;
       if (!this.initialized) return;
-      this.updateSwiperOnPropChange(paramName, value);
+      this.updateSwiperOnPropChange(paramName);
     },
   });
 });