r1099 - in branches/dev/grid: tests/visual ui

Author: paul.bakaus
Date: Thu Dec 11 09:35:58 2008
New Revision: 1099
Modified:
branches/dev/grid/tests/visual/grid.html
branches/dev/grid/ui/ui.grid.js
Log:
grid: column reordering half-way done (needs final logic to reorder data
columns along, and no trigger on resize)
Modified: branches/dev/grid/tests/visual/grid.html
==============================================================================
--- branches/dev/grid/tests/visual/grid.html    (original)
+++ branches/dev/grid/tests/visual/grid.html    Thu Dec 11 09:35:58 2008
@@ -6,12 +6,13 @@
        <link rel="stylesheet" href="../../themes/default/ui.all.css"
type="text/css" media="screen" title="no title" charset="utf-8">

        <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
-        <script type="text/javascript" src="../../ui/ui.core.js"></script>
+<script src="../../../../../trunk/ui/ui.core.js" type="text/javascript"
charset="utf-8"></script>
        <script type="text/javascript" src="../../ui/ui.grid.js"></script>
        <script type="text/javascript" src="../../ui/ui.gridmodel.js"></script>
        <script type="text/javascript"
src="../../ui/ui.infiniteScrolling.js"></script>
        <script type="text/javascript"
src="../../dev-selectable-ui/ui.selectable.js"></script>
-        <script src="../../ui/ui.resizable.js" type="text/javascript"
charset="utf-8"></script>
+
+


@@ -58,6 +59,14 @@
            .ui-grid-column div {
                padding: 3px;
                height: 16px;
+            }
+
+            .ui-grid-column-sort-left {
+                border-left: 1px solid red !important;
+            }
+
+            .ui-grid-column-sort-right {
+                border-right: 1px solid red !important;
            }
Modified: branches/dev/grid/ui/ui.grid.js
==============================================================================
--- branches/dev/grid/ui/ui.grid.js    (original)
+++ branches/dev/grid/ui/ui.grid.js    Thu Dec 11 09:35:58 2008
@@ -8,6 +8,7 @@
    },
    _generateColumns: function() {
+
        this.columnsContainer = $('<tr class="ui-grid-columns"><td><div
class="ui-grid-columns-constrainer"><table cellpadding="0"
cellspacing="0"><tbody><tr class="ui-grid-header
ui-grid-inner"></tr></tbody></table></div></td></tr>')
            .appendTo(this.grid).find('table tbody tr');
@@ -15,6 +16,9 @@
            width: this.options.width,
            overflow: 'hidden'
        });
+
+        this.columnsContainer.gridSortable();
+
    },
    _generateFooter: function() {
@@ -401,6 +405,80 @@
}));
$.extend($.ui.gridResizable, {
+    defaults: {
+        handle: false,
+        cancel: ":input",
+        delay: 0,
+        distance: 1
+    }
+});
+
+
+$.widget('ui.gridSortable', $.extend({}, $.ui.mouse, {
+
+    _init: function() {
+        this._mouseInit();
+    },
+
+    _mouseCapture: function(event) {
+
+        this.item = $($(event.target).parents().andSelf().filter('td')[0]);
+        this.offset = this.item.offset();
+
+        return true;
+
+    },
+
+    _mouseStart: function(event) {
+
+        var self = this;
+
+        this.offsets = [];
+        this.items = this.element.find('td').each(function(i) {
+            if(self.item[0] != this) self.offsets.push([this,
$(this).offset().left]);
+        });
+
+        $.extend(this, {
+            startPosition: event.pageX,
+            index: this.items.index(this.item[0])
+        });
+
+    },
+
+    _mouseDrag: function(event) {
+
+        var self = this;
+            //this.element.css('width', this.startWidth + (event.pageX -
this.startPosition));
+        $(self.offsets).each(function(i) {
+
+            if(
+                $.ui.isOverAxis(event.pageX, this[1], this[0].offsetWidth)
+            ) {
+                var dir = $.ui.isOverAxis(event.pageX, this[1],
this[0].offsetWidth/2) ? 'left' : 'right';
+                if(!self.lastHovered || self.lastHovered[0] != this[0] ||
self.lastHovered[1] != dir) {
+
+                    if(self.lastHovered)
$(self.lastHovered[0]).removeClass('ui-grid-column-sort-right
ui-grid-column-sort-left');
+
+                    self.lastHovered = [this[0], dir];
+                    $(self.lastHovered[0]).addClass('ui-grid-column-sort-'+dir);
+                }
+            }
+
+        });
+
+    },
+
+    _mouseStop: function(event) {
+        if(this.lastHovered) {
+            $(this.lastHovered[0]).removeClass('ui-grid-column-sort-right
ui-grid-column-sort-left');
+            $(this.lastHovered[0])[this.lastHovered[1]
== 'right' ? 'after' : 'before'](this.item);
+            //TODO: Reorder actual data columns
+        }
+    }
+
+}));
+
+$.extend($.ui.gridSortable, {
    defaults: {
        handle: false,
        cancel: ":input",