feat(headerMenu): autoAlign left if header drop menu is outside viewport

6pac · Feb 25, 2018 · b8793f6 · b8793f6
1 parent 91a9716
commit b8793f6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/examples/example-plugin-headermenu.html b/examples/example-plugin-headermenu.html
@@ -47,7 +47,7 @@
 </head>
 <body>
 <div style="position:relative">
-  <div style="width:600px;">
+  <div style="width:500px;">
     <div id="myGrid" style="width:100%;height:500px;"></div>
   </div>
 
@@ -57,11 +57,16 @@ <h2>Demonstrates:</h2>
         This example demonstrates using the <b>Slick.Plugins.HeaderMenu</b> plugin to add drop-down menus to column
         headers.  (Hover over the headers.)
       </p>
+      <hr>
+      <h3>Auto-align option</h3>
       <p>
-        Auto-align will divide into 2 groups (columns on the left &amp; right).
-        The left side columns will have their drop menu align on right while the right side columns will align on the left
+        Auto-align (defaults to False), will calculate whether it has enough space to show the drop menu to the right. 
+        If it calculates that the drop menu is to fall outside of the viewport, it will automatically align the drop menu to the left.
+        However please note that to simulate a left alignement, we actually need to know the width of the drop menu.
+        The width of the drop menu is easy to find, it is the <i><b>"max-width"</b></i> set in the <i><b>".slick-header-menu"</b></i> CSS class.
       </p>
-      <h3>Auto-Align Header Drop Menu</h3>
+      <hr>
+      <h3>Auto-Align Header Menu Drop</h3>
       <button onclick="autoAlignMenu(true)">ON</button>
       <button onclick="autoAlignMenu(false)">OFF</button>
       <h2>View Source:</h2>
@@ -84,12 +89,13 @@ <h2>View Source:</h2>
   var grid;
   var headerMenuPlugin;
   var columns = [
-    {id: "title", name: "Title", field: "title"},
-    {id: "duration", name: "Duration", field: "duration", sortable: true},
-    {id: "%", name: "% Complete", field: "percentComplete", sortable: true},
+    {id: "title", name: "Title", field: "title", width: 90},
+    {id: "duration", name: "Duration", field: "duration", sortable: true, width: 90},
+    {id: "%", name: "% Complete", field: "percentComplete", sortable: true, width: 90},
     {id: "start", name: "Start", field: "start"},
     {id: "finish", name: "Finish", field: "finish"},
     {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
+
   ];
 
   for (var i = 0; i < columns.length; i++) {

diff --git a/plugins/slick.headermenu.js b/plugins/slick.headermenu.js
@@ -51,7 +51,7 @@
    *    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.
-   *    autoAlign:    Auto-align will divide into 2 groups and make the left columns have drop menu align on right and vice versa
+   *    autoAlign:    Auto-align drop menu to the left when not enough viewport space to show on the right
    *
    *
    * The plugin exposes the following events:
@@ -230,11 +230,13 @@
       }
 
       var leftPos = $(this).offset().left;
-
-      // when auto-align is set, it will make the left columns have drop menu align on right and vice versa
+
+      // 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 columnCount = _grid.getColumns().length;
-        if (_grid.getColumnIndex(columnDef.id) >= (columnCount / 2)) {
+        var gridPos = _grid.getGridPosition();
+        if ((leftPos + options.width) >= gridPos.width) {
           leftPos = leftPos - options.width;
         }  
       }