gridx-rails 1.1.0

data/app/assets/javascripts/gridx/modules/ColumnLock.js

@@ -0,0 +1,254 @@
+define([
+	"dojo/dom-style",
+	"dojo/dom-class",
+	"dojo/dom-geometry",
+	"dojo/_base/lang",
+	"../core/_Module",
+	"dojo/_base/declare",
+	"dojo/_base/array",
+	"dojo/_base/window",
+	"dojo/query",
+	"dojo/_base/sniff"
+], function(domStyle, domClass, domGeometry, lang, _Module, declare, array, win, query, has){
+
+/*=====
+	return declare(_Module, {
+		// summary:
+		//		Column lock machinery.
+		// description:
+		//		This module provides a way to lock consecutive leading columns. 
+		//		Columns can be locked in following ways:
+		// example:
+		//		Columns can be locked when Grid is initially rendered.
+		//	|		var grid = new Grid({
+		//	|			columnLockCount: 2
+		//	|			modules: [
+		//	|				"gridx.modules.ColumnLock",
+		//	|				...
+		//	|			],
+		//	|		});
+		//		Lock or unlock columns dynamically
+		//	|		// lock 2 leading columns
+		//	|		grid.columnLock.lock(2)
+		//	|		// unlock all columns
+		//	|		grid.columnLock.unLock();
+
+		// count: [readonly] Integer
+		//		Number of columns that will be locked by default
+		count: 0,
+
+		lock: function(count){
+			// summary:
+			//		Dynamically lock consecutive #count leading columns.
+		},
+
+		unlock: function(){
+			// summary:
+			//		Unlock all columns.
+		}
+	});
+=====*/
+
+	return declare(_Module, {
+		name: 'columnLock',
+		
+		required: ['body'],
+		
+		count: 0,
+		
+		load: function(args, deferStartup){
+			this.count = this.arg('count');
+			var _this = this, g = this.grid, body = win.body();
+			deferStartup.then(function(){
+				if(!g.columnWidth || !g.columnWidth.arg('autoResize')){
+					_this.connect(g.body, 'onAfterRow', function(row){
+						_this._lockColumns(row.node());
+					});
+					
+					_this.connect(g.header, 'onRender', '_updateHeader');
+					_this.connect(g.columnWidth, 'onUpdate', '_updateHeader');
+					_this.connect(g, 'resize', '_updateUI');
+					if(g.columnResizer){
+						//make it compatible with column resizer
+						_this.connect(g.columnResizer, 'onResize', '_updateHeader');
+						_this.connect(g.columnResizer, 'onResize', '_updateBody');
+					}
+					if(g.header){
+						g.header.loaded.then(function(){
+							_this._updateHeader();
+						});
+						if(g.move && g.move.column){
+							_this.connect(g.move.column, 'move', '_updateHeader');
+						}
+					}
+					_this._hackHScroller();
+					if(_this.count){
+						_this.lock(_this.count);
+					}
+				}
+				_this.loaded.callback();
+			});
+		},
+		
+		lock: function(/*Integer*/count){
+			if(this.grid.columnWidth && this.grid.columnWidth.arg('autoResize'))return;
+			if(count >= this.grid._columns.length){
+				this.count = 0;
+				console.warn('Warning: lock count is larger than columns count, do nothing.');
+				return;
+			}
+			this.unlock();
+			
+			if(count){
+				domClass.add(this.grid.domNode, 'gridxColumnLock');
+			}
+			
+			this.count = count;
+			this._updateUI();
+		},
+		
+		unlock: function(){
+			if(this.grid.columnWidth && this.grid.columnWidth.arg('autoResize'))return;
+			domClass.remove(this.grid.domNode, 'gridxColumnLock');
+			
+			var rowNode = query('.gridxHeaderRowInner', this.grid.headerNode)[0];
+			this._unlockColumns(rowNode);
+			
+			array.forEach(this.grid.bodyNode.childNodes, this._unlockColumns, this);
+			
+			this.count = 0;
+			this._updateUI();
+		},
+		
+		_unlockColumns: function(rowNode){
+			var ltr = this.grid.isLeftToRight();
+			var r = rowNode.firstChild.rows[0];
+			for(var i = 0; i < this.count; i++){
+				var cell = r.cells[i];
+				domClass.remove(cell, 'gridxLockedCell');
+				domStyle.set(cell, {height: 'auto'});
+			}
+			rowNode.style[ltr ? 'paddingLeft' : 'paddingRight'] = '0px';
+			rowNode.style.width = 'auto';
+		},
+		
+		_updateUI: function(){
+			if(this.grid.header){
+				this._updateHeader();
+			}
+			this._updateBody();
+			this._updateScroller();
+			this.grid.hScroller && this.grid.hScroller._doScroll();
+			this.grid.header.onRender();
+		},
+		_lockColumns: function(rowNode){
+			// summary:
+			//	Lock columns for one row
+			if(!this.count || this.count >= this.grid._columns.length){
+				this.count = 0;
+				return;
+			}
+			
+			var isHeader = domClass.contains(rowNode, 'gridxHeaderRowInner');
+			var ltr = this.grid.isLeftToRight();
+			var r = rowNode.firstChild.rows[0], i;
+			for(i = 0; i < this.count; i++){
+				domStyle.set(r.cells[i], 'height', 'auto');
+			}
+			
+			var h1 = domGeometry.getContentBox(r.cells[r.cells.length - 1]).h, 
+				h2 = domGeometry.getMarginBox(r.cells[r.cells.length - 1]).h;
+
+			if(has('ie') > 8){		
+				//in IE 9 +, sometimes computed height will contain decimal pixels like 34.4 px, 
+				//so that the locked cells will have different height with the unlocked ones.
+				//plus the height by 1 can force IE to ceil the decimal to integer like from 34.4px to 35px
+				
+				h3 = domStyle.getComputedStyle(rowNode.firstChild).height;
+				if(String(h3).toString().indexOf('.') >= 0){		//decimal
+					h2++;
+					h1++;
+				}
+			}	
+			domStyle.set(rowNode.firstChild, 'height', h2 + 'px');
+			
+			var lead = isHeader ? this.grid.hLayout.lead : 0,
+				pl = lead,
+				cols = this.grid._columns;
+			for(i = 0; i < this.count; i++){
+				var cell = r.cells[i],
+					s;
+				domClass.add(cell, 'gridxLockedCell');
+				// if(has('ie') > 8){
+					// s = {height: h1 + 1 + 'px'};
+				// }else{
+					s = {height: h1 + 'px'};
+				// }
+				s[ltr ? 'left' : 'right'] = pl + 'px';
+				domStyle.set(cell, s);
+				
+				pl += cell.offsetWidth;
+			}
+			rowNode.style[ltr ? 'paddingLeft' : 'paddingRight'] = pl - lead + 'px';
+			rowNode.style.width = this.grid.bodyNode.offsetWidth - pl + lead + 'px';
+			
+			//This is useful for virtual scrolling.
+			rowNode.scrollLeft = this.grid.hScroller ? this.grid.hScroller.domNode.scrollLeft : 0;
+		},
+		
+		_updateHeader: function(){
+			// summary:
+			//	Update the header for column lock
+			var rowNode = this.grid.header.innerNode;
+			var sl = rowNode.scrollLeft;
+			this._lockColumns(rowNode);
+			rowNode.scrollLeft = sl;
+			this._updateScroller();//used for column dnd to sync hscroller.
+		},
+		
+		_updateBody: function(){
+			// summary:
+			//	Update the body for column lock
+			array.forEach(this.grid.bodyNode.childNodes, this._lockColumns, this);
+		},
+		
+		_updateScroller: function(){
+			// summary:
+			//	Update h-scroller for column lock
+			if(this.grid.hScroller){this.grid.hScroller.refresh();}
+		},
+		
+		_hackHScroller: function(){
+			// summary:
+			//	This method changes behavior of hscroller. It will scroll each row instead of the body node
+			//	while some columns are locked.
+			var _this = this;
+			lang.mixin(this.grid.hScroller, {
+				_doScroll: function(){
+					// summary:
+					//	Sync the grid body with the scroller.
+					
+					var scrollLeft = this.domNode.scrollLeft;
+					if(_this.count){
+						array.forEach(this.grid.bodyNode.childNodes, function(rowNode){
+							rowNode.scrollLeft = scrollLeft;
+							//to be compatible with row lock
+							if(rowNode.style.position == 'absolute'){
+								var l = 0;
+								array.forEach(rowNode.firstChild.rows[0].cells, function(cell){
+									if(domClass.contains(cell, 'gridxLockedCell')){
+										cell.style.left = scrollLeft + l + 'px';
+										l += cell.offsetWidth;
+									}
+								});
+							}
+						});
+					}else{
+						this.grid.bodyNode.scrollLeft = scrollLeft;
+					}
+					this.grid.onHScroll(this.grid.hScroller._lastLeft);
+				}
+			});
+		}
+	});
+});

data/app/assets/javascripts/gridx/modules/ColumnResizer.js

@@ -0,0 +1,278 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/window",
+	"dojo/_base/event",
+	"dojo/dom",
+	"dojo/dom-style",
+	"dojo/dom-class",
+	"dojo/dom-construct",
+	"dojo/dom-geometry",
+	"dojo/keys",
+	"dojo/query",
+	'dojo/sniff',
+	"../core/_Module"
+//    "dojo/NodeList-traverse"
+], function(declare, win, event, dom, domStyle, domClass, domConstruct, domGeometry, keys, query, sniff,  _Module){
+
+/*=====
+	Column.setWidth = function(width){
+		// summary:
+		//		Set width of the target column
+	};
+
+	return declare(_Module, {
+		// summary:
+		//		Column Resizer machinery.
+		// description:
+		//		This module provides a way to resize column width. 
+		
+		// minWidth: Integer
+		//		min column width in px
+		minWidth: 20,
+
+		detectWidth: 5,
+
+		step: 2,
+
+		setWidth: function(olId, width){
+			// summary:
+			//		Set width of the target column
+		},
+
+		onResize: function(colId, newWidth, oldWidth){
+		}
+	});
+=====*/
+
+	return declare(_Module, {
+		name: 'columnResizer',
+
+		load: function(){
+			var t = this,
+				g = t.grid;
+			t.batchConnect(
+				[g.header.domNode, 'onmousemove', '_mousemove'],
+				[g, 'onHeaderMouseOut', '_mouseout'],
+				[g, 'onHeaderMouseDown', '_mousedown', t, t.name],
+				[g, 'onHeaderKeyDown', '_keydown'],
+				[win.doc, 'onmousemove', '_updateResizer'],
+				[win.doc, 'onmouseup', '_mouseup']);
+			t.loaded.callback();
+		},
+
+		columnMixin: {
+			setWidth: function(width){
+				this.grid.columnResizer.setWidth(this.id, width);
+			}
+		},
+
+		//Public---------------------------------------------------------------------
+		minWidth: 20,
+
+		detectWidth: 5,
+
+		step: 2,
+
+		setWidth: function(colId, width){
+			var t = this,
+				g = t.grid,
+				col = g._columnsById[colId];
+			if(col){
+				var headerNode = g.header.getHeaderNode(colId),
+					headerNodeStyle = headerNode.style,
+					oldWidth = domStyle.get(headerNode, 'width'),
+					minWidth = t.arg('minWidth'),
+					cols = g._columns;
+
+				width = parseInt(width, 10);
+				if(width < minWidth){
+					width = minWidth;
+				}
+				headerNodeStyle.width = width + 'px';
+				headerNodeStyle.minWidth = width + 'px';
+				headerNodeStyle.maxWidth = width + 'px';
+				width = headerNode.clientWidth;
+				//set again in case actual effect is different from what we expect.
+				headerNodeStyle.width = width + 'px';
+				headerNodeStyle.minWidth = width + 'px';
+				headerNodeStyle.maxWidth = width + 'px';
+				//Use actual width as our new column width
+				col.width = width + 'px';
+				for(var i = 0, len = cols.length; i < len; ++i){
+					cols[i].declaredWidth = cols[i].width;
+				}
+				query('[colid="' + g._escapeId(colId) + '"]', g.bodyNode).forEach(function(cell){
+					var cs = cell.style;
+					cs.width = width + 'px';
+					cs.minWidth = width + 'px';
+					cs.maxWidth = width + 'px';
+				});
+				g.body.onRender();
+				g.vLayout.reLayout();
+				if(g.autoWidth){
+					g.hLayout.reLayout();
+				}
+				t.onResize(colId, width, oldWidth);
+			}
+		},
+
+		//Event--------------------------------------------------------------
+		onResize: function(/* colId, newWidth, oldWidth */){},
+
+		//Private-----------------------------------------------------------
+		_mousemove: function(e){
+			var t = this;
+			if(!t._resizing && !t._ismousedown){
+				var detectWidth = t.arg('detectWidth'),
+					g = t.grid,
+					ltr = g.isLeftToRight(),
+					body = win.body(),
+					flags = g._eventFlags;
+				if(!query('.gridxCell', g.header.innerNode).some(function(cellNode){
+					var pos = domGeometry.position(cellNode),
+						x = ltr ? pos.x + pos.w : pos.x,
+						col = g._columnsById[cellNode.getAttribute('colid')];
+					//check if in resize range
+					if(x - detectWidth <= e.clientX && x + detectWidth >= e.clientX){
+						var n = query(e._target || e.target).closest('td', g.header.innerNode)[0],
+							npos = n && domGeometry.position(n);
+						if(n && (e.clientX <= npos.x + detectWidth || e.clientX >= npos.x + npos.w - detectWidth)){
+							domClass.add(body, 'gridxColumnResizing');
+							t._targetCell = cellNode;
+							t._cellPos = pos;
+							//Forbid anything else to happen when we are resizing a column!
+							flags.onHeaderMouseDown = t.name;
+							return t._readyToResize = 1;//Intentional assignment
+						}
+					}
+				})){
+					//Not in resize region.
+					flags.onHeaderMouseDown = undefined;
+					domClass.remove(body, 'gridxColumnResizing');
+				}
+				flags.onHeaderCellMouseDown  = flags.onHeaderMouseDown;
+			}
+		},
+
+		_mouseout: function(e){
+			if(!this._resizing){
+				var pos = domGeometry.position(this.grid.header.domNode);
+				if(sniff('chrome')){
+					for(var i in pos){
+						pos[i] = Math.floor(pos[i]);
+					}
+				}
+				
+				if(e.clientY <= pos.y || e.clientY >= pos.y + pos.h ||
+					e.clientX <= pos.x || e.clientX >= pos.x + pos.w){
+					this._readyToResize = 0;
+					domClass.remove(win.body(), 'gridxColumnResizing');
+				}
+			}
+		},
+
+		_mousedown: function(e){
+			var t = this;
+			if(t._readyToResize){
+				//begin resize
+				t._resizing = 1;
+				var g = t.grid,
+					refNode = query('.gridxCell', g.header.innerNode)[0];
+				dom.setSelectable(g.domNode, false);
+				win.doc.onselectstart = function(){
+					return false;
+				};
+				t._containerPos = domGeometry.position(g.domNode);
+				t._headerPos = domGeometry.position(g.header.domNode);
+				t._padBorder = domGeometry.getMarginBox(refNode).w - domGeometry.getContentBox(refNode).w;
+				t._initResizer();
+				t._updateResizer(e);
+				//Only mouse down, not moved yet
+				t._moving = 0;
+			}else{
+				t._ismousedown = 1;
+			}
+		},
+
+		_initResizer: function(){
+			var t = this,
+				g = t.grid,
+				hs = g.hScroller,
+				n = hs && hs.container.offsetHeight ? hs.container : g.bodyNode,
+				headerTop = g.header.domNode.offsetTop,
+				h = n.parentNode.offsetTop + n.offsetHeight - g.header.domNode.offsetTop,
+				resizer = t._resizer;
+			if(!resizer){
+				resizer = t._resizer = domConstruct.create('div', {
+					className: 'gridxColumnResizer'
+				}, g.domNode, 'last');
+				t.connect(resizer, 'mouseup', '_mouseup');
+			}
+			var rs = resizer.style;
+			rs.top = headerTop + 'px';
+			rs.height = h + 'px';
+			rs.display = 'block';
+		},
+
+		_updateResizer: function(e){
+			var t = this;
+			if(t._resizing){
+				var ltr = t.grid.isLeftToRight(),
+					minWidth = t.arg('minWidth') + t._padBorder,
+					pos = t._cellPos,
+					left = e.clientX,
+					limit = ltr ? pos.x + minWidth : pos.x + pos.w - minWidth;
+				if(ltr ? left < limit : left > limit){
+					//Column is narrower than minWidth, the resizer should not move further.
+					left = limit;
+				}
+				t._width = (ltr ? left - pos.x : pos.x + pos.w - left) - t._padBorder;
+				//subtract the width of the border so that the resizer appears at center.
+				t._resizer.style.left = (left - t._containerPos.x - 2) + 'px';
+				//Now mouse is moving.
+				t._moving = 1;
+			}
+		},
+
+		_mouseup: function(e){
+			var t = this;
+			t._ismousedown = 0;
+			if(t._resizing){
+				//end resize
+				t._resizing = t._readyToResize = 0;
+				domClass.remove(win.body(), 'gridxColumnResizing');
+				dom.setSelectable(t.grid.domNode, true);
+				win.doc.onselectstart = null;
+				//Only change width when mouse moved.
+				if(t._moving){
+					t._moving = 0;
+					t.setWidth(t._targetCell.getAttribute('colid'), t._width + 'px');
+				}
+				t._resizer.style.display = 'none';
+				//If mouse is still in header region, should get ready for next resize operation
+				var x = e.clientX,
+					y = e.clientY,
+					headerPos = t._headerPos;
+				if(x >= headerPos.x && x <= headerPos.x + headerPos.w &&
+					y >= headerPos.y && y <= headerPos.y + headerPos.h){
+					e._target = t._targetCell;
+					t._mousemove(e);
+				}
+			}
+		},
+
+		_keydown: function(evt){
+			//support keyboard to resize a column
+			if((evt.keyCode == keys.LEFT_ARROW || evt.keyCode == keys.RIGHT_ARROW) && evt.ctrlKey && evt.shiftKey){
+				var t = this,
+					g = t.grid,
+					colId = evt.columnId,
+					cellNode = query('[colid="' + g._escapeId(colId) + '"].gridxCell', g.header.innerNode)[0],
+					step = t.arg('step');
+				step = evt.keyCode == keys.LEFT_ARROW ^ !!g.isLeftToRight() ? step : -step;
+				t.setWidth(colId, domStyle.get(cellNode, 'width') + step);
+				event.stop(evt);
+			}
+		}
+	});
+});