gridx-rails 1.1.0

data/app/assets/javascripts/gridx/support/exporter/toTable.js

@@ -0,0 +1,92 @@
+define([
+/*====="dojo/_base/declare", =====*/
+	"./exporter"
+], function(/*=====declare, =====*/exporter){
+
+/*=====
+	function toTable(grid, args){
+		// summary:
+		//		Export the grid contents to HTML table according to the given args.
+		// args: __TableExportArgs?
+		//		The args to configure the export result and the export process.
+		// returns:
+		//		A deferred object indicating when the export process is completed,
+		//		and then pass the exported HTML table (as string) to callbacks.
+	}
+
+	toTable.__TableExportArgs = declare(exporter.__ExportArgs, {
+		// natualWidth: Boolean
+		natualWidth: false,
+
+		// columnWidth: Object
+		columnWidth: {}
+	});
+
+	return toTable;
+=====*/
+
+	function toTable(grid, args){
+		return exporter(grid, toTable.writer, args || {});	//dojo.Deferred
+	}
+
+	toTable.writer = {
+		_cellattrs: function(grid, args, col, cellContent){
+			var cw = args.columnWidth,
+				w = (cw && cw[col.id]) || (args.natualWidth ? '' : col.getWidth()) || 'auto',
+				dir = grid.getTextDirStyle(col.id, cellContent);
+			return [' colid="', col.id, '" style="', dir, ' width:', w, '"'].join('');
+		},	
+
+		initialize: function(context, /* __TableExportArgs */ args){
+			this._rst = ['<table class="grid"',
+				args.natualWidth ? '' : ' style="table-layout:fixed;"',
+				' border="0" cellpadding="0" cellspacing="0">'
+			];
+		},
+
+		beforeHeader: function(){
+			this._rst.push('<thead><tr class="grid_header">');
+		},
+
+		handleHeaderCell: function(/* __ExportContext */ context, /* __TableExportArgs */ args){
+			var col = context.column;
+			this._rst.push('<th class="grid_header_cell"',
+				this._cellattrs(col.grid, args, col, col.name()),
+				'>', col.name(), '</th>');
+		},
+
+		afterHeader: function(){
+			this._rst.push('</tr><thead>');
+		},
+
+		beforeBody: function(){
+			this._rst.push('<tbody>');
+		},
+
+		beforeRow: function(/* __ExportContext */ context){
+			var r = context.row, idx = r.index();
+			this._rst.push('<tr class="grid_row grid_row_', idx % 2 ? 'even' : 'odd',
+				'" rowid="', r.id, '" rowindex="', idx, '">');
+		},
+
+		handleCell: function(/* __ExportContext */ context, /* __TableExportArgs */ args){
+			this._rst.push('<td class="grid_cell"',
+				this._cellattrs(context.grid, args, context.column, context.data),
+				'>', context.data, '</td>');
+		},
+
+		afterRow: function(){
+			this._rst.push('</tr>');
+		},
+
+		afterBody: function(){
+			this._rst.push('</tbody></table>');
+		},
+
+		getResult: function(){
+			return this._rst.join('');
+		}
+	};
+
+	return toTable;
+});

data/app/assets/javascripts/gridx/support/menu/AZFilterMenu.js

@@ -0,0 +1,57 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/array",
+	"./_FilterMenuBase",
+	"dijit/CheckedMenuItem"
+], function(declare, array, _FilterMenuBase, CheckedMenuItem){
+
+/*=====
+	return declare(_FilterMenuBase, {
+		// summary:
+		//		This is a sample implementation for the alphabetic filter, default
+		//		to ['A-F', 'G-L', 'M-R', 'S-Z'].
+		
+		// alphabeticRanges: String[]
+		//		The ranges of alphabetic filter.
+		alphabeticRanges: ['A-F', 'G-L', 'M-R', 'S-Z']
+	});
+=====*/
+
+	return declare(_FilterMenuBase, {
+		
+		alphabeticRanges: ['A-F', 'G-L', 'M-R', 'S-Z'],
+
+		_createMenuItems: function(){
+			var t = this,
+				arr = t.alphabeticRanges;
+			array.forEach(arr, function(item){
+				t.addChild(new CheckedMenuItem({
+					label: item,
+					onChange: function(){
+						t._addRule();
+					}
+				}));
+			});
+		},
+
+		_addRule: function(){
+			var t = this,
+				key = 'azfilter',
+				reg = '';
+			array.forEach(t.getChildren(), function(mi){
+				if(mi.get('checked')){
+					reg += mi.get('label');
+				}
+			});
+			if(reg){
+				reg = new RegExp('^[' + reg + ']', 'i');
+				t._addFilter(key, function(row){
+					return reg.test(String(row.data[t.colId]));
+				});
+			}else{
+				//If reg is empty string, remove this filter
+				t._removeFilter(key);
+			}
+		}
+	});
+});

data/app/assets/javascripts/gridx/support/menu/NumberFilterMenu.js

@@ -0,0 +1,87 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/array",
+	"./_FilterMenuBase",
+	"dijit/CheckedMenuItem"
+], function(declare, array, _FilterMenuBase, CheckedMenuItem){
+
+/*=====
+	return declare(_FilterMenuBase, {
+		// summary:
+		//		This is a number range adaptive filter sample.
+
+		// numbers: Integer[]
+		//		The number ranges for the adaptive filter.
+		// example:
+		//		numbers: [-Infinity, 10, 50, 100] will show the adaptive filter: '< 10', '10 - 50', '50 - 100'
+		numbers: []
+	});
+=====*/
+
+	return declare(_FilterMenuBase, {	
+		numbers: [],
+
+		_createMenuItems: function(){
+			var t = this,
+				numbers = t.numbers,
+				arr = [],
+				n = numbers.shift();
+			while(numbers.length){
+				if(n === -Infinity){
+					n = numbers.shift();
+					arr.push('< ' + n);
+				}else{
+					var s;
+					if(numbers[0] === Infinity){
+						s = '> ' + n;
+						numbers.length = 0;
+					}else{
+						s = n + ' - ';
+						n = numbers.shift();
+						s += n;
+					}
+					arr.push(s);
+				}
+			}
+
+			array.forEach(arr, function(item){
+				t.addChild(new CheckedMenuItem({
+					label: item,
+					onChange: function(){
+						t._addRule();
+					}
+				}));
+			});
+		},
+
+		_addRule: function(){
+			var colId = this.colId,
+				key = 'numberfilter',
+				exp = '1>1';
+			array.forEach(this.getChildren(), function(mi){
+				if(mi.get('checked')){
+					var label = mi.get('label');
+					if(/\</.test(label)){
+						exp += '|| value ' + label;
+					}else if(/\>/.test(label)){
+						exp += '|| value' + label;
+					}else{
+						var arr = label.split(' ');
+						var low = arr[0], high = arr[2];
+						exp += '|| (value >=' + low + ' && value <=' + high + ')';
+					}
+				}
+			});
+			
+			if(exp != '1>1'){
+				eval('var checker = function(value){return ' + exp + ';};');
+				this._addFilter(key, function(row){
+
+					return checker(parseFloat(row.data[colId], 10));
+				});
+			}else{
+				this._removeFilter(key);
+			}
+		}
+	});
+});

data/app/assets/javascripts/gridx/support/menu/_FilterMenuBase.js

@@ -0,0 +1,83 @@
+define([
+	"dojo/_base/declare",
+	"dijit/Menu",
+	"../../modules/Filter"
+], function(declare, Menu, Filter){
+
+/*=====
+	return declare(Menu, {
+		// summary
+		//		This menu base is used for adaptive filter.
+
+		// grid: [const] gridx.Grid
+		//		The grid widget this plugin works for.
+		grid: null,
+		
+		// colId: Integer|String
+		// 		The column id the menu attached to.
+		colId: null,
+		
+		// leftClickToOpen: Boolean
+		//		Whether left or right mouse click to open the menu.
+		leftClickToOpen: true,
+
+		bindGrid: function(grid, col){
+			// summary:
+			//		When the menu is created, bind the grid to the menu. So that menu logic
+			//		could do the filter for the grid.
+		},
+
+	});
+=====*/
+
+	return declare(Menu, {
+		// summary:
+		//		
+
+		// grid: gridx/Grid
+		//		
+		grid: null,
+
+		// colId: String
+		//		
+		colId: null,
+
+		leftClickToOpen: true,
+
+		postCreate: function(){
+			this.inherited(arguments);
+			this._createMenuItems();
+		},
+
+		bindGrid: function(grid, col){
+			//summary:
+			//	Attach the menu with grid, so that it could do filter actions
+			this.grid = grid;
+			this.colId = col.id;
+			grid.filter._rules = grid.filter._rules || {};
+		},
+
+		_addFilter: function(key, rule){
+			this.grid.filter._rules[key] = rule;
+			this._doFilter();
+		},
+
+		_removeFilter: function(key){
+			delete this.grid.filter._rules[key];
+			this._doFilter();
+		},
+
+		_doFilter: function(){
+			var filter = this.grid.filter,
+				rules = filter._rules;
+			filter.setFilter(function(row){
+				for(var key in rules){
+					if(!rules[key](row)){
+						return 0;
+					}
+				}
+				return 1;
+			});
+		}
+	});
+});

data/app/assets/javascripts/gridx/support/printer.js

@@ -0,0 +1,157 @@
+define([
+/*====="./exporter/exporter",=====*/
+	"./exporter/toTable",
+	"dojo/_base/declare",
+	"dojo/_base/lang",
+	"dojo/_base/Deferred",
+	"dojo/_base/xhr",
+	"dojo/_base/sniff",
+	"dojo/_base/window"
+], function(/*=====exporter, =====*/exportToTable, declare, lang, Deferred, xhr, has, win){
+
+/*=====
+	function printer(grid, args){
+		// summary:
+		//		Print grid contents.
+		// args: __PrinterArgs
+		//		Print args
+		// returns:
+		//		A deferred object indicating when the export process is completed.
+	}
+
+	printer.toHTML = function(grid, args){
+		// summary
+		//		Export to printable html, used for preview
+		// args: __PrinterArgs
+		//		Print args
+		// returns:
+		//		A deferred object indicating when the export process is completed.
+	};
+
+	printer.__PrinterArgs = declare(exporter.__ExporterArgs, {
+		// style: String
+		//		The CSS string for the printed document
+		style: '',
+
+		// styleSrc: URL String
+		//		The CSS file url used for the printed document
+		styleSrc: '',
+
+		// title: String
+		//		The content of the <title> element in the <head> of the printed document
+		title: '',
+
+		// description: String
+		//		Any HTML content that will be put before the grid in the printed document.
+		description: '',
+
+		// customHead: String
+		//		Any HTML <head> content that will be put in the <head> of the printed document.
+		customHead: ''
+	});
+
+	return printer;
+=====*/
+
+	var printFrame,
+		hitch = lang.hitch;
+
+	function loadStyleFiles(src){
+		var d = new Deferred(),
+			loaded = hitch(d, d.callback);
+		if(src){
+			xhr.get({
+				url: src
+			}).then(loaded, function(){
+				console.warn('Failed to load resource: ', src);
+				loaded('');
+			});
+		}else{
+			loaded('');
+		}
+		return d;
+	}
+
+	function _print(str){
+		var w, fillDoc = function(w){
+			var doc = w.document;
+			doc.open();
+			doc.write(str);
+			doc.close();
+		};
+		if(!window.print){
+			console.warn('Print function is not available');
+			return;
+		}else if(has('chrome') || has('opera')){
+			//referred from dijit._editor.plugins.Print._print()
+			//In opera and chrome the iframe.contentWindow.print
+			//will also print the outside window. So we must create a
+			//stand-alone new window.
+			w = window.open("javascript:''", "",
+				"status=0,menubar=0,location=0,toolbar=0,width=1,height=1,resizable=0,scrollbars=0");
+			fillDoc(w);
+			w.print();
+			//Opera will stop at this point, showing the popping-out window.
+			//If the user closes the window, the following codes will not execute.
+			//If the user returns focus to the main window, the print function
+			// is executed, but still a no-op.
+			w.close();
+		}else{
+			if(!printFrame){
+				//create an iframe to store the grid data.
+				printFrame = win.doc.createElement('iframe');
+				printFrame.frameBorder = 0;
+				var s = printFrame.style;
+				s.position = 'absolute';
+				s.width = s.height = '1px';
+				s.right = s.bottom = 0;
+				s.border = 'none';
+				s.overflow = 'hidden';
+				if(!has('ie')){
+					s.visibility = 'hidden';
+				}
+				win.body().appendChild(printFrame);
+			}
+			w = printFrame.contentWindow;
+			fillDoc(w);
+			//IE requires the frame to be focused for print to work, and it's harmless for FF.
+			w.focus();
+			w.print();
+		}
+	}
+
+	function wrap(grid, args, styleSrc, bodyContent){
+		return [
+			'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html ',
+				grid.isLeftToRight() ? '' : 'dir="rtl"',
+			'><head><title>',
+				args.title || '',
+			'</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta><style type="text/css">',
+				styleSrc,
+			'</style><style type="text/css">',
+				args.style || '',
+			'</style>',
+				args.customHead || '',
+			'</head><body>', 
+				args.description || '', 
+				bodyContent,
+			'</body></html>'
+		].join('');
+	}
+
+	function printer(grid, args){
+		return printer.toHTML(grid, args).then(_print);
+	}
+
+	printer.toHTML = function(grid, args){
+		var d = new Deferred();
+		loadStyleFiles(args.styleSrc).then(function(styleSrc){
+			exportToTable(grid, args).then(function(str){
+				d.callback(wrap(grid, args, styleSrc, str));
+			}, hitch(d, d.errback), hitch(d, d.progress));
+		});
+		return d;
+	};
+
+	return printer;
+});

data/app/assets/javascripts/gridx/templates/FilterBar.html

@@ -0,0 +1,8 @@
+<input type="button" data-dojo-type="dijit.form.Button" data-dojo-props="
+	iconClass: 'gridxFilterBarBtnIcon',
+	label: '...',
+	title: '${defineFilter}'" aria-label='${defineFilter}'
+/><div class="gridxFilterBarStatus"
+	><span>${noFilterApplied}</span
+	><span class="gridxFilterBarCloseBtn" tabindex="-1" title="${closeFilterBarBtn}"><span class="gridxFilterBarCloseBtnText">x</span></span
+></div>

data/app/assets/javascripts/gridx/templates/FilterConfirmDialog.html

@@ -0,0 +1,5 @@
+<div class="gridxFilterConfirmDialogMessage">${clearFilterMsg}</div
+><div class="gridxFilterConfirmDialogButtons"
+	><input type="button" data-dojo-type="dijit.form.Button" label="${clearButton}"
+	/><input type="button" data-dojo-type="dijit.form.Button" label="${cancelButton}"
+/></div>

data/app/assets/javascripts/gridx/templates/FilterDialog.html

@@ -0,0 +1,19 @@
+<form action="./" onsubmit="return false;">
+<label id="${id}_MatchOptionLabel" for="${id}_MatchOptionSelect">${i18n.relationMsgFront} </label>
+<select data-dojo-type="dijit.form.Select" id="${id}_MatchOptionSelect" aria-labelledby="${id}_MatchOptionLabel">
+	<option value="all">${i18n.relationAll}</option>
+	<option value="any">${i18n.relationAny}</option>
+</select>
+
+<div class="gridxFilterAccordionWrapper">
+	<div data-dojo-type="dijit.layout.AccordionContainer"></div>
+</div>
+
+<div class="gridxFilterDialogButtons">
+	<input type="button" class="gridxFilterDialogBtnAdd" data-dojo-type="dijit.form.Button" 
+		   showLabel="false" iconClass="gridxFilterBtnAddRule" label="${i18n.addRuleButton}"/>
+	<input type="submit" data-dojo-type="dijit.form.Button" label="${i18n.filterButton}"/>
+	<input type="button" data-dojo-type="dijit.form.Button" label="${i18n.clearButton}"/>
+	<input type="button" data-dojo-type="dijit.form.Button" label="${i18n.cancelButton}"/>
+</div>
+</form>

data/app/assets/javascripts/gridx/templates/FilterPane.html

@@ -0,0 +1,64 @@
+<ul class="gridxFilterPaneForm">
+	<li><label id="${id}_ColumnLabel" for="${id}_ColumnSelect">${i18n.columnSelectLabel}</label></li>
+	<li name="sltColumn">
+		<div data-dojo-type="dijit.form.Select" id="${id}_ColumnSelect" aria-labelledby="${id}_ColumnLabel" style="width:100%;"></div>
+	</li>
+	<li><label id="${id}_ConditionLabel" for="${id}_ConditionSelect">${i18n.conditionSelectLabel}</label></li>
+	<li name="sltCondition">
+		<div data-dojo-type="dijit.form.Select" id="${id}_ConditionSelect" style="width:100%;" aria-labelledby="${id}_ConditionLabel"></div>
+	</li>
+	<li><label id="${id}_ValueLabel">${i18n.valueBoxLabel}</label></li>
+	
+	<li class="gridxFilterPaneFieldWrapper gridxFilterPaneTextWrapper">
+		<input type="text" data-dojo-type="dijit.form.TextBox" intermediateChanges="true"
+		 style="width:100%;" aria-labelledby="${id}_ValueLabel"/>
+	</li>
+	
+<!--            dropDownClass="gridx.modules.filter.DistinctComboBoxMenu"-->
+	<li class="gridxFilterPaneFieldWrapper gridxFilterPaneComboWrapper">
+		<input type="text" data-dojo-type="dijit.form.ComboBox" 
+			intermediateChanges="true" autoComplete="false" queryExpr="*${i18n.startsWithExpr}" 
+			style="width:100%;"  aria-labelledby="${id}_ValueLabel"/>
+	</li>
+	
+	<li class="gridxFilterPaneFieldWrapper gridxFilterPaneNumberWrapper">
+		<input type="text" data-dojo-type="dijit.form.NumberTextBox"  aria-labelledby="${id}_ValueLabel" intermediateChanges="true" style="width:100%;"/>
+	</li>
+	
+	<li class="gridxFilterPaneFieldWrapper gridxFilterPaneDateWrapper">
+		<div data-dojo-type="dijit.form.DateTextBox" aria-labelledby="${id}_ValueLabel" intermediateChanges="true" style="width: 100%"></div>
+	</li>
+	
+	<li class="gridxFilterPaneFieldWrapper gridxFilterPaneDateRangeWrapper">
+		<div data-dojo-type="dijit.form.DateTextBox" style="width:44%; float: left;" intermediateChanges="true"
+			 aria-label="${i18n.beginDateRangeLabel}"></div>
+		<div style="width:10%; text-align: center; float: left;">${i18n.rangeTo}</div>
+		<div data-dojo-type="dijit.form.DateTextBox" style="width:44%; float: right;" intermediateChanges="true"
+			 aria-label="${i18n.endDateRangeLabel}"></div>
+	</li>
+	
+	<li class="gridxFilterPaneFieldWrapper gridxFilterPaneTimeWrapper">
+		<div data-dojo-type="dijit.form.TimeTextBox" aria-labelledby="${id}_ValueLabel" style="width: 100%" intermediateChanges="true"></div>
+	</li>
+	
+	<li class="gridxFilterPaneFieldWrapper gridxFilterPaneTimeRangeWrapper">
+		<div data-dojo-type="dijit.form.TimeTextBox" style="width:44%; float: left;" intermediateChanges="true"
+			 aria-label="${i18n.beginTimeRangeLabel}"></div>
+		<div style="text-align: center; float: left; width: 10%;">${i18n.rangeTo}</div>
+		<div data-dojo-type="dijit.form.TimeTextBox" style="width:44%; float: right;" intermediateChanges="true"
+			 aria-label="${i18n.endTimeRangeLabel}"></div>
+	</li>
+	
+	<li class="gridxFilterPaneFieldWrapper gridxFilterPaneRadioWrapper">
+		<span style="width:49%; float:left;">
+			<div data-dojo-type="dijit.form.RadioButton" aria-label="${i18n.radioTrueLabel}" checked="true"></div><span>${i18n.trueLabel}</span>
+		</span>
+		<span style="width:49%; float: right;">
+			<div data-dojo-type="dijit.form.RadioButton" aria-label="${i18n.radioFalseLabel}"></div><span>${i18n.falseLabel}</span>
+		</span>
+	</li>
+	
+	<li class="gridxFilterPaneFieldWrapper gridxFilterPaneSelectWrapper">
+		<div data-dojo-type="dijit.form.Select" aria-labelledby="${id}_ValueLabel" style="width: 100%"></div>
+	</li>
+</ul>

data/app/assets/javascripts/gridx/templates/GotoPagePane.html

@@ -0,0 +1,28 @@
+<div class='gridxGotoPage'
+	><table><tbody
+		><tr><td id='${id}-pageInputLabel' class='gridxGotoPageMainMsg'>
+		${gotoDialogMainMsg}
+		</td></tr
+		><tr><td class='gridxGotoPageInput'
+			><input data-dojo-type='${numberTextBoxClass}'
+				data-dojo-props='"aria-labelledby": "${id}-pageInputLabel"'
+				class='gridxGotoPageInputBox'
+				data-dojo-attach-point='pageInputBox'
+				data-dojo-attach-event='onKeyUp: _updateStatus, onKeyDown: _onKeyDown'></input
+			><span
+				class='gridxPageCountMsg'
+				data-dojo-attach-point='pageCountMsgNode'></span
+		></td></tr
+		><tr><td class='gridxGotoPageBtns'
+			><button data-dojo-type='${buttonClass}' 
+				data-dojo-attach-point='okBtn'
+				data-dojo-attach-event='onClick: _onOK'>
+				${gotoDialogOKBtn}
+			</button
+			><button data-dojo-type='${buttonClass}'
+				data-dojo-attach-event='onClick: _onCancel'>
+				${gotoDialogCancelBtn}
+			</button
+		></td></tr
+	></tbody></table
+></div>

data/app/assets/javascripts/gridx/templates/Grid.html

@@ -0,0 +1,19 @@
+<div class="gridx" role="grid" tabindex="0" aria-readonly="true" aria-label="grid"
+	><div class="gridxLoad" data-dojo-attach-point="loadingNode"></div
+	><div class="gridxHeader" role="presentation" data-dojo-attach-point="headerNode"></div
+	><div class="gridxMain" role="presentation" data-dojo-attach-point="mainNode"
+		><div class="gridxBodyEmpty" role="alert" tabindex="-1" data-dojo-attach-point="emptyNode"></div
+		><div class="gridxBody" role="presentation" data-dojo-attach-point="bodyNode"></div
+		><div class="gridxVScroller" data-dojo-attach-point="vScrollerNode" tabindex="-1"
+			><div style='width: 1px;'></div
+		></div
+	></div
+	><div class="gridxFooter" data-dojo-attach-point="footerNode"
+		><div class="gridxHScroller"
+			><div class="gridxHScrollerInner" data-dojo-attach-point="hScrollerNode" tabindex="-1"
+				><div style="width:1px; height: 1px;"></div
+			></div
+		></div
+	></div
+	><span data-dojo-attach-point="lastFocusNode" tabindex="0"></span
+></div>

data/app/assets/javascripts/gridx/templates/LinkPager.html

@@ -0,0 +1,24 @@
+<div class="gridxLinkPager" role="toolbar" aria-label="${pagerWai}"
+	><span class='gridxPagerStepperBtn gridxPagerPrevPage'
+		tabindex='${_tabIndex}'
+		title='${prevPageTitle}'
+		aria-label='${prevPageTitle}'
+		pageindex='prev',
+		data-dojo-attach-point='_prevPageBtn'
+		data-dojo-attach-event='onclick: _prevPage'
+		><span class='gridxPagerA11yInner'>&nbsp;&lt;</span
+	></span
+	><span class='gridxPagerPages'
+		data-dojo-attach-point='_pageBtnContainer'
+		data-dojo-attach-event='onclick: _gotoPage, onmouseover: _onHover, onmouseout: _onHover'
+	></span
+	><span class='gridxPagerStepperBtn gridxPagerNextPage'
+		tabindex='${_tabIndex}'
+		title='${nextPageTitle}'
+		aria-label='${nextPageTitle}'
+		pageindex='next',
+		data-dojo-attach-point='_nextPageBtn'
+		data-dojo-attach-event='onclick: _nextPage'
+		><span class='gridxPagerA11yInner'>&nbsp;&gt;</span
+	></span
+></div>