make swiper loopable again

Author: d0peCode

public/src/app/components/landing/contact/contact.component.scss

@@ -19,6 +19,11 @@
 
   &__image {
     max-width: 100%;
+
+    @media only screen and (max-width: 768px) {
+      max-width: 65%;
+      margin-left: 17.5%;
+    }
   }
 
   &__header {

public/src/app/components/landing/skills/skills.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, AfterViewInit } from '@angular/core';
 import Swiper from 'swiper';
+import {StoreService} from '../../../services/store.service';
 
 @Component({
   selector: 'app-skills',
@@ -54,17 +55,11 @@ export class SkillsComponent implements OnInit {
 
     slidesPerView = 3;
 
-    constructor() {}
+    constructor(private storeService: StoreService) {}
 
     ngAfterViewInit() {
-        this.mySwiper = new Swiper('.skills__body', {
-            paginationClickable: false,
-            grabCursor: true,
-            loop: false,
-            slidesPerView: this.slidesPerView
-        });
+        this.initSwiper();
     }
-
     previousSlide() {
         this.mySwiper.slidePrev();
     }
@@ -78,12 +73,29 @@ export class SkillsComponent implements OnInit {
         if(window.innerWidth < 600) {
             this.slidesPerView = 1;
         }
-        if(this.mySwiper) this.mySwiper.reInit();
+        if(this.mySwiper) this.mySwiper.update();
+    }
+    initSwiper() {
+      this.mySwiper = new Swiper('.skills__body', {
+        paginationClickable: false,
+        grabCursor: true,
+        loop: true,
+        slidesPerView: this.slidesPerView
+      });
     }
-
     ngOnInit() {
         this.handleSlidesAmount();
         window.addEventListener('resize', this.handleSlidesAmount);
+        this.storeService.bhsLang.subscribe(
+            (res) => {
+                if (res) {
+                    console.log('destroy swiper');
+                    this.mySwiper.destroy();
+                    setTimeout(() => { this.initSwiper() }, 20);
+                    this.storeService.setLangChanged(false);
+                }
+            }
+        );
     }
 
 }

public/src/app/components/landing/top/tools/flags/flags.component.ts

@@ -1,21 +1,28 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';
+import {StoreService} from '../../../../../services/store.service';
 
 @Component({
   selector: 'app-flags',
   templateUrl: './flags.component.html',
   styleUrls: ['./flags.component.scss']
 })
 export class FlagsComponent implements OnInit {
+  constructor(private translate: TranslateService, private storeService: StoreService) { }
 
-  constructor(private translate: TranslateService) { }
-
+  langChanged = false;
   currentLang = this.translate.currentLang;
   setLang = lang => {
     this.translate.use(lang);
     this.currentLang = lang;
+    this.storeService.setLangChanged(true);
   }
 
   ngOnInit() {
+    this.storeService.bhsLang.subscribe(
+      (res) => {
+        this.langChanged = false;
+      }
+    );
   }
 }

public/src/app/services/store.service.ts

@@ -2,13 +2,20 @@ import {BehaviorSubject} from 'rxjs';
 
 export class StoreService {
     public mode = 'light';
+    public languageChanged = false;
     public bhs: BehaviorSubject<string>;
+    public bhsLang: BehaviorSubject<boolean>;
 
     constructor() {
         this.bhs = new BehaviorSubject('light');
+        this.bhsLang = new BehaviorSubject(false);
     }
 
     setMode(newMode: string) {
         this.bhs.next(newMode);
     }
+    setLangChanged(val: boolean) {
+        this.bhsLang.next(val);
+    }
+
 }

public/src/assets/i18n/en.json

@@ -1,5 +1,5 @@
 {
-  "skillsInNav": "Skills",
+  "skillsInNav": "My skillset",
   "valuationInNav": "Valuation",
   "clientsInNav": "For clients",
   "greeting": "I'm glad to see you at my site! You're welcome to take a look at my projects and contact.",