Small library code and example app style cleanups

zefoy · Aug 1, 2017 · 7f26618 · 7f26618
1 parent e4871bc
commit 7f26618
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 94 deletions.
diff --git a/example/src/app/app.component.css b/example/src/app/app.component.css
@@ -15,8 +15,8 @@
   padding: 24px;
   margin: 24px auto;
   border-radius: 4px;
+
   color: #555;
-  font-family: sans-serif;
   box-shadow:
     0 6px 20px rgba(0, 0, 0, 0.18),
     0 6px 6px rgba(0, 0, 0, 0.25);
@@ -25,6 +25,7 @@
 
 .info-container {
   padding: 12px 16px;
+
   line-height: 24px;
 }
 
@@ -35,22 +36,27 @@
 .action-container,
 .content-container {
   position: relative;
+
   overflow: auto;
   margin: 8px 16px;
   border-radius: 4px;
+
   background-color: #fff;
 }
 
 .action-button {
   box-sizing: border-box;
   width: calc(100% - 16px);
-  padding: 16px;
+  min-height: 35px;
+  padding: 4px 16px;
   margin: 8px;
   border-radius: 4px;
   border: 1px solid #555;
+
   cursor: pointer;
   font-size: 14px;
   font-weight: bold;
+  line-height: 14px;
   text-align: center;
 }
 
@@ -59,12 +65,6 @@
   background-color: #555;
 }
 
-.action-button.disabled {
-  cursor: default;
-  color: #aaa;
-  background-color: #eee;
-}
-
 .swiper-container {
   position: absolute;
   top: 0;

diff --git a/example/src/app/app.component.html b/example/src/app/app.component.html
@@ -1,12 +1,12 @@
-<div class="box-container" fxLayout="column">
+<div class="box-container" fxLayout="column" [ngStyle.lt-sm]="'min-height: 800px;'">
   <div class="app-title">Simple example app for the ngx-swiper-wrapper</div>
 
   <div class="info-container">
     You can change the settings of the Swiper area by clicking the buttons on the left panel.
   </div>
 
-  <div class="horizontal-container" fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="stretch" fxFlex>
-    <div class="vertical-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="25%" fxFlex.gt-xs="50%">
+  <div class="horizontal-container" fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="stretch" fxFlex>
+    <div class="vertical-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="50%">
       <div class="box-title">Settings</div>
 
       <div class="action-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex>
@@ -24,20 +24,20 @@
       </div>
     </div>
 
-    <div class="vertical-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="75%" fxFlex.gt-xs="50%">
+    <div class="vertical-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="50%">
       <div class="box-title">Swiper</div>
 
       <div class="content-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex>
         <swiper *ngIf="type == 'component' && show" overlay-controls [config]="config" (indexChange)="onIndexChange($event)" fxFlex>
-          <div *ngFor="let slide of slides" fxLayout="column" fxLayoutAlign="center center">
-            {{slide}}
+          <div *ngFor="let slide of slides" class="swiper-slide">
+            <div class="swiper-slide-content" fxLayout="column" fxLayoutAlign="center center">{{slide}}</div>
           </div>
         </swiper>
 
         <div *ngIf="type == 'directive' && show" class="swiper-container" [swiper]="config" (indexChange)="onIndexChange($event)">
           <div class="swiper-wrapper">
-            <div *ngFor="let slide of slides" class="swiper-slide" fxLayout="column" fxLayoutAlign="center center">
-              {{slide}}
+            <div *ngFor="let slide of slides" class="swiper-slide">
+              <div class="swiper-slide-content" fxLayout="column" fxLayoutAlign="center center">{{slide}}</div>
             </div>
           </div>
 

diff --git a/example/src/app/app.component.ts b/example/src/app/app.component.ts
@@ -47,68 +47,38 @@ export class AppComponent {
   }
 
   toggleDirection() {
-    this.show = false;
-
-    setTimeout(() => {
-      this.config.direction = (this.config.direction == 'horizontal') ? 'vertical' : 'horizontal';
-
-      this.show = true;
-    }, 0);
+    this.config.direction = (this.config.direction == 'horizontal') ? 'vertical' : 'horizontal';
   }
 
   toggleSlidesPerView() {
-    this.show = false;
-
-    setTimeout(() => {
-      if (this.config.slidesPerView != 1) {
-        this.config.slidesPerView = 1;
-      } else {
-        this.config.slidesPerView = +this.config.slidesPerView + 1;
-      }
-
-      this.show = true;
-    }, 0);
+    if (this.config.slidesPerView != 1) {
+      this.config.slidesPerView = 1;
+    } else {
+      this.config.slidesPerView = +this.config.slidesPerView + 1;
+    }
   }
 
   toggleOverlayControls() {
-    this.show = false;
-
-    setTimeout(() => {
-      if (this.config.pagination) {
-        this.config.scrollbar = '.swiper-scrollbar';
-        this.config.pagination = null;
-        this.config.nextButton = null;
-        this.config.prevButton = null;
-      } else if (this.config.scrollbar) {
-        this.config.scrollbar = null;
-      } else {
-        this.config.pagination = '.swiper-pagination';
-        this.config.nextButton = '.swiper-button-next';
-        this.config.prevButton = '.swiper-button-prev';
-      }
-
-      this.show = true;
-    }, 0);
+    if (this.config.pagination) {
+      this.config.scrollbar = '.swiper-scrollbar';
+      this.config.pagination = null;
+      this.config.nextButton = null;
+      this.config.prevButton = null;
+    } else if (this.config.scrollbar) {
+      this.config.scrollbar = null;
+    } else {
+      this.config.pagination = '.swiper-pagination';
+      this.config.nextButton = '.swiper-button-next';
+      this.config.prevButton = '.swiper-button-prev';
+    }
   }
 
   toggleKeyboardControl() {
-    this.show = false;
-
-    setTimeout(() => {
-      this.config.keyboardControl = !this.config.keyboardControl;
-
-      this.show = true;
-    }, 0);
+    this.config.keyboardControl = !this.config.keyboardControl;
   }
 
   toggleMouseWheelControl() {
-    this.show = false;
-
-    setTimeout(() => {
-      this.config.mousewheelControl = !this.config.mousewheelControl;
-
-      this.show = true;
-    }, 0);
+    this.config.mousewheelControl = !this.config.mousewheelControl;
   }
 
   onIndexChange(index: number) {

diff --git a/src/lib/swiper.component.scss b/src/lib/swiper.component.scss
@@ -34,7 +34,8 @@ swiper {
       height: 100%;
 
       .swiper-wrapper {
-        .swiper-slide {
+        .swiper-slide,
+        .swiper-slide-content {
           overflow: auto;
           width: 100%;
           height: 100%;
@@ -43,10 +44,6 @@ swiper {
         }
       }
 
-      .swiper-scrollbar {
-        cursor: pointer;
-      }
-
       .swiper-pagination {
         pointer-events: none;
 

diff --git a/src/lib/swiper.component.ts b/src/lib/swiper.component.ts
@@ -20,6 +20,7 @@ export class SwiperComponent implements DoCheck {
 
   @HostBinding('hidden')
   @Input() hidden: boolean = false;
+
   @Input() disabled: boolean = false;
 
   @Input() config: SwiperConfigInterface;
@@ -78,20 +79,7 @@ export class SwiperComponent implements DoCheck {
 
   @Output('paginationRendered'     ) S_PAGINATIONRENDERED  = new EventEmitter<any>();
 
-  constructor(private elementRef: ElementRef, @Optional() private defaults: SwiperConfig) {
-    this.paginationBulletRender = (swiper, index, className) => {
-      if (index === 0) {
-        return '<span class="swiper-pagination-handle" index=' + index + '>' +
-          '<span class="' + className + ' ' + className + '-first"></span></span>';
-      } else if (index === (swiper.slides.length - 1)) {
-        return '<span class="swiper-pagination-handle" index=' + index + '>' +
-          '<span class="' + className + ' ' + className + '-last"></span></span>';
-      } else {
-        return '<span class="swiper-pagination-handle" index=' + index + '>' +
-          '<span class="' + className + ' ' + className + '-middle"></span></span>';
-      }
-    };
-  }
+  constructor(private elementRef: ElementRef, @Optional() private defaults: SwiperConfig) {}
 
   ngDoCheck() {
     if (this.swiperSlides) {
@@ -133,6 +121,21 @@ export class SwiperComponent implements DoCheck {
     }
 
     if (options.pagination === '.swiper-pagination' && !options.paginationBulletRender) {
+      if (!this.paginationBulletRender) {
+        this.paginationBulletRender = (swiper, index, className) => {
+          if (index === 0) {
+            return '<span class="swiper-pagination-handle" index=' + index + '>' +
+              '<span class="' + className + ' ' + className + '-first"></span></span>';
+          } else if (index === (swiper.slides.length - 1)) {
+            return '<span class="swiper-pagination-handle" index=' + index + '>' +
+              '<span class="' + className + ' ' + className + '-last"></span></span>';
+          } else {
+            return '<span class="swiper-pagination-handle" index=' + index + '>' +
+              '<span class="' + className + ' ' + className + '-middle"></span></span>';
+          }
+        };
+      }
+
       options.paginationBulletRender = this.paginationBulletRender;
     }
 

diff --git a/src/lib/swiper.directive.ts b/src/lib/swiper.directive.ts
@@ -18,6 +18,7 @@ export class SwiperDirective implements OnInit, DoCheck, OnDestroy, OnChanges {
 
   @HostBinding('hidden')
   @Input() hidden: boolean = false;
+
   @Input() disabled: boolean = false;
 
   @HostBinding('class.swiper')
@@ -80,6 +81,10 @@ export class SwiperDirective implements OnInit, DoCheck, OnDestroy, OnChanges {
 
     options.assign(this.config); // Custom config
 
+    if (this.initialIndex != null) {
+      options.initialSlide = this.initialIndex;
+    }
+
     let onSlideChangeStart = options.onSlideChangeStart;
     let onScrollbarDragEnd = options.onScrollbarDragEnd;
 
@@ -103,9 +108,6 @@ export class SwiperDirective implements OnInit, DoCheck, OnDestroy, OnChanges {
       });
     };
 
-    if (this.initialIndex != null) {
-      options.initialSlide = this.initialIndex;
-    }
 
     if (typeof options.scrollbar === 'string') {
       options.scrollbar = element.querySelector(options.scrollbar);
@@ -151,8 +153,6 @@ export class SwiperDirective implements OnInit, DoCheck, OnDestroy, OnChanges {
     if (!this.configDiff) {
       this.configDiff = this.differs.find(this.config || {}).create(null);
     }
-
-    this.update();
   }
 
   ngDoCheck() {
@@ -259,14 +259,14 @@ export class SwiperDirective implements OnInit, DoCheck, OnDestroy, OnChanges {
       let index = this.swiper.activeIndex;
 
       if (this.swiper.params.loop) {
-        const numSlides = this.swiper.slides.length - 2 * this.swiper.loopedSlides;
+        const slidesCount = this.swiper.slides.length - 2 * this.swiper.loopedSlides;
 
         index -= this.swiper.loopedSlides;
 
         if (index < 0) {
-          index += numSlides;
-        } else if (index >= numSlides) {
-          index -= numSlides;
+          index += slidesCount;
+        } else if (index >= slidesCount) {
+          index -= slidesCount;
         }
       }