Feature add: Demo with all options toggleable (#27)

* - importing angular everywhere but base * moved directives to default export * added all options, some small bug fixes * initial commit
jonshaffer · Dec 22, 2016 · 38fbd31 · 38fbd31
1 parent 717193d
commit 38fbd31
Show file tree

Hide file tree

Showing 29 changed files with 233 additions and 54 deletions.
diff --git a/demos/all-options.html b/demos/all-options.html
@@ -0,0 +1,191 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset=" utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta name="viewport" content="width = device-width, minimal-ui, initial-scale = 1, user-scalable = no" />
+    <meta name="apple-mobile-web-app-title" content="Datagrid">
+    <title>Datagrid - All Options</title>
+    <base href="/">
+    <style>
+      *, *:after, *:before {
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+      }
+
+      body{
+        font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
+        font-style: normal;
+        font-weight: 300;
+        font-size: 1.4rem;
+        line-height: 2rem;
+        letter-spacing: 0.01rem;
+        color: #212121;
+        background-color: #f5f5f5;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-rendering: optimizeLegibility;
+      }
+
+      .dt{
+        width:75%;
+        margin:50px auto;
+      }
+
+    </style>
+    <link href="../dist/dataTable.css" media="all" rel="stylesheet" />
+    <link href="../dist/themes/material.css" media="all" rel="stylesheet" />
+    <link href="http://fontastic.s3.amazonaws.com/Jnf54BZCm7mSjGCxNRbfp3/icons.css" rel="stylesheet">
+  </head>
+  <body ng-app="app" ng-controller="HomeController">
+    <button type="button" ng-click="clearData()">Clear Data</button>
+    <button type="button" ng-click="loadData()">Load Data</button>
+
+    <button type="button" ng-click="groupCountry()">Group on Country</button>
+    <button type="button" ng-click="groupYear()">Group on Year</button>
+    <button type="button" ng-click="groupingOff()">Grouping off</button>
+
+    <label><input type="checkbox" ng-change="addRemovePaging()" ng-model="hasPaging" />Has Paging</label>
+    <label><input type="checkbox" ng-change="addRemoveScrollbarV()" ng-model="hasScrollbarV" />Has ScrollbarV</label>
+    <label><input type="checkbox" ng-model="showTable" />Show Table</label>
+
+    <div ng-if="showTable">
+      <dtable options="options" rows="data" class="material" on-row-dbl-click="onRowDblClick(row)"></dtable>
+    </div>
+
+    <script src="../jspm_packages/system.js"></script>
+    <script src="../config.js"></script>
+
+    <script>
+
+      System.import('dataTable').then(function(dt){
+        var module = angular.module('app', [ dt.default.name ]);
+
+        module.controller('HomeController', function($scope, $http){
+          window.scope = $scope;
+          $scope.hasPaging = false;
+          $scope.hasScrollbarV = false;
+          $scope.showTable = true;
+          $scope.data = [];
+
+          $scope.options = {
+            rowHeight: 50,
+            headerHeight: 50,
+            footerHeight: false,
+            scrollbarV: $scope.hasScrollbarV, // Note: this loses reference to scope variable when passed to directive
+            selectable: false,
+            columns: [
+              { name: 'Athlete', prop: 'athlete', width: 300 },
+              { name: 'Country', prop: 'country' },
+              { name: 'Year', prop: 'year' },
+              { name: 'Sport', prop: 'sport' }
+            ]
+          };
+
+          $scope.onRowDblClick = function(row) {
+              console.log('Row Double Clicked', row);
+          }
+
+          /** Loading/Clearing data section **/
+          $scope.loadData = function() {
+            $scope.data = undefined;
+
+            $http.get('/demos/data/olympics.json').success(function(data) {
+              $scope.data = data;
+
+              if ($scope.hasPaging) {
+                angular.extend($scope.options, {
+                  paging: {
+                    count: data.length
+                  }
+                });
+              }
+            });
+          };
+
+          $scope.clearData = function() {
+            if ($scope.data) {
+              $scope.data.splice(0, $scope.data.length);
+
+              if ($scope.options.paging.count) {
+                angular.extend($scope.options.paging, {
+                  count: 0
+                });
+              }
+            }
+          };
+
+          /** Grouping section **/
+
+          $scope.groupCountry = function() {
+            _clearGroupColumns();
+
+            var col = $scope.options.columns.find(function(c) {
+              return c.prop === 'country';
+            });
+
+            col.group = !col.group;
+          };
+
+          $scope.groupYear = function() {
+            _clearGroupColumns();
+
+            var col = $scope.options.columns.find(function(c) {
+              return c.prop === 'year';
+            });
+
+            col.group = !col.group;
+          };
+
+          $scope.groupingOff = function() {
+            _clearGroupColumns();
+          };
+
+          function _clearGroupColumns() {
+            $scope.options.columns.map(function(column) {
+              if (column.group) {
+                delete column.group;
+              }
+            });
+          };
+
+          /** Paging section **/
+          $scope.addRemovePaging = function() {
+            if ($scope.hasPaging) {
+              angular.extend($scope.options, {
+                footerHeight: 50,
+                paging: {
+                  size: 10,
+                  count: ($scope.data) ? $scope.data.length : 0
+                }
+              });
+            } else {
+              angular.extend($scope.options, {
+                footerHeight: undefined,
+                paging: {}
+              });
+            }
+          };
+
+          /** Scrollbar section **/
+          $scope.addRemoveScrollbarV = function() {
+            if ($scope.hasScrollbarV) {
+              angular.extend($scope.options, {
+                scrollbarV: true
+              });
+            } else {
+              angular.extend($scope.options, {
+                scrollbarV: false
+              });
+            }
+          }
+
+        });
+      });
+    </script>
+
+  </body>
+</html>
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -46,7 +46,7 @@ gulp.task('es6', function () {
     .pipe(changed(path.output, { extension: '.js' }))
     .pipe(babel())
     .pipe(ngAnnotate({
-      gulpWarnings: false
+      gulpWarnings: true
     }))
     .pipe(gulp.dest(path.output))
     .pipe(browserSync.reload({ stream: true }));

diff --git a/index.html b/index.html
@@ -102,6 +102,7 @@ <h1>Table Demos</h1>
         <li><a href="demos/virtual.html">100k Rows</a></li>
         <li><a href="demos/perf.html">10 Grids on One Page</a></li>
         <li><a href="demos/perf-horzscroll.html">Horz Scrolling and Full Screen</a></li>
+        <li><a href="demos/all-options.html">All Options</a></li>
       </ul>
     </li>
     <li>Plugins

diff --git a/src/components/DataTableController.js b/src/components/DataTableController.js
@@ -1,4 +1,3 @@
-import angular from 'angular';
 import { TableDefaults, ColumnDefaults } from '../defaults';
 import { AdjustColumnWidths, ForceFillColumnWidths } from '../utils/math';
 import { ColumnsByPin, ColumnGroupWidths, CamelCase, ObjectId, ScrollbarWidth } from '../utils/utils';
@@ -47,6 +46,7 @@ export class DataTableController {
     var watch = this.$scope.$watch('dt.rows', (newVal) => {
       if (newVal) {
         watch();
+
         this.onSorted();
       }
     });
@@ -58,8 +58,7 @@ export class DataTableController {
   defaults(){
     this.expanded = this.expanded || {};
 
-    this.options = angular.extend(angular.
-      copy(TableDefaults), this.options);
+    this.options = angular.extend(angular.copy(TableDefaults), this.options);
 
     angular.forEach(TableDefaults.paging, (v,k) => {
       if(!this.options.paging[k]){

diff --git a/src/components/DataTableDirective.js b/src/components/DataTableDirective.js
@@ -1,10 +1,9 @@
-import angular from 'angular';
 import { DataTableController } from './DataTableController';
 import { ScrollbarWidth, ObjectId } from '../utils/utils';
 import { throttle } from '../utils/throttle';
 import { DataTableService } from './DataTableService';
 
-export function DataTableDirective($window, $timeout, $parse){
+export default function DataTableDirective($window, $timeout, $parse){
   return {
     restrict: 'E',
     replace: true,
@@ -102,10 +101,13 @@ export function DataTableDirective($window, $timeout, $parse){
             ctrl.adjustColumns();
           };
 
-          $window.addEventListener('resize',
+          function _calculateResize() {
             throttle(() => {
               $timeout(resize);
-            }));
+            });
+          }
+
+          $window.addEventListener('resize', _calculateResize);
 
           // When an item is hidden for example
           // in a tab with display none, the height

diff --git a/src/components/DataTableService.js b/src/components/DataTableService.js
@@ -1,4 +1,3 @@
-import angular from 'angular';
 import { ColumnDefaults } from '../defaults';
 import { CamelCase } from '../utils/utils';
 
@@ -60,7 +59,7 @@ export let DataTableService = {
         });
 
         let header = c.getElementsByTagName('column-header');
-        
+
         if (header.length) {
           column.headerTemplate = header[0].innerHTML;
           c.removeChild(header[0])

diff --git a/src/components/body/BodyDirective.js b/src/components/body/BodyDirective.js
@@ -1,6 +1,6 @@
 import BodyController from './BodyController';
 
-export function BodyDirective($timeout){
+export default function BodyDirective($timeout){
   return {
     restrict: 'E',
     controller: BodyController,

diff --git a/src/components/body/CellDirective.js b/src/components/body/CellDirective.js
@@ -1,7 +1,6 @@
-import angular from 'angular';
 import { CellController } from './CellController';
 
-export function CellDirective($rootScope, $compile, $log, $timeout){
+export default function CellDirective($rootScope, $compile, $log, $timeout){
   return {
     restrict: 'E',
     controller: CellController,
@@ -67,7 +66,7 @@ export function CellDirective($rootScope, $compile, $log, $timeout){
             } else {
               content[0].innerHTML = ctrl.getValue();
             }
-            
+
           }, true);
 
           function createCellScope(){

diff --git a/src/components/body/GroupRowDirective.js b/src/components/body/GroupRowDirective.js
@@ -1,7 +1,7 @@
 import { GroupRowController } from './GroupRowController';
 import { TranslateXY } from '../../utils/translate';
 
-export function GroupRowDirective(){
+export default function GroupRowDirective(){
   return {
     restrict: 'E',
     controller: GroupRowController,

diff --git a/src/components/body/RowController.js b/src/components/body/RowController.js
@@ -1,4 +1,3 @@
-import angular from 'angular';
 import { DeepValueGetter } from '../../utils/utils';
 import { TranslateXY } from '../../utils/translate';
 

diff --git a/src/components/body/RowDirective.js b/src/components/body/RowDirective.js
@@ -1,7 +1,7 @@
 import { RowController } from './RowController';
 import { TranslateXY } from '../../utils/translate';
 
-export function RowDirective(){
+export default function RowDirective(){
   return {
     restrict: 'E',
     controller: RowController,

diff --git a/src/components/body/ScrollerDirective.js b/src/components/body/ScrollerDirective.js
@@ -2,7 +2,7 @@ import { requestAnimFrame } from '../../utils/utils';
 import { StyleTranslator } from './StyleTranslator';
 import { TranslateXY } from '../../utils/translate';
 
-export function ScrollerDirective($timeout, $rootScope){
+export default function ScrollerDirective($timeout, $rootScope){
   return {
     restrict: 'E',
     require:'^dtBody',

diff --git a/src/components/body/SelectionDirective.js b/src/components/body/SelectionDirective.js
@@ -1,6 +1,6 @@
 import { SelectionController } from './SelectionController';
 
-export function SelectionDirective(){
+export default function SelectionDirective(){
   return {
     controller: SelectionController,
     restrict: 'A',

diff --git a/src/components/footer/FooterDirective.js b/src/components/footer/FooterDirective.js
@@ -1,6 +1,6 @@
 import { FooterController } from './FooterController';
 
-export function FooterDirective(){
+export default function FooterDirective(){
   return {
     restrict: 'E',
     controller: FooterController,

diff --git a/src/components/footer/PagerDirective.js b/src/components/footer/PagerDirective.js
@@ -1,6 +1,6 @@
 import { PagerController } from './PagerController';
 
-export function PagerDirective(){
+export default function PagerDirective(){
   return {
     restrict: 'E',
     controller: PagerController,

diff --git a/src/components/header/HeaderCellController.js b/src/components/header/HeaderCellController.js
@@ -1,6 +1,7 @@
 import { NextSortDirection } from '../../utils/utils';
 
-export class HeaderCellController {
+export default class HeaderCellController {
+  /* @ngInject */
   constructor($scope) {
     Object.assign(this, {
       $scope

diff --git a/src/components/header/HeaderCellController.spec.js b/src/components/header/HeaderCellController.spec.js
@@ -1,4 +1,4 @@
-import { HeaderCellController } from './HeaderCellController';
+import HeaderCellController from './HeaderCellController';
 
 describe('HeaderCellController', function () {
   //

diff --git a/src/components/header/HeaderCellDirective.js b/src/components/header/HeaderCellDirective.js
@@ -1,7 +1,6 @@
-import angular from 'angular';
-import { HeaderCellController } from './HeaderCellController';
+import HeaderCellController from './HeaderCellController';
 
-export function HeaderCellDirective($compile){
+export default function HeaderCellDirective($compile){
   return {
     restrict: 'E',
     controller: HeaderCellController,

diff --git a/src/components/header/HeaderDirective.js b/src/components/header/HeaderDirective.js
@@ -1,7 +1,6 @@
-import angular from 'angular';
 import { HeaderController } from './HeaderController';
 
-export function HeaderDirective($timeout){
+export default function HeaderDirective($timeout){
   return {
     restrict: 'E',
     controller: HeaderController,

diff --git a/src/components/header/ResizableDirective.js b/src/components/header/ResizableDirective.js
@@ -5,7 +5,7 @@
  * @param {function}
  * @param {function}
  */
-export function ResizableDirective($document, $timeout){
+export default function ResizableDirective($document, $timeout){
   return {
     restrict: 'A',
     scope:{