r1037 - in branches/dev/grid: tests/visual ui
Author: paul.bakaus
Date: Wed Dec 3 11:54:37 2008
New Revision: 1037
Modified:
branches/dev/grid/tests/visual/grid.html
branches/dev/grid/ui/ui.grid.js
Log:
grid: first step done to make columns resizable by implementing a inline
mini plugin called gridResizable, still needs callbacks and server updating
+ hover indication
Modified: branches/dev/grid/tests/visual/grid.html
==============================================================================
--- branches/dev/grid/tests/visual/grid.html (original)
+++ branches/dev/grid/tests/visual/grid.html Wed Dec 3 11:54:37 2008
@@ -11,6 +11,8 @@
<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>
+
Modified: branches/dev/grid/ui/ui.grid.js
==============================================================================
--- branches/dev/grid/ui/ui.grid.js (original)
+++ branches/dev/grid/ui/ui.grid.js Wed Dec 3 11:54:37 2008
@@ -111,7 +111,7 @@
this.contentDiv
.bind('scroll.grid', function(event) {
- $('div.ui-grid-columns-constrainer', this.grid)[0].scrollLeft =
this.scrollLeft;
+ $('div.ui-grid-columns-constrainer', self.grid)[0].scrollLeft =
this.scrollLeft;
});
//Selection of rows
@@ -120,6 +120,21 @@
},
_handleMove: function(event) {
+/*
+ // If we're over a columns header
+ if($(event.target).is('.ui-grid-column-header')) {
+
+ this.grid.css('cursor', 'e-resize');
+ this.columnHandleHovered = true;
+ return; //Stop here to save performance
+
+ } else {
+ if(this.columnHandleHovered) {
+ this.grid.css('cursor', '');
+ this.columnHandleHovered = false;
+ }
+ };
+*/
//If we're over a table row
if($(event.target).parents('.ui-grid-row').length) {
@@ -131,6 +146,7 @@
target.addClass('ui-grid-row-hover');
this.tableRowHovered = target[0];
+ return; //Stop here to save performance
} else {
if(this.tableRowHovered)
@@ -304,7 +320,8 @@
var column = $('<td class="ui-grid-column-header
ui-default-state"><div>'+item[i].label+'</div></td>')
.width(item[i].width)
.data('grid-column-header', item[i])
- .appendTo(this.columnsContainer);
+ .appendTo(this.columnsContainer)
+ .gridResizable();
totalWidth += item[i].width;
};
@@ -331,6 +348,63 @@
}
});
+
+
+$.widget('ui.gridResizable', $.extend({}, $.ui.mouse, {
+
+ _init: function() {
+ this.table = this.element.parent().parent().parent();
+ this.gridTable =
this.element.parents('.ui-grid').find('div.ui-grid-content > table');
+ this._mouseInit();
+ },
+
+ _mouseCapture: function(event) {
+
+ this.offset = this.element.offset();
+ if((this.offset.left + this.element.width()) - event.pageX < 5) {
+ return true;
+ };
+
+ return false;
+
+ },
+
+ _mouseStart: function(event) {
+
+ $.extend(this, {
+ startWidth: this.element.width(),
+ tableStartWidth: this.table.width(),
+ gridTableStartWidth: this.gridTable.width(),
+ index: this.element.parent().find('td').index(this.element[0])
+ });
+
+ },
+
+ _mouseDrag: function(event) {
+
+ this.element.css('width', this.startWidth + (event.pageX -
this.startPosition));
+ this.table.css('width', this.tableStartWidth + (event.pageX -
this.startPosition));
+
+ $('tr:eq(0) td:eq('+this.index+')', this.gridTable).css('width',
this.startWidth + (event.pageX - this.startPosition));
+ this.gridTable.css('width', this.gridTableStartWidth + (event.pageX -
this.startPosition));
+
+ },
+
+ _mouseStop: function(event) {
+ //TODO: Send column width update to the backend, and/or fire callback
+ }
+
+}));
+
+$.extend($.ui.gridResizable, {
+ defaults: {
+ handle: false,
+ cancel: ":input",
+ delay: 0,
+ distance: 1
+ }
+});
+
$.extend($.ui.grid, {
defaults: {