9:40 a.m.
Author: konstantin.mishin
Date: 2007-06-06 10:40:08 -0400 (Wed, 06 Jun 2007)
New Revision: 1048
Added:
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Selection.js
Modified:
trunk/sandbox/scrollable-grid/generatescript.xml
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody.js
Log:
Added a client part of selection.
Modified: trunk/sandbox/scrollable-grid/generatescript.xml
===================================================================
--- trunk/sandbox/scrollable-grid/generatescript.xml 2007-06-06 14:38:21 UTC (rev 1047)
+++ trunk/sandbox/scrollable-grid/generatescript.xml 2007-06-06 14:40:08 UTC (rev 1048)
@@ -43,6 +43,7 @@
<file name="/ClientUI/controls/grid/GridBody.js"/>
<file name="/ClientUI/controls/grid/GridFooter.js"/>
<file name="/ClientUI/controls/grid/Grid.js"/>
+ <file name="/ClientUI/controls/grid/Selection.js"/>
</filelist>
</concat>
</target>
Modified:
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody.js
===================================================================
---
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody.js 2007-06-06
14:38:21 UTC (rev 1047)
+++
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody.js 2007-06-06
14:40:08 UTC (rev 1048)
@@ -54,6 +54,7 @@
this.createControl(template);
this.registerEvents();
this.updateLayout();
+ this.selectionManager = new
ClientUI.controls.grid.SelectionManager(this.grid.getElement());
},
registerEvents: function() {
Event.observe(this.scrollBox.eventHScroll, "grid body hscroll",
this._eventOnHScroll);
Added:
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Selection.js
===================================================================
--- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Selection.js
(rev 0)
+++
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Selection.js 2007-06-06
14:40:08 UTC (rev 1048)
@@ -0,0 +1,428 @@
+ClientUI.controls.grid.Selection = Class.create({
+ CLASSDEF: {
+ name: 'ClientUI.controls.grid.Selection'
+ }
+
+});
+
+Object.extend(ClientUI.controls.grid.Selection.prototype, {
+ initialize: function() {
+ this.ranges = [];
+ },
+
+ addId: function(id) {
+ id = parseInt(id);
+ if(this.isSelectedId(id))
+ return;
+ var i = 0;
+ while(i < this.ranges.length && id >= this.ranges[i++].indexes[1]);
+ i--;
+ if(this.ranges[i-1] && id==(this.ranges[i-1].indexes[1]+1) ) {
+ if(id==(this.ranges[i].indexes[0]-1)) {
+ this.ranges[i-1].indexes[1] = this.ranges[i].indexes[1];
+ this.removeRange(i);
+ } else {
+ this.ranges[i-1].indexes[1]++;
+ }
+ } else {
+ if(this.ranges[i]){
+ if(this.ranges[i] && id==(this.ranges[i].indexes[0]-1)) {
+ this.ranges[i].indexes[0]--;
+ } else {
+ if(id==(this.ranges[i].indexes[1]+1)){
+ this.ranges[i].indexes[1]++;
+ } else {
+ if(id<this.ranges[i].indexes[1]){
+ this.addRange(i, new ClientUI.controls.grid.Range(id, id));
+ } else {
+ this.addRange(i + 1, new ClientUI.controls.grid.Range(id, id));
+ }
+ }
+ }
+ } else {
+ this.addRange(i, new ClientUI.controls.grid.Range(id, id));
+ }
+ }
+ },
+
+ addRange: function(index, range) {
+ var i = this.ranges.push(range) - 2;
+ if(index >= 0) {
+ while(i>=index)
+ this.ranges[i+1] = this.ranges[i--];
+ this.ranges[i+1] = range;
+ }
+ },
+
+ removeRange: function(index) {
+ var i = index + 1;
+ while(i!=this.ranges.length)
+ this.ranges[i-1] = this.ranges[i++];
+ this.ranges.pop();
+ },
+
+ isSelectedId: function(id) {
+ var i = 0;
+ while(i < this.ranges.length && id >= this.ranges[i].indexes[0]) {
+ if(id >= this.ranges[i].indexes[0] && id <= this.ranges[i].indexes[1])
{
+ return true;
+ } else {
+ i++;
+ }
+ }
+ return false;
+ },
+
+ getSelectedIdsQuantity: function() {
+ var number = 0;
+ for (var i = 0; i < this.ranges.length; i++) {
+ number+= this.ranges[i].size();
+ }
+ return number;
+ },
+
+ size: function () {
+ return this.getSelectedIdsQuantity();
+ },
+
+ removeId: function(id) {
+ id = parseInt(id);
+ if(!this.isSelectedId(id))
+ return;
+ var i = 0;
+ while(i < this.ranges.length && id > this.ranges[i++].indexes[1]);
+ i--;
+ if(this.ranges[i]) {
+ if(id==(this.ranges[i].indexes[1]) ) {
+ if(id==(this.ranges[i].indexes[0])){
+ this.removeRange(i);
+ } else {
+ this.ranges[i].indexes[1]--;
+ }
+ } else {
+ if(id==(this.ranges[i].indexes[0])){
+ this.ranges[i].indexes[0]++;
+ } else {
+ this.addRange(i+1, new ClientUI.controls.grid.Range(id+1,
this.ranges[i].indexes[1]));
+ this.ranges[i].indexes[1] = id-1;
+ }
+ }
+ }
+ },
+
+ getRanges: function() {
+ return this.ranges;
+ },
+
+ setRanges: function(ranges) {
+ this.ranges = ranges;
+ },
+
+ initRanges: function(rangesStr) {
+ if(!rangesStr) {
+ this.ranges = [];
+ return;
+ }
+ var rangeStrRArray = rangesStr.split(";");
+ this.ranges = new Array(rangeStrRArray.length -1);
+ var indexStrRArray;
+ for(var i = 0; i < this.ranges.length; i++) {
+ indexStrRArray = rangeStrRArray[i].split(",");
+ this.ranges[i] = new ClientUI.controls.grid.Range(parseInt(indexStrRArray[0]),
parseInt(indexStrRArray[1]));
+ }
+
+ },
+
+ inspectRanges: function() {
+ var ranges = this.getRanges();
+ var ret = "";
+ ranges.each( function(r) { ret += r.inspect(); } );
+ return ret;
+ }
+});
+
+ClientUI.controls.grid.Range = Class.create({
+ CLASSDEF: {
+ name: 'ClientUI.controls.grid.Range'
+ }
+
+});
+
+Object.extend(ClientUI.controls.grid.Range.prototype, {
+ initialize: function(startIndex, endIndex) {
+ this.indexes = [startIndex, endIndex];
+ },
+
+ inspect: function() {
+ return this.indexes[0] + "," + this.indexes[1] + ";";
+ },
+ toString: function() {
+ return this.inspect();
+ },
+
+ size: function() {
+ return this.indexes[1] - this.indexes[0] + 1;;
+ },
+
+ each: function(iterator) {
+ var j = this.indexes[0];
+ while(j <= this.indexes[1]) {
+ iterator(j++);
+ }
+ },
+
+ clone: function() {
+ var ret = Object.extend(new Object(),this);
+ ret.indexes = this.indexes.clone();
+ return ret;
+ }
+});
+
+ClientUI.controls.grid.SelectionManager = Class.create({
+ CLASSDEF: {
+ name: 'ClientUI.controls.grid.SelectionManager'
+ }
+
+});
+
+Object.extend(ClientUI.controls.grid.SelectionManager.prototype, {
+ initialize: function(gridElement) {
+ this.rowPrefix =
$("ClientUI_Box8").parentNode.id.split(":body:FrozenBox")[0];//gridElement.id;
+ this.selection = new ClientUI.controls.grid.Selection();
+// this.restoreState();
+ this.eventKeyPress = this.processKeyDown.bindAsEventListener(this);
+ Event.observe(document, "keypress", this.eventKeyPress);
+ var frows = $("ClientUI_Box8").rows;
+ var nrows = $("ClientUI_Box9").rows;
+ var rowIndex;
+ for(var i = 0; i < frows.length; i++) {
+ rowIndex = Number(frows[i].id.split("_")[2]);
+ this.addListener(frows[i], rowIndex);
+ this.addListener(nrows[i], rowIndex);
+ }
+ if (document.selection) {
+ Event.observe(gridElement, "click",
this.resetSelection.bindAsEventListener(this));
+ }
+
+ this.eventLostFocus = this.processLostFocus.bindAsEventListener(this);
+ Event.observe(document, "click", this.eventLostFocus);
+
+ this.eventPreventLostFocus = this.processPreventLostFocus.bindAsEventListener(this);
+ Event.observe(gridElement, "click", this.eventPreventLostFocus);
+
+
+// var selChangeHandler = this.grid.options.onselectionchange;
+// if (selChangeHandler) {
+// IL.Event.observe(this.grid.element, "selectionchange", selChangeHandler);
+// }
+// var deleteHandler = this.grid.options.onDeleted;
+// if (deleteHandler) {
+// IL.Event.observe(this.grid.element, "delete", deleteHandler);
+// }
+
+ },
+
+ addListener: function(element, rowIndex) {
+ Event.observe(element, "click", this.processClick.bindAsEventListener(this,
rowIndex));
+ },
+
+
+/* restoreState: function() {
+ this.selection.initRanges(this.grid.options.selectionField.value);
+ this.oldState = this.selection.getState();
+ var i = 0;
+ var j;
+ while(i < this.selection.ranges.length) {
+ j = this.selection.ranges[i].indexes[0];
+ while(j <= this.selection.ranges[i].indexes[1]) {
+ var r = this.grid.getRowFromId(j);
+ if(r) {
+ r.addListener();
+ }
+ j++;
+ }
+ i++;
+ }
+ },
+
+ getGridSelection: function() {
+ return this.selection.getRanges();
+ },*/
+
+ processPreventLostFocus: function() {
+ this.inFocus = true;
+ this.preventLostFocus = true;
+ },
+
+ processLostFocus: function() {
+ if (!this.preventLostFocus) {
+ this.lostFocus();
+ } else {
+ this.preventLostFocus = false;
+ }
+ },
+
+ lostFocus: function() {
+ this.inFocus = false;
+ },
+
+ processKeyDown: function(event) {
+ if(!event.shiftKey) {
+ this.shiftRow = null;
+ }
+ var range, rowIndex;
+ var activeRow = this.activeRow;
+ var noDefault = false;
+ switch (event.keyCode || event.charCode) {
+ case Event.KEY_UP:
+ if (this.inFocus && activeRow && activeRow > 0) {
+ rowIndex = activeRow - 1;
+ if (!event.ctrlKey && !event.shiftKey) {
+ range = [rowIndex, rowIndex];
+ this.setSelection(range);
+ } else if (!event.ctrlKey && event.shiftKey) {
+ if(!this.shiftRow) {
+ this.shiftRow = this.activeRow;
+ }
+ if(this.shiftRow >= this.activeRow) {
+ this.addRowToSelection(rowIndex);
+ } else {
+ this.removeRowFromSelection(activeRow);
+ }
+ }
+ noDefault = true;
+ this.setActiveRow(rowIndex);
+ }
+ break;
+ case Event.KEY_DOWN:
+ if (this.inFocus && activeRow) {
+ rowIndex = activeRow + 1;
+ if (!event.ctrlKey && !event.shiftKey) {
+ range = [rowIndex, rowIndex];
+ this.setSelection(range);
+ } else if (!event.ctrlKey && event.shiftKey) {
+ if(!this.shiftRow) {
+ this.shiftRow = this.activeRow;
+ }
+ if(this.shiftRow <= this.activeRow) {
+ this.addRowToSelection(rowIndex);
+ } else {
+ this.removeRowFromSelection(activeRow);
+ }
+ }
+ noDefault = true;
+ this.setActiveRow(rowIndex);
+ }
+ break;
+ case 65: case 97: // Ctrl-A
+ if (this.inFocus && event.ctrlKey) {
+ range = [0, $("ClientUI_Box8").rows.length];
+ this.setSelection(range);
+ noDefault = true;
+ }
+ break;
+ case Event.KEY_TAB:
+ this.lostFocus();
+ }
+ if (noDefault) {
+ if (event.preventBubble) event.preventBubble();
+ Event.stop(event);
+ }
+ },
+
+ processClick: function(event, rowIndex) {
+ if(!event.shiftKey) {
+ this.shiftRow = null;
+ }
+ var range;
+ if ( event.shiftKey && !event.ctrlKey && !event.altKey) {
+ if(!this.shiftRow) {
+ this.shiftRow = this.activeRow;
+ }
+ this.startRow = this.shiftRow;
+ if (this.startRow <= rowIndex) {
+ this.endRow = rowIndex;
+ } else {
+ this.endRow = this.startRow;
+ this.startRow = rowIndex;
+ }
+ range = [this.startRow, this.endRow];
+ this.setSelection(range);
+ } else if (!event.shiftKey && event.ctrlKey && !event.altKey) {
+ if (this.selection.isSelectedId(rowIndex)) {
+ this.removeRowFromSelection(rowIndex);
+ } else {
+ this.addRowToSelection(rowIndex);
+ }
+ } else if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
+ range = [rowIndex, rowIndex];
+ this.setSelection(range);
+ }
+ this.setActiveRow(rowIndex);
+ if (window.getSelection) {
+ window.getSelection().removeAllRanges();
+ } else if (document.selection) {
+ document.selection.empty();
+ }
+ },
+
+ setShiftRow: function(event) {
+ if(event.shiftKey) {
+ if(!this.shiftRow) {
+ this.shiftRow = this.activeRow;
+ }
+ } else {
+ this.shiftRow = null;
+ }
+ },
+
+ setSelection: function(range) {
+ var i = 0;
+ for (; i < range[0]; i++) {
+ this.removeRowFromSelection(i);
+ }
+ for (; i <= range[1]; i++) {
+ this.addRowToSelection(i);
+ }
+ for (; i < $("ClientUI_Box8").rows.length; i++) {
+ this.removeRowFromSelection(i);
+ }
+ },
+
+ resetSelection: function(e) {
+ if(e.shiftKey) {
+ document.selection.empty();
+ }
+ },
+
+ addRowToSelection: function(rowIndex) {
+ this.selection.addId(rowIndex);
+ var fElement = $(this.rowPrefix + ":f:row_" + rowIndex);
+ var nElement = $(this.rowPrefix + ":n:row_" + rowIndex);
+ fElement.style.backgroundColor = "#DDDDFF";
+ nElement.style.backgroundColor = "#DDDDFF";
+ },
+
+ removeRowFromSelection: function(rowIndex) {
+ this.selection.removeId(rowIndex);
+ var fElement = $(this.rowPrefix + ":f:row_" + rowIndex);
+ var nElement = $(this.rowPrefix + ":n:row_" + rowIndex);
+ fElement.style.backgroundColor = "#FFFFFF";
+ nElement.style.backgroundColor = "#FFFFFF";
+ },
+
+ setActiveRow: function(rowIndex) {
+ var fElement, nElement;
+ if(this.activeRow) {
+ fElement = $(this.rowPrefix + ":f:row_" + this.activeRow);
+ nElement = $(this.rowPrefix + ":n:row_" + this.activeRow);
+ fElement.style.color = "#000000";
+ nElement.style.color = "#000000";
+ }
+ fElement = $(this.rowPrefix + ":f:row_" + rowIndex);
+ nElement = $(this.rowPrefix + ":n:row_" + rowIndex);
+ fElement.style.color = "#0000AA";
+ nElement.style.color = "#0000AA";
+ this.activeRow = rowIndex;
+ }
+});
\ No newline at end of file