Changeset 7083

Timestamp:

Mar 1, 2016, 1:02:17 PM (8 years ago)

Author:

Nicklas Nordborg

Message:

References #1983: Re-order columns in table listings by drag-n-drop

This seems to be working now. Tested with Firefox, IE 11, Edge and Chrome. Some cross-browser issues to get everything working in all browsers at the same time.

Location:

trunk

Files:

• src/clients/web/net/sf/basedb/clients/web/taglib/table/ColumnDef.java (modified) (1 diff)
• src/clients/web/net/sf/basedb/clients/web/taglib/table/Table.java (modified) (4 diffs)
• www/WEB-INF/table.tld (modified) (1 diff)
• www/include/scripts/table.js (modified) (2 diffs)
• www/include/styles/main.css (modified) (1 diff)
• www/include/styles/table.css (modified) (1 diff)

trunk/src/clients/web/net/sf/basedb/clients/web/taglib/table/ColumnDef.java

@@ -673 +673 @@
       if (isVisible)
       {
+        boolean allowColumnDrag = table.allowColumnDrag();
         StringBuilder sb = new StringBuilder();
         sb.append("<th");
-        addIdAndStyles(sb);
+        addIdAndStyles(sb, allowColumnDrag ? "table-col-draggable" : null);
         addDynamicAttributes(sb);
+        if (allowColumnDrag) 
+        {
+          sb.append(" draggable=\"true\"");
+        }
+        sb.append(" data-column-id=\"").append(getId()).append("\"");
         sb.append(">");
         if (!isSortable())

trunk/src/clients/web/net/sf/basedb/clients/web/taglib/table/Table.java

@@ -70 +70 @@
       subcontext=...
       action=...
+      dragcolumns=true|false|null
    >
 </pre>
@@ -197 +198 @@
       The name of the current subcontext. Used by some child taglibs for 
       generating context sensitive information (ie. PresetSelector).
+    </td>
+  </tr>
+  <tr>
+    <td>dragcolumns</td>
+    <td>null</td>
+    <td>no</td>
+    <td>
+      If set, controls if columns can be re-ordered by dragging them in 
+      the GUI. If null, the feature is enabled only if the "action" and "item"
+      attributes are not null.
     </td>
   </tr>
@@ -325 +336 @@
   }
 
+  private Boolean dragColumns;
+  
+  /**
+    @since 3.8
+  */
+  public void setDragcolumns(Boolean dragColumns)
+  {
+    this.dragColumns = dragColumns;
+  }
+  
+  public Boolean getDragcolumns()
+  {
+    return dragColumns;
+  }
+  
   /**
     @since 3.5
@@ -586 +612 @@
   {
     return extensionColumns;
+  }
+  
+  /**
+    Can header columns be dragged for re-ordering?
+    If {@link #setDragcolumns(Boolean)} has been set
+    we use that value, otherwise we only allow it
+    if the "action" attribute has been set.
+    @since 3.8
+  */
+  boolean allowColumnDrag()
+  {
+    return dragColumns != null ? dragColumns : getAction() != null && getItem() != null;
   }
   

trunk/www/WEB-INF/table.tld

@@ -91 +91 @@
       <rtexprvalue>true</rtexprvalue>
     </attribute>
+    <attribute>
+      <name>dragcolumns</name>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
     <dynamic-attributes>true</dynamic-attributes>
   </tag>

trunk/www/include/scripts/table.js

@@ -78 +78 @@
     {
       Events.addEventHandler(sort[i], 'click', table.sortOnClick, attributes);
+    }
+    
+    // Add 'drag-drop' handlers for moving columns
+    var cols = element.getElementsByClassName('table-col-draggable');
+    for (var i = 0; i < cols.length; i++)
+    {
+      var dropTarget = cols[i];
+      Data.set(dropTarget, 'column-index', i);
+      Events.addEventHandler(dropTarget, 'dragstart', table.beginColumnDrag, attributes);
+      Events.addEventHandler(dropTarget, 'dragover', table.checkColumnDropTarget);
+      Events.addEventHandler(dropTarget, 'dragleave', table.leaveColumnDropTarget);
+      Events.addEventHandler(dropTarget, 'drop', table.columnDropped);
+      Events.addEventHandler(dropTarget, 'dragend', table.endColumnDrag);
     }
     
@@ -193 +206 @@
   
   /**
+    Start dragging a table column. Store table-id, column-id 
+    and column-index on the table element.
+  */
+  table.beginColumnDrag = function(event)
+  {
+    var dragSrc = {};
+    dragSrc.tableId = Data.get(event.currentTarget, 'table-id');
+    dragSrc.columnId = Data.get(event.currentTarget, 'column-id');
+    dragSrc.columnIndex = Data.int(event.currentTarget, 'column-index');
+    
+    // Store the drag data on the <table> div
+    Doc.element(dragSrc.tableId).dragSrc = dragSrc;
+    event.dataTransfer.effectAllowed = 'move';
+    // In FF, we also need to call setData() or the drag event will not start
+    // but this results in an exception in IE!!!
+    try
+    {
+      event.dataTransfer.setData('application/json', JSON.stringify(dragSrc));
+    }
+    catch (e)
+    {}
+  }
+  
+  /**
+    Clean up after dragging.
+   */
+  table.endColumnDrag = function(event)
+  {
+    var tableId = Data.get(event.currentTarget, 'table-id');
+    Doc.element(tableId).dragSrc = null;
+  }
+  
+  /**
+    Checks if dropping is allowed at this target.
+    We only allow dragging within the same table,
+    and the target column must be different from the 
+    source column.
+  */
+  table.checkColumnDropTarget = function(event)
+  {
+    var tableId = Data.get(event.currentTarget, 'table-id');
+    var dragSrc = Doc.element(tableId).dragSrc;
+    
+    var dropLocation = table.checkTheDropTarget(dragSrc, event.currentTarget);
+    if (dropLocation)
+    {
+      // Enable drop target!
+      event.preventDefault();
+      event.dataTransfer.dropEffect = 'move';
+      // Left or right depending on the order or columns
+      Doc.addClass(event.currentTarget, dropLocation < 0 ? 'table-drop-left' : 'table-drop-right');
+    }
+  }
+
+  /**
+    Checks if dropping is allowed at this target.
+    We only allow dragging within the same table,
+    and the target column must be different from the 
+    source column.
+    returns: 0 = no drop, -1 drop to left, +1 drop to right
+  */
+  table.checkTheDropTarget = function(dragSrc, dragTarget)
+  {
+    if (!dragSrc) return false;
+    var tableId = Data.get(dragTarget, 'table-id');
+    var columnIndex = Data.int(dragTarget, 'column-index');
+    return tableId == dragSrc.tableId ? columnIndex - dragSrc.columnIndex : 0;
+  }
+  
+  /**
+    Remove drop indicator classes when leaving.
+  */
+  table.leaveColumnDropTarget = function(event)
+  {
+    Doc.removeClass(event.currentTarget, 'table-drop-right');
+    Doc.removeClass(event.currentTarget, 'table-drop-left');
+  }
+
+  /**
+    Another column was dropped here!
+  */
+  table.columnDropped = function(event)
+  {
+    Doc.removeClass(event.currentTarget, 'table-drop-right');
+    Doc.removeClass(event.currentTarget, 'table-drop-left');
+    
+    // Check that we can drop here
+    var tableId = Data.get(event.currentTarget, 'table-id');
+    var dragSrc = Doc.element(tableId).dragSrc;
+    if (!table.checkTheDropTarget(dragSrc, event.currentTarget)) return;
+    
+    // Get the existing columns as an array
+    var columns = table.getColumns(tableId);
+    var colArray;
+    if (columns == 'all')
+    {
+      // Special case, load the existing columns
+      var colDefs = table.getColumnDefs(tableId);
+      colArray = [];
+      for (var colNo = 0; colNo < colDefs.length; colNo++)
+      {
+        var col = colDefs[colNo];
+        if (!col.alwaysHide) colArray[colArray.length] = col.id;
+      }
+    }
+    else
+    {
+      colArray = columns.split(',');
+    }
+    
+    var indexSrc = colArray.indexOf(dragSrc.columnId);
+    var indexDest = colArray.indexOf(Data.get(event.currentTarget, 'column-id'));
+    // Remove the dragged column from the array
+    if (indexSrc >= 0) colArray.splice(indexSrc, 1);
+    // Insert the dragged column before or after the column it was dropped on
+    if (indexDest >= 0) colArray.splice(indexDest, 0, dragSrc.columnId);
+    
+    // Update and submit the table
+    columns = colArray.join(',');
+    table.setColumns(tableId, columns);
+  }
+  
+
+  /**
     Event handler for the page navigator. The actual target should 
     have a table-page attribute that specify the page to move to.

trunk/www/include/styles/main.css

@@ -97 +97 @@
 {
   text-decoration: none;
+}
+
+/* Draggable items have a 'drag' cursor */
+*[draggable]
+{
+  cursor: move; /* IE only support 'move', but 'grab' is looking better in FF */
+  cursor: grab;
 }
 

trunk/www/include/styles/table.css

@@ -205 +205 @@
 }
 
+/* Indicates drop position for dragged column */
+.itemlist div.data th.table-drop-right
+{
+  border-right-width: 3px;
+  border-right-color: black;
+  border-right-style: solid;
+}
+.itemlist div.data th.table-drop-left
+{
+  border-left-width: 3px;
+  border-left-color: black;
+  border-left-style: solid;
+}
+
 /* The <tbody> section defining data rows */
 .itemlist div.data > table > tbody.rows > tr