slickgrid-rails 0.2.0 → 0.3.0

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

@@ -26,6 +26,7 @@
     var _grid;
     var _defaults = {
       groupCssClass: "slick-group",
+      groupTitleCssClass: "slick-group-title",
       totalsCssClass: "slick-group-totals",
       groupFocusable: true,
       totalsFocusable: false,
@@ -43,9 +44,15 @@
         return item.title;
       }
 
+      var indentation = item.level * 15 + "px";
+
       return "<span class='" + options.toggleCssClass + " " +
           (item.collapsed ? options.toggleCollapsedCssClass : options.toggleExpandedCssClass) +
-          "'></span>" + item.title;
+          "' style='margin-left:" + indentation +"'>" +
+          "</span>" +
+          "<span class='" + options.groupTitleCssClass + "' level='" + item.level + "'>" +
+            item.title +
+          "</span>";
     }
 
     function defaultTotalsCellFormatter(row, cell, value, columnDef, item) {
@@ -71,10 +78,9 @@
       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);
+          this.getData().expandGroup(item.groupingKey);
+        } else {
+          this.getData().collapseGroup(item.groupingKey);
         }
 
         e.stopImmediatePropagation();
@@ -90,10 +96,9 @@
           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);
+              this.getData().expandGroup(item.groupingKey);
+            } else {
+              this.getData().collapseGroup(item.groupingKey);
             }
 
             e.stopImmediatePropagation();
@@ -136,4 +141,4 @@
       "getTotalsRowMetadata": getTotalsRowMetadata
     };
   }
-})(jQuery);
+})(jQuery);

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

@@ -1,45 +1,80 @@
 (function ($) {
-  // register namespace
+  // Register namespace
   $.extend(true, window, {
     "Slick": {
       "AutoTooltips": AutoTooltips
     }
   });
 
-
+  /**
+   * AutoTooltips plugin to show/hide tooltips when columns are too narrow to fit content.
+   * @constructor
+   * @param {boolean} [options.enableForCells=true]        - Enable tooltip for grid cells
+   * @param {boolean} [options.enableForHeaderCells=false] - Enable tooltip for header cells
+   * @param {number}  [options.maxToolTipLength=null]      - The maximum length for a tooltip
+   */
   function AutoTooltips(options) {
     var _grid;
     var _self = this;
     var _defaults = {
+      enableForCells: true,
+      enableForHeaderCells: false,
       maxToolTipLength: null
     };
-
+    
+    /**
+     * Initialize plugin.
+     */
     function init(grid) {
       options = $.extend(true, {}, _defaults, options);
       _grid = grid;
-      _grid.onMouseEnter.subscribe(handleMouseEnter);
+      if (options.enableForCells) _grid.onMouseEnter.subscribe(handleMouseEnter);
+      if (options.enableForHeaderCells) _grid.onHeaderMouseEnter.subscribe(handleHeaderMouseEnter);
     }
-
+    
+    /**
+     * Destroy plugin.
+     */
     function destroy() {
-      _grid.onMouseEnter.unsubscribe(handleMouseEnter);
+      if (options.enableForCells) _grid.onMouseEnter.unsubscribe(handleMouseEnter);
+      if (options.enableForHeaderCells) _grid.onHeaderMouseEnter.unsubscribe(handleHeaderMouseEnter);
     }
-
-    function handleMouseEnter(e, args) {
+    
+    /**
+     * Handle mouse entering grid cell to add/remove tooltip.
+     * @param {jQuery.Event} e - The event
+     */
+    function handleMouseEnter(e) {
       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());
+        var $node = $(_grid.getCellNode(cell.row, cell.cell));
+        var text;
+        if ($node.innerWidth() < $node[0].scrollWidth) {
+          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", "");
+          text = "";
         }
+        $node.attr("title", text);
       }
     }
-
+    
+    /**
+     * Handle mouse entering header cell to add/remove tooltip.
+     * @param {jQuery.Event} e     - The event
+     * @param {object} args.column - The column definition
+     */
+    function handleHeaderMouseEnter(e, args) {
+      var column = args.column,
+          $node = $(e.target).closest(".slick-header-column");
+      if (!column.toolTip) {
+        $node.attr("title", ($node.innerWidth() < $node[0].scrollWidth) ? column.name : "");
+      }
+    }
+    
+    // Public API
     $.extend(this, {
       "init": init,
       "destroy": destroy

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

@@ -13,6 +13,7 @@
     var _dragging;
     var _decorator;
     var _self = this;
+    var _handler = new Slick.EventHandler();
     var _defaults = {
       selectionCss: {
         "border": "2px dashed blue"
@@ -25,17 +26,15 @@
       _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);
+      _handler
+        .subscribe(_grid.onDragInit, handleDragInit)
+        .subscribe(_grid.onDragStart, handleDragStart)
+        .subscribe(_grid.onDrag, handleDrag)
+        .subscribe(_grid.onDragEnd, handleDragEnd);
     }
 
     function destroy() {
-      _grid.onDragInit.unsubscribe(handleDragInit);
-      _grid.onDragStart.unsubscribe(handleDragStart);
-      _grid.onDrag.unsubscribe(handleDrag);
-      _grid.onDragEnd.unsubscribe(handleDragEnd);
+      _handler.unsubscribeAll();
     }
 
     function handleDragInit(e, dd) {
@@ -55,6 +54,8 @@
         return;
       }
 
+      _grid.focus();
+
       var start = _grid.getCellFromPoint(
           dd.startX - $(_canvas).offset().left,
           dd.startY - $(_canvas).offset().top);

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

@@ -28,6 +28,7 @@
       _grid = grid;
       _canvas = _grid.getCanvasNode();
       _grid.onActiveCellChanged.subscribe(handleActiveCellChange);
+      _grid.onKeyDown.subscribe(handleKeyDown);
       grid.registerPlugin(_selector);
       _selector.onCellRangeSelected.subscribe(handleCellRangeSelected);
       _selector.onBeforeCellRangeSelected.subscribe(handleBeforeCellRangeSelected);
@@ -35,6 +36,7 @@
 
     function destroy() {
       _grid.onActiveCellChanged.unsubscribe(handleActiveCellChange);
+      _grid.onKeyDown.unsubscribe(handleKeyDown);
       _selector.onCellRangeSelected.unsubscribe(handleCellRangeSelected);
       _selector.onBeforeCellRangeSelected.unsubscribe(handleBeforeCellRangeSelected);
       _grid.unregisterPlugin(_selector);
@@ -74,10 +76,68 @@
     }
 
     function handleActiveCellChange(e, args) {
-      if (_options.selectActiveCell) {
+      if (_options.selectActiveCell && args.row != null && args.cell != null) {
         setSelectedRanges([new Slick.Range(args.row, args.cell)]);
       }
     }
+    
+    function handleKeyDown(e) {
+      /***
+       * Кey codes
+       * 37 left
+       * 38 up
+       * 39 right
+       * 40 down                     
+       */                                         
+      var ranges, last;
+      var active = _grid.getActiveCell(); 
+
+      if ( active && e.shiftKey && !e.ctrlKey && !e.altKey && 
+          (e.which == 37 || e.which == 39 || e.which == 38 || e.which == 40) ) {
+      
+        ranges = getSelectedRanges();
+        if (!ranges.length)
+         ranges.push(new Slick.Range(active.row, active.cell));
+         
+        // keyboard can work with last range only          
+        last = ranges.pop();
+        
+        // can't handle selection out of active cell
+        if (!last.contains(active.row, active.cell))
+          last = new Slick.Range(active.row, active.cell);
+        
+        var dRow = last.toRow - last.fromRow,
+            dCell = last.toCell - last.fromCell,
+            // walking direction
+            dirRow = active.row == last.fromRow ? 1 : -1,
+            dirCell = active.cell == last.fromCell ? 1 : -1;
+                 
+        if (e.which == 37) {
+          dCell -= dirCell; 
+        } else if (e.which == 39) {
+          dCell += dirCell ; 
+        } else if (e.which == 38) {
+          dRow -= dirRow; 
+        } else if (e.which == 40) {
+          dRow += dirRow; 
+        }
+        
+        // define new selection range 
+        var new_last = new Slick.Range(active.row, active.cell, active.row + dirRow*dRow, active.cell + dirCell*dCell);
+        if (removeInvalidRanges([new_last]).length) {
+          ranges.push(new_last);
+         _grid.scrollRowIntoView(dirRow > 0 ? new_last.toRow : new_last.fromRow);
+         _grid.scrollCellIntoView(new_last.fromRow, dirCell > 0 ? new_last.toCell : new_last.fromCell);
+        }
+        else 
+          ranges.push(last);
+
+        setSelectedRanges(ranges);  
+       
+        e.preventDefault();
+        e.stopPropagation();        
+      }           
+    }
 
     $.extend(this, {
       "getSelectedRanges": getSelectedRanges,
@@ -89,4 +149,4 @@
       "onSelectedRangesChanged": new Slick.Event()
     });
   }
-})(jQuery);
+})(jQuery);

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

@@ -10,6 +10,7 @@
   function CheckboxSelectColumn(options) {
     var _grid;
     var _self = this;
+    var _handler = new Slick.EventHandler();
     var _selectedRowsLookup = {};
     var _defaults = {
       columnId: "_checkbox_selector",
@@ -22,17 +23,15 @@
 
     function init(grid) {
       _grid = grid;
-      _grid.onSelectedRowsChanged.subscribe(handleSelectedRowsChanged);
-      _grid.onClick.subscribe(handleClick);
-      _grid.onHeaderClick.subscribe(handleHeaderClick);
-      _grid.onKeyDown.subscribe(handleKeyDown);
+      _handler
+        .subscribe(_grid.onSelectedRowsChanged, handleSelectedRowsChanged)
+        .subscribe(_grid.onClick, handleClick)
+        .subscribe(_grid.onHeaderClick, handleHeaderClick)
+        .subscribe(_grid.onKeyDown, handleKeyDown);
     }
 
     function destroy() {
-      _grid.onSelectedRowsChanged.unsubscribe(handleSelectedRowsChanged);
-      _grid.onClick.unsubscribe(handleClick);
-      _grid.onHeaderClick.unsubscribe(handleHeaderClick);
-      _grid.onKeyDown.unsubscribe(handleKeyDown);
+      _handler.unsubscribeAll();
     }
 
     function handleSelectedRowsChanged(e, args) {
@@ -52,7 +51,7 @@
       _selectedRowsLookup = lookup;
       _grid.render();
 
-      if (selectedRows.length == _grid.getDataLength()) {
+      if (selectedRows.length && selectedRows.length == _grid.getDataLength()) {
         _grid.updateColumnHeader(_options.columnId, "<input type='checkbox' checked='checked'>", _options.toolTip);
       } else {
         _grid.updateColumnHeader(_options.columnId, "<input type='checkbox'>", _options.toolTip);

data/vendor/assets/javascripts/slick/plugins/headerbuttons.css

@@ -0,0 +1,39 @@
+.slick-column-name,
+.slick-sort-indicator {
+  /**
+   * This makes all "float:right" elements after it that spill over to the next line
+   * display way below the lower boundary of the column thus hiding them.
+   */
+  display: inline-block;
+  float: left;
+  margin-bottom: 100px;
+}
+
+.slick-header-button {
+  display: inline-block;
+  float: right;
+  vertical-align: top;
+  margin: 1px;
+  /**
+  * This makes all "float:right" elements after it that spill over to the next line
+  * display way below the lower boundary of the column thus hiding them.
+  */
+  margin-bottom: 100px;
+  height: 15px;
+  width: 15px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  cursor: pointer;
+}
+
+.slick-header-button-hidden {
+  width: 0;
+
+  -webkit-transition: 0.2s width;
+  -ms-transition: 0.2s width;
+  transition: 0.2s width;
+}
+
+.slick-header-column:hover > .slick-header-button {
+  width: 15px;
+}

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

@@ -0,0 +1,177 @@
+(function ($) {
+  // register namespace
+  $.extend(true, window, {
+    "Slick": {
+      "Plugins": {
+        "HeaderButtons": HeaderButtons
+      }
+    }
+  });
+
+
+  /***
+   * A plugin to add custom buttons to column headers.
+   *
+   * USAGE:
+   *
+   * Add the plugin .js & .css files and register it with the grid.
+   *
+   * To specify a custom button in a column header, extend the column definition like so:
+   *
+   *   var columns = [
+   *     {
+   *       id: 'myColumn',
+   *       name: 'My column',
+   *
+   *       // This is the relevant part
+   *       header: {
+   *          buttons: [
+   *              {
+   *                // button options
+   *              },
+   *              {
+   *                // button options
+   *              }
+   *          ]
+   *       }
+   *     }
+   *   ];
+   *
+   * Available button options:
+   *    cssClass:     CSS class to add to the button.
+   *    image:        Relative button image path.
+   *    tooltip:      Button tooltip.
+   *    showOnHover:  Only show the button on hover.
+   *    handler:      Button click handler.
+   *    command:      A command identifier to be passed to the onCommand event handlers.
+   *
+   * The plugin exposes the following events:
+   *    onCommand:    Fired on button click for buttons with 'command' specified.
+   *        Event args:
+   *            grid:     Reference to the grid.
+   *            column:   Column definition.
+   *            command:  Button command identified.
+   *            button:   Button options.  Note that you can change the button options in your
+   *                      event handler, and the column header will be automatically updated to
+   *                      reflect them.  This is useful if you want to implement something like a
+   *                      toggle button.
+   *
+   *
+   * @param options {Object} Options:
+   *    buttonCssClass:   a CSS class to use for buttons (default 'slick-header-button')
+   * @class Slick.Plugins.HeaderButtons
+   * @constructor
+   */
+  function HeaderButtons(options) {
+    var _grid;
+    var _self = this;
+    var _handler = new Slick.EventHandler();
+    var _defaults = {
+      buttonCssClass: "slick-header-button"
+    };
+
+
+    function init(grid) {
+      options = $.extend(true, {}, _defaults, options);
+      _grid = grid;
+      _handler
+        .subscribe(_grid.onHeaderCellRendered, handleHeaderCellRendered)
+        .subscribe(_grid.onBeforeHeaderCellDestroy, handleBeforeHeaderCellDestroy);
+
+      // Force the grid to re-render the header now that the events are hooked up.
+      _grid.setColumns(_grid.getColumns());
+    }
+
+
+    function destroy() {
+      _handler.unsubscribeAll();
+    }
+
+
+    function handleHeaderCellRendered(e, args) {
+      var column = args.column;
+
+      if (column.header && column.header.buttons) {
+        // Append buttons in reverse order since they are floated to the right.
+        var i = column.header.buttons.length;
+        while (i--) {
+          var button = column.header.buttons[i];
+          var btn = $("<div></div>")
+            .addClass(options.buttonCssClass)
+            .data("column", column)
+            .data("button", button);
+
+          if (button.showOnHover) {
+            btn.addClass("slick-header-button-hidden");
+          }
+
+          if (button.image) {
+            btn.css("backgroundImage", "url(" + button.image + ")");
+          }
+
+          if (button.cssClass) {
+            btn.addClass(button.cssClass);
+          }
+
+          if (button.tooltip) {
+            btn.attr("title", button.tooltip);
+          }
+
+          if (button.command) {
+            btn.data("command", button.command);
+          }
+
+          if (button.handler) {
+            btn.bind("click", button.handler);
+          }
+
+          btn
+            .bind("click", handleButtonClick)
+            .appendTo(args.node);
+        }
+      }
+    }
+
+
+    function handleBeforeHeaderCellDestroy(e, args) {
+      var column = args.column;
+
+      if (column.header && column.header.buttons) {
+        // Removing buttons via jQuery will also clean up any event handlers and data.
+        // NOTE: If you attach event handlers directly or using a different framework,
+        //       you must also clean them up here to avoid memory leaks.
+        $(args.node).find("." + options.buttonCssClass).remove();
+      }
+    }
+
+
+    function handleButtonClick(e) {
+      var command = $(this).data("command");
+      var columnDef = $(this).data("column");
+      var button = $(this).data("button");
+
+      if (command != null) {
+        _self.onCommand.notify({
+            "grid": _grid,
+            "column": columnDef,
+            "command": command,
+            "button": button
+          }, e, _self);
+
+        // Update the header in case the user updated the button definition in the handler.
+        _grid.updateColumnHeader(columnDef.id);
+      }
+
+      // Stop propagation so that it doesn't register as a header click event.
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    $.extend(this, {
+      "init": init,
+      "destroy": destroy,
+
+      "onCommand": new Slick.Event()
+    });
+  }
+})(jQuery);