Author: konstantin.mishin Date: 2009-12-23 14:00:19 -0500 (Wed, 23 Dec 2009) New Revision: 16207 Modified: root/examples-sandbox/trunk/components/tables/src/main/webapp/extendedtable.xhtml root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/ExtendedDataTableRenderer.java root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.css root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.js Log: RF-7868 Modified: root/examples-sandbox/trunk/components/tables/src/main/webapp/extendedtable.xhtml =================================================================== --- root/examples-sandbox/trunk/components/tables/src/main/webapp/extendedtable.xhtml 2009-12-23 15:39:05 UTC (rev 16206) +++ root/examples-sandbox/trunk/components/tables/src/main/webapp/extendedtable.xhtml 2009-12-23 19:00:19 UTC (rev 16207) @@ -43,7 +43,7 @@ <h:body> <h:form id="form1"> - <rich:extendedDataTable frozenColumns="1" var="record" value="#{dataBean.employeeList}" styleClass="extendedDataTable"> + <rich:extendedDataTable frozenColumns="2" var="record" value="#{dataBean.employeeList}" styleClass="extendedDataTable"> <rich:column id="column_name"> <f:facet name="header"> <h:outputText id="columnHeader1" value="Column Header Facet"/> @@ -64,6 +64,9 @@ <rich:column id="column_email" width="300px"> <h:outputText value="#{record.EMail}" /> </rich:column> + <rich:column id="column_email1" width="300px"> + <h:outputText value="#{record.EMail}" /> + </rich:column> </rich:extendedDataTable> </h:form> </h:body> Modified: root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/ExtendedDataTableRenderer.java =================================================================== --- root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/ExtendedDataTableRenderer.java 2009-12-23 15:39:05 UTC (rev 16206) +++ root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/ExtendedDataTableRenderer.java 2009-12-23 19:00:19 UTC (rev 16207) @@ -134,6 +134,10 @@ @Override protected void doEncodeEnd(ResponseWriter writer, FacesContext context, UIComponent component) throws IOException { + writer.startElement(HTML.DIV_ELEM, component); + writer.writeAttribute(HTML.ID_ATTRIBUTE, component.getClientId(context) + ":d", null); + writer.writeAttribute(HTML.CLASS_ATTRIBUTE, "rich-extable-drag", null); + writer.endElement(HTML.DIV_ELEM); writer.startElement(HTML.SCRIPT_ELEM, component); writer.writeAttribute(HTML.TYPE_ATTR, "text/javascript", null); writer.write("new RichFaces.ExtendedDataTable('" + component.getClientId(context) + "');"); @@ -274,9 +278,7 @@ writer.writeAttribute(HTML.CLASS_ATTRIBUTE, "rich-extable-resizer-holder rich-extable-cell-width-" + column.getId(), null); writer.startElement(HTML.DIV_ELEM, column); - String width = getColumnWidth(column); - int left = Integer.parseInt(width.split("px")[0]) - 3; - writer.writeAttribute(HTML.STYLE_ATTRIBUTE, "left:" + left + "px;", null); + writer.writeAttribute(HTML.ID_ATTRIBUTE, column.getClientId(context) + ":r", null); writer.writeAttribute(HTML.CLASS_ATTRIBUTE, "rich-extable-resizer", null); writer.endElement(HTML.DIV_ELEM); writer.endElement(HTML.DIV_ELEM); Modified: root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.css =================================================================== --- root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.css 2009-12-23 15:39:05 UTC (rev 16206) +++ root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.css 2009-12-23 19:00:19 UTC (rev 16207) @@ -62,12 +62,21 @@ .rich-extable-resizer { background-color: #C4C0C9; cursor:e-resize; - font-size:20px; height:20px; /*TODO*/ position:absolute; + left: 100%; + margin-left: -3px; width:6px; } +.rich-extable-drag{ + cursor:e-resize; + position:absolute; + background-color: #848089; + width:1px; + display: none; +} + .rich-extable-cell, .rich-extable-header-cell, .rich-extable-footer-cell{ height: 20px; overflow: hidden; Modified: root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.js =================================================================== --- root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.js 2009-12-23 15:39:05 UTC (rev 16206) +++ root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.js 2009-12-23 19:00:19 UTC (rev 16207) @@ -35,21 +35,29 @@ }; richfaces.ExtendedDataTable = function(id) { + var WIDTH_CLASS_NAME_BASE = ".rich-extable-cell-width-"; + var MIN_WIDTH = 20; + var element = document.getElementById(id); var bodyElement = document.getElementById(id + ":b"); var contentElement = bodyElement.firstChild;//TODO Richfaces.firstDescendant; //TODO var marginElement = contentElement.firstChild;this.marginElement = Richfaces.firstDescendant(this.contentElement); var dataTableElement = contentElement.lastChild;//TODO this.dataTableElement = Richfaces.lastDescendant(this.contentElement); var frozenHeaderPartElement = document.getElementById(id + ":frozenHeader"); + var dragElement = document.getElementById(id + ":d"); var normalPartStyle = richfaces.getCSSRule(".rich-extable-part-width").style; - var resizerHolderStyle = richfaces.getCSSRule(".rich-extable-resizer-holder").style; + var resizerHolders = jQuery(element).children(".rich-extable-header").find(".rich-extable-resizer-holder").get(); var idSuffixs = [":header", ":body", ":footer"]; + var frozenColumnCount = frozenHeaderPartElement ? frozenHeaderPartElement.firstChild.rows[0].cells.length : 0;//TODO Richfaces.firstDescendant; + var rows = document.getElementById(id + idSuffixs[1]).firstChild.rows.length;//TODO Richfaces.firstDescendant; var scrollElement = document.getElementById(id + idSuffixs[2]); + var resizeData = {}; + var updateLayout = function() { var offsetWidth = frozenHeaderPartElement ? frozenHeaderPartElement.offsetWidth : 0; normalPartStyle.width = element.clientWidth - offsetWidth + "px"; @@ -68,23 +76,87 @@ bodyElement.style.height = height + "px"; }; - var initializeLayout = function() { - //TODO contentElement.style.height = (rowCount * dataTableElement.offsetHeight / rows) + "px"; - updateLayout(); + var adjustResizers = function() { + var scrollLeft = scrollElement.scrollLeft; + var clientWidth = element.clientWidth - 3; + var i = 0; + for (; i < frozenColumnCount; i++) { + if (clientWidth > 0) { + resizerHolders[i].style.display = "none"; + resizerHolders[i].style.display = ""; + clientWidth -= resizerHolders[i].offsetWidth; + } + if (clientWidth <= 0) { + resizerHolders[i].style.display = "none"; + } + } + scrollLeft -= 3; + for (; i < resizerHolders.length; i++) { + if (clientWidth > 0) { + resizerHolders[i].style.display = "none"; + if (scrollLeft > 0) { + resizerHolders[i].style.display = ""; + scrollLeft -= resizerHolders[i].offsetWidth; + if (scrollLeft > 0) { + resizerHolders[i].style.display = "none"; + } else { + clientWidth += scrollLeft; + } + } else { + resizerHolders[i].style.display = ""; + clientWidth -= resizerHolders[i].offsetWidth; + } + } + if (clientWidth <= 0) { + resizerHolders[i].style.display = "none"; + } + } }; - + var updateScrollPosition = function() { var scrollLeft = scrollElement.scrollLeft; for (var i = 0; i < idSuffixs.length; i++) { document.getElementById(id + idSuffixs[i]).scrollLeft = scrollLeft;//TODO Not use getElementById here } - resizerHolderStyle.display = "none"; - resizerHolderStyle.display = ""; + adjustResizers(); }; + var initializeLayout = function() { + //TODO contentElement.style.height = (rowCount * dataTableElement.offsetHeight / rows) + "px"; + updateLayout(); + updateScrollPosition(); //TODO Restore horizontal scroll position + }; + + var drag = function(event) { + dragElement.style.left = Math.max(resizeData.left + MIN_WIDTH, event.clientX); + }; + var beginResize = function(event) { + var parts = this.id.split(":"); + resizeData = { + id : parts[parts.length - 2], + left : jQuery(this.parentNode).offset().left + }; + dragElement.style.top = jQuery(this).offset().top; + dragElement.style.left = event.clientX; + dragElement.style.height = element.clientHeight; + dragElement.style.display = "block"; + jQuery(document).bind("mousemove", drag); + jQuery(document).one("mouseup", endResize); + return false; + }; + + var endResize = function(event) { + jQuery(document).unbind("mousemove", drag); + dragElement.style.display = "none"; + richfaces.getCSSRule(WIDTH_CLASS_NAME_BASE + resizeData.id).style.width = Math.max(MIN_WIDTH, event.clientX - resizeData.left) + "px"; + updateLayout(); + adjustResizers(); + }; + jQuery(document).ready(initializeLayout); jQuery(window).bind("resize", updateLayout); jQuery(scrollElement).bind("scroll", updateScrollPosition); + jQuery(element).children(".rich-extable-header").find(".rich-extable-resizer").bind("mousedown", beginResize); }; }(window.RichFaces, jQuery));