gridx-rails 1.1.0

data/app/assets/javascripts/gridx/modules/dnd/Column.js

@@ -0,0 +1,210 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/array",
+	"dojo/dom-geometry",
+	"dojo/dom-class",
+	"dojo/query",
+	"./_Base",
+	"../../core/_Module"
+], function(declare, array, domGeometry, domClass, query, _Base, _Module){
+
+/*=====
+	return declare(_Base, {
+		// summary:
+		//		This module provides an implementation of column drag & drop.
+		// description:
+		//		This module supports column reordering within grid, dragging out of grid, and dragging into grid.
+		//		This module depends on "_dnd", "selectColumn" and "moveColumn" modules.
+
+		// accept: String[]
+		//		Can drag in what kind of stuff
+		//		For now can not drag in any columns.
+		accept: [],
+
+		// provide: String[]
+		//		Can drag out what kind of stuff
+		provide: []
+	});
+=====*/
+
+	return declare(_Base, {
+		name: 'dndColumn',
+
+		required: ['_dnd', 'selectColumn', 'moveColumn'],
+
+		getAPIPath: function(){
+			return {
+				dnd: {
+					column: this
+				}
+			};
+		},
+
+		preload: function(){
+			var t = this,
+				g = t.grid;
+			t.inherited(arguments);
+			t._selector = g.select.column;
+			t.connect(g.header, 'onRender', '_initHeader');
+		},
+
+		load: function(){
+			this._initHeader();
+			this.loaded.callback();
+		},
+	
+		//Public---------------------------------------------------------------------------------------
+		accept: [],
+
+		provide: ['grid/columns'],
+
+		//Package--------------------------------------------------------------------------------------
+		_checkDndReady: function(evt){
+			var t = this;
+			if(t._selector.isSelected(evt.columnId)){
+				t._selectedColIds = t._selector.getSelected();
+				t.grid.dnd._dnd.profile = t;
+				return true;
+			}
+			return false;
+		},
+
+		onDraggedOut: function(/*source*/){
+			//TODO: Support drag columns out (remove columns).
+		},
+
+		//Private--------------------------------------------------------------------------------------
+		_cssName: "Column",
+
+		_initHeader: function(){
+			query('.gridxCell', this.grid.header.domNode).attr('aria-grabbed', 'false');
+		},
+
+		_onBeginDnd: function(source){
+			var t = this;
+			source.delay = t.arg('delay');
+			array.forEach(t._selectedColIds, function(id){
+				query('[colid="' + t.grid._escapeId(id) + '"].gridxCell', t.grid.header.domNode).attr('aria-grabbed', 'true');
+			});
+		},
+
+		_getDndCount: function(){
+			return this._selectedColIds.length;
+		},
+
+		_onEndDnd: function(){
+			query('[aria-grabbed="true"].gridxCell', this.grid.header.domNode).attr('aria-grabbed', 'false');
+		},
+
+		_buildDndNodes: function(){
+			var gid = this.grid.id;
+			return array.map(this._selectedColIds, function(colId){
+				return ["<div id='", gid, "_dndcolumn_", colId, "' gridid='", gid, "' columnid='", colId, "'></div>"].join('');
+			}).join('');
+		},
+	
+		_onBeginAutoScroll: function(){
+			var autoScroll = this.grid.autoScroll;
+			this._autoScrollV = autoScroll.vertical;
+			autoScroll.vertical = false;
+		},
+
+		_onEndAutoScroll: function(){
+			this.grid.autoScroll.vertical = this._autoScrollV;
+		},
+
+		_getItemData: function(id){
+			return id.substring((this.grid.id + '_dndcolumn_').length);
+		},
+		
+		//---------------------------------------------------------------------------------------------
+		_calcTargetAnchorPos: function(evt, containerPos){
+			var node = evt.target,
+				t = this,
+				g = t.grid,
+				ltr = g.isLeftToRight(),
+				columns = g._columns,
+				ret = {
+					height: containerPos.h + "px",
+					width: '',
+					top: ''
+				},
+				escapeId = g._escapeId,
+				func = function(n){
+					var id = n.getAttribute('colid'),
+						index = g._columnsById[id].index,
+						first = n,
+						last = n,
+						firstIdx = index,
+						lastIdx = index;
+					if(t._selector.isSelected(id)){
+						firstIdx = index;
+						while(firstIdx > 0 && t._selector.isSelected(columns[firstIdx - 1].id)){
+							--firstIdx;
+						}
+						first = query(".gridxHeaderRow [colid='" + escapeId(columns[firstIdx].id) + "']", g.headerNode)[0];
+						lastIdx = index;
+						while(lastIdx < columns.length - 1 && t._selector.isSelected(columns[lastIdx + 1].id)){
+							++lastIdx;
+						}
+						last = query(".gridxHeaderRow [colid='" + escapeId(columns[lastIdx].id) + "']", g.headerNode)[0];
+					}
+					if(first && last){
+						var firstPos = domGeometry.position(first),
+							lastPos = domGeometry.position(last),
+							middle = (firstPos.x + lastPos.x + lastPos.w) / 2,
+							pre = evt.clientX < middle;
+						if(pre){
+							ret.left = (firstPos.x - containerPos.x - 1) + "px";
+						}else{
+							ret.left = (lastPos.x + lastPos.w - containerPos.x - 1) + "px";
+						}
+						t._target = pre ^ ltr ? lastIdx + 1 : firstIdx;
+					}else{
+						delete t._target;
+					}
+					return ret;
+				};
+			while(node){
+				if(domClass.contains(node, 'gridxCell')){
+					return func(node);
+				}
+				node = node.parentNode;
+			}
+			//For FF, when dragging from another grid, the evt.target is always grid.bodyNode!
+			// so have to get the cell node by position, which is relatively slow.
+			var rowNode = query(".gridxRow", g.bodyNode)[0],
+				rowPos = domGeometry.position(rowNode.firstChild);
+			if(rowPos.x + rowPos.w <= evt.clientX){
+				ret.left = (rowPos.x + rowPos.w - containerPos.x - 1) + 'px';
+				t._target = columns.length;
+			}else if(rowPos.x >= evt.clientX){
+				ret.left = (rowPos.x - containerPos.x - 1) + 'px';
+				t._target = 0;
+			}else if(query(".gridxCell", rowNode).some(function(cellNode){
+				var cellPos = domGeometry.position(cellNode);
+				if(cellPos.x <= evt.clientX && cellPos.x + cellPos.w >= evt.clientX){
+					node = cellNode;
+					return true;
+				}
+			})){
+				return func(node);
+			}
+			return ret;
+		},
+		
+		_onDropInternal: function(nodes, copy){
+			var t = this;
+			if(t._target >= 0){
+				var indexes = array.map(t._selectedColIds, function(colId){
+					return t.grid._columnsById[colId].index;
+				});
+				t.grid.move.column.move(indexes, t._target);
+			}
+		},
+		
+		_onDropExternal: function(/*source, nodes, copy*/){
+			//TODO: Support drag in columns from another grid or non-grid source
+		}
+	});
+});

data/app/assets/javascripts/gridx/modules/dnd/Row.js

@@ -0,0 +1,286 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/array",
+	"dojo/_base/Deferred",
+	"dojo/_base/lang",
+	"dojo/dom-class",
+	"dojo/dom-geometry",
+	"dojo/_base/sniff",
+	"./_Base",
+	"../../core/_Module"
+], function(declare, array, Deferred, lang, domClass, domGeometry, has, _Base, _Module){
+
+/*=====
+	return declare(_Base, {
+		// summary:
+		//		This module provides an implementation of row drag & drop.
+		// description:
+		//		This module supports row reordering within grid, dragging out of grid, and dragging into grid.
+		//		This module depends on "_dnd" and "moveRow" modules.
+
+		// accept: String[]
+		//		Can drag in what kind of stuff
+		accept: [],
+
+		// provide: String[]
+		//		Can drag out what kind of stuff
+		provide: []
+	});
+=====*/
+
+	var hitch = lang.hitch,
+		forEach = array.forEach;
+
+	function getSourceData(source, nodes){
+		if(source.grid){
+			var d = new Deferred(),
+				success = hitch(d, d.callback),
+				fail = hitch(d, d.errback),
+				dataArr = [],
+				sg = source.grid,
+				rowIds = sg.dnd.row._selectedRowIds;
+			sg.model.when({id: rowIds}, function(){
+				forEach(rowIds, function(id){
+					var idx = sg.model.idToIndex(id),
+						row = sg.model.byId(id);
+					if(row){
+						dataArr.push(lang.clone(row.rawData));
+					}
+				});
+			}).then(function(){
+				success(dataArr);
+			}, fail);
+			return d;
+		}else{
+			return source.getGridDndRowData && source.getGridDndRowData(nodes) || [];
+		}
+	}
+
+	return declare(_Base, {
+		name: 'dndRow',
+		
+		required: ['_dnd', 'moveRow'],
+
+		getAPIPath: function(){
+			return {
+				dnd: {
+					row: this
+				}
+			};
+		},
+
+		//Public---------------------------------------------------------------------------
+		accept: ['grid/rows'],
+
+		provide: ['grid/rows'],
+
+		onDraggedOut: function(targetSource){
+			var t = this,
+				targetAccept = [];
+			if(targetSource.grid){
+				targetAccept = targetSource.grid.dnd._dnd.profile.arg('accept');
+			}else{
+				for(var n in targetSource.accept){
+					targetAccept.push(n);
+				}
+			}
+			if(!t.checkArg('copyWhenDragOut', targetAccept)){
+				var g = t.grid,
+					m = g.model,
+					s = g.store,
+					rowIds = t._selectedRowIds;
+				if(s.fetch){
+					var items = [];
+					g.model.when({id: rowIds}, function(){
+						forEach(rowIds, function(id){
+							var row = m.byId(id);
+							if(row){
+								items.push(row.item);
+							}
+						});
+					}).then(function(){
+						forEach(items, s.deleteItem, s);
+						s.save();
+					});
+				}else{
+					forEach(rowIds, s.remove, s);
+				}
+			}
+		},
+	
+		//Package-----------------------------------------------------------------------------------
+		_checkDndReady: function(evt){
+			var t = this, m = t.model;
+			if(!m.getMark || m.getMark(evt.rowId)){
+				t.grid.dnd._dnd.profile = t;
+				t._selectedRowIds = m.getMarkedIds ? m.getMarkedIds() : [evt.rowId];
+				return true;
+			}
+			return false;
+		},
+
+		//Private-----------------------------------------------------------------------------
+		_cssName: 'Row',
+
+		_onBeginDnd: function(source){
+			source.delay = this.arg('delay');
+		},
+
+		_getDndCount: function(){
+			return this._selectedRowIds.length;
+		},
+
+		_onEndDnd: function(){},
+
+		_buildDndNodes: function(){
+			var gid = this.grid.id;
+			return array.map(this._selectedRowIds, function(rowId){
+				return ["<div id='", gid, '_dndrow_', rowId, "' gridid='", gid, "' rowid='", rowId, "'></div>"].join('');
+			}).join('');
+		},
+
+		_onBeginAutoScroll: function(){
+			var autoScroll = this.grid.autoScroll;
+			this._autoScrollH = autoScroll.horizontal;
+			autoScroll.horizontal = false;
+		},
+
+		_onEndAutoScroll: function(){
+			this.grid.autoScroll.horizontal = this._autoScrollH;
+		},
+
+		_getItemData: function(id){
+			return id.substring((this.grid.id + '_dndrow_').length);
+		},
+		
+		//----------------------------------------------------------------------------
+		_calcTargetAnchorPos: function(evt, containerPos){
+			var t = this,
+				node = evt.target,
+				view = t.grid.view,
+				ret = {
+					width: containerPos.w + "px",
+					height: '',
+					left: ''
+				},
+				isSelected = function(n){
+					return t.model.getMark && t.model.getMark(n.getAttribute('rowid'));
+				},
+				getVIdx = function(n){
+					return parseInt(n.getAttribute('visualindex'), 10);
+				},
+				calcPos = function(node){
+					var n = node, first = n, last = n;
+					if(isSelected(n)){
+						var prenode = n.previousSibling;
+						while(prenode && isSelected(prenode)){
+							n = prenode;
+							prenode = prenode.previousSibling;
+						}
+						first = n;
+						n = node;
+						var nextnode = n.nextSibling;
+						while(nextnode && isSelected(nextnode)){
+							n = nextnode;
+							nextnode = nextnode.nextSibling;
+						}
+						last = n;
+					}
+					if(first && last){
+						var firstPos = domGeometry.position(first),
+							lastPos = domGeometry.position(last),
+							middle = (firstPos.y + lastPos.y + lastPos.h) / 2;
+						if(evt.clientY < middle){
+							t._target = getVIdx(first);
+							ret.top = (firstPos.y - containerPos.y) + "px";
+						}else{
+							t._target = getVIdx(last) + 1;
+							ret.top = (lastPos.y + lastPos.h - containerPos.y) + "px";
+						}
+					}else{
+						delete t._target;
+					}
+					return ret;
+				};
+			if(!has('ff')){
+				//In FF, this conflicts with the overflow:hidden css rule for grid row DIV, which is required by ColumnLock.
+				while(node){
+					if(domClass.contains(node, 'gridxRow')){
+						return calcPos(node);
+					}
+					node = node.parentNode;
+				}
+			}
+			var bn = t.grid.bodyNode,
+				nodes = bn.childNodes;
+			if(!nodes.length){
+				ret.top = '0px';
+				t._target = 0;
+			}else{
+				node = bn.firstChild;
+				var idx = getVIdx(node),
+					pos = domGeometry.position(node);
+				if(idx === 0 && evt.clientY <= pos.y + pos.h){
+					ret.top = (pos.y - containerPos.y) + 'px';
+					t._target = 0;
+				}else{
+					node = bn.lastChild;
+					idx = getVIdx(node);
+					pos = domGeometry.position(node);
+					if(idx === view.visualCount - 1 && evt.clientY > pos.y + pos.h){
+						ret.top = (pos.y + pos.h - containerPos.y) + 'px';
+						t._target = view.visualCount;
+					}else{
+						var rowFound = array.some(nodes, function(rowNode){
+							pos = domGeometry.position(rowNode);
+							if(pos.y <= evt.clientY && pos.y + pos.h >= evt.clientY){
+								node = rowNode;
+								return true;
+							}
+						});
+						return rowFound ? calcPos(node) : null;
+					}
+				}
+			}
+			return ret;
+		},
+
+		_onDropInternal: function(nodes, copy){
+			var t = this, g = t.grid;
+			if(t._target >= 0){
+				t.model.when({id: t._selectedRowIds}, function(){
+					var indexes = array.map(t._selectedRowIds, function(rowId){
+						return t.model.idToIndex(rowId);
+					});
+					g.move.row.move(indexes, g.view.getRowInfo({
+						visualIndex: t._target
+					}).rowIndex);
+				});
+			}
+		},
+
+		_onDropExternal: function(source, nodes, copy){
+			var d = new Deferred(),
+				success = hitch(d, d.callback),
+				fail = hitch(d, d.errback),
+				g = this.grid,
+				target = this._target,
+				targetRow, preRow,
+				sourceData = getSourceData(source, nodes);
+			g.model.when([target - 1, target], function(){
+				targetRow = g.model.byIndex(target);
+				preRow = g.model.byIndex(target - 1);
+			}).then(function(){
+				//Inserting and deleting (and other operations that changes store) are better to happen outside 
+				//"model.when", because during "when", it is not allowed to clear cache.
+				Deferred.when(sourceData, function(dataArr){
+					if(dataArr && dataArr.length){
+						var inserted = g.model.insert(dataArr, preRow && preRow.item, targetRow && targetRow.item);
+						Deferred.when(inserted, success, fail);
+					}
+				}, fail);
+			}, fail);
+			return d;
+		}
+	});
+});

data/app/assets/javascripts/gridx/modules/dnd/_Base.js

@@ -0,0 +1,60 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/array",
+	"dojo/_base/lang",
+	"../../core/_Module",
+	"./Avatar",
+	"./_Dnd"
+], function(declare, array, lang, _Module, Avatar){
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		Base class for dnd modules.
+
+		// delay: Number
+		//		The time delay before starting dnd after mouse down.
+		delay: 2,
+	
+		// enabled: Boolean
+		//		Whether this module is enabled.
+		enabled: true,
+
+		// canRearrange: Boolean
+		//		Whether rearrange within grid using dnd is allowed.
+		canRearrange: true,
+
+		// copyWhenDragOut: Boolean|Object
+		//		When dragging out, whehter to delete in this grid.
+		//		If it is a boolean value, it is effective for all targets.
+		//		If it is an associative array, it can be set on different drag targets.
+		//		(key is an "accept" string of the dnd target).
+		copyWhenDragOut: false,
+
+		// avatar: function
+		//		The avatar constructor used during dnd.
+		avatar: null
+	});
+=====*/
+
+	return declare(_Module, {
+		delay: 2,
+		enabled: true,
+		canRearrange: true,
+		copyWhenDragOut: false,
+		avatar: Avatar,
+
+		preload: function(args){
+			var dnd = this.grid.dnd._dnd;
+			dnd.register(this.name, this);
+			dnd.avatar = this.arg('avatar');
+		},
+
+		checkArg: function(name, arr){
+			var arg = this.arg(name);
+			return (arg && lang.isObject(arg)) ? array.some(arr, function(v){
+				return arg[v];
+			}) : arg;
+		}
+	});
+});