feat(components): implement component/plugin system and move controls…

… there

examples/src/index.ts

@@ -1,7 +1,9 @@
 import './../../dist/index.css';
 
 import { Virchual } from './../../src/virchual';
+import { Controls } from './../../src/components';
 
+console.log(Virchual, Controls);
 [].forEach.call(document.querySelectorAll('.image-swiper'), (slider: HTMLElement) => {
   const instance = new Virchual(slider, {
     slides: () => {
@@ -32,5 +34,5 @@ import { Virchual } from './../../src/virchual';
     },
   });
 
-  instance.mount();
+  instance.mount([Controls]);
 });

src/components/component.ts

@@ -0,0 +1,15 @@
+import { Virchual } from './../virchual';
+import { Event } from './../utils/event';
+
+export type ComponentDependencies = {
+  virchual: Virchual;
+  eventBus: Event;
+};
+
+export interface ComponentConstructor {
+  new (dependencies: ComponentDependencies): Component;
+}
+
+export interface Component {
+  mount(): void;
+}

src/components/controls/controls.ts

@@ -0,0 +1,37 @@
+import { Component, ComponentDependencies } from './../component';
+import { identity } from '../../types';
+import { stop } from '../../utils/event';
+
+export class Controls implements Component {
+  private buttons: HTMLButtonElement[];
+  private onClickBound: () => identity;
+
+  constructor(private dependencies: ComponentDependencies) {
+    this.buttons = [].slice.call(dependencies.virchual.container.querySelectorAll('.virchual__control'));
+
+    dependencies.eventBus.on('destroy', () => {
+      console.log('controls component destroy');
+    });
+
+    this.onClickBound = this.onClick.bind(this);
+  }
+
+  mount(): void {
+    this.buttons.forEach(button => this.dependencies.eventBus.on('click', this.onClickBound, button));
+  }
+
+  private onClick(event: MouseEvent) {
+    stop(event);
+
+    const button: HTMLButtonElement = (event.target as Element).closest('button') as HTMLButtonElement;
+    const control = button.dataset.controls as 'prev' | 'next';
+
+    if (control === 'prev') {
+      this.dependencies.virchual.prev();
+
+      return;
+    }
+
+    this.dependencies.virchual.next();
+  }
+}

src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './component';
+
+export { Controls } from './controls/controls';

src/index.ts

@@ -1,8 +1,9 @@
+import { Controls } from './components/controls/controls';
 import { Virchual } from './virchual';
 
-export { Virchual };
+export { Virchual, Controls };
 
 // For CommonJS default export support
-module.exports = Virchual;
+module.exports = { Virchual, Controls };
 module.exports.default = Virchual;
 module.exports.__esModule = true;

src/virchual.ts

@@ -1,8 +1,9 @@
+import { ComponentConstructor } from './components/component';
 import './css/styles.css';
 import { Drag } from './drag';
 import { Pagination } from './pagination';
 import { Slide } from './slide';
-import { Sign, identity } from './types';
+import { identity, Sign } from './types';
 import { assert } from './utils/error';
 import { Event, stop } from './utils/event';
 import { slidingWindow } from './utils/sliding-window';
@@ -21,7 +22,6 @@ export type VirchualSettings = {
 
 export class Virchual {
   frame: HTMLElement;
-  paginationButtons: HTMLButtonElement[];
   currentIndex = 0;
 
   private slides: Slide[] = [];
@@ -33,12 +33,10 @@ export class Virchual {
     onClick: () => identity;
     onDrag: () => identity;
     onDragEnd: () => identity;
-    onPaginationButtonClick: () => identity;
   };
 
   constructor(public container: HTMLElement, public settings: VirchualSettings = {}) {
     this.frame = this.container.querySelector('.virchual__frame');
-    this.paginationButtons = [].slice.call(this.container.querySelectorAll('.virchual__control'));
 
     assert(this.frame, 'Invalid element');
 
@@ -61,7 +59,6 @@ export class Virchual {
       onClick: this.onClick.bind(this),
       onDrag: this.onDrag.bind(this),
       onDragEnd: this.onDragEnd.bind(this),
-      onPaginationButtonClick: this.onPaginationButtonClick.bind(this),
     };
 
     let rawSlides;
@@ -87,7 +84,13 @@ export class Virchual {
   /**
    * Mount components.
    */
-  mount() {
+  mount(components: Array<ComponentConstructor> = []) {
+    console.debug('[Mount] Virchual', components);
+
+    components.forEach(component => {
+      new component({ virchual: this, eventBus: this.eventBus }).mount();
+    });
+
     this.eventBus.emit('mounted');
 
     this.mountAndUnmountSlides();
@@ -226,8 +229,6 @@ export class Virchual {
     this.eventBus.on('drag', this.eventBindings.onDrag);
     this.eventBus.on('dragend', this.eventBindings.onDragEnd);
     this.eventBus.on('click', this.eventBindings.onClick, this.frame, { capture: true });
-
-    this.paginationButtons.forEach(button => this.eventBus.on('click', this.eventBindings.onPaginationButtonClick, button));
   }
 
   /**
@@ -239,17 +240,6 @@ export class Virchual {
     this.isBusy && stop(event);
   }
 
-  private onPaginationButtonClick(event: MouseEvent) {
-    stop(event);
-
-    const button: HTMLButtonElement = (event.target as Element).closest('button') as HTMLButtonElement;
-    const control = button.dataset.controls as 'prev' | 'next';
-
-    const move = control === 'prev' ? this.prev.bind(this) : this.next.bind(this);
-
-    move();
-  }
-
   /**
    * Handle drag event.
    *

tsconfig.json

@@ -11,6 +11,6 @@
     "types": ["node", "jest"],
     "sourceMap": true
   },
-  "include": ["src/index.ts", "examples"],
+  "include": ["src/index.ts"],
   "exclude": ["node_modules"]
 }