add a emitter class

Author: allyraza

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": [["es2015"]]
+  "presets": ["es2015"]
 }

.eslintrc

@@ -2,17 +2,16 @@
 
   "env": {
     "browser": true,
-    "node": true
+    "node": true,
+    "mocha": true
   },
 
   "extends": "airbnb-base/legacy",
 
   "parser": "babel-eslint",
 
   "rules": {
-    "strict": 0,
-
-    "no-console": 1
+    "func-names": "off"
   }
 
 }

src/api.php renamed to examples/api.php

@@ -4,9 +4,6 @@
         <title>Listview Example</title>
 
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
-        <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
-        <link rel="stylesheet" href="/node_modules/slickgrid/slick.grid.css">
-        <link rel="stylesheet" href="/node_modules/slickgrid/css/smoothness/jquery-ui-1.11.3.custom.css">
         <link rel="stylesheet" href="/css/grid.css">
         <style>
             .container {
@@ -111,16 +108,37 @@
         </div>
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
-        <script src="/node_modules/slickgrid/lib/jquery-ui-1.11.3.js"></script>
-        <script src="/node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js"></script>
-        <script src="/node_modules/slickgrid/slick.core.js"></script>
-        <script src="/node_modules/slickgrid/slick.formatters.js"></script>
-        <script src="/node_modules/slickgrid/slick.editors.js"></script>
-        <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
         <script src="/js/index.js"></script>
         <script type="text/javascript">
         $(function() {
-        //    Slick.createAjaxGrid();
+
+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: {
+                    pageSize: 25,
+                    pageParam: 'page',
+                }
+            });
+
+            var grid = new Flow.Grid({
+                el: $('.grid'),
+                dataProvider: dataProvider,
+                editable: false,
+                sortable: false,
+                filterable: false,
+                columns: [
+                    { id: 'first_name', name: 'First name', field: 'first_name', width: 200 },
+                    { id: 'last_name', name: 'Last name', field: 'last_name', width: 150 },
+                    { id: 'title', name: 'Title', field: 'title', width: 250 },
+                    { id: 'city', name: 'City', field: 'city', width: 150 },
+                    { id: 'date', name: 'Date', field: 'date', width: 150 },
+                    { id: 'amount', name: 'Amount', field: 'amount', width: 150 }
+                ]
+            });
         });
         </script>
     </body>

src/index.html renamed to examples/index.html

@@ -6,9 +6,11 @@ const plumber = require('gulp-plumber');
 const rollup = require('gulp-better-rollup');
 const commonjs = require('rollup-plugin-commonjs');
 const resolve = require('rollup-plugin-node-resolve');
+const babel = require('rollup-plugin-babel');
+const jasmine = require('gulp-jasmine');
 
 gulp.task('js', () => {
-  gulp.src('./src/js/**/*.js')
+  gulp.src('./src/js/index.js')
     .pipe(plumber())
     .pipe(rollup({
       plugins: [
@@ -19,15 +21,29 @@ gulp.task('js', () => {
         commonjs({
           include: './src/js',
           extensions: ['.js']
+        }),
+        babel({
+          presets: [["es2015", { modules: false }]],
+          exclude: 'node_modules/**',
+          plugins: ['external-helpers'],
+          externalHelpers: true
         })
       ],
       format: 'umd',
-      moduleName: 'Slick'
+      moduleName: 'Flow'
     }))
     .pipe(gulp.dest('./dist/js'))
     .pipe(browserSync.stream());
 });
 
+gulp.task('test', () => {
+  gulp.src('spec/**')
+    .pipe(plumber())
+    .pipe(jasmine({
+      config: 'spec/support/jasmine.json'
+    }));
+});
+
 gulp.task('eslint', function() {
   return gulp.src('./src/js/*.js')
     .pipe(plumber())
@@ -52,7 +68,7 @@ gulp.task('html', function() {
 
 gulp.task('serve', ['html', 'eslint', 'js', 'sass'], function() {
   browserSync.init({
-    server: ['./dist', './']
+    server: ['./dist', './examples', './']
   });
 
   gulp.watch('./src/js/*.js', ['eslint', 'js']);

gulpfile.js

@@ -18,16 +18,21 @@
     "babel-core": "^6.24.0",
     "babel-eslint": "^7.2.1",
     "babel-preset-es2015": "^6.24.0",
+    "babel-register": "^6.24.1",
     "browser-sync": "^2.18.8",
     "eslint-config-airbnb-base": "^11.1.3",
     "eslint-config-import": "^0.13.0",
+    "eslint-plugin-import": "^2.2.0",
     "gulp": "^3.9.1",
+    "gulp-babel": "^6.1.2",
     "gulp-better-rollup": "^1.1.1",
     "gulp-eslint": "^3.0.1",
+    "gulp-jasmine": "^2.4.2",
     "gulp-plumber": "^1.1.0",
     "gulp-sass": "^3.1.0",
     "jquery": "^3.2.1",
     "rollup": "^0.41.6",
+    "rollup-plugin-babel": "^2.7.1",
     "rollup-plugin-commonjs": "^8.0.2",
     "rollup-plugin-node-resolve": "^3.0.0"
   }

package.json

@@ -0,0 +1,7 @@
+import Emitter from '../src/js/emitter';
+
+describe('Emitter', () => {
+  it(".on('foo')", () => {
+    expect(true).toEqual(true);
+  });
+});

spec/emitter-spec.js

@@ -0,0 +1,12 @@
+{
+  "spec_dir": "spec",
+  "spec_files": [
+    "**/*[sS]pec.js"
+  ],
+  "helpers": [
+    "../node_modules/babel-register/lib/node.js",
+    "helpers/**/*.js"
+  ],
+  "stopSpecOnExpectationFailure": false,
+  "random": false
+}

spec/support/jasmine.json

@@ -1,95 +1,99 @@
-/* global Slick, $ */
-
-/**
- * A sample AJAX data store implementation.
- * Right now, it's hooked up to load Hackernews stories, but can
- * easily be extended to support any JSONP-compatible backend that accepts paging parameters.
- */
-function AjaxDataProvider() {
-  // private
-  var pageSize = 10;
-  var page = 0;
-  var totalCount = 0;
-  var data = [];
-  var url = 'http://192.168.60.167:3002/api.php';
-
-  var onDataLoaded = new Slick.Event();
-  var onDataLoading = new Slick.Event();
-  var onPaginationUpdated = new Slick.Event();
-  var refreshHints = {};
-
-  function init() {
-    if (data.length <= 0) {
-      prepareData();
+/* eslint-disable */
+/* global $ */
+import Emitter from './emitter';
+import Pagination from './pagination';
+
+class AjaxDataProvider extends Emitter {
+  constructor() {
+    super();
+
+    this.pageSize = 10;
+    this.page = 0;
+    this.totalCount = 0;
+    this.data = [];
+
+    this.pagination = new Pagination({
+    });
+
+    this.url = 'http://192.168.60.167:3002/api.php';
+    this.refreshHints = {};
+    if (this.data.length <= 0) {
+      this.prepareData();
     }
   }
 
-  function setRefreshHints(hints) {
-    refreshHints = hints;
+  setRefreshHints(hints) {
+    this.refreshHints = hints;
   }
 
-  function getRefreshHints() {
-    return refreshHints;
+  getRefreshHints() {
+    return this.refreshHints;
   }
 
-  function isDataLoaded(from, to) {
-    return data.slice(from, to)
-               .filter(i => i).length > 0;
+  isDataLoaded(from, to) {
+    return this.data.slice(from, to)
+      .filter(i => i).length > 0;
   }
 
-  function clearData() {
-    data.splice(page, (page * pageSize));
+  clearData() {
+    this.data.splice(this.page, (this.page * this.pageSize));
   }
 
-  function onError() {
-    throw new Error('Could not load page: ' + [page, page * pageSize].join('-'));
+  onError() {
+    throw new Error('Could not load page: ' + [
+      this.page, this.page * this.pageSize
+    ].join('-'));
   }
 
-  function onSuccess(resp) {
-    var from = page * pageSize;
+  onSuccess(resp) {
+    var from = this.page * this.pageSize;
     var to = from;
     if (resp.data.length > 0) {
       to = from + resp.data.length;
-      data = data.concat(resp.data);
+      this.data = this.data.concat(resp.data);
     }
 
-    onDataLoaded.notify({ from: from, to: to });
+    this.emit('dataLoaded', {
+      from: from, to: to
+    });
   }
 
-  function prepareData() {
-    onDataLoading.notify({ from: page, to: page * pageSize });
+  prepareData() {
+    this.emit('dataLoading', {
+      from: this.page, to: this.page * this.pageSize
+    });
 
     $.ajax({
-      url: url,
+      url: this.url,
       type: 'get',
-      data: { page: page, per_page: pageSize },
+      data: { page: this.page, per_page: this.pageSize },
       dataType: 'json',
       cache: true,
-      success: onSuccess,
-      error: onError
+      success: this.onSuccess.bind(this),
+      error: this.onError.bind(this)
     });
   }
 
-  function getData() {
-    return data;
+  getData() {
+    return this.data;
   }
 
-  function refresh(from, to) {
-    clearData();
-    getData(from, to);
+  refresh(from, to) {
+    this.clearData();
+    this.getData(from, to);
   }
 
-  function getPagination() {
-    var totalPages = page * pageSize;
+  getPagination() {
+    var totalPages = this.page * this.pageSize;
     return {
-      page: page,
-      pageSize: pageSize,
-      totalCount: totalCount,
-      totalPages: totalPages
+      page: this.page,
+      pageSize: this.pageSize,
+      totalCount: this.totalCount,
+      totalPages: this.totalPages
     };
   }
 
-  function setPaginationOptions(args) {
+  setPaginationOptions(args) {
     var defaultPageSize = Math.max(0, Math.ceil(totalCount / pageSize) - 1);
 
     if (args.pageSize !== undefined) {
@@ -98,40 +102,21 @@ function AjaxDataProvider() {
     }
 
     if (args.page !== undefined) {
-      page = Math.min(args.page, defaultPageSize);
+      this.page = Math.min(args.page, defaultPageSize);
     }
 
     onPaginationUpdated.notify(getPagination(), null, self);
 
-    refresh();
+    this.refresh();
   }
 
-  function setPageSize(value) {
+  setPageSize(value) {
     pageSize = value;
   }
 
-  function getPageSize() {
+  getPageSize() {
     return pageSize;
   }
-
-  init();
-
-  return {
-    getData: getData,
-    isDataLoaded: isDataLoaded,
-    prepareData: prepareData,
-    refresh: refresh,
-    setPageSize: setPageSize,
-    getPageSize: getPageSize,
-    getPagination: getPagination,
-    setPaginationOptions: setPaginationOptions,
-    setRefreshHints: setRefreshHints,
-    getRefreshHints: getRefreshHints,
-
-    onDataLoaded: onDataLoaded,
-    onDataLoading: onDataLoading,
-    onPaginationUpdated: onPaginationUpdated
-  };
 }
 
 export default AjaxDataProvider;