Merge pull request #1 from DimitarChristoff/interact-js

Interact js

README.md

@@ -17,7 +17,8 @@ The goal is to keep the grid API of the 6pac repository unchanged. Howe
 * converted to ES6
 * dropped IE8 support
 * jquery 3.1.0
-* jquery-ui ^1.12.0
+* dropped jquery-ui (replaced with interact.js)
+* dropped event.drag (replaced with interact.js)
 * move to LESS (SCSS soon)
 
 ![Imgur](http://i.imgur.com/cDQ9SVt.png)

bower.json

@@ -0,0 +1,20 @@
+{
+  "version": "0.2.0",
+  "name": "slickgrid-es6",
+  "description": "Non-tracking fork of slickgrid fork by 6pac to be used via npm - https://github.com/6pac/SlickGrid",
+  "main": "dist/slick.es6.min.js",
+  "authors": [
+    "Michael Leibman"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/DimitarChristoff/slickgrid-es6",
+  "ignore": [
+    "node_modules",
+    "bower_components",
+    "examples"
+  ],
+  "dependencies": {
+    "flatpickr": "1.9.1",
+    "jquery": "3.1.0"
+  }
+}

dist/slick-default-theme.less

@@ -13,18 +13,21 @@
   }
 
   .slick-header-columns {
-    border-bottom: 1px @grid-border-style fade(black, 50%);
-    //box-shadow: 0 1px 1px rgba(0,0,0,.3);
+    border-bottom: 1px solid @grid-border-color;
+    background: linear-gradient(rgba(0,0,0,0) 60%, rgba(0,0,0,.1));
   }
 
   .slick-header-column {
     border-right: 1px solid @grid-border-color;
     border-bottom: 1px solid @grid-border-color;
   }
 
-  .slick-header-column:hover,
+  .slick-header-column:hover {
+    background: darken(@grid-header-background, 2%);
+  }
+
   .slick-header-column-active {
-    background: darken(@grid-header-background, 5%);
+    background: darken(@grid-header-background, 5%) !important;
   }
 
   .slick-headerrow {
@@ -52,6 +55,7 @@
       padding-bottom: 4px;
       padding-left: 4px;
       padding-right: 4px;
+      box-sizing: border-box;
 
       &.invalid {
         border-color: red;
@@ -62,17 +66,33 @@
       }
 
       &.selected {
-        background: #DFE8F6;
+        background-color: rgb(231, 231, 195); // beige
+        padding: 0;
+
       }
 
       &.active {
-        border-color: gray;
+        border-color: black;
         border-style: solid;
         border-width: 1px;
 
         // We compensate for the all-around border (now 1px at top and left too!) by reducing the padding:
         padding-top: 2px;
         padding-left: 3px;
+        input.editor-text {
+          left: 0;
+          right: 0;
+          bottom: 0;
+          top: 0;
+          position: absolute;
+          height: 100%;
+          border: 0;
+          margin: 0;
+          background: transparent;
+          outline: 0;
+          padding: @cell-padding-top @cell-padding-right @cell-padding-bottom @cell-padding-left;
+        }
+
       }
     }
 
@@ -81,7 +101,7 @@
 
       // make sure we override the regular background color:
       &.selected {
-        background-color: rgb(231, 231, 195); // beige
+        background-color: rgb(214, 214, 178); // beige
       }
     }
 
@@ -266,4 +286,12 @@
     min-width: 0;
     margin: 0;
   }
+
+  .slick-range-decorator {
+    z-index: 100;
+    pointer-events: none;
+    background: transparent;
+    border: none;
+    outline: black;
+  }
 }

dist/slick.grid.less

@@ -150,6 +150,14 @@
     margin-left: 10px;
   }
 
+  .slick-header.ui-state-default {
+    box-shadow: 0 1px 2px rgba(0,0,0,.1);
+  }
+
+  .slick-column-name {
+    text-overflow: ellipsis;
+  }
+
   .slick-resizable-handle {
     position: absolute;
     font-size: 0.1px;
@@ -219,4 +227,24 @@
     position: absolute;
     border: 2px dashed black;
   }
+
+}
+
+.flatpickr-wrapper {
+  z-index: 10000;
+}
+
+.interact-placeholder {
+  background: red !important;
+  display: inline-block;
+  float:left;
+  transform: translate(0px, -100%);
+}
+
+.interact-drop-active {
+  box-shadow: inset 0 0 8px rgba(7, 67, 128, 0.5);
+}
+
+.interact-can-drop {
+  opacity: .9;
 }

dist/slick.grid.variables.less

@@ -1,8 +1,8 @@
-@grid-border-color: fade(black, 5%);
+@grid-border-color: fade(black, 3%);
 @grid-border-style: solid;
 
 //@grid-header-background: url('../images/header-columns-bg.gif') repeat-x center bottom;
-@grid-header-background: rgba(255, 255, 255, .9);
+@grid-header-background: rgba(255, 255, 255, .6);
 
 @grid-cell-color: rgb(255, 255, 255);
 

examples/example-data.js

@@ -0,0 +1,15 @@
+const data = [];
+
+for (let i = 0; i < 500; i++){
+  const d = (data[i] = {});
+
+  d['title'] = 'Task ' + i;
+  d['description'] = 'This is a sample task description.\n  It can be multiline';
+  d['duration'] = '5 days';
+  d['percentComplete'] = Math.round(Math.random() * 100);
+  d['start'] = '01/01/2009';
+  d['finish'] = '01/05/2009';
+  d['effortDriven'] = (i % 5 == 0);
+}
+
+export default data;

examples/example1.js

@@ -1,35 +1,30 @@
 import { Grid } from '../src/';
+import data from './example-data';
 
 const columns = [
-  {id: 'title', name: 'Title', field: 'title'},
-  {id: 'duration', name: 'Duration', field: 'duration'},
+  {id: 'title', name: 'Title', field: 'title', maxWidth: 100, minWidth: 80},
+  {id: 'duration', name: 'Duration', field: 'duration', resizable: false},
   {id: '%', name: '% Complete', field: 'percentComplete'},
   {id: 'start', name: 'Start', field: 'start'},
   {id: 'finish', name: 'Finish', field: 'finish'},
   {id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven'}
 ];
 
+let grid;
+
 const options = {
   enableCellNavigation: true,
-  enableColumnReorder: false
+  enableColumnReorder: !false,
+  forceFitColumns: !true
 };
 
-const data = [];
-for (let i = 0; i < 500; i++) {
-  data[i] = {
-    title: 'Task ' + i,
-    duration: '5 days',
-    percentComplete: Math.round(Math.random() * 100),
-    start: '01/01/2009',
-    finish: '01/05/2009',
-    effortDriven: (i % 5 == 0)
-  };
-}
-
 export default {
   init: (id) => {
-    new Grid(id, data, columns, options);
+    grid = new Grid(id, data, columns, options);
+    grid.onDragStart.subscribe(function(){
+      console.log('drag init');
+    });
   },
   title: 'Simple Example',
   route: '/example1'
-}
+};

examples/example2.js

@@ -1,42 +1,31 @@
 import { Grid, Formatters } from '../src/';
+import data from './example-data';
 
-function formatter(row, cell, value, columnDef, dataContext) {
+function formatter(row, cell, value, columnDef, dataContext){
   return value;
 }
 
-
-var grid;
-var data = [];
-var columns = [
-  {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", formatter: formatter},
-  {id: "duration", name: "Duration", field: "duration"},
-  {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Formatters.PercentCompleteBar},
-  {id: "start", name: "Start", field: "start", minWidth: 60},
-  {id: "finish", name: "Finish", field: "finish", minWidth: 60},
-  {id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Formatters.Checkmark}
+let grid;
+const columns = [
+  {id: 'title', name: 'Title', field: 'title', width: 120, cssClass: 'cell-title', formatter: formatter},
+  {id: 'duration', name: 'Duration', field: 'duration'},
+  {id: '%', name: '% Complete', field: 'percentComplete', width: 80, resizable: false, formatter: Formatters.PercentCompleteBar},
+  {id: 'start', name: 'Start', field: 'start', minWidth: 60},
+  {id: 'finish', name: 'Finish', field: 'finish', minWidth: 60},
+  {id: 'effort-driven', name: 'Effort Driven', sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: 'cell-effort-driven', field: 'effortDriven', formatter: Formatters.Checkmark}
 ];
 
-var options = {
+const options = {
   editable: false,
   enableAddRow: false,
-  enableCellNavigation: true
+  enableCellNavigation: true,
+  enableColumnReorder: false
 };
 
-for (var i = 0; i < 5; i++) {
-  var d = (data[i] = {});
-
-  d["title"] = "<a href='#' tabindex='0'>Task</a> " + i;
-  d["duration"] = "5 days";
-  d["percentComplete"] = Math.min(100, Math.round(Math.random() * 110));
-  d["start"] = "01/01/2009";
-  d["finish"] = "01/05/2009";
-  d["effortDriven"] = (i % 5 == 0);
-}
-
 export default {
   init: id => {
-    new Grid(id, data, columns, options);
+    grid = new Grid(id, data, columns, options);
   },
   title: 'Example 2: Formatters',
   route: '/example2'
-}
+};

examples/example3.js

@@ -1,5 +1,6 @@
 import {Grid, Formatters, Editors} from '../src/';
-import CellSelectionModel from '../plugins/slick.cellselectionmodel';
+import CellSelectionModel from '../plugins/slick.cellselectionmodel/slick.cellselectionmodel';
+import data from './example-data';
 
 function requiredFieldValidator(value){
   if (value == null || value == undefined || !value.length){
@@ -10,7 +11,6 @@ function requiredFieldValidator(value){
 }
 
 let grid;
-const data = [];
 const columns = [
   {
     id: 'title',
@@ -29,8 +29,7 @@ const columns = [
     field: 'percentComplete',
     width: 80,
     resizable: false,
-    formatter: Formatters.PercentCompleteBar,
-    editor: Editors.PercentComplete
+    formatter: Formatters.PercentCompleteBar
   },
   {id: 'start', name: 'Start', field: 'start', minWidth: 60, editor: Editors.Date},
   {id: 'finish', name: 'Finish', field: 'finish', minWidth: 60, editor: Editors.Date},
@@ -46,6 +45,7 @@ const columns = [
     editor: Editors.Checkbox
   }
 ];
+
 const options = {
   editable: true,
   enableAddRow: true,
@@ -54,18 +54,6 @@ const options = {
   autoEdit: false
 };
 
-for (let i = 0; i < 500; i++){
-  const d = (data[i] = {});
-
-  d['title'] = 'Task ' + i;
-  d['description'] = 'This is a sample task description.\n  It can be multiline';
-  d['duration'] = '5 days';
-  d['percentComplete'] = Math.round(Math.random() * 100);
-  d['start'] = '01/01/2009';
-  d['finish'] = '01/05/2009';
-  d['effortDriven'] = (i % 5 == 0);
-}
-
 export default {
   init: id => {
     grid = new Grid(id, data, columns, options);
@@ -82,4 +70,4 @@ export default {
   },
   route: '/example3',
   title: 'Example 3: Editing'
-}
+};