improve(pagination) Implement basic bullet pagination, fix events

examples/index.html

@@ -19,7 +19,26 @@
       <div class="vswiper__track">
         <div class="vswiper__list">
           <!-- Slides -->
-          <!-- <div class="vswiper-slide"><span>Slide 1</span></div> -->
+          <div class="vswiper-slide" data-key="0"><span>Slide 1</span></div>
+          <div class="vswiper-slide" data-key="1"><span>Slide 2</span></div>
+        </div>
+      </div>
+      <!-- If we need pagination -->
+      <div class="vswiper-pagination"></div>
+
+      <!-- If we need navigation buttons -->
+      <div class="vswiper-button-prev"></div>
+      <div class="vswiper-button-next"></div>
+    </div>
+
+    <!-- Slider main container -->
+    <div class="vswiper-container image-swiper">
+      <!-- Additional required wrapper -->
+      <div class="vswiper__track">
+        <div class="vswiper__list">
+          <!-- Slides -->
+          <div class="vswiper-slide" data-key="0"><span>Slide 1</span></div>
+          <div class="vswiper-slide" data-key="1"><span>Slide 2</span></div>
         </div>
       </div>
       <!-- If we need pagination -->

src/components/clone/clone.component.ts

@@ -1,4 +1,4 @@
-import { addClass, append, before, remove, removeAttribute } from '../../utils/dom';
+import { addClass, append, before, remove, removeAttribute, domify } from '../../utils/dom';
 import TrackComponent from '../track/track.component';
 import VirtualComponent from '../virtual/virtual.component';
 import { LOOP } from './../../constants/types';
@@ -28,12 +28,12 @@ export default class CloneComponent implements BaseComponent {
     if (this.swiperInstance.is(LOOP)) {
       this.generateClones();
 
-      Event.on('refresh', () => {
+      this.swiperInstance.on('refresh', () => {
         this.destroy();
         this.generateClones();
       });
 
-      Event.on('move', () => {
+      this.swiperInstance.on('move', () => {
         this.generateClones();
       });
     }
@@ -93,55 +93,46 @@ export default class CloneComponent implements BaseComponent {
     }
 
     const count = this.getCloneCount();
-    let slides = this.virtual.getSlides();
-
-    while (slides.length < count) {
-      slides = slides.concat(slides);
-    }
+    const slides = this.virtual.getSlides();
+    const firstSlide = slides[0];
+    const lastSlide = slides.slice(-1)[0];
 
     const currentIndex = this.swiperInstance.index;
+    const virtualSlidesLength = this.virtual.getSlides(false).length;
 
-    if (currentIndex > 0 && this.lengthAfter === 0) {
-      slides.slice(0, count).forEach((slide, index) => {
-        const clone = this.cloneDeeply(slide);
+    if (currentIndex > 0 && currentIndex >= virtualSlidesLength - 1 && this.lengthAfter === 0) {
+      this.virtual.slides.slice(0, count).forEach((slide, index) => {
+        const node = domify(`<div class='vswiper-slide'>${slide.html}</div>`) as HTMLElement;
+        const clone = this.cloneDeeply(node);
 
         append(this.track.list, clone);
 
         const slideClone = this.virtual.register(clone, index + length, index);
 
         this._clonesAfter.push(slideClone);
+
+        this.swiperInstance.emit('cloned');
       });
     }
 
     if (this.lengthBefore === 0) {
-      slides.slice(-count).forEach((elm, index) => {
-        const clone = this.cloneDeeply(elm);
+      this.virtual.slides.slice(-count).forEach((slide, index) => {
+        const node = domify(`<div class='vswiper-slide'>${slide.html}</div>`) as HTMLElement;
+        const clone = this.cloneDeeply(node);
 
-        before(clone, slides[0].slide);
+        before(clone, firstSlide.slide);
 
         const slideClone = this.virtual.register(clone, index - count, index);
 
         this._clonesBefore.push(slideClone);
+
+        this.swiperInstance.emit('cloned');
       });
     }
   }
 
-  /**
-   * Return half count of clones to be generated.
-   * Clone count is determined by:
-   * - Max pages a flick action can move.
-   * - Whether the slide length is enough for perPage.
-   *
-   * @return {number} - Count for clones.
-   */
-  private getCloneCount() {
-    const options = this.options;
-
-    if (options.autoWidth) {
-      return this.virtual.length;
-    }
-
-    return options.perPage * (options.drag ? options.flickMaxPages : 1);
+  private getCloneCount(): number {
+    return this.options.cloneCount;
   }
 
   /**
@@ -151,8 +142,8 @@ export default class CloneComponent implements BaseComponent {
    *
    * @return {Node} - A cloned node(element).
    */
-  private cloneDeeply(slide: SlideComponent): HTMLElement {
-    const clone = slide.slide.cloneNode(true) as HTMLElement;
+  private cloneDeeply(element: HTMLElement): HTMLElement {
+    const clone = element.cloneNode(true) as HTMLElement;
 
     addClass(clone, this.swiperInstance.classes.clone);
 

src/components/controller/controller.component.ts

@@ -246,11 +246,11 @@ export default class ControllerComponent implements BaseComponent {
    * Listen some events.
    */
   private bind() {
-    Event.on('move', newIndex => {
+    this.swiperInstance.on('move', newIndex => {
       this.swiperInstance.index = newIndex;
     });
 
-    Event.on('updated refresh', newOptions => {
+    this.swiperInstance.on('updated refresh', newOptions => {
       this.options = newOptions || this.options;
 
       this.swiperInstance.index = between(this.swiperInstance.index, 0, this.edgeIndex);

src/components/drag/drag.component.ts

@@ -46,9 +46,9 @@ export default class DragComponent implements BaseComponent {
     this.layout = components.Layout as BaseLayout;
     this.controller = components.Controller as ControllerComponent;
 
-    Event.on('touchstart mousedown', this.onStart.bind(this), this.track.list);
-    Event.on('touchmove mousemove', this.onMove.bind(this), this.track.list, { passive: false });
-    Event.on('touchend touchcancel mouseleave mouseup dragend', this.onEnd.bind(this), this.track.list);
+    this.swiperInstance.on('touchstart mousedown', this.onStart.bind(this), this.track.list);
+    this.swiperInstance.on('touchmove mousemove', this.onMove.bind(this), this.track.list, { passive: false });
+    this.swiperInstance.on('touchend touchcancel mouseleave mouseup dragend', this.onEnd.bind(this), this.track.list);
   }
 
   /**
@@ -77,7 +77,7 @@ export default class DragComponent implements BaseComponent {
         this.track.translate(this.resist(position));
       } else {
         if (this.shouldMove(this.currentInfo)) {
-          Event.emit('drag', this.startInfo);
+          this.swiperInstance.emit('drag', this.startInfo);
 
           this.isDragging = true;
         }
@@ -143,7 +143,7 @@ export default class DragComponent implements BaseComponent {
     this.startInfo = null;
 
     if (this.isDragging) {
-      Event.emit('dragged', this.currentInfo);
+      this.swiperInstance.emit('dragged', this.currentInfo);
 
       this.go(this.currentInfo);
 

src/components/layout/directions/horizontal-layout.ts

@@ -81,7 +81,7 @@ export class HorizontalLayout extends BaseLayout {
    *
    * @return {number} - The slide width.
    */
-  slideWidth(index: number): number {
+  slideWidth(index?: number): number {
     if (this.options.autoWidth) {
       const slide = this.virtual.getSlide(index);
 

src/components/layout/index.ts

@@ -25,7 +25,7 @@ export abstract class BaseLayout implements BaseComponent {
   abstract get listWidth(): number;
   abstract get listHeight(): number;
   abstract get slideHeight(): number;
-  abstract slideWidth(index: number): number;
+  abstract slideWidth(index?: number): number;
   abstract get height(): number;
   abstract get margin(): string;
   abstract get gap(): number;
@@ -58,15 +58,16 @@ export abstract class BaseLayout implements BaseComponent {
    * Initialize when the component is mounted or options are updated.
    */
   private bind() {
-    Event.on(
+    this.swiperInstance.on(
       'resize load',
       throttle(() => {
-        Event.emit('resize');
+        this.swiperInstance.emit('resize');
       }, THROTTLE),
       window,
     );
-    Event.on('resize', this.onResize.bind(this));
-    Event.on('updated refresh', this.init.bind(this));
+    this.swiperInstance.on('resize', this.onResize.bind(this));
+    this.swiperInstance.on('updated refresh cloned', this.init.bind(this));
+    this.swiperInstance.on('add', this.onResizeSlide.bind(this));
   }
 
   /**
@@ -87,4 +88,24 @@ export abstract class BaseLayout implements BaseComponent {
       });
     });
   }
+
+  /**
+   * Resize slide
+   */
+  private onResizeSlide(index: number) {
+    const slide = this.virtual.getSlide(index, false);
+
+    if (slide == null) {
+      return;
+    }
+
+    applyStyle(this.track.list, { width: unit(this.listWidth), height: unit(this.listHeight) });
+
+    const slideHeight = unit(this.slideHeight);
+
+    applyStyle(slide.slide, {
+      width: this.options.autoWidth ? null : unit(this.slideWidth(slide.index)),
+      height: slide.container ? null : slideHeight,
+    });
+  }
 }

src/components/pagination/index.ts

@@ -0,0 +1,3 @@
+import PaginationComponent from './pagination.component';
+
+export default PaginationComponent;