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