slickgrid - npm Package Compare versions

Comparing version 2.4.22 to 2.4.23

controls/slick.columnpicker.js

@@ -33,2 +33,3 @@ /***
     var _options = options;
+    var _gridUid = (grid && grid.getUID) ? grid.getUID() : '';
     var $columnTitleElm;
@@ -59,3 +60,3 @@ var $list;
 
-      $menu = $("<div class='slick-columnpicker' style='display:none' />").appendTo(document.body);
+      $menu = $("<div class='slick-columnpicker " + _gridUid + "' style='display:none' />").appendTo(document.body);
       $("<button type='button' class='close' data-dismiss='slick-columnpicker' aria-label='Close'><span class='close' aria-hidden='true'>&times;</span></button>").appendTo($menu);
@@ -106,3 +107,3 @@
         $li = $('<li class="' + excludeCssClass + '" />').appendTo($list);
-        $input = $("<input type='checkbox' id='colpicker-" + columnId + "' />").data("column-id", columnId).appendTo($li);
+        $input = $("<input type='checkbox' id='" + _gridUid + "colpicker-" + columnId + "' />").data("column-id", columnId).appendTo($li);
         columnCheckboxes.push($input);
@@ -120,3 +121,3 @@
 
-        $("<label for='colpicker-" + columnId + "' />")
+        $("<label for='" + _gridUid + "colpicker-" + columnId + "' />")
           .html(columnLabel)
@@ -133,4 +134,4 @@ .appendTo($li);
         $li = $("<li />").appendTo($list);
-        $input = $("<input type='checkbox' id='colpicker-forcefit' />").data("option", "autoresize").appendTo($li);
-        $("<label for='colpicker-forcefit' />").text(forceFitTitle).appendTo($li);
+        $input = $("<input type='checkbox' id='" + _gridUid + "colpicker-forcefit' />").data("option", "autoresize").appendTo($li);
+        $("<label for='" + _gridUid + "colpicker-forcefit' />").text(forceFitTitle).appendTo($li);
         if (_grid.getOptions().forceFitColumns) {
@@ -144,4 +145,4 @@ $input.attr("checked", "checked");
         $li = $("<li />").appendTo($list);
-        $input = $("<input type='checkbox' id='colpicker-syncresize' />").data("option", "syncresize").appendTo($li);
-        $("<label for='colpicker-syncresize' />").text(syncResizeTitle).appendTo($li);
+        $input = $("<input type='checkbox' id='" + _gridUid + "colpicker-syncresize' />").data("option", "syncresize").appendTo($li);
+        $("<label for='" + _gridUid + "colpicker-syncresize' />").text(syncResizeTitle).appendTo($li);
         if (_grid.getOptions().syncColumnCellResize) {
@@ -192,8 +193,8 @@ $input.attr("checked", "checked");
       if ($(e.target).data("option") == "autoresize") {
-        if (e.target.checked) {
-          _grid.setOptions({ forceFitColumns: true });
-          _grid.autosizeColumns();
-        } else {
-          _grid.setOptions({ forceFitColumns: false });
-        }
+        // when calling setOptions, it will resize with ALL Columns (even the hidden ones)
+        // we can avoid this problem by keeping a reference to the visibleColumns before setOptions and then setColumns after 
+        var previousVisibleColumns = getVisibleColumns();
+        var isChecked = e.target.checked;
+        _grid.setOptions({ forceFitColumns: isChecked });
+        _grid.setColumns(previousVisibleColumns);
         return;
@@ -225,3 +226,3 @@ }
         _grid.setColumns(visibleColumns);
-        onColumnsChanged.notify({ columns: visibleColumns, grid: _grid });
+        onColumnsChanged.notify({ allColumns: columns, columns: visibleColumns, grid: _grid });
       }
@@ -234,2 +235,7 @@ }
 
+    /** visible columns, we can simply get them directly from the grid */
+    function getVisibleColumns() {
+      return _grid.getColumns();
+    }
+
     init(_grid);
@@ -240,2 +246,3 @@
       "getAllColumns": getAllColumns,
+      "getVisibleColumns": getVisibleColumns,
       "destroy": destroy,
@@ -242,0 +249,0 @@ "updateAllTitles": updateAllTitles,

controls/slick.gridmenu.js

@@ -21,4 +21,6 @@ /***
  *      leaveOpen: false,                           // do we want to leave the Grid Menu open after a command execution? (false by default)
- *      menuWidth: 18,                              // width that will be use to resize the column header container (18 by default)
+ *      menuWidth: 18,                              // width (icon) that will be use to resize the column header container (18 by default)
+ *      contentMinWidth: 0,							            // defaults to 0 (auto), minimum width of grid menu content (command, column list) 
  *      resizeOnShowHeaderRow: false,               // false by default
+ *      useClickToRepositionMenu: true,             // true by default
  *
@@ -47,5 +49,7 @@ *      // the last 2 checkboxes titles
  *     forceFitTitle:             Text of the title "Force fit columns"
+ *     contentMinWidth:						minimum width of grid menu content (command, column list), defaults to 0 (auto)
  *     menuWidth:                 Grid menu button width (defaults to 18)
  *     resizeOnShowHeaderRow:     Do we want to resize on the show header row event
  *     syncResizeTitle:           Text of the title "Synchronous resize"
+ *     useClickToRepositionMenu:  Use the Click offset to reposition the Grid Menu (defaults to true), when set to False it will use the icon offset to reposition the grid menu
  *     menuUsabilityOverride:     Callback method that user can override the default behavior of enabling/disabling the menu from being usable (must be combined with a custom formatter)
@@ -139,4 +143,9 @@ *
       menuWidth: 18,
+      contentMinWidth: 0,
       resizeOnShowHeaderRow: false,
-      syncResizeTitle: "Synchronous resize"
+      syncResizeTitle: "Synchronous resize",
+      useClickToRepositionMenu: true,
+      headerColumnValueExtractor: function (columnDef) {
+        return columnDef.name;
+      }
     };
@@ -329,3 +338,3 @@
       // run the override function (when defined), if the result is false it won't go further
-      if (!runOverrideFunctionWhenExists(_options.gridMenu.menuUsabilityOverride, callbackArgs)) {
+      if (_options && _options.gridMenu && !runOverrideFunctionWhenExists(_options.gridMenu.menuUsabilityOverride, callbackArgs)) {
         return;
@@ -342,3 +351,3 @@ }
 
-      var $li, $input, columnId, excludeCssClass;
+      var $li, $input, columnId, columnLabel, excludeCssClass;
       for (var i = 0; i < columns.length; i++) {
@@ -349,3 +358,3 @@ columnId = columns[i].id;
 
-        $input = $("<input type='checkbox' id='gridmenu-colpicker-" + columnId + "' />").data("column-id", columns[i].id).appendTo($li);
+        $input = $("<input type='checkbox' id='" + _gridUid + "-gridmenu-colpicker-" + columnId + "' />").data("column-id", columns[i].id).appendTo($li);
         columnCheckboxes.push($input);
@@ -357,4 +366,11 @@
 
-        $("<label for='gridmenu-colpicker-" + columnId + "' />")
-          .html(columns[i].name)
+        // get the column label from the picker value extractor (user can optionally provide a custom extractor)
+        if (_options && _options.gridMenu && _options.gridMenu.headerColumnValueExtractor) {
+          columnLabel = _options.gridMenu.headerColumnValueExtractor(columns[i]);
+        } else {
+          columnLabel = _defaults.headerColumnValueExtractor(columns[i]);
+        }
+
+        $("<label for='" + _gridUid + "-gridmenu-colpicker-" + columnId + "' />")
+          .html(columnLabel)
           .appendTo($li);
@@ -370,4 +386,4 @@ }
         $li = $("<li />").appendTo($list);
-        $input = $("<input type='checkbox' id='gridmenu-colpicker-forcefit' />").data("option", "autoresize").appendTo($li);
-        $("<label for='gridmenu-colpicker-forcefit' />").text(forceFitTitle).appendTo($li);
+        $input = $("<input type='checkbox' id='" + _gridUid + "-gridmenu-colpicker-forcefit' />").data("option", "autoresize").appendTo($li);
+        $("<label for='" + _gridUid + "-gridmenu-colpicker-forcefit' />").text(forceFitTitle).appendTo($li);
 
@@ -382,4 +398,4 @@ if (_grid.getOptions().forceFitColumns) {
         $li = $("<li />").appendTo($list);
-        $input = $("<input type='checkbox' id='gridmenu-colpicker-syncresize' />").data("option", "syncresize").appendTo($li);
-        $("<label for='gridmenu-colpicker-syncresize' />").text(syncResizeTitle).appendTo($li);
+        $input = $("<input type='checkbox' id='" + _gridUid + "-gridmenu-colpicker-syncresize' />").data("option", "syncresize").appendTo($li);
+        $("<label for='" + _gridUid + "-gridmenu-colpicker-syncresize' />").text(syncResizeTitle).appendTo($li);
 
@@ -391,8 +407,24 @@ if (_grid.getOptions().syncColumnCellResize) {
 
+      var menuIconOffset = $(e.target).prop('nodeName') == "button" ? $(e.target).offset() : $(e.target).parent("button").offset(); // get button offset position
+      if (!menuIconOffset) {
+        menuIconOffset = $(e.target).offset(); // external grid menu might fall in this last case
+      }
+      var menuWidth = $menu.width();
+      var useClickToRepositionMenu = (_options.gridMenu && _options.gridMenu.useClickToRepositionMenu !== undefined) ? _options.gridMenu.useClickToRepositionMenu : _defaults.useClickToRepositionMenu;
+      var gridMenuIconWidth = (_options.gridMenu && _options.gridMenu.menuWidth) || _defaults.menuWidth;
+      var contentMinWidth = (_options.gridMenu && _options.gridMenu.contentMinWidth) ? _options.gridMenu.contentMinWidth : _defaults.contentMinWidth;
+      var currentMenuWidth = (contentMinWidth > menuWidth) ? contentMinWidth : (menuWidth + gridMenuIconWidth);
+      var nextPositionTop = (useClickToRepositionMenu && e.pageY > 0) ? e.pageY : menuIconOffset.top + 10;
+      var nextPositionLeft = (useClickToRepositionMenu && e.pageX > 0) ? e.pageX : menuIconOffset.left + 10;
+
       $menu
-        .css("top", e.pageY + 10)
-        .css("left", e.pageX - $menu.width())
-        .css("max-height", $(window).height() - e.pageY - 10)
-        .show();
+        .css("top", nextPositionTop + 10)
+        .css("left", nextPositionLeft - currentMenuWidth + 10)
+        .css("max-height", $(window).height() - e.pageY - 15);
 
+      if (contentMinWidth > 0) {
+        $menu.css("min-width", contentMinWidth);
+      }
+
+      $menu.show();
       $list.appendTo($menu);
@@ -500,8 +532,8 @@ _isMenuOpen = true;
       if ($(e.target).data("option") == "autoresize") {
-        if (e.target.checked) {
-          _grid.setOptions({ forceFitColumns: true });
-          _grid.autosizeColumns();
-        } else {
-          _grid.setOptions({ forceFitColumns: false });
-        }
+        // when calling setOptions, it will resize with ALL Columns (even the hidden ones)
+        // we can avoid this problem by keeping a reference to the visibleColumns before setOptions and then setColumns after 
+        var previousVisibleColumns = getVisibleColumns();
+        var isChecked = e.target.checked;
+        _grid.setOptions({ forceFitColumns: isChecked });
+        _grid.setColumns(previousVisibleColumns);
         return;
@@ -508,0 +540,0 @@ }

package.json

 {
   "name": "slickgrid",
-  "version": "2.4.22",
+  "version": "2.4.23",
   "description": "A lightning fast JavaScript grid/spreadsheet",
@@ -5,0 +5,0 @@ "main": "slick.core.js",

plugins/slick.cellrangedecorator.js

@@ -50,8 +50,10 @@ (function ($) {
 
-      _elem.css({
-        top: from.top + options.offset.top,
-        left: from.left + options.offset.left,
-        height: to.bottom - from.top + options.offset.height,
-        width: to.right - from.left + options.offset.width
-      });
+      if (from && to && options && options.offset) {
+        _elem.css({
+          top: from.top + options.offset.top,
+          left: from.left + options.offset.left,
+          height: to.bottom - from.top + options.offset.height,
+          width: to.right - from.left + options.offset.width
+        });
+      }
 
@@ -58,0 +60,0 @@ return _elem;

No alert changes

Worsened metrics

Total package byte prevSize

3921727

decreased by-11.35%

Number of package files

135

decreased by-4.93%

Lines of code

94099

decreased by-3.52%

No dependency changes