slickgrid-rails 0.1.0

data/vendor/assets/javascripts/slick/groupitemmetadataprovider.js

@@ -0,0 +1,139 @@
+(function ($) {
+  $.extend(true, window, {
+    Slick: {
+      Data: {
+        GroupItemMetadataProvider: GroupItemMetadataProvider
+      }
+    }
+  });
+
+
+  /***
+   * Provides item metadata for group (Slick.Group) and totals (Slick.Totals) rows produced by the DataView.
+   * This metadata overrides the default behavior and formatting of those rows so that they appear and function
+   * correctly when processed by the grid.
+   *
+   * This class also acts as a grid plugin providing event handlers to expand & collapse groups.
+   * If "grid.registerPlugin(...)" is not called, expand & collapse will not work.
+   *
+   * @class GroupItemMetadataProvider
+   * @module Data
+   * @namespace Slick.Data
+   * @constructor
+   * @param options
+   */
+  function GroupItemMetadataProvider(options) {
+    var _grid;
+    var _defaults = {
+      groupCssClass: "slick-group",
+      totalsCssClass: "slick-group-totals",
+      groupFocusable: true,
+      totalsFocusable: false,
+      toggleCssClass: "slick-group-toggle",
+      toggleExpandedCssClass: "expanded",
+      toggleCollapsedCssClass: "collapsed",
+      enableExpandCollapse: true
+    };
+
+    options = $.extend(true, {}, _defaults, options);
+
+
+    function defaultGroupCellFormatter(row, cell, value, columnDef, item) {
+      if (!options.enableExpandCollapse) {
+        return item.title;
+      }
+
+      return "<span class='" + options.toggleCssClass + " " +
+          (item.collapsed ? options.toggleCollapsedCssClass : options.toggleExpandedCssClass) +
+          "'></span>" + item.title;
+    }
+
+    function defaultTotalsCellFormatter(row, cell, value, columnDef, item) {
+      return (columnDef.groupTotalsFormatter && columnDef.groupTotalsFormatter(item, columnDef)) || "";
+    }
+
+
+    function init(grid) {
+      _grid = grid;
+      _grid.onClick.subscribe(handleGridClick);
+      _grid.onKeyDown.subscribe(handleGridKeyDown);
+
+    }
+
+    function destroy() {
+      if (_grid) {
+        _grid.onClick.unsubscribe(handleGridClick);
+        _grid.onKeyDown.unsubscribe(handleGridKeyDown);
+      }
+    }
+
+    function handleGridClick(e, args) {
+      var item = this.getDataItem(args.row);
+      if (item && item instanceof Slick.Group && $(e.target).hasClass(options.toggleCssClass)) {
+        if (item.collapsed) {
+          this.getData().expandGroup(item.value);
+        }
+        else {
+          this.getData().collapseGroup(item.value);
+        }
+
+        e.stopImmediatePropagation();
+        e.preventDefault();
+      }
+    }
+
+    // TODO:  add -/+ handling
+    function handleGridKeyDown(e, args) {
+      if (options.enableExpandCollapse && (e.which == $.ui.keyCode.SPACE)) {
+        var activeCell = this.getActiveCell();
+        if (activeCell) {
+          var item = this.getDataItem(activeCell.row);
+          if (item && item instanceof Slick.Group) {
+            if (item.collapsed) {
+              this.getData().expandGroup(item.value);
+            }
+            else {
+              this.getData().collapseGroup(item.value);
+            }
+
+            e.stopImmediatePropagation();
+            e.preventDefault();
+          }
+        }
+      }
+    }
+
+    function getGroupRowMetadata(item) {
+      return {
+        selectable: false,
+        focusable: options.groupFocusable,
+        cssClasses: options.groupCssClass,
+        columns: {
+          0: {
+            colspan: "*",
+            formatter: defaultGroupCellFormatter,
+            editor: null
+          }
+        }
+      };
+    }
+
+    function getTotalsRowMetadata(item) {
+      return {
+        selectable: false,
+        focusable: options.totalsFocusable,
+        cssClasses: options.totalsCssClass,
+        formatter: defaultTotalsCellFormatter,
+        editor: null
+      };
+    }
+
+
+    return {
+      "init": init,
+      "destroy": destroy,
+      "getGroupRowMetadata": getGroupRowMetadata,
+      "getTotalsRowMetadata": getTotalsRowMetadata
+    };
+  }
+})(jQuery);

data/vendor/assets/javascripts/slick/plugins/autotooltips.js

@@ -0,0 +1,48 @@
+(function ($) {
+  // register namespace
+  $.extend(true, window, {
+    "Slick": {
+      "AutoTooltips": AutoTooltips
+    }
+  });
+
+
+  function AutoTooltips(options) {
+    var _grid;
+    var _self = this;
+    var _defaults = {
+      maxToolTipLength: null
+    };
+
+    function init(grid) {
+      options = $.extend(true, {}, _defaults, options);
+      _grid = grid;
+      _grid.onMouseEnter.subscribe(handleMouseEnter);
+    }
+
+    function destroy() {
+      _grid.onMouseEnter.unsubscribe(handleMouseEnter);
+    }
+
+    function handleMouseEnter(e, args) {
+      var cell = _grid.getCellFromEvent(e);
+      if (cell) {
+        var node = _grid.getCellNode(cell.row, cell.cell);
+        if ($(node).innerWidth() < node.scrollWidth) {
+          var text = $.trim($(node).text());
+          if (options.maxToolTipLength && text.length > options.maxToolTipLength) {
+            text = text.substr(0, options.maxToolTipLength - 3) + "...";
+          }
+          $(node).attr("title", text);
+        } else {
+          $(node).attr("title", "");
+        }
+      }
+    }
+
+    $.extend(this, {
+      "init": init,
+      "destroy": destroy
+    });
+  }
+})(jQuery);

data/vendor/assets/javascripts/slick/plugins/cellcopymanager.js

@@ -0,0 +1,86 @@
+(function ($) {
+  // register namespace
+  $.extend(true, window, {
+    "Slick": {
+      "CellCopyManager": CellCopyManager
+    }
+  });
+
+
+  function CellCopyManager() {
+    var _grid;
+    var _self = this;
+    var _copiedRanges;
+
+    function init(grid) {
+      _grid = grid;
+      _grid.onKeyDown.subscribe(handleKeyDown);
+    }
+
+    function destroy() {
+      _grid.onKeyDown.unsubscribe(handleKeyDown);
+    }
+
+    function handleKeyDown(e, args) {
+      var ranges;
+      if (!_grid.getEditorLock().isActive()) {
+        if (e.which == $.ui.keyCode.ESCAPE) {
+          if (_copiedRanges) {
+            e.preventDefault();
+            clearCopySelection();
+            _self.onCopyCancelled.notify({ranges: _copiedRanges});
+            _copiedRanges = null;
+          }
+        }
+
+        if (e.which == 67 && (e.ctrlKey || e.metaKey)) {
+          ranges = _grid.getSelectionModel().getSelectedRanges();
+          if (ranges.length != 0) {
+            e.preventDefault();
+            _copiedRanges = ranges;
+            markCopySelection(ranges);
+            _self.onCopyCells.notify({ranges: ranges});
+          }
+        }
+
+        if (e.which == 86 && (e.ctrlKey || e.metaKey)) {
+          if (_copiedRanges) {
+            e.preventDefault();
+            clearCopySelection();
+            ranges = _grid.getSelectionModel().getSelectedRanges();
+            _self.onPasteCells.notify({from: _copiedRanges, to: ranges});
+            _copiedRanges = null;
+          }
+        }
+      }
+    }
+
+    function markCopySelection(ranges) {
+      var columns = _grid.getColumns();
+      var hash = {};
+      for (var i = 0; i < ranges.length; i++) {
+        for (var j = ranges[i].fromRow; j <= ranges[i].toRow; j++) {
+          hash[j] = {};
+          for (var k = ranges[i].fromCell; k <= ranges[i].toCell; k++) {
+            hash[j][columns[k].id] = "copied";
+          }
+        }
+      }
+      _grid.setCellCssStyles("copy-manager", hash);
+    }
+
+    function clearCopySelection() {
+      _grid.removeCellCssStyles("copy-manager");
+    }
+
+    $.extend(this, {
+      "init": init,
+      "destroy": destroy,
+      "clearCopySelection": clearCopySelection,
+
+      "onCopyCells": new Slick.Event(),
+      "onCopyCancelled": new Slick.Event(),
+      "onPasteCells": new Slick.Event()
+    });
+  }
+})(jQuery);

data/vendor/assets/javascripts/slick/plugins/cellrangedecorator.js

@@ -0,0 +1,64 @@
+(function ($) {
+  // register namespace
+  $.extend(true, window, {
+    "Slick": {
+      "CellRangeDecorator": CellRangeDecorator
+    }
+  });
+
+  /***
+   * Displays an overlay on top of a given cell range.
+   *
+   * TODO:
+   * Currently, it blocks mouse events to DOM nodes behind it.
+   * Use FF and WebKit-specific "pointer-events" CSS style, or some kind of event forwarding.
+   * Could also construct the borders separately using 4 individual DIVs.
+   *
+   * @param {Grid} grid
+   * @param {Object} options
+   */
+  function CellRangeDecorator(grid, options) {
+    var _elem;
+    var _defaults = {
+      selectionCss: {
+        "zIndex": "9999",
+        "border": "2px dashed red"
+      }
+    };
+
+    options = $.extend(true, {}, _defaults, options);
+
+
+    function show(range) {
+      if (!_elem) {
+        _elem = $("<div></div>", {css: options.selectionCss})
+            .css("position", "absolute")
+            .appendTo(grid.getCanvasNode());
+      }
+
+      var from = grid.getCellNodeBox(range.fromRow, range.fromCell);
+      var to = grid.getCellNodeBox(range.toRow, range.toCell);
+
+      _elem.css({
+        top: from.top - 1,
+        left: from.left - 1,
+        height: to.bottom - from.top - 2,
+        width: to.right - from.left - 2
+      });
+
+      return _elem;
+    }
+
+    function hide() {
+      if (_elem) {
+        _elem.remove();
+        _elem = null;
+      }
+    }
+
+    $.extend(this, {
+      "show": show,
+      "hide": hide
+    });
+  }
+})(jQuery);

data/vendor/assets/javascripts/slick/plugins/cellrangeselector.js

@@ -0,0 +1,112 @@
+(function ($) {
+  // register namespace
+  $.extend(true, window, {
+    "Slick": {
+      "CellRangeSelector": CellRangeSelector
+    }
+  });
+
+
+  function CellRangeSelector(options) {
+    var _grid;
+    var _canvas;
+    var _dragging;
+    var _decorator;
+    var _self = this;
+    var _defaults = {
+      selectionCss: {
+        "border": "2px dashed blue"
+      }
+    };
+
+
+    function init(grid) {
+      options = $.extend(true, {}, _defaults, options);
+      _decorator = new Slick.CellRangeDecorator(grid, options);
+      _grid = grid;
+      _canvas = _grid.getCanvasNode();
+      _grid.onDragInit.subscribe(handleDragInit);
+      _grid.onDragStart.subscribe(handleDragStart);
+      _grid.onDrag.subscribe(handleDrag);
+      _grid.onDragEnd.subscribe(handleDragEnd);
+    }
+
+    function destroy() {
+      _grid.onDragInit.unsubscribe(handleDragInit);
+      _grid.onDragStart.unsubscribe(handleDragStart);
+      _grid.onDrag.unsubscribe(handleDrag);
+      _grid.onDragEnd.unsubscribe(handleDragEnd);
+    }
+
+    function handleDragInit(e, dd) {
+      // prevent the grid from cancelling drag'n'drop by default
+      e.stopImmediatePropagation();
+    }
+
+    function handleDragStart(e, dd) {
+      var cell = _grid.getCellFromEvent(e);
+      if (_self.onBeforeCellRangeSelected.notify(cell) !== false) {
+        if (_grid.canCellBeSelected(cell.row, cell.cell)) {
+          _dragging = true;
+          e.stopImmediatePropagation();
+        }
+      }
+      if (!_dragging) {
+        return;
+      }
+
+      var start = _grid.getCellFromPoint(
+          dd.startX - $(_canvas).offset().left,
+          dd.startY - $(_canvas).offset().top);
+
+      dd.range = {start: start, end: {}};
+
+      return _decorator.show(new Slick.Range(start.row, start.cell));
+    }
+
+    function handleDrag(e, dd) {
+      if (!_dragging) {
+        return;
+      }
+      e.stopImmediatePropagation();
+
+      var end = _grid.getCellFromPoint(
+          e.pageX - $(_canvas).offset().left,
+          e.pageY - $(_canvas).offset().top);
+
+      if (!_grid.canCellBeSelected(end.row, end.cell)) {
+        return;
+      }
+
+      dd.range.end = end;
+      _decorator.show(new Slick.Range(dd.range.start.row, dd.range.start.cell, end.row, end.cell));
+    }
+
+    function handleDragEnd(e, dd) {
+      if (!_dragging) {
+        return;
+      }
+
+      _dragging = false;
+      e.stopImmediatePropagation();
+
+      _decorator.hide();
+      _self.onCellRangeSelected.notify({
+        range: new Slick.Range(
+            dd.range.start.row,
+            dd.range.start.cell,
+            dd.range.end.row,
+            dd.range.end.cell
+        )
+      });
+    }
+
+    $.extend(this, {
+      "init": init,
+      "destroy": destroy,
+
+      "onBeforeCellRangeSelected": new Slick.Event(),
+      "onCellRangeSelected": new Slick.Event()
+    });
+  }
+})(jQuery);