add emitter fns and test

Author: allyraza

examples/index.html

@@ -102,20 +102,13 @@
                     <div class="grid-canvas">
                     </div>
                 </div>
-                <div class="pagination">
-                </div>
             </div>
         </div>
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
         <script src="/js/index.js"></script>
         <script type="text/javascript">
         $(function() {
-
-var e = new Flow.Emitter();
-e.on('foo', () => console.log('foo fired'));
-e.trigger('foo');
-
             var dataProvider = new Flow.AjaxDataProvider({
                 url: 'http://192.168.60.167:3002/api.php',
                 pagination: {

gulpfile.js

@@ -14,16 +14,10 @@ gulp.task('js', () => {
     .pipe(plumber())
     .pipe(rollup({
       plugins: [
-        resolve({
-          jsnext: true,
-          main: true
-        }),
-        commonjs({
-          include: './src/js',
-          extensions: ['.js']
-        }),
+        resolve({ jsnext: true, main: true }),
+        commonjs({ include: './src/js', extensions: ['.js'] }),
         babel({
-          presets: [["es2015", { modules: false }]],
+          presets: [['es2015', { modules: false }]],
           exclude: 'node_modules/**',
           plugins: ['external-helpers'],
           externalHelpers: true

spec/emitter-spec.js

@@ -1,7 +1,58 @@
 import Emitter from '../src/js/emitter';
 
 describe('Emitter', () => {
-  it(".on('foo')", () => {
-    expect(true).toEqual(true);
+  let emitter;
+  let result;
+
+  beforeEach(() => {
+    emitter = new Emitter();
+    result = [];
+  });
+
+  it(".on(eventName, fn)", () => {
+    registerEvents();
+    emitEvents();
+
+    expect(result).toEqual([1, 2, 1, 2]);
+  });
+
+  it(".once(eventName, fn)", () => {
+    emitter.once('foo', (n) => {
+      result.push(n);
+    });
+
+    emitter.once('bar', (n) => {
+      result.push(n);
+    });
+
+    emitEvents();
+
+    expect(result).toEqual([1, 1]);
+  });
+
+  it(".off(eventName, fn)", () => {
+    registerEvents();
+    emitter.off('foo');
+    emitEvents();
+
+    expect(result).toEqual([1, 2]);
   });
+
+  let registerEvents = () => {
+    emitter.on('foo', (n) => {
+      result.push(n);
+    });
+
+    emitter.on('bar', (n) => {
+      result.push(n);
+    });
+  };
+
+  let emitEvents = () => {
+    emitter.emit('foo', 1);
+    emitter.emit('foo', 2);
+    emitter.emit('bar', 1);
+    emitter.emit('bar', 2);
+  };
 });
+

src/js/emitter.js

@@ -1,29 +1,120 @@
-/*
-var emitter = new Emitter();
+/**
+ * A minimal event emitter implemention in ES6, api is fairly to similar to
+ * node api check node emitter documention for information.
+ *
+ * @example
+ * ```
+ * var emitter = new Emitter();
+ * emitter.on('foo', () => {
+ *   console.log('foo triggered');
+ * });
+ * emitter.emit('foo');
+ * ```
+ */
 
-emitter.on('foo', function() {
-  console.log('foo triggered');
-});
-
-emitter.off('foo');
-*/
 class Emitter {
   constructor() {
-    this.callbacks = {};
+    this.events = {};
   }
 
-  on(name, fn) {
-    this.callbacks[name] = fn;
+  /**
+   * Register an `event`.
+   *
+   * @param {String} eventName
+   * @param {Function} fn
+   * @return {Emitter}
+   */
+
+  on(eventName, fn) {
+    if (typeof this.events[eventName] === 'undefined') {
+      this.events[eventName] = [];
+    }
+
+    this.events[eventName].push(fn);
+    return this;
   }
 
-  emit() {
-    // eslint-disable-next-line no-console
-    console.log(this.callbacks);
+  /**
+   * Remove an `event`.
+   *
+   * @param {String} eventName
+   * @param {Function} fn
+   * @return {Emitter}
+   */
+
+  off(eventName, fn) {
+    if (typeof eventName === 'undefined') {
+      this.events = {};
+    }
+
+    if (typeof fn === 'undefined') {
+      this.events[eventName] = [];
+    }
+
+    if (typeof fn === 'function') {
+      let i;
+      let events = this.events[eventName];
+
+      for (i = 0; i < events.length; i += 1) {
+        if (events[i] === fn) {
+          events.splice(i, 1);
+        }
+      }
+    }
+
+    return this;
   }
 
-  trigger() {
-    // eslint-disable-next-line no-console
-    console.log(this.callbacks);
+  /**
+   * Register an `event` which is fired only once and removed.
+   *
+   * @param {Strint} eventName
+   * @param {Function} fn
+   * @return {Emitter}
+   */
+
+  once(eventName, fn) {
+    let self = this;
+    let cb = (data) => {
+      self.off(eventName, cb);
+      fn.call(this, data);
+    };
+
+    this.on(eventName, cb);
+    return this;
+  }
+
+  /**
+   * Emit `event` with given arguments.
+   *
+   * @param {String} eventName
+   * @param {Mixed} args
+   * @return {Emitter}
+   */
+
+  emit(eventName, data) {
+    var i;
+    var events = this.events[eventName];
+
+    if (typeof events === 'undefined') {
+      return this;
+    }
+
+    for (i = 0; i < events.length; i += 1) {
+      events[i].call(this, data);
+    }
+
+    return this;
+  }
+
+  /**
+   * An alias to `emit`.
+   *
+   * @see `emit`
+   */
+
+  trigger(eventName, data) {
+    return this.emit(eventName, data);
   }
 }
 

src/js/grid.js

@@ -1,3 +1,4 @@
+/* global $ */
 import Emitter from './emitter';
 
 class Grid extends Emitter {
@@ -10,12 +11,36 @@ class Grid extends Emitter {
     }
 
     this.columns = options.columns;
-    this.dataProvider = options.dataProvider;
+    this.provider = options.dataProvider;
+
+    this.render();
   }
 
   render() {
-    // eslint-disable-next-line no-console
-    console.log(this.el);
+    const { el, columns, provider } = this;
+    const data = provider.getData();
+    const thead = $('<thead/>');
+    const dataLength = data.length;
+
+    for (let i = 0; i < columns.length; i += 1) {
+      
+      let column = columns[i];
+      const tr = $('<tr/>');
+
+      for (let j = 0; j < dataLength; j += 1) {
+        let cell = data[j];
+        let div = $('<td class="grid-cell"/>').text(cell);
+
+
+        // eslint-disable-next-line no-console
+        console.log(cell);
+        tr.append(div);
+      }
+
+      thead.append(tr);
+    }
+
+    el.append(thead);
   }
 }
 

src/js/pager.js

@@ -3,20 +3,19 @@ import Emitter from './emitter';
 
 class Pager extends Emitter {
   contructor(options) {
-    var $container = options.el;
-    var dataProvider = options.dataProvider;
-    var $el = $('<div class="grid-pager"/>');
-    var $status;
+    this.container = options.el;
+    this.provider = options.dataProvider;
+    this.el = $('<div class="grid-pager"/>');
+    this.status = null;
 
     this.render();
-    registerEvents();
-    updatePager(dataProvider.getPagination());
+    this.registerEvents();
+    this.pagination = this.provider.pagination;
+    this.updatePager(this.pagination);
   }
 
   registerEvents() {
-    dataProvider.onPaginationUpdated.subscribe(function(e, pager) {
-      updatePager(pager);
-    });
+    this.pagination.on('update', this.updatePager);
   }
 
   getState() {
@@ -34,11 +33,9 @@ class Pager extends Emitter {
   }
 
   setPageSize(n) {
-    dataProvider.setRefreshHints({
-      isFilterUnchanged: true
-    });
+    this.provider.setRefreshHints({ updateFilter: false });
     var page = parseInt(n, 10);
-    dataProvider.setPageSize(n);
+    this.pagination.setPageSize(n);
   }
 
   gotoFirst() {
@@ -69,17 +66,18 @@ class Pager extends Emitter {
   }
 
   render() {
-    var $nav = $('<ul class="pagination"/>').appendTo($el);
-    var $settings = $('<div class="grid-pagesize pagesize"/>').appendTo($el);
-    $status = $('<div class="grid-summary"/>').appendTo($el);
+    const { el } = this;
+    const nav = $('<ul class="pagination"/>').appendTo(el);
+    const settings = $('<div class="grid-pagesize pagesize"/>').appendTo(el);
+    this.status = $('<div class="grid-summary"/>').appendTo(el);
 
-    $settings
+    settings
       .append('<p class="pagesize-links expanded" style="display:none"><span>Show:</span><a href="#" data-pagesize="0">All</a><a href="#" data-pagesize="25">25</a><a href="#" data-pagesize="50">50</a><a href="#" data-pagesize="100">100</a></p>');
 
-    $settings.find("a[data-pagesize]").click((e) => {
-      var pageSize = $(e.target).attr("data-pagesize");
-      if (pageSize !== undefined) {
-          setPageSize(pageSize);
+    settings.find("a[data-pagesize]").click((e) => {
+      var pageSize = $(e.target).data("pagesize");
+      if (typeof pageSize !== 'undefined') {
+          this.setPageSize(pageSize);
       }
     });
 
@@ -112,27 +110,28 @@ class Pager extends Emitter {
   }
 
 
-  updatePager(pager) {
-    var state = getState();
+  updatePager(pagination) {
+    var state = this.getState();
+    const { el, status } = this;
 
-    $el.find(".pager-pagination .page-link").removeClass("disabled");
+    el.find(".pager-pagination .page-link").removeClass("disabled");
     if (!state.canGotoFirst) {
-      $el.find(".page-icon-first").addClass("disabled");
+      el.find(".page-icon-first").addClass("disabled");
     }
     if (!state.canGotoLast) {
-      $el.find(".page-icon-last").addClass("disabled");
+      el.find(".page-icon-last").addClass("disabled");
     }
     if (!state.canGotoNext) {
-      $el.find(".page-icon-next").addClass("disabled");
+      el.find(".page-icon-next").addClass("disabled");
     }
     if (!state.canGotoPrev) {
-      $el.find(".page-icon-prev").addClass("disabled");
+      el.find(".page-icon-prev").addClass("disabled");
     }
 
-    if (pager.pageSize === 0) {
-      $status.text("Showing all " + pager.totalCount + " rows");
+    if (pagination.pageSize === 0) {
+      status.text("Showing all " + pagination.totalCount + " rows");
     } else {
-      $status.text("Showing page " + (pager.page + 1) + " of " + pager.totalPages);
+      status.text("Showing page " + (pagination.page + 1) + " of " + pagination.totalPages);
     }
   }
 }