From 4d754ee353c07392419abf7d3ba99bd23675a6c4 Mon Sep 17 00:00:00 2001 From: Vlad Tansky Date: Wed, 24 Nov 2021 18:44:04 +0200 Subject: [PATCH 1/4] fix(angular): toggle input --- .../angular/src/app/home/home.component.html | 20 +++++++++- .../angular/src/app/home/home.component.ts | 2 + src/angular/src/swiper.component.ts | 26 +++++++------ src/angular/src/utils/get-params.ts | 37 +++++++++++-------- 4 files changed, 58 insertions(+), 27 deletions(-) diff --git a/playground/angular/src/app/home/home.component.html b/playground/angular/src/app/home/home.component.html index 0dd418d9e..b79b477fa 100644 --- a/playground/angular/src/app/home/home.component.html +++ b/playground/angular/src/app/home/home.component.html @@ -1,4 +1,22 @@ -
+
Initial value true
+ + + Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6Slide 7Slide 8Slide 9 + +
Initial value false
+ + + Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6Slide 7Slide 8Slide 9 + +

Enable / disable

diff --git a/playground/angular/src/app/home/home.component.ts b/playground/angular/src/app/home/home.component.ts index aabe19cf9..f680edf5c 100644 --- a/playground/angular/src/app/home/home.component.ts +++ b/playground/angular/src/app/home/home.component.ts @@ -30,6 +30,8 @@ SwiperCore.use([ templateUrl: './home.component.html', }) export class HomePage { + p1 = true; + p2 = false; @ViewChild('swiperRef', { static: false }) swiperRef?: SwiperComponent; show: boolean; diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts index 0acc257b5..b9a4cd8c8 100644 --- a/src/angular/src/swiper.component.ts +++ b/src/angular/src/swiper.component.ts @@ -454,10 +454,7 @@ export class SwiperComponent implements OnInit { ) {} private _setElement(el: ElementRef, ref: any, update: string, key = 'el') { - if (!el || !ref) { - return; - } - if (ref && el.nativeElement) { + if (ref && el && el.nativeElement) { if (ref[key] === el.nativeElement) { return; } @@ -660,6 +657,7 @@ export class SwiperComponent implements OnInit { pagination && !pagination.el ) { + console.log('pagination', changedParams.pagination); this.updateParameter('pagination', this.pagination); pagination.init(); pagination.render(); @@ -795,19 +793,25 @@ export class SwiperComponent implements OnInit { } updateParameter(key: string, value: any) { + console.log(key); if (!(this.swiperRef && !this.swiperRef.destroyed)) { return; } const _key = key.replace(/^_/, ''); const isCurrentParamObj = isObject(this.swiperRef.params[_key]); - if (Object.keys(this.swiperRef.modules).indexOf(_key) >= 0) { - const defaultParams = this.swiperRef.modules[_key].params[_key]; - if (isCurrentParamObj) { - extend(this.swiperRef.params[_key], defaultParams); - } else { - this.swiperRef.params[_key] = defaultParams; - } + if ( + Object.values(this.swiperRef.modules) + .map((v) => v['name']?.toLowerCase()) + .indexOf(_key) >= 0 + ) { + const defaultParams = this.swiperRef.originalParams[_key]; + // this.swiperRef.params[_key] = value; + // if (isCurrentParamObj) { + // extend(this.swiperRef.params[_key], value); + // } + // this.swiperRef.params[_key] = defaultParams; + return; } if (_key === 'enabled') { if (value === true) { diff --git a/src/angular/src/utils/get-params.ts b/src/angular/src/utils/get-params.ts index 04e3d7807..485b7cf41 100644 --- a/src/angular/src/utils/get-params.ts +++ b/src/angular/src/utils/get-params.ts @@ -9,29 +9,36 @@ export function getParams(obj: any = {}) { const params: any = { on: {}, }; - const passedParams: any = {}; + const events = {}; + const passedParams = {}; extend(params, Swiper.defaults); extend(params, Swiper.extendedDefaults); params._emitClasses = true; + params.init = false; - const rest: any = {}; - Object.keys(obj).forEach((key: string) => { - const _key = key.replace(/^_/, ''); - if (typeof obj[_key] === 'undefined') return; - if (allowedParams.indexOf(_key) >= 0) { - if (isObject(obj[_key])) { - params[_key] = {}; - passedParams[_key] = {}; - extend(params[_key], obj[_key]); - extend(passedParams[_key], obj[_key]); + const rest = {}; + const allowedParams = paramsList.map((key) => key.replace(/_/, '')); + Object.keys(obj).forEach((key) => { + if (allowedParams.indexOf(key) >= 0) { + if (isObject(obj[key])) { + params[key] = {}; + passedParams[key] = {}; + extend(params[key], obj[key]); + extend(passedParams[key], obj[key]); } else { - params[_key] = obj[_key]; - passedParams[_key] = obj[_key]; + params[key] = obj[key]; + passedParams[key] = obj[key]; } + } else if (key.search(/on[A-Z]/) === 0 && typeof obj[key] === 'function') { + events[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key]; } else { - rest[_key] = obj[_key]; + rest[key] = obj[key]; } }); + ['navigation', 'pagination', 'scrollbar'].forEach((key) => { + if (params[key] === true) params[key] = {}; + if (params[key] === false) delete params[key]; + }); - return { params, passedParams, rest }; + return { params, passedParams, rest, events }; } From d35d76b7bcde8b4624663bf77c551fb8e40db5f2 Mon Sep 17 00:00:00 2001 From: Vladimir Kharlampidi Date: Mon, 29 Nov 2021 13:39:18 +0300 Subject: [PATCH 2/4] fix(angular): toggle input --- src/angular/src/swiper.component.ts | 13 ------------- src/angular/src/utils/get-params.ts | 19 ++++++++++--------- 2 files changed, 10 insertions(+), 22 deletions(-) diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts index b9a4cd8c8..e0df01de6 100644 --- a/src/angular/src/swiper.component.ts +++ b/src/angular/src/swiper.component.ts @@ -800,19 +800,6 @@ export class SwiperComponent implements OnInit { const _key = key.replace(/^_/, ''); const isCurrentParamObj = isObject(this.swiperRef.params[_key]); - if ( - Object.values(this.swiperRef.modules) - .map((v) => v['name']?.toLowerCase()) - .indexOf(_key) >= 0 - ) { - const defaultParams = this.swiperRef.originalParams[_key]; - // this.swiperRef.params[_key] = value; - // if (isCurrentParamObj) { - // extend(this.swiperRef.params[_key], value); - // } - // this.swiperRef.params[_key] = defaultParams; - return; - } if (_key === 'enabled') { if (value === true) { this.swiperRef.enable(); diff --git a/src/angular/src/utils/get-params.ts b/src/angular/src/utils/get-params.ts index 485b7cf41..ff48258a5 100644 --- a/src/angular/src/utils/get-params.ts +++ b/src/angular/src/utils/get-params.ts @@ -19,20 +19,21 @@ export function getParams(obj: any = {}) { const rest = {}; const allowedParams = paramsList.map((key) => key.replace(/_/, '')); Object.keys(obj).forEach((key) => { - if (allowedParams.indexOf(key) >= 0) { + const _key = key.replace(/^_/, ''); + if (allowedParams.indexOf(_key) >= 0) { if (isObject(obj[key])) { - params[key] = {}; - passedParams[key] = {}; - extend(params[key], obj[key]); - extend(passedParams[key], obj[key]); + params[_key] = {}; + passedParams[_key] = {}; + extend(params[_key], obj[key]); + extend(passedParams[_key], obj[key]); } else { - params[key] = obj[key]; - passedParams[key] = obj[key]; + params[_key] = obj[key]; + passedParams[_key] = obj[key]; } } else if (key.search(/on[A-Z]/) === 0 && typeof obj[key] === 'function') { - events[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key]; + events[`${_key[2].toLowerCase()}${key.substr(3)}`] = obj[key]; } else { - rest[key] = obj[key]; + rest[_key] = obj[key]; } }); ['navigation', 'pagination', 'scrollbar'].forEach((key) => { From c88d9e1a989a5bc91c2c4ea1e7726fe692c8a51a Mon Sep 17 00:00:00 2001 From: Vlad Tansky Date: Mon, 29 Nov 2021 23:10:31 +0200 Subject: [PATCH 3/4] fix(angular): params --- .../angular/src/app/home/home.component.html | 38 +++++++++---------- src/angular/src/swiper.component.ts | 1 - src/angular/src/utils/get-params.ts | 10 +++-- 3 files changed, 25 insertions(+), 24 deletions(-) diff --git a/playground/angular/src/app/home/home.component.html b/playground/angular/src/app/home/home.component.html index b79b477fa..d973db2aa 100644 --- a/playground/angular/src/app/home/home.component.html +++ b/playground/angular/src/app/home/home.component.html @@ -1,22 +1,22 @@ -
Initial value true
- - - Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6Slide 7Slide 8Slide 9 - -
Initial value false
- - - Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6Slide 7Slide 8Slide 9 - -
+
+
Initial value true
+ + + Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6Slide 7Slide 8Slide 9 + +
Initial value false
+ + + Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6Slide 7Slide 8Slide 9 +

Enable / disable

diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts index e0df01de6..d49be67e3 100644 --- a/src/angular/src/swiper.component.ts +++ b/src/angular/src/swiper.component.ts @@ -793,7 +793,6 @@ export class SwiperComponent implements OnInit { } updateParameter(key: string, value: any) { - console.log(key); if (!(this.swiperRef && !this.swiperRef.destroyed)) { return; } diff --git a/src/angular/src/utils/get-params.ts b/src/angular/src/utils/get-params.ts index ff48258a5..aa88ac94b 100644 --- a/src/angular/src/utils/get-params.ts +++ b/src/angular/src/utils/get-params.ts @@ -30,9 +30,11 @@ export function getParams(obj: any = {}) { params[_key] = obj[key]; passedParams[_key] = obj[key]; } - } else if (key.search(/on[A-Z]/) === 0 && typeof obj[key] === 'function') { - events[`${_key[2].toLowerCase()}${key.substr(3)}`] = obj[key]; - } else { + } + // else if (key.search(/on[A-Z]/) === 0 && typeof obj[key] === 'function') { + // events[`${_key[2].toLowerCase()}${key.substr(3)}`] = obj[key]; + // } + else { rest[_key] = obj[key]; } }); @@ -41,5 +43,5 @@ export function getParams(obj: any = {}) { if (params[key] === false) delete params[key]; }); - return { params, passedParams, rest, events }; + return { params, passedParams, rest }; } From 824b7c279569d12dd21d84249165e3856624baa0 Mon Sep 17 00:00:00 2001 From: Vlad Tansky Date: Mon, 29 Nov 2021 23:11:10 +0200 Subject: [PATCH 4/4] fix(angular): remove console log --- src/angular/src/swiper.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts index d49be67e3..1bc3b7d50 100644 --- a/src/angular/src/swiper.component.ts +++ b/src/angular/src/swiper.component.ts @@ -657,7 +657,6 @@ export class SwiperComponent implements OnInit { pagination && !pagination.el ) { - console.log('pagination', changedParams.pagination); this.updateParameter('pagination', this.pagination); pagination.init(); pagination.render();