gridx-rails 1.1.0

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

@@ -0,0 +1,112 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/lang",
+	"dijit/_WidgetBase",
+	"dijit/_FocusMixin",
+	"dijit/_TemplatedMixin",
+	"dojo/i18n",
+	"dijit/form/Select",
+	"dojo/i18n!../nls/PaginationBar"
+], function(declare, lang, _WidgetBase, _FocusMixin, _TemplatedMixin, i18n, Select){
+
+/*=====
+	return declare([_WidgetBase, _FocusMixin, _TemplatedMixin], {
+		// summary:
+		//		This grid bar plugin is to switch page sizes using select widget.
+
+		// grid: [const] gridx.Grid
+		//		The grid widget this plugin works for.
+		grid: null,
+
+		// sizes: Integer[]
+		//		An array of available page sizes. Non-positive number means "all"
+		sizes: [10, 25, 50, 100, 0],
+
+		// sizerClass: Function
+		//		The constructor of the select widget
+		sizerClass: Select,
+
+		// sizerProps: Object
+		//		The properties passed to select widget when creating it.
+		sizerProps: null,
+
+		refresh: function(){}
+	});
+=====*/
+
+	return declare([_WidgetBase, _FocusMixin, _TemplatedMixin], {
+		templateString: '<div class="gridxDropDownSizer"><label class="gridxPagerLabel">${pageSizeLabel}</label></div>',
+
+		constructor: function(args){
+			lang.mixin(this, i18n.getLocalization('gridx', 'PaginationBar', this.lang || args.grid.lang));
+		},
+
+		postCreate: function(){
+			var t = this;
+			t.connect(t.grid.pagination, 'onChangePageSize', '_onChange');
+			t.grid.pagination.loaded.then(function(){
+				t.refresh();
+			});
+		},
+		startup: function(){
+			this.inherited(arguments);
+			//Set initial page size after pagination module is ready.
+			this._onChange(this.grid.pagination.pageSize());
+		},
+
+		//Public-----------------------------------------------------------------------------
+		grid: null,
+
+		sizes: [10, 25, 50, 100, 0],
+
+		sizerClass: Select,
+
+		sizerProps: null,
+
+		refresh: function(){
+			var t = this,
+				options = [],
+				p = t.grid.pagination,
+				currentSize = p.pageSize(),
+				sizeSwitch = t._sizeSwitchSelect,
+				sizes = t.sizes;
+			for(var i = 0, len = sizes.length; i < len; ++i){
+				var pageSize = sizes[i],
+					isAll = !(pageSize > 0);
+				options.push({
+					label: String(isAll ? t.pageSizeAll : pageSize),
+					value: String(isAll ? -1 : pageSize),
+					selected: currentSize == pageSize || (isAll && p.isAll())
+				});
+			}
+			if(!sizeSwitch){
+				var cls = t.sizerClass,
+					props = lang.mixin({
+						options: options,
+						'class': 'gridxPagerSizeSwitchWidget',
+						'aria-label': 'switch page size',
+						onChange: function(ps){
+							p.setPageSize(ps < 0 ? 0 : ps);
+						}
+					}, t.sizerProps || {});
+				sizeSwitch = t._sizeSwitchSelect = new cls(props);
+				sizeSwitch.placeAt(t.domNode, "last");
+				sizeSwitch.startup();
+			}else{
+				sizeSwitch.removeOption(sizeSwitch.getOptions());
+				sizeSwitch.addOption(options);
+			}
+		},
+
+		//Private----------------------------------------------------------------------------
+		_onChange: function(size){
+			var select = this._sizeSwitchSelect;
+			if(this.grid.pagination.isAll()){
+				size = -1;
+			}
+			if(select && select.get('value') != size){
+				select.set('value', size);
+			}
+		}
+	});
+});

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

@@ -0,0 +1,92 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/lang",
+	"dojo/string",
+	"./_LinkPageBase",
+	"./GotoPagePane",
+	"dijit/Dialog",
+	"dijit/form/Button",
+	"dijit/form/NumberTextBox",
+	"dojo/keys",
+	"dojo/_base/event"
+], function(declare, lang, string, _LinkPageBase, GotoPagePane, Dialog, Button, NumberTextBox, keys, event){
+
+/*=====
+	return declare(_LinkPageBase, {
+		gotoPagePane: GotoPagePane,
+
+		// dialogClass: [private]
+		dialogClass: Dialog,
+
+		// buttonClass: [private]
+		buttonClass: Button,
+
+		// numberTextBoxClass: [private]
+		numberTextBoxClass: NumberTextBox,
+
+		refresh: function(){
+			// summary:
+			//		TODOC
+		}
+	});
+=====*/
+
+	return declare(_LinkPageBase, {
+		templateString: "<span class='gridxPagerGotoBtn' tabindex='${_tabIndex}' title='${gotoBtnTitle}' aria-label='${gotoBtnTitle}' data-dojo-attach-event='onclick: _showGotoDialog'><span class='gridxPagerA11yInner'>&#9650;</span></span>",
+
+		gotoPagePane: GotoPagePane,
+
+		dialogClass: Dialog,
+
+		buttonClass: Button,
+
+		numberTextBoxClass: NumberTextBox,
+
+		refresh: function(){},
+
+		//Private-----------------------------------------
+		_showGotoDialog: function(){
+			var t = this;
+			if(!t._gotoDialog){
+				var cls = t.dialogClass,
+					gppane = t.gotoPagePane,
+					props = lang.mixin({
+						title: t.gotoDialogTitle,
+						content: new gppane({
+							pager: t,
+							pagination: t.grid.pagination
+						})
+					}, t.dialogProps || {});
+				var dlg = t._gotoDialog = new cls(props);
+				dlg.content.dialog = dlg;
+			}
+			var pageCount = t.grid.pagination.pageCount(),
+				pane = t._gotoDialog.content;
+			pane.pageCountMsgNode.innerHTML = string.substitute(t.gotoDialogPageCount, [pageCount]);
+			pane.pageInputBox.constraints = {
+				fractional: false, 
+				min: 1,
+				max: pageCount
+			};
+			t._gotoDialog.show();
+		},
+
+		_onKey: function(evt){
+			if(evt.keyCode == keys.ENTER){
+				this._showGotoDialog();
+				event.stop(evt);
+			}
+		},
+
+		_focusNextBtn: function(){
+		},
+		
+		destroy: function(){
+			var t = this;
+			if(t._gotoDialog){
+				t._gotoDialog.destroy();
+			}
+			t.inherited(arguments);
+		}
+	});
+});

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

@@ -0,0 +1,61 @@
+define([
+	"dojo/_base/declare",
+	"dojo/_base/lang",
+	"dojo/_base/event",
+	"dojo/keys",
+	"dijit/_WidgetBase",
+	"dijit/_TemplatedMixin",
+	"dijit/_WidgetsInTemplateMixin",
+	"dojo/text!../templates/GotoPagePane.html",
+	"dojo/i18n",
+	"dojo/i18n!../nls/PaginationBar"
+], function(declare, lang, event, keys, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, goToTemplate, i18n){
+
+/*=====
+	return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
+	});
+=====*/
+
+	return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
+		templateString: goToTemplate,
+	
+		pager: null,
+
+		pagination: null,
+
+		dialog: null,
+	
+		postMixInProperties: function(){
+			var t = this;
+			lang.mixin(t, i18n.getLocalization('gridx', 'PaginationBar', t.pagination.grid.lang));
+			t.numberTextBoxClass = t.pager.numberTextBoxClass.prototype.declaredClass;
+			t.buttonClass = t.pager.buttonClass.prototype.declaredClass;
+			t.connect(t.domNode, 'onkeydown', '_onKeyDown');
+		},
+	
+		postCreate: function(){
+			this._updateStatus();
+		},
+	
+		_updateStatus: function(){
+			var b = this.pageInputBox;
+			this.okBtn.set('disabled', !b.isValid() || b.get('displayedValue') === "");
+		},
+	
+		_onOK: function(){
+			this.pagination.gotoPage(this.pageInputBox.get('value') - 1);
+			this.dialog.hide();
+		},
+	
+		_onCancel: function(){
+			this.dialog.hide();
+		},
+		
+		_onKeyDown: function(evt){
+			if(!this.okBtn.get('disabled') && keys.ENTER == evt.keyCode){
+				this._onOK();
+				event.stop(evt);
+			}
+		}
+	});
+});

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

@@ -0,0 +1,180 @@
+define([
+	"dojo/_base/declare",
+	"dojo/query",
+	"dojo/_base/event",
+	"dojo/string",
+	"dojo/dom-class",
+	"dojo/keys",
+	"./_LinkPageBase",
+	"dojo/text!../templates/LinkPager.html"
+], function(declare, query, event, string, domClass, keys, _LinkPageBase, template){
+
+/*=====
+	return declare(_LinkPageBase, {
+		// summary:
+		//		This is a grid bar plugin to switch pages for grid using link buttons.
+		
+		// visibleSteppers: Integer
+		//		Number of visible page steppers. If invalid, default to 3.
+		visibleSteppers: 3,
+
+		refresh: function(){
+		}
+	});
+=====*/
+
+	var hasClass = domClass.contains;
+
+	return declare(_LinkPageBase, {
+		templateString: template,
+
+		postMixInProperties: function(){
+			var t = this,
+				c = 'connect',
+				p = t.grid.pagination;
+			t.inherited(arguments);
+			t[c](p, 'onSwitchPage', 'refresh');
+			t[c](p, 'onChangePageSize', 'refresh');
+			t[c](t.grid.model, 'onSizeChange', 'refresh');
+		},
+
+		startup: function(){
+			this.inherited(arguments);
+			//Set initial page after pagination module is ready.
+			//FIXME: this causes 2 times refresh, any better way?
+			this.refresh();
+		},
+
+		//Public-----------------------------------------------------------------------------
+
+		// visibleSteppers: Integer
+		//		Number of visible page steppers. If invalid, default to 3.
+		visibleSteppers: 3,
+
+		refresh: function(){
+			var t = this,
+				p = t.grid.pagination,
+				pageCount = p.pageCount(),
+				currentPage = p.currentPage(),
+				count = t.visibleSteppers,
+				sb = [], tabIndex = t._tabIndex,
+				disableNext = false,
+				disablePrev = false,
+				ellipsis = '<span class="gridxPagerStepperEllipsis">&hellip;</span>',
+				substitute = string.substitute,
+				stepper = function(page){
+					return ['<span class="gridxPagerStepperBtn gridxPagerPage ',
+						currentPage == page ? 'gridxPagerStepperBtnActive' : '',
+						'" pageindex="', page,
+						'" title="', substitute(t.pageIndexTitle, [page + 1]),
+						'" aria-label="', substitute(t.pageIndexTitle, [page + 1]),
+						'" tabindex="', tabIndex, '">', substitute(t.pageIndex, [page + 1]),
+					'</span>'].join('');
+				};
+			if(typeof count != 'number' || count <= 0){
+				count = 3;
+			}
+			if(pageCount){
+				var firstPage = currentPage - Math.floor((count - 1) / 2),
+					lastPage = firstPage + count - 1;
+				if(firstPage < 1){
+					firstPage = 1;
+					lastPage = count - 1;
+				}else if(pageCount > count && firstPage >= pageCount - count){
+					firstPage = pageCount - count;
+				}
+				if(lastPage >= pageCount - 1){
+					lastPage = pageCount - 2;
+				}
+				sb.push(stepper(0));
+				if(pageCount > 2){
+					if(firstPage > 1){
+						sb.push(ellipsis);
+					}
+					for(var i = firstPage; i <= lastPage; ++i){
+						sb.push(stepper(i));
+					}
+					if(lastPage < pageCount - 2){
+						sb.push(ellipsis);
+					}
+				}
+				if(pageCount > 1){
+					sb.push(stepper(pageCount - 1));
+				}
+			}
+			t._pageBtnContainer.innerHTML = sb.join('');
+			
+			if(!currentPage || currentPage === pageCount - 1){
+				disablePrev = !currentPage || pageCount <= 1;
+				disableNext = currentPage || pageCount <= 1;
+			}
+			domClass.toggle(t._nextPageBtn, 'gridxPagerStepperBtnDisable gridxPagerNextPageDisable', disableNext);
+			domClass.toggle(t._prevPageBtn, 'gridxPagerStepperBtnDisable gridxPagerPrevPageDisable', disablePrev);
+
+			t.grid.vLayout.reLayout();
+			if(t.focused){
+				t._focusNextBtn();
+			}
+		},	
+
+		//Private----------------------------------------------------------------------------
+		_onHover: function(evt){
+			this._toggleHover(evt, 'gridxPagerStepperBtn', 'gridxPagerPages', 'gridxPagerStepperBtnHover');
+		},
+	
+		_prevPage: function(){
+			this._focusPageIndex = 'prev';
+			var p = this.grid.pagination;
+			p.gotoPage(p.currentPage() - 1);
+		},
+	
+		_nextPage: function(){
+			this._focusPageIndex = 'next';
+			var p = this.grid.pagination;
+			p.gotoPage(p.currentPage() + 1);
+		},
+
+		_gotoPage: function(evt){
+			var n = this._findNodeByEvent(evt, 'gridxPagerStepperBtn', 'gridxPagerPages');
+			if(n){
+				var page = this._focusPageIndex = n.getAttribute('pageindex');
+				this.grid.pagination.gotoPage(parseInt(page, 10));
+			}
+		},
+
+		//Focus------------------------
+		_onKey: function(evt){
+			var t = this,
+				p = t.grid.pagination,
+				leftKey = t.grid.isLeftToRight() ? keys.LEFT_ARROW : keys.RIGHT_ARROW;
+			if(evt.keyCode == keys.LEFT_ARROW || evt.keyCode == keys.RIGHT_ARROW){
+				event.stop(evt);
+				t._focusNextBtn(true, evt.keyCode == leftKey);
+			}else if(evt.keyCode == keys.ENTER && 
+				hasClass(evt.target, 'gridxPagerStepperBtn') && 
+				!hasClass(evt.target, 'gridxPagerStepperBtnActive') &&
+				!hasClass(evt.target, 'gridxPagerStepperBtnDisable')){
+				event.stop(evt);
+				if(isNaN(parseInt(t._focusPageIndex, 10))){
+					t['_' + t._focusPageIndex + 'Page']();
+				}else{
+					p.gotoPage(parseInt(t._focusPageIndex, 10));
+				}
+			}
+		},
+	
+		_focusNextBtn: function(isMove, isLeft){
+			var t = this,
+				c = t.domNode,
+				n = query('[pageindex="' + t._focusPageIndex + '"]', c)[0];
+			n = t._focus(query('.gridxPagerStepperBtn', c), n, isMove, isLeft, function(node){
+				return !hasClass(node, 'gridxPagerStepperBtnActive') &&
+					!hasClass(node, 'gridxPagerStepperBtnDisable');
+			});
+			if(n){
+				t._focusPageIndex = n.getAttribute('pageindex');
+			}
+			return n;
+		}
+	});
+});

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

@@ -0,0 +1,138 @@
+define([
+	"dojo/_base/declare",
+	"dojo/query",
+	"dojo/_base/event",
+	"dojo/string",
+	"dojo/dom-class",
+	"dojo/keys",
+	"./_LinkPageBase"
+], function(declare, query, event, string, domClass, keys, _LinkPageBase){
+
+/*=====
+	return declare(_LinkPageBase, {
+		// summary:
+		//		This is a grid bar plugin that can be used to switch page sizes using link buttons.
+
+		// sizeSpearator: String
+		//		The string used to separate page sizes.
+		sizeSeparator: '|',
+
+		// sizes: Integer[]
+		//		An array of available page sizes. Non-positive number means "all"
+		sizes: [10, 25, 50, 100, 0],
+
+		refresh: function(){
+			// summary:
+			//		Refresh the UI using current arguments.
+		}
+	});
+=====*/
+
+	var hasClass = domClass.contains;
+
+	return declare(_LinkPageBase, {
+		templateString: '<div class="gridxLinkSizer" role="toolbar" aria-label="switch page size" data-dojo-attach-event="onclick: _changePageSize, onmouseover: _onHover, onmouseout: _onHover"></div>',
+
+		postMixInProperties: function(){
+			var t = this;
+			t.inherited(arguments);
+			t.connect(t.grid.pagination, 'onChangePageSize', '_onChange');
+		},
+
+		startup: function(){
+			this.inherited(arguments);
+			//Set initial page size after pagination module is ready.
+			this._onChange(this.grid.pagination.pageSize());
+		},
+
+
+		//Public-----------------------------------------------------------------------------
+		sizeSeparator: '|',
+
+		sizes: [10, 25, 50, 100, 0],
+
+		refresh: function(){
+			var t = this,
+				sb = [],
+				tabIndex = t._tabIndex,
+				separator = t.sizeSeparator,
+				currentSize = t.grid.pagination.pageSize(),
+				substitute = string.substitute;
+			for(var i = 0, len = t.sizes.length; i < len; ++i){
+				var pageSize = t.sizes[i],
+					isAll = false;
+				//pageSize might be invalid inputs, so be strict here.
+				if(!(pageSize > 0)){
+					pageSize = 0;
+					isAll = true;
+				}
+				sb.push('<span class="gridxPagerSizeSwitchBtn ',
+					currentSize === pageSize ? 'gridxPagerSizeSwitchBtnActive' : '',
+					'" pagesize="', pageSize,
+					'" title="', isAll ? t.pageSizeAllTitle : substitute(t.pageSizeTitle, [pageSize]),
+					'" aria-label="', isAll ? t.pageSizeTitle : substitute(t.pageSizeTitle, [pageSize]),
+					'" tabindex="', tabIndex, '">', isAll ? t.pageSizeAll : substitute(t.pageSize, [pageSize]),
+					'</span>',
+					//Separate the "separator, so we can pop the last one.
+					'<span class="gridxPagerSizeSwitchSeparator">' + separator + '</span>');
+			}
+			sb.pop();
+			t.domNode.innerHTML = sb.join('');
+			t.grid.vLayout.reLayout();
+		},
+
+		//Private----------------------------------------------------------------------------
+		_onHover: function(evt){
+			this._toggleHover(evt, 'gridxPagerSizeSwitchBtn', 'gridxLinkSizer', 'gridxPagerSizeSwitchBtnHover');
+		},
+
+		_onChange: function(size, oldSize){
+			var dn = this.domNode,
+				n = query('[pagesize="' + size + '"]', dn)[0];
+			if(n){
+				domClass.add(n, 'gridxPagerSizeSwitchBtnActive');
+			}
+			n = query('[pagesize="' + oldSize + '"]', dn)[0];
+			if(n){
+				domClass.remove(n, 'gridxPagerSizeSwitchBtnActive');
+			}
+		},
+
+		_changePageSize: function(evt){
+			var n = this._findNodeByEvent(evt, 'gridxPagerSizeSwitchBtn', 'gridxLinkSizer');
+			if(n){
+				var pageSize = this._focusPageSize = n.getAttribute('pagesize');
+				this.grid.pagination.setPageSize(parseInt(pageSize, 10));
+			}
+		},
+	
+		//Focus------------------------
+		_onKey: function(evt){
+			var t = this,
+				p = t.grid.pagination,
+				leftKey = t.grid.isLeftToRight() ? keys.LEFT_ARROW : keys.RIGHT_ARROW;
+			if(evt.keyCode == keys.LEFT_ARROW || evt.keyCode == keys.RIGHT_ARROW){
+				event.stop(evt);
+				t._focusNextBtn(true, evt.keyCode == leftKey);
+			}else if(evt.keyCode == keys.ENTER &&
+				hasClass(evt.target, 'gridxPagerSizeSwitchBtn') &&
+				!hasClass(evt.target, 'gridxPagerSizeSwitchBtnActive')){
+				event.stop(evt);
+				p.setPageSize(parseInt(t._focusPageSize, 10));
+			}
+		},
+	
+		_focusNextBtn: function(isMove, isLeft){
+			var t = this,
+				c = t.domNode,
+				n = query('[pagesize="' + t._focusPageSize + '"]', c)[0];
+			n = t._focus(query('.gridxPagerSizeSwitchBtn', c), n, isMove, isLeft, function(node){
+				return !hasClass(node, 'gridxPagerSizeSwitchBtnActive');
+			});
+			if(n){
+				t._focusPageSize = n.getAttribute('pagesize');
+			}
+			return n;
+		}
+	});
+});