[richfaces-svn-commits] JBoss Rich Faces SVN: r798 - trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid.

Author: abelevich Date: 2007-05-17 14:46:57 -0400 (Thu, 17 May 2007) New Revision: 798 Added: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter2.js trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader2.js Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid2.js trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader.js Log: Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid2.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid2.js 2007-05-17 18:46:43 UTC (rev 797) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid2.js 2007-05-17 18:46:57 UTC (rev 798) @@ -7,7 +7,7 @@ ClientUILib.requireClass("ClientUI.common.box.Box"); ClientUILib.requireClass("ClientUI.controls.grid.GridHeader"); -ClientUILib.requireClass("ClientUI.controls.grid.GridBody2"); +ClientUILib.requireClass("ClientUI.controls.grid.GridBody"); ClientUILib.requireClass("ClientUI.controls.grid.GridFooter"); ClientUILib.requireClass("ClientUI.controls.grid.CellsStrip"); @@ -30,23 +30,23 @@ * var grid = new ClientUI.controls.grid.Grid('id_of_trigger_element', 'a nice description') * </script> */ -ClientUI.controls.grid.Grid2 = Class.create({ +ClientUI.controls.grid.Grid = Class.create({ CLASSDEF: { - name: 'ClientUI.controls.grid.Grid2', + name: 'ClientUI.controls.grid.Grid', parent: ClientUI.common.box.Box } }); -Object.extend(ClientUI.controls.grid.Grid2.prototype, { +Object.extend(ClientUI.controls.grid.Grid.prototype, { // Custom events /** * Occured when content header clicked */ eventOnSort: {}, - initialize: function(element, dataModel, templates, options) { - ClientUI.controls.grid.Grid2.parentClass.constructor().call(this, element); + initialize: function(element, dataModel, templates) { + ClientUI.controls.grid.Grid.parentClass.constructor().call(this, element); if(!element || !element.id) this.element.id = "ClientUI_Grid" + ClientUI_controls_grid_Grid_idGenerator++; @@ -55,62 +55,72 @@ this.eventOnSort = new ClientUI.common.utils.CustomEvent('OnSort'); - // grid options - this.options = { - showIndexColumn: false, - indexColumnWidth: 30 - }; - if(options) { Object.extend(this.options, options); } - this.createControl(); }, createControl: function() { + //TODO: delete + document.gridStartTime = (new Date()).getTime(); + var grid = this; var layout = new ClientUI.layouts.GridLayoutManager(null, this.getElement()); this.layout = layout; - + this.templates.each(function(item) { switch(item.pane) { - case GridLayout_Enum.HEADER: + case GridLayout_Enum.HEADER: { + //TODO: delete + document.headerStartTime = (new Date()).getTime(); + var header = new ClientUI.controls.grid.GridHeader($(item.ref), grid); layout.addPane(GridLayout_Enum.HEADER, header); + + //TODO: delete + document.headerStopTime = (new Date()).getTime(); + break; - case GridLayout_Enum.BODY: - var body = new ClientUI.controls.grid.GridBody2($(item.ref), grid); + } + case GridLayout_Enum.BODY: { + //TODO: delete + document.bodyStartTime = (new Date()).getTime(); + + var body = new ClientUI.controls.grid.GridBody($(item.ref), grid); layout.addPane(GridLayout_Enum.BODY, body); + + //TODO: delete + document.bodyStopTime = (new Date()).getTime(); + break; - case GridLayout_Enum.FOOTER: + } + case GridLayout_Enum.FOOTER: { + //TODO: delete + document.footerStartTime = (new Date()).getTime(); + var footer = new ClientUI.controls.grid.GridFooter($(item.ref), grid); layout.addPane(GridLayout_Enum.FOOTER, footer); + + //TODO: delete + document.footerStopTime = (new Date()).getTime(); + break; + } } }); - // create cells strips - this._columnsStrip = []; - var columns = this.getHeader().getColumns(); - for(var i=0; i<columns.length; i++) { - this._columnsStrip[i] = new ClientUI.controls.grid.CellsStrip({ - columnWidth: columns[i].object.getWidth(), - basePos: columns[i].object.getX(), - frozen: columns[i].frozen - }); - } + //TODO: delete + document.gridParseTime = (new Date()).getTime(); - this._parseRowAndAddToStrips("header", this.getHeader().getRow()); - if(this.getFooter()) { - this._parseRowAndAddToStrips("footer", this.getFooter().getRow()); - } - this.currentScrollPos = 0; this.controlCreated = true; this.updateLayout(); + + //TODO: delete + document.gridEndTime = (new Date()).getTime(); }, updateLayout: function() { if(!this.controlCreated) { return; } - ClientUI.controls.grid.Grid2.parentClass.method("updateLayout").call(this); + ClientUI.controls.grid.Grid.parentClass.method("updateLayout").call(this); if(this.layout) { this.layout.updateLayout(); } @@ -124,71 +134,15 @@ getBody: function() { return this.layout.getPane(GridLayout_Enum.BODY); }, - _getVisibleHeaderControls: function() { - var controls = []; - var columns = this.getHeader().getColumns(); - columns.each(function(column){ - var ctrls = $A(column.body.getElement().getElementsByTagName("select")); - ctrls.each(function(ctrl){ - if(Element.visible(ctrl)) { - controls.push(ctrl); - } - }); - }); - return controls; - }, adjustColumnWidth: function(index, width) { - var oldWidth = this.getHeader().getColumns()[index].object.getWidth(); - - // 1. set new width - this._columnsStrip[index].setWidth(width); - - // Hide controls in IE that flipped in other case - var ctrlsIE = []; - if(ClientUILib.isIE) { - ctrlsIE = this._getVisibleHeaderControls(); - ctrlsIE.each(function(ctrl){ - Element.hide(ctrl); - }); - } - - // 2. shift right side columns - if(index < this._columnsStrip.length-1) { - var count = this._columnsStrip.length; - if(this._columnsStrip[index].frozen) { - // if current column is frozen, lets find last frozen column index - var i=index+1; - while(this._columnsStrip[i].frozen && i<count) { - i++; - } - count = i; - } - - var offset = width - oldWidth; - for(var i=index+1; i<count; i++) { - this._columnsStrip[i].setOffset(offset, true); - } - } - + this.getHeader().adjustColumnWidth(index, width); this.getBody().adjustColumnWidth(index, width); - this.updateLayout(); - - if(ClientUILib.isIE) { - ctrlsIE.each(function(ctrl){ - Element.show(ctrl); - }); - } + this.getFooter().adjustColumnWidth(index, width); + this.updateLayout(); }, adjustScrollPosition: function(pos) { if(pos<0) {pos = 0;} this.currentScrollPos = pos; - var i=0; - while(i<this._columnsStrip.lenth && this._columnsStrip[i].frozen) i++; - if(i<this._columnsStrip.length) { - while(i<this._columnsStrip.length) { - this._columnsStrip[i++].setOffset(pos, false, true); - } - } this.getHeader().adjustScrollPosition(pos); this.getBody().adjustScrollPosition(pos); if(this.getFooter()) {this.getFooter().adjustScrollPosition(pos);} @@ -213,93 +167,23 @@ _isCell: function(element) { return element.tagName && element.tagName.toLowerCase()!="iframe"; }, - // helper method parse row of elements and add separately into rows and columns list - _parseRowAndAddToStrips: function(id, object) { - var i=0, j=0, cells, cell, count=0; - if(object.frozen && object.normal) { - // process frozen columns - cells = object.frozen.getElement().childNodes; - count = cells.length; - for(i=0, j=0; i<count; i++) { - cell = cells[i]; - if(this._isCell(cell) && !this._isSeparator(cell)) { - this._columnsStrip[j].add(id, new ClientUI.controls.grid.ColumnCell( - cell, - this._columnsStrip[j])); - j++; - } - } - var sripIndex = j; - for(i=0, j=0; i<count; i++) { // process separators - cell = cells[i]; - if(this._isSeparator(cell)) { - var columnCell = new ClientUI.controls.grid.ColumnCell( - cell, - this._columnsStrip[j]); - columnCell.separator = true; - this._columnsStrip[j].add(id, columnCell); - j++; - } - } - - // process normal columns - i = sripIndex; - cells = object.normal.getElement().childNodes; - for(j=0; j<cells.length; j++) { - cell = cells[j]; - if(this._isCell(cell) && !this._isSeparator(cell)) { - this._columnsStrip[i].add(id, new ClientUI.controls.grid.ColumnCell( - cell, - this._columnsStrip[i])); - i++; - } - } - i = sripIndex; - for(j=0; j<cells.length; j++) { // process separators - cell = cells[j]; - if(this._isSeparator(cell)) { - var columnCell = new ClientUI.controls.grid.ColumnCell( - cell, - this._columnsStrip[i]); - columnCell.separator = true; - this._columnsStrip[i].add(id, columnCell); - i++; - } - } - } - }, - _getParsedRowsCount: function() { - return this._columnsStrip[0].length(); - }, - _removeRowFromStrips: function(id) { - this._columnsStrip.each(function(strip){ - strip.remove(id); - }); - }, - getColumnScrollX: function(index) { - if(index) { - return index<this._columnsStrip.length ? this._columnsStrip[index].currOffset : this.currentScrollPos; - } - - return this.currentScrollPos; - }, getColumnsTotalWidth: function() { var totalWidth = 0; - this.getHeader().getColumns().each(function(column){ - totalWidth += column.object.getWidth(); - }); - + var columns = this.getHeader().getColumns(); + for(var i=0; i<columns.length; i++) { + totalWidth += columns[i].width; + } return totalWidth; }, getColumnsFrozenWidth: function() { - var totalWidth = 0; + /*var totalWidth = 0; var columns = this.getHeader().getColumns(); var i = 0; while(i<columns.length && columns[i].frozen) { - totalWidth += columns[i++].object.getWidth(); + totalWidth += columns[i++].width; } - return totalWidth; - + return totalWidth;*/ + return this.getBody().frozenContentBox.getWidth(); }, invalidate: function(params) { this.getBody().invalidate(params); Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js 2007-05-17 18:46:43 UTC (rev 797) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js 2007-05-17 18:46:57 UTC (rev 798) @@ -3,7 +3,7 @@ * * ... */ -ClientUILib.declarePackage("ClientUI.controls.grid.GridBody2"); +ClientUILib.declarePackage("ClientUI.controls.grid.GridBody"); ClientUILib.requireClass("ClientUI.common.box.Box"); @@ -11,15 +11,15 @@ * GridHeader.js - Grid control header pane * TODO: add comments */ -ClientUI.controls.grid.GridBody2 = Class.create({ +ClientUI.controls.grid.GridBody = Class.create({ CLASSDEF: { - name: 'ClientUI.controls.grid.GridBody2', + name: 'ClientUI.controls.grid.GridBody', parent: ClientUI.common.box.Box } }); -Object.extend(ClientUI.controls.grid.GridBody2.prototype, { +Object.extend(ClientUI.controls.grid.GridBody.prototype, { /** * Count of rows can be viewed in the same time in grid */ @@ -52,8 +52,7 @@ */ initialize: function(template, grid) { this.grid = grid; - ClientUI.controls.grid.GridBody2.parentClass.constructor().call(this, null, grid.getElement()); - this.element.id = this.grid.getElement().id + "_Body"; + ClientUI.controls.grid.GridBody.parentClass.constructor().call(this, template); // declare event listeners this._eventOnHScroll = this._onContentHScroll.bind(this); @@ -69,8 +68,8 @@ this.grid.adjustScrollPosition(xpos); }, _onContentVScroll: function(ypos) { - this.helpObject1.moveToY(this.sizeBox.getHeight()+ this.defaultRowHeight + 5); - this.helpObject2.moveToY(this.sizeBox.getHeight()+ this.defaultRowHeight + 5); + //this.helpObject1.moveToY(this.sizeBox.getHeight()+ this.defaultRowHeight + 5); + //this.helpObject2.moveToY(this.sizeBox.getHeight()+ this.defaultRowHeight + 5); this.setScrollPos(ypos); this.adjustDataPosition(ypos); }, @@ -90,7 +89,6 @@ // This trick to force IE rerender rows if(ClientUILib.isIE && !ClientUILib.isIE7) { this.setScrollPos(this.currentPos); - this.adjustScrollPosition(this.grid.getColumnScrollX()); } */ @@ -110,17 +108,25 @@ Event.stopObserving(this.grid.dataModel.eventDataReady, "grid data is loaded", this._eventOnDataReady); }, createControl: function(template) { - // validate template - template.parentNode.removeChild(template); + var childs = template.childNodes; + for(var i=0; i<childs.length; i++) { + if(childs[i].tagName && childs[i].tagName.toLowerCase() == "div") { + this.container = new ClientUI.common.box.Box(childs[i], null, true); + break; + } + } + // create scroll box this.scrollBox = new ClientUI.common.box.ScrollableBox(null, this.getElement()); this.scrollBox.makeAbsolute(); + this.scrollBox.setWidth(this.getWidth()); + this.scrollBox.setHeight(this.getHeight()); this.sizeBox = new ClientUI.common.box.Box(null, this.scrollBox.getElement()); this.sizeBox.makeAbsolute(); var normal = null, frozen = null; - var childs = $(template).childNodes; + var childs = this.container.getElement().childNodes; for(var i=0; i<childs.length; i++) { if(childs[i].id && childs[i].id == "FrozenBox") { frozen = childs[i]; @@ -130,17 +136,17 @@ } } - if(normal) { - this.contentBox = new ClientUI.common.box.Box(normal); - this.contentBox.setParent(this.getElement()); - this.contentBox.makeAbsolute(); + if(!normal || !frozen) { + errMsg = "Unable to parse template for GridBody. Unable to find FrozenBox or NormalBox."; + ClientUILib.log(ClientUILogger.ERROR, errMsg); + throw(errMsg); } - if(frozen) { - this.frozenContentBox = new ClientUI.common.box.Box(frozen); - this.frozenContentBox.setParent(this.getElement()); - this.frozenContentBox.makeAbsolute(); - } + this.contentBox = new ClientUI.common.box.Box(normal); + this.contentBox.makeAbsolute(); + this.frozenContentBox = new ClientUI.common.box.Box(frozen); + this.frozenContentBox.makeAbsolute(); + /* this.helpObject1 = new ClientUI.common.box.Box($(document.createElement("img")), this.contentBox.getElement()); this.helpObject1.setWidth(10); this.helpObject1.setHeight(10); @@ -149,28 +155,27 @@ this.helpObject2.setWidth(10); this.helpObject2.setHeight(10); this.helpObject2.makeAbsolute(); + */ // create row template - var ch = this.contentBox.getElement().firstChild; + var ch = this.frozenContentBox.getElement().firstChild; while(ch) { if(ch.tagName && ch.tagName.toLowerCase()=="table") { - this.templNormal = new ClientUI.common.box.Box($(ch), null, true); + this.templFrozen = new ClientUI.common.box.Box($(ch), null, true); break; } ch = ch.nextSibling; } - ch = this.frozenContentBox.getElement().firstChild; + ch = this.contentBox.getElement().firstChild; while(ch) { if(ch.tagName && ch.tagName.toLowerCase()=="table") { - this.templFrozen = new ClientUI.common.box.Box($(ch), null, true); + this.templNormal = new ClientUI.common.box.Box($(ch), null, true); break; } ch = ch.nextSibling; } - this.parseTemplate(this.templFrozen.getElement(), this.templNormal.getElement()); - this.updateColumns(); - // control created + this.parseTemplate(this.templFrozen.getElement(), this.templNormal.getElement()); this.controlCreated = true; }, parseTemplate: function(templFrozen, templNormal) { @@ -195,13 +200,6 @@ return true; }, - updateColumns: function() { - var width = 0; - var columns = this.grid.getHeader().getColumns(); - for(var i=0; i<columns.length; i++) { - this.adjustColumnWidth(i, columns[i].width); - } - }, getColumns: function() { return this._columns; }, @@ -217,11 +215,11 @@ if(!this.controlCreated || !this.grid.controlCreated) { return; } - ClientUI.controls.grid.GridBody2.parentClass.method("updateLayout").call(this); + ClientUI.controls.grid.GridBody.parentClass.method("updateLayout").call(this); if(!this.scrollBox || !this.contentBox || !this.sizeBox) { return; } - + var scrollLeft = this.contentBox.getElement().scrollLeft; var height = this.scrollBox.getViewportHeight(); var fixH = this.grid.getFooter() ? this.grid.getFooter().getHeight() : 0; @@ -236,8 +234,8 @@ this.sizeBox.setWidth(totalWidth); this.sizeBox.setHeight(this.defaultRowHeight * this.grid.dataModel.getCount() + fixH); - this.helpObject1.moveToY(this.sizeBox.getHeight()+ this.defaultRowHeight + 5); - this.helpObject2.moveToY(this.sizeBox.getHeight()+ this.defaultRowHeight + 5); + //this.helpObject1.moveToY(this.sizeBox.getHeight()+ this.defaultRowHeight + 5); + //this.helpObject2.moveToY(this.sizeBox.getHeight()+ this.defaultRowHeight + 5); // NOTE: this needed to force this.scrollBox update scrolled area this.scrollBox.setWidth(this.getWidth()+1); @@ -245,10 +243,11 @@ this.scrollBox.setWidth(this.getWidth()); this.scrollBox.setHeight(this.getHeight()); + this.container.setWidth(totalWidth + 100); this.contentBox.setWidth(this.scrollBox.getViewportWidth()-frozenContentWidth); this.contentBox.setHeight(height - fixH); this.frozenContentBox.setWidth(frozenContentWidth); - this.frozenContentBox.setHeight(height - fixH); + this.frozenContentBox.setHeight(height - fixH); var scrollPos = Math.min(totalWidth - frozenContentWidth - this.contentBox.getWidth(), scrollLeft); this.grid.adjustScrollPosition(scrollPos); @@ -346,10 +345,6 @@ // process frozen var cells = this.frozen.getElement().childNodes; var i = 0, startIndex = 0; - if(this.parent.grid.options.showIndexColumn) { - startIndex = 1; - this.setCellValue(0, ""+this.rowindex); - } var method = !show ? Element.show : Element.hide; for(i=startIndex;i<cells.length; i++) { method(cells[i]); @@ -380,8 +375,7 @@ // replace data patterns in content with real data from row var count = this.parent.grid.getHeader().getColumns().length; var columns = this.parent.getColumns(); - var i = this.parent.grid.options.showIndexColumn ? 1 : 0; - for(; i<count; i++) { + for(var i = 0; i<count; i++) { var value = this.parent.parseExpression(columns[i].value, rowData, { row: index, cid: row.getId() + ":" + i, @@ -404,38 +398,6 @@ return rowDesc; }, - createRow: function() { - var row = null; - var rowFrozen = null; - if(this.templateRow) { // use existing template to inherit cell's width & offset - row = this.templateRow.normal.getElement().cloneNode(true); - rowFrozen = this.templateRow.frozen.getElement().cloneNode(true); - } - else { // first time - row = this.headerRowTemplate.getElement().cloneNode(true); - rowFrozen = this.headerFrozenRowTemplate.getElement().cloneNode(true); - } - - var headerRow = new ClientUI.common.box.InlineBox(row, this.contentBox.getElement(), true); - headerRow.setParent(this.contentBox.getElement()); - var headerFrozenRow = new ClientUI.common.box.InlineBox(rowFrozen, this.frozenContentBox.getElement(), true); - headerFrozenRow.setParent(this.frozenContentBox.getElement()); - - var rowDesc = this._getRowDesc(this, this.getElement().id + "BR", headerRow, headerFrozenRow); - - // create sample row that will be cloned - if(!this.templateRow) { - this.templateRow = rowDesc; - this.templateRow.setId("trow"); - this.grid._parseRowAndAddToStrips(this.templateRow.id, this.templateRow); - this.templateRow.setRowIndex(-100); - this.templateRow.showEmpty(); - this.templateRow.hide(); - } - - this.grid._parseRowAndAddToStrips("" + (this.grid._getParsedRowsCount()+1), rowDesc); - return rowDesc; - }, /** * Parse values of cell's value and title * Predefined patterns: @@ -471,21 +433,6 @@ return rez; }, - loadRow: function(index, id) { - var row = null; - if(this.dataViewHash) { - row = this.dataViewHash[index]; - } - if(row) { - var rowData = this.grid.dataModel.getRow(index); - if(rowData && rowData.length && rowData.length > 0) { - row.loadRowData(row, index, rowData); - } - } - }, - getRow: function() { - return this.rowsPool.length>0 ? this.rowsPool.pop() : this.createRow(); - }, deleteRow: function(row) { row.hide(); row.rowindex = -1; @@ -688,34 +635,25 @@ //this.templNormal.moveToY(pos); }, adjustColumnWidth: function(column, width) { - var w = width, ch; - var frozenColumns = this.templFrozen.getElement().rows[0].cells.length; + var frozenColumns = this.grid.getHeader().headerFrozenRow.getElement().rows[0].cells.length; var realColumn = column; var table = null; if(column < frozenColumns) { - table = this.templFrozen.getElement(); + table = this.frozenContentBox.getElement(); } else { - table = this.templNormal.getElement(); + table = this.contentBox.getElement(); realColumn -= frozenColumns; } - for(var i=0; i<this.rowsCount; i++) { - var childs = table.rows[i].cells[realColumn].childNodes; - for (var j=0; j<childs.length; j++) { - ch = childs[j]; - if(ch.tagName && ch.tagName.toLowerCase() == "span") { - - w = width; - if(ClientUILib.isGecko) { - this.helpObj.element = ch.parentNode; - w -= this.helpObj.getBorderWidth("lr") + this.helpObj.getPadding("lr"); - } - this.helpObj.element = $(ch); - this.helpObj.setWidth(w); - break; - } - } - } + var helpObj = this.helpObj; + var id = "bc_" + column; + var spans = $A(table.getElementsByTagName("span")); + spans.each(function(cell) { + if(cell.id == id) { + helpObj.element = $(cell); + helpObj.setWidth(width); + } + }); } }); Added: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter2.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter2.js (rev 0) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter2.js 2007-05-17 18:46:57 UTC (rev 798) @@ -0,0 +1,183 @@ +/* + * TODO: Copyright (c) 2007 Denis Morozov <dmorozov(a)exadel.com&gt; + * + * ... + */ +ClientUILib.declarePackage("ClientUI.controls.grid.GridFooter"); + +ClientUILib.requireClass("ClientUI.common.box.Box"); + +/* +/* GridHeader.js - Grid control header pane + * TODO: add comments + */ +ClientUI.controls.grid.GridFooter = Class.create({ + CLASSDEF: { + name: 'ClientUI.controls.grid.GridFooter', + parent: ClientUI.common.box.Box + } + +}); + +Object.extend(ClientUI.controls.grid.GridFooter.prototype, { + initialize: function(template, grid) { + this.grid = grid; + ClientUI.controls.grid.GridFooter.parentClass.constructor().call(this, template); + this.createControl(template); + }, + createControl: function(template) { + var errMsg = ""; + if(!template) { + errMsg = "Invalid template specified for GridFooter."; + ClientUILib.log(ClientUILogger.ERROR, errMsg); + throw(errMsg); + } + + if(!this.parseTemplate(template)) { + errMsg = "Unable to parse template. GridFooter requires template specified over table element with one row."; + ClientUILib.log(ClientUILogger.ERROR, errMsg); + throw(errMsg); + } + + // Set dimensions + this.setHeight(this.defaultHeight); + this.setWidth(this.defaultWidth); + this.controlCreated = true; + this.updateLayout(); + }, + getRow: function() { + if(!this.footerRow) { + var rowDesc = { + id: "footer", + frozen: this.headerFrozenRow, + normal: this.headerRow, + moveToY: function(y) { + this.frozen.moveToY(y); + this.normal.moveToY(y); + } + }; + + this.footerRow = rowDesc; + } + + return this.footerRow; + }, + parseTemplate: function(template) { + if(!template) { + return false; + } + + var childs = template.childNodes; + for(var i=0; i<childs.length; i++) { + if(childs[i].tagName && childs[i].tagName.toLowerCase() == "div") { + this.container = $(childs[i]); + break; + } + } + + var normal = null, frozen = null; + var childs = this.container.childNodes; + for(var i=0; i<childs.length; i++) { + if(childs[i].id && childs[i].id == "FrozenBox") { + frozen = childs[i]; + } + else if(childs[i].id && childs[i].id == "NormalBox"){ + normal = childs[i]; + } + } + + if(!normal || !frozen) { + errMsg = "Unable to parse template for GridFooter. Unable to find FrozenBox or NormalBox."; + ClientUILib.log(ClientUILogger.ERROR, errMsg); + throw(errMsg); + } + this.contentBox = new ClientUI.common.box.Box(normal); + this.contentBox.makeAbsolute(); + this.frozenContentBox = new ClientUI.common.box.Box(frozen); + this.frozenContentBox.makeAbsolute(); + + // create row template + var ch = this.contentBox.getElement().firstChild; + while(ch) { + if(ch.tagName && ch.tagName.toLowerCase()=="table") { + this.headerRow = new ClientUI.common.box.Box($(ch), null, true); + break; + } + ch = ch.nextSibling; + } + ch = this.frozenContentBox.getElement().firstChild; + while(ch) { + if(ch.tagName && ch.tagName.toLowerCase()=="table") { + this.headerFrozenRow = new ClientUI.common.box.Box($(ch), null, true); + break; + } + ch = ch.nextSibling; + } + + this.helpObj = new ClientUI.common.box.Box(this.frozenContentBox.getElement(), null, true); + this.defaultWidth = this.grid.getHeader().defaultWidth; + this.defaultHeight = Element.getHeight(this.headerRow.getElement().rows[0].cells[0]); + if(ClientUILib.isGecko) { + this.defaultHeight -= this.getBorderWidth("tb") + this.getPadding("tb"); + //this.defaultWidth -= this.getBorderWidth("lr") + this.getPadding("lr"); + } + + if(ClientUILib.isIE) { + this.frozenSubstrate = new ClientUI.common.box.Substrate(null, this.getElement()); + this.frozenSubstrate.getElement().name = this.getElement().id + "FRFrm"; + Element.addClassName(this.frozenSubstrate.getElement(), "ClientUI_HRFrm"); + this.frozenSubstrate.setHeight(this.defaultHeight); + } + return true; + }, + getColumns: function() { + return this._columns; + }, + updateLayout: function() { + if(!this.controlCreated || !this.grid.controlCreated) { + return; + } + ClientUI.controls.grid.GridFooter.parentClass.method("updateLayout").call(this); + + var height = this.getViewportHeight(); + var totalWidth = this.grid.getColumnsTotalWidth(); + var frozenContentWidth = this.grid.getColumnsFrozenWidth(); + + this.contentBox.setWidth(Math.max(this.getWidth(), totalWidth)); + this.contentBox.setHeight(height); + this.contentBox.moveTo(frozenContentWidth, 0); + this.frozenContentBox.setWidth(frozenContentWidth); + this.frozenContentBox.setHeight(height); + this.frozenContentBox.moveTo(0, 0); + var frozenContentWidth = this.grid.getBody().frozenContentBox.getWidth(); + var width = frozenContentWidth+this.grid.getBody().contentBox.getWidth(); + this.setWidth(width); + if(ClientUILib.isIE) + this.frozenSubstrate.setWidth(frozenContentWidth); + }, + adjustScrollPosition: function(pos) { + this.contentBox.moveToX(this.grid.getColumnsFrozenWidth()-pos); + }, + adjustColumnWidth: function(column, width) { + var frozenColumns = this.headerFrozenRow.getElement().rows[0].cells.length; + var realColumn = column; + var table = null; + if(column < frozenColumns) { + table = this.headerFrozenRow.getElement(); + } + else { + table = this.headerRow.getElement(); + realColumn -= frozenColumns; + } + + var helpObj = this.helpObj; + var id = "fc_" + column; + var spans = $A(table.getElementsByTagName("span")); + spans.each(function(cell) { + if(cell.id == id) { + helpObj.element = $(cell); + helpObj.setWidth(width); + } + }); + } +}) Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader.js 2007-05-17 18:46:43 UTC (rev 797) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader.js 2007-05-17 18:46:57 UTC (rev 798) @@ -45,7 +45,6 @@ // create grid header control createControl: function(template) { - // validate template var ch = $(template).firstChild; while(ch) { @@ -65,12 +64,16 @@ ClientUILib.log(ClientUILogger.ERROR, errMsg); throw(errMsg); } + if(!this.parseTemplate(this.template)) { errMsg = "Unable to parse template. GridHeader requires template specified over table element with one row."; ClientUILib.log(ClientUILogger.ERROR, errMsg); throw(errMsg); } + //TODO: delete + document.generateDOMTime = (new Date()).getTime(); + this.contentBox = new ClientUI.common.box.Box(null, this.getElement()); this.contentBox.makeAbsolute(); this.frozenContentBox = new ClientUI.common.box.Box(null, this.getElement()); @@ -87,6 +90,8 @@ this.setWidth(this.defaultWidth); this.controlCreated = true; this.updateLayout(); + + document.generateDOMEndTime = (new Date()).getTime(); }, parseTemplate: function(template) { if(!template || !template.rows || template.rows.length===0) { Added: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader2.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader2.js (rev 0) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader2.js 2007-05-17 18:46:57 UTC (rev 798) @@ -0,0 +1,433 @@ +/* + * TODO: Copyright (c) 2007 Denis Morozov <dmorozov(a)exadel.com&gt; + * + * ... + */ +ClientUILib.declarePackage("ClientUI.controls.grid.GridHeader"); + +ClientUILib.requireClass("ClientUI.common.box.Box"); +ClientUILib.requireClass("ClientUI.common.box.InlineBox"); + +/* + * GridHeader.js - Grid control header pane + * TODO: add comments + */ +ClientUI.controls.grid.GridHeader = Class.create({ + CLASSDEF: { + name: 'ClientUI.controls.grid.GridHeader', + parent: ClientUI.common.box.Box, + sepStyleClass: "ClientUI_Grid_HSep" + } + +}); + +Object.extend(ClientUI.controls.grid.GridHeader.prototype, { + // internal variables + _columns: [], + + // constructor + initialize: function(template, grid) { + this.grid = grid; + + ClientUI.controls.grid.GridHeader.parentClass.constructor().call(this, template); + + // register event handlers + this.eventSepDblClick = this.OnSepDblClick.bindAsEventListener(this); + this.eventSepMouseDown = this.OnSepMouseDown.bindAsEventListener(this); + this.eventSepMouseUp = this.OnSepMouseUp.bindAsEventListener(this); + this.eventSepMouseMove = this.OnSepMouseMove.bindAsEventListener(this); + this.eventCellMouseDown = this.OnCellMouseDown.bindAsEventListener(this); + Event.observe(document, 'mousemove', this.eventSepMouseMove, true); + Event.observe(document, 'mouseup', this.eventSepMouseUp, true); + + this.createControl(template); + }, + + // create grid header control + createControl: function(template) { + var errMsg = ""; + if(!template) { + errMsg = "Invalid template specified for GridHeader."; + ClientUILib.log(ClientUILogger.ERROR, errMsg); + throw(errMsg); + } + + if(!this.parseTemplate(template)) { + errMsg = "Unable to parse template. GridHeader requires template specified over table element with one row."; + ClientUILib.log(ClientUILogger.ERROR, errMsg); + throw(errMsg); + } + + // Set dimensions + this.setHeight(this.defaultHeight); + this.setWidth(this.defaultWidth); + this.controlCreated = true; + this.updateLayout(); + this.hide(); + this.show(); + }, + parseTemplate: function(template) { + if(!template) { + return false; + } + + var childs = template.childNodes; + for(var i=0; i<childs.length; i++) { + if(childs[i].tagName && childs[i].tagName.toLowerCase() == "div") { + this.container = $(childs[i]); + break; + } + } + + var normal = null, frozen = null; + var childs = this.container.childNodes; + for(var i=0; i<childs.length; i++) { + if(childs[i].id && childs[i].id == "FrozenBox") { + frozen = childs[i]; + } + else if(childs[i].id && childs[i].id == "NormalBox"){ + normal = childs[i]; + } + } + + if(!normal || !frozen) { + errMsg = "Unable to parse template for GridHeader. Unable to find FrozenBox or NormalBox."; + ClientUILib.log(ClientUILogger.ERROR, errMsg); + throw(errMsg); + } + this.contentBox = new ClientUI.common.box.Box(normal); + this.contentBox.makeAbsolute(); + this.frozenContentBox = new ClientUI.common.box.Box(frozen); + this.frozenContentBox.makeAbsolute(); + + // create row template + var ch = this.contentBox.getElement().firstChild; + while(ch) { + if(ch.tagName && ch.tagName.toLowerCase()=="table") { + this.headerRow = new ClientUI.common.box.Box($(ch), null, true); + break; + } + ch = ch.nextSibling; + } + ch = this.frozenContentBox.getElement().firstChild; + while(ch) { + if(ch.tagName && ch.tagName.toLowerCase()=="table") { + this.headerFrozenRow = new ClientUI.common.box.Box($(ch), null, true); + break; + } + ch = ch.nextSibling; + } + + this.helpObj = new ClientUI.common.box.Box(this.frozenContentBox.getElement(), null, true); + + var columns = []; + var defaultWidth = 0; + var defaultHeight = 0; + + var eventCellMouseDown = this.eventCellMouseDown.bind(this); + + // Get columns information + var i = 0, h; + var cells = $A(this.headerFrozenRow.getElement().rows[0].cells); + cells.each(function(cell) { + columns[i] = { + width: Element.getWidth(cell), + innerHTML: cell.innerHTML, + styleClass: cell.className, + id: cell.id, + align: cell.align, + valign: cell.vAlign, + title: cell.title, + minWidth: 10, + frozen: true, + fixedWidth: Validators.getBoolean(cell.getAttribute("fixedWidth"), false), + sortable: Validators.getBoolean(cell.getAttribute("sortable"), true), + sorted: Validators.getBoolean(cell.getAttribute("sorted"), "desc") + }; + + if(columns[i].sortable) + Event.observe(cell, 'click', eventCellMouseDown); + h = Element.getHeight(cell); + if(h > defaultHeight) defaultHeight = h; + defaultWidth += columns[i].width; + columns[i].object = new ClientUI.common.box.InlineBox(cell, null, true); + i++; + }); + + cells = $A(this.headerRow.getElement().rows[0].cells); + cells.each(function(cell) { + columns[i] = { + width: Element.getWidth(cell), + innerHTML: cell.innerHTML, + styleClass: cell.className, + id: cell.id, + align: cell.align, + valign: cell.vAlign, + title: cell.title, + minWidth: 10, + frozen: false, + fixedWidth: Validators.getBoolean(cell.getAttribute("fixedWidth"), false), + sortable: Validators.getBoolean(cell.getAttribute("sortable"), true), + sorted: Validators.getBoolean(cell.getAttribute("sorted"), "desc") + }; + + if(columns[i].sortable) + Event.observe(cell, 'click', eventCellMouseDown); + h = Element.getHeight(cell); + if(h > defaultHeight) defaultHeight = h; + defaultWidth += columns[i].width; + columns[i].object = new ClientUI.common.box.InlineBox(cell, null, true); + i++; + }); + + this._columns = columns; + this.defaultHeight = defaultHeight; + this.defaultWidth = defaultWidth; + if(ClientUILib.isGecko) { + this.defaultWidth -= this.getBorderWidth("lr") + this.getPadding("lr"); + this.defaultHeight -= this.getBorderWidth("tb") + this.getPadding("tb"); + } + + var sep, column; + var seps = document.getElementsByClassName("ClientUI_Grid_HSep", this.getElement()); + for(i = 0; i<seps.length; i++) { + sep = seps[i]; + column = parseInt(sep.getAttribute("column")); + this._columns[column].sep = new ClientUI.common.box.InlineBox(sep, null, true); + sep.columnIndex = column; + if(!this._columns[column].fixedWidth) { + Event.observe(sep, 'dblclick', this.eventSepDblClick); + Event.observe(sep, 'mousedown', this.eventSepMouseDown); + } + else { + sep.setStyle({cursor: 'auto'}); + } + } + this.agjustSeparators(); + + if(ClientUILib.isIE) { + this.frozenSubstrate = new ClientUI.common.box.Substrate(null, this.getElement()); + this.frozenSubstrate.getElement().name = this.getElement().id + "HRFrm"; + Element.addClassName(this.frozenSubstrate.getElement(), "ClientUI_HRFrm"); + this.frozenSubstrate.setHeight(this.headerRow.getViewportHeight()); + } + + return true; + }, + agjustSeparators: function() { + var offset = 0; + var fcnt = this.headerFrozenRow.getElement().rows[0].cells.length; + for(var i=0; i<this._columns.length; i++) { + if(i == fcnt) offset = 0; + offset += this._columns[i].width; + this._columns[i].sep.moveToX(offset - 4); + } + }, + getRow: function() { + if(!this.footerRow) { + var rowDesc = { + id: "header", + frozen: this.headerFrozenRow, + normal: this.headerRow, + moveToY: function(y) { + this.frozen.moveToY(y); + this.normal.moveToY(y); + } + }; + + this.footerRow = rowDesc; + } + + return this.footerRow; + }, + updateLayout: function() { + if(!this.controlCreated || !this.grid.controlCreated) { + return; + } + ClientUI.controls.grid.GridHeader.parentClass.method("updateLayout").call(this); + + var height = this.getViewportHeight(); + var totalWidth = this.grid.getColumnsTotalWidth(); + var frozenContentWidth = this.grid.getColumnsFrozenWidth(); + + this.contentBox.setWidth(Math.max(this.getWidth(), totalWidth)); + this.contentBox.setHeight(height); + this.contentBox.moveTo(frozenContentWidth, 0); + this.frozenContentBox.setWidth(frozenContentWidth); + this.frozenContentBox.setHeight(height); + this.frozenContentBox.moveTo(0, 0); + if(ClientUILib.isIE) + this.frozenSubstrate.setWidth(frozenContentWidth); + }, + getColumns: function() { + return this._columns; + }, + // lets implement column resizer + OnSepMouseDown: function(event) { + this.dragColumnInfo = { + srcElement: Event.element(event), + dragStarted: false, + mouseDown: true, + startX: Event.pointerX(event), + originalX: 0 + }; + this.dragColumnInfo.object = this.getColumns()[this.dragColumnInfo.srcElement.columnIndex].object; + this.dragColumnInfo.sep = this.getColumns()[this.dragColumnInfo.srcElement.columnIndex].sep; + this.dragColumnInfo.minWidth = this.getColumns()[this.dragColumnInfo.srcElement.columnIndex].minWidth; + + Event.stop(event); + }, + OnSepMouseUp: function(event) { + if(this.dragColumnInfo && this.dragColumnInfo.dragStarted) { + this.dragColumnInfo.dragStarted = false; + this.dragColumnInfo.mouseDown = false; + var delta = Event.pointerX(event) - this.dragColumnInfo.startX; + var newWidth = this.dragColumnInfo.object.getWidth() + delta; + setTimeout(function() { + this.grid.adjustColumnWidth(this.dragColumnInfo.srcElement.columnIndex, newWidth); + }.bind(this), 10); + } + this._hideSplitter(); + }, + OnSepMouseMove: function(event) { + if(this.dragColumnInfo && this.dragColumnInfo.mouseDown) { + if(!this.dragColumnInfo.dragStarted) { + this.dragColumnInfo.dragStarted = true; + this._showSplitter(this.dragColumnInfo.srcElement.columnIndex); + } + else { + var delta = Event.pointerX(event) - this.dragColumnInfo.startX; + var minColumnWidth = this.dragColumnInfo.object.getWidth() - this.dragColumnInfo.minWidth; + if(delta >= -minColumnWidth) { + var x = this.dragColumnInfo.originalX + delta; + this.columnSplitter.moveToX(x - 6); + } + } + Event.stop(event); + } + }, + OnSepDblClick: function(event) { + ClientUILib.log(ClientUILogger.INFO, "OnSepDblClick"); + }, + _showSplitter: function(index) { + if(!this.columnSplitter) { + this._createSplitter(); + } + + var pos = this.dragColumnInfo.sep.getX(); + if(!this.getColumns()[index].frozen) { + ;//pos += this.grid.getColumnsFrozenWidth(); + } + this.dragColumnInfo.originalX = pos; + this.columnSplitter.show(); + this.columnSplitter.setHeight(this.defaultHeight + this.grid.getBody().contentBox.getHeight()); + this.columnSplitter.moveTo(pos, 0); + }, + _hideSplitter: function() { + if(this.columnSplitter) { + this.columnSplitter.hide(); + } + }, + _createSplitter: function() { + this.columnSplitter = new ClientUI.common.box.Box(null, this.grid.getElement()); + this.columnSplitter.makeAbsolute(); + this.columnSplitter.getElement().addClassName("ClientUI_Grid_HSplit"); + this.columnSplitter.setWidth(10); + this.columnSplitter.getElement().setStyle({backgroundColor: ''}); + this.columnSplitter.getElement().setStyle({zIndex: '100'}); + this.columnSplitter.hide(); + }, + adjustScrollPosition: function(pos) { + this.contentBox.moveToX(this.grid.getColumnsFrozenWidth()-pos); + }, + OnCellMouseDown: function(event) { + var el = Event.element(event); + while(el && !Element.hasClassName(el, "ClientUI_Grid_HC")) { + el = el.parentNode; + } + + if(el && el.columnIndex>=0) { + var order = this.getColumns()[el.columnIndex].sorted; + order = (order == "asc") ? "desc" : "asc"; + this.getColumns()[el.columnIndex].sorted = order; + + for(var i = 0, len = this.getColumns().length; i < len; i++) { + var h = this.getColumns()[i]; + if(i != el.columnIndex) { + Element.setStyle(h.sortDesc, {display: 'none'}); + Element.setStyle(h.sortAsc, {display: 'none'}); + } else{ + Element.setStyle(h.sortDesc, {display: (order == 'desc' ? 'block' : 'none')}); + Element.setStyle(h.sortAsc, {display: (order == 'asc' ? 'block' : 'none')}); + } + } + + this.grid.eventOnSort.fire(el.columnIndex, order); + Event.stop(event); + } + }, + _getVisibleHeaderControls: function() { + var controls = []; + var columns = this.getColumns(); + columns.each(function(column){ + var ctrls = column.object.getElement().getElementsByTagName("select"); + if(ctrls && ctrls.length>0) { + ctrls = $A(ctrls); + ctrls.each(function(ctrl){ + if(Element.visible(ctrl)) { + controls.push(ctrl); + } + }); + } + }); + return controls; + }, + adjustColumnWidth: function(column, width) { + var w = width, ch; + var frozenColumns = this.headerFrozenRow.getElement().rows[0].cells.length; + var realColumn = column; + var table = null; + if(column < frozenColumns) { + table = this.headerFrozenRow.getElement(); + } + else { + table = this.headerRow.getElement(); + realColumn -= frozenColumns; + } + + // Hide controls in IE that flipped in other case + var ctrlsIE = []; + if(ClientUILib.isIE) { + ctrlsIE = this._getVisibleHeaderControls(); + ctrlsIE.each(function(ctrl){ + Element.hide(ctrl); + }); + } + + var childs = table.rows[0].cells[realColumn].childNodes; + this.helpObj.element = $(table.rows[0].cells[realColumn]); + var delta = 0; + if(ClientUILib.isGecko) { + delta = this.helpObj.getBorderWidth("lr") + this.helpObj.getPadding("lr"); + } + this.helpObj.setWidth(width - delta); + delta *= 2; + + for (var j=0; j<childs.length; j++) { + ch = childs[j]; + if(ch.tagName && ch.tagName.toLowerCase() == "span") { + this.helpObj.element = $(ch); + this.helpObj.setWidth(width - delta); + break; + } + } + + if(ClientUILib.isIE) { + ctrlsIE.each(function(ctrl){ + Element.show(ctrl); + }); + } + + this._columns[column].width = width; + } +});