slickgrid 2.3.16

data/vendor/assets/javascripts/slickgrid/plugins/draggablegrouping.js

@@ -0,0 +1,207 @@
+/**
+ *
+ * Draggable Grouping contributed by:  Muthukumar Selvarasu
+ *  muthukumar{dot}se{at}gmail{dot}com
+ *  github.com/muthukumarse/Slickgrid
+ *
+ * NOTES:
+ *     This plugin provides the Draggable Grouping feature
+ */
+
+(function ($) {
+  // Register namespace
+  $.extend(true, window, {
+    "Slick": {
+      "DraggableGrouping": DraggableGrouping
+    }
+  });
+
+  /**
+   * DraggableGrouping 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 DraggableGrouping(options) {
+    var _grid;
+    var _gridUid;
+    var _gridColumns;
+    var _dataView;
+    var dropbox;
+    var dropboxPlaceholder;
+    var _self = this;
+    var _defaults = {
+    };
+    
+    /**
+     * Initialize plugin.
+     */
+    function init(grid) {
+      options = $.extend(true, {}, _defaults, options);
+      _grid = grid;
+      _gridUid = _grid.getUID();
+      _gridColumns =  _grid.getColumns();
+      _dataView = _grid.getData();
+      
+      dropbox = $(_grid.getPreHeaderPanel());
+      dropbox.html("<div class='slick-placeholder'>Drop a column header here to group by the column</div>");
+
+      dropboxPlaceholder = dropbox.find(".slick-placeholder");      
+      setupColumnDropbox();
+    }
+    
+    /**
+     * Destroy plugin.
+     */
+    function destroy() {
+    }
+    
+
+    function setColumns(col) {
+      _gridColumns = col;
+    }
+
+    var emptyDropbox;
+
+    function setupColumnDropbox() {
+      dropbox.droppable({
+        activeClass: "ui-state-default",
+        hoverClass: "ui-state-hover",
+        accept: ":not(.ui-sortable-helper)",
+        deactivate: function(event, ui) {
+          dropbox.removeClass("slick-header-column-denied");
+        },
+        drop: function(event, ui) {
+          handleGroupByDrop(this, ui.draggable);
+        },
+        over: function(event, ui) {
+          var id = (ui.draggable).attr('id').replace(_gridUid, "");
+          _gridColumns.forEach(function(e, i, a) {
+            if (e.id == id) {
+              if (e.grouping == null) {
+                dropbox.addClass("slick-header-column-denied");
+              }
+            }
+          });
+        }
+      });
+      dropbox.sortable({
+        items: "div.slick-dropped-grouping",
+        cursor: "default",
+        tolerance: "pointer",
+        helper: "clone",
+        update: function(event, ui) {
+          var sortArray = $(this).sortable('toArray', {
+              attribute: 'data-id'
+            }),
+            newGroupingOrder = [];
+          for (var i = 0, l = sortArray.length; i < l; i++) {
+            for (var a = 0, b = columnsGroupBy.length; a < b; a++) {
+              if (columnsGroupBy[a].id == sortArray[i]) {
+                newGroupingOrder.push(columnsGroupBy[a]);
+                break;
+              }
+            }
+          }
+          columnsGroupBy = newGroupingOrder;
+          updateGroupBy();
+        }
+      });
+      emptyDropbox = dropbox.html();
+    }
+
+    var columnsGroupBy = [];
+    var groupBySorters = [];
+
+    function handleGroupByDrop(container, column) {
+      var columnid = column.attr('id').replace(_gridUid, "");
+      var columnAllowed = true;
+      columnsGroupBy.forEach(function(e, i, a) {
+        if (e.id == columnid) {
+          columnAllowed = false;
+        }
+      });
+      if (columnAllowed) {
+        _gridColumns.forEach(function(e, i, a) {
+          if (e.id == columnid) {
+            if (e.grouping != null) {
+              var entry = $("<div id='" + _gridUid + e.id + "_entry' data-id='" + e.id + "' class='slick-dropped-grouping'>");
+              var span = $("<span class='slick-groupby-remove'></span>").text(column.text() + " ")
+              span.appendTo(entry);
+              $("</div>").appendTo(entry);
+              entry.appendTo(container);
+              addColumnGroupBy(e, column, container, entry);
+              addGroupByRemoveClickHandler(e.id, container, column, entry);
+            }
+          }
+        });
+      }
+    }
+
+    function addColumnGroupBy(column) {
+      columnsGroupBy.push(column);
+      updateGroupBy();
+    }
+
+    function addGroupByRemoveClickHandler(id, container, column, entry) {
+      var text = entry;
+      $("#" + _gridUid + id + "_entry").on('click', function() {
+        $(this).off('click');
+        removeGroupBy(id, column, text);
+      });
+    }
+
+    function clearDroppedGroups() {
+      columnsGroupBy = [];
+    }
+
+    function removeFromArray(arr) {
+      var what, a = arguments,
+        L = a.length,
+        ax;
+      while (L > 1 && arr.length) {
+        what = a[--L];
+        while ((ax = arr.indexOf(what)) != -1) {
+          arr.splice(ax, 1);
+        }
+      }
+      return arr;
+    }
+
+    function removeGroupBy(id, column, entry) {
+      entry.remove();
+      var groupby = [];
+      _gridColumns.forEach(function(e, i, a) {
+        groupby[e.id] = e;
+      });
+      removeFromArray(columnsGroupBy, groupby[id]);
+      if(columnsGroupBy.length == 0){
+        dropboxPlaceholder.show();
+      }
+      updateGroupBy();
+    }
+
+    function updateGroupBy() {
+      if (columnsGroupBy.length == 0) {
+        _dataView.setGrouping([]);
+        return;
+      }
+      var groupingArray = [];
+      columnsGroupBy.forEach(function(element, index, array) {
+        groupingArray.push(element.grouping);
+      });
+      _dataView.setGrouping(groupingArray);
+      /*
+      collapseAllGroups();
+      */
+    }
+    
+    // Public API
+    $.extend(this, {
+      "init": init,
+      "destroy": destroy,
+      "clearDroppedGroups": clearDroppedGroups
+    });
+  }
+})(jQuery);

data/vendor/assets/javascripts/slickgrid/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.on("click", button.handler);
+          }
+
+          btn
+            .on("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);

data/vendor/assets/javascripts/slickgrid/plugins/headermenu.js

@@ -0,0 +1,296 @@
+(function ($) {
+  // register namespace
+  $.extend(true, window, {
+    "Slick": {
+      "Plugins": {
+        "HeaderMenu": HeaderMenu
+      }
+    }
+  });
+
+
+  /***
+   * A plugin to add drop-down menus to column headers.
+   *
+   * USAGE:
+   *
+   * Add the plugin .js & .css files and register it with the grid.
+   *
+   * To specify a menu in a column header, extend the column definition like so:
+   *
+   *   var columns = [
+   *     {
+   *       id: 'myColumn',
+   *       name: 'My column',
+   *
+   *       // This is the relevant part
+   *       header: {
+   *          menu: {
+   *              items: [
+   *                {
+   *                  // menu item options
+   *                },
+   *                {
+   *                  // menu item options
+   *                }
+   *              ]
+   *          }
+   *       }
+   *     }
+   *   ];
+   *
+   *
+   * Available menu options:
+   *    tooltip:      Menu button tooltip.
+   *
+   *
+   * Available menu item options:
+   *    title:            Menu item text.
+   *    disabled:         Whether the item is disabled.
+   *    tooltip:          Item tooltip.
+   *    command:          A command identifier to be passed to the onCommand event handlers.
+   *    iconCssClass:     A CSS class to be added to the menu item icon.
+   *    iconImage:        A url to the icon image.
+   *    minWidth:         Minimum width that the drop menu will have
+   *    autoAlign:        Auto-align drop menu to the left when not enough viewport space to show on the right
+   *    autoAlignOffset:  When drop menu is aligned to the left, it might not be perfectly aligned with the header menu icon, if that is the case you can add an offset (positive/negative number to move right/left)
+   *
+   *
+   * The plugin exposes the following events:
+   *    onBeforeMenuShow:   Fired before the menu is shown.  You can customize the menu or dismiss it by returning false.
+   *        Event args:
+   *            grid:     Reference to the grid.
+   *            column:   Column definition.
+   *            menu:     Menu options.  Note that you can change the menu items here.
+   *
+   *    onCommand:    Fired on menu item 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:   an extra CSS class to add to the menu button
+   *    buttonImage:      a url to the menu button image (default '../slickgrid/down.gif')
+   * @class Slick.Plugins.HeaderButtons
+   * @constructor
+   */
+  function HeaderMenu(options) {
+    var _grid;
+    var _self = this;
+    var _handler = new Slick.EventHandler();
+    var _defaults = {
+      buttonCssClass: null,
+      buttonImage: null,
+      minWidth: 100,
+      autoAlign: true,
+      autoAlignOffset: 0
+    };
+    var $menu;
+    var $activeHeaderColumn;
+
+
+    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());
+
+      // Hide the menu on outside click.
+      $(document.body).on("mousedown", handleBodyMouseDown);
+    }
+
+    function setOptions(newOptions) {
+      options = $.extend(true, {}, options, newOptions);
+    }
+
+
+    function destroy() {
+      _handler.unsubscribeAll();
+      $(document.body).off("mousedown", handleBodyMouseDown);
+    }
+
+
+    function handleBodyMouseDown(e) {
+      if ($menu && $menu[0] != e.target && !$.contains($menu[0], e.target)) {
+        hideMenu();
+      }
+    }
+
+
+    function hideMenu() {
+      if ($menu) {
+        $menu.remove();
+        $menu = null;
+        $activeHeaderColumn
+          .removeClass("slick-header-column-active");
+      }
+    }
+
+    function handleHeaderCellRendered(e, args) {
+      var column = args.column;
+      var menu = column.header && column.header.menu;
+
+      if (menu) {
+        var $el = $("<div></div>")
+          .addClass("slick-header-menubutton")
+          .data("column", column)
+          .data("menu", menu);
+
+        if (options.buttonCssClass) {
+          $el.addClass(options.buttonCssClass);
+        }
+
+        if (options.buttonImage) {
+          $el.css("background-image", "url(" + options.buttonImage + ")");
+        }
+
+        if (menu.tooltip) {
+          $el.attr("title", menu.tooltip);
+        }
+
+        $el
+          .on("click", showMenu)
+          .appendTo(args.node);
+      }
+    }
+
+
+    function handleBeforeHeaderCellDestroy(e, args) {
+      var column = args.column;
+
+      if (column.header && column.header.menu) {
+        $(args.node).find(".slick-header-menubutton").remove();
+      }
+    }
+
+
+    function showMenu(e) {
+      var $menuButton = $(this);
+      var menu = $menuButton.data("menu");
+      var columnDef = $menuButton.data("column");
+
+      // Let the user modify the menu or cancel altogether,
+      // or provide alternative menu implementation.
+      if (_self.onBeforeMenuShow.notify({
+          "grid": _grid,
+          "column": columnDef,
+          "menu": menu
+        }, e, _self) == false) {
+        return;
+      }
+
+
+      if (!$menu) {
+        $menu = $("<div class='slick-header-menu' style='min-width: " + options.minWidth + "px'></div>")
+          .appendTo(_grid.getContainerNode());
+      }
+      $menu.empty();
+
+
+      // Construct the menu items.
+      for (var i = 0; i < menu.items.length; i++) {
+        var item = menu.items[i];
+
+        var $li = $("<div class='slick-header-menuitem'></div>")
+          .data("command", item.command || '')
+          .data("column", columnDef)
+          .data("item", item)
+          .on("click", handleMenuItemClick)
+          .appendTo($menu);
+
+        if (item.disabled) {
+          $li.addClass("slick-header-menuitem-disabled");
+        }
+
+        if (item.tooltip) {
+          $li.attr("title", item.tooltip);
+        }
+
+        var $icon = $("<div class='slick-header-menuicon'></div>")
+          .appendTo($li);
+
+        if (item.iconCssClass) {
+          $icon.addClass(item.iconCssClass);
+        }
+
+        if (item.iconImage) {
+          $icon.css("background-image", "url(" + item.iconImage + ")");
+        }
+
+        $("<span class='slick-header-menucontent'></span>")
+          .text(item.title)
+          .appendTo($li);
+      }
+
+      var leftPos = $(this).offset().left;
+
+      // when auto-align is set, it will calculate whether it has enough space in the viewport to show the drop menu on the right (default)
+      // if there isn't enough space on the right, it will automatically align the drop menu to the left
+      // to simulate an align left, we actually need to know the width of the drop menu
+      if (options.autoAlign) {
+        var gridPos = _grid.getGridPosition();
+        if ((leftPos + options.minWidth) >= gridPos.width) {
+          leftPos = leftPos - options.minWidth + options.autoAlignOffset;
+        }
+      }
+
+      $menu
+        .offset({ top: $(this).offset().top + $(this).height(), left: leftPos });
+
+
+      // Mark the header as active to keep the highlighting.
+      $activeHeaderColumn = $menuButton.closest(".slick-header-column");
+      $activeHeaderColumn
+        .addClass("slick-header-column-active");
+
+      // Stop propagation so that it doesn't register as a header click event.
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+
+    function handleMenuItemClick(e) {
+      var command = $(this).data("command");
+      var columnDef = $(this).data("column");
+      var item = $(this).data("item");
+
+      if (item.disabled) {
+        return;
+      }
+
+      hideMenu();
+
+      if (command != null && command != '') {
+        _self.onCommand.notify({
+            "grid": _grid,
+            "column": columnDef,
+            "command": command,
+            "item": item
+          }, e, _self);
+      }
+
+      // Stop propagation so that it doesn't register as a header click event.
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    $.extend(this, {
+      "init": init,
+      "destroy": destroy,
+      "setOptions": setOptions,
+
+      "onBeforeMenuShow": new Slick.Event(),
+      "onCommand": new Slick.Event()
+    });
+  }
+})(jQuery);