Author: konstantin.mishin Date: 2010-03-16 12:27:40 -0400 (Tue, 16 Mar 2010) New Revision: 16584 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/resources/META-INF/resources/extendedDataTable.css root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.js Log: RF-7869 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 2010-03-16 14:26:13 UTC (rev 16583) +++ root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/ExtendedDataTableRenderer.java 2010-03-16 16:27:40 UTC (rev 16584) @@ -46,8 +46,9 @@ import org.richfaces.component.util.HtmlUtil; @ResourceDependencies({ @ResourceDependency(library = "javax.faces", name = "jsf.js"), - @ResourceDependency(name = "jquery.js"), @ResourceDependency(name = "jquery.position.js"), @ResourceDependency(name = "richfaces.js"), - @ResourceDependency(name = "extendedDataTable.js"), @ResourceDependency(name = "extendedDataTable.css") }) + @ResourceDependency(name = "jquery.js"), @ResourceDependency(name = "jquery.position.js"), + @ResourceDependency(name = "richfaces.js"), @ResourceDependency(name = "extendedDataTable.js"), + @ResourceDependency(name = "extendedDataTable.css") }) public class ExtendedDataTableRenderer extends AbstractTableRenderer { private class RendererState extends RowHolderBase { @@ -128,12 +129,6 @@ writer.writeAttribute(HTML.CLASS_ATTRIBUTE, HtmlUtil.concatClasses("rich-extable", (String) component .getAttributes().get("styleClass")), null); getUtils().writeAttribute(writer, HTML.STYLE_ATTRIBUTE, component.getAttributes().get("style")); - UIComponent caption = component.getFacet("caption"); - if (caption != null && caption.isRendered()) { - writer.startElement(HTML.DIV_ELEM, component); - caption.encodeAll(context); - writer.endElement(HTML.DIV_ELEM); - } UIComponent header = component.getFacet("header"); if (header != null && header.isRendered()) { writer.startElement(HTML.DIV_ELEM, component); @@ -192,6 +187,10 @@ writer.endElement(HTML.TD_ELEM); writer.endElement(HTML.TR_ELEMENT); writer.endElement(HTML.TABLE_ELEMENT); + writer.startElement(HTML.DIV_ELEM, component); + writer.writeAttribute(HTML.ID_ATTRIBUTE, component.getClientId(context) + ":rm", null); + writer.writeAttribute(HTML.CLASS_ATTRIBUTE, "rich-extable-reorder-marker", null); + writer.endElement(HTML.DIV_ELEM); writer.startElement(HTML.INPUT_ELEM, component); writer.writeAttribute(HTML.ID_ATTRIBUTE, component.getClientId(context) + ":wi", null); writer.writeAttribute(HTML.NAME_ATTRIBUTE, component.getClientId(context) + ":wi", null); @@ -367,11 +366,14 @@ .writeAttribute(HTML.CLASS_ATTRIBUTE, HtmlUtil.concatClasses("rich-extable-" + facetName + "-cell", "rich-extable-cell-width-" + column.getId(), (String) column.getAttributes().get(classAttribute)), null); + writer.startElement(HTML.DIV_ELEM, column); + writer.writeAttribute(HTML.CLASS_ATTRIBUTE, "rich-extable-" + facetName + "-cell-content", null); UIComponent facet = column.getFacet(facetName); if (facet != null && facet.isRendered()) { facet.encodeAll(context); } writer.endElement(HTML.DIV_ELEM); + writer.endElement(HTML.DIV_ELEM); writer.endElement(HTML.TD_ELEM); } } @@ -396,8 +398,11 @@ writer.startElement(HTML.DIV_ELEM, table); writer.writeAttribute(HTML.CLASS_ATTRIBUTE, "rich-extable-cell rich-extable-cell-width-" + column.getId(), null); + writer.startElement(HTML.DIV_ELEM, column); + writer.writeAttribute(HTML.CLASS_ATTRIBUTE, "rich-extable-cell-content", null); renderChildren(context, column); writer.endElement(HTML.DIV_ELEM); + writer.endElement(HTML.DIV_ELEM); writer.endElement(HTML.TD_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 2010-03-16 14:26:13 UTC (rev 16583) +++ root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.css 2010-03-16 16:27:40 UTC (rev 16584) @@ -95,4 +95,17 @@ overflow: hidden; border-bottom: 1px solid #C4C0C9; border-right: 1px solid #C4C0C9; +} + +.rich-extable-reorder-marker { + position:absolute; + height: 9px; + font-size: 9px; + width:9px; + background-image: url("#{resource['reorderMarker.gif']}"); + display: none; +} + +.rich-extable-cell-content, .rich-extable-header-cell-content, .rich-extable-footer-cell-content{ + padding: 2px; } \ No newline at end of file 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 2010-03-16 14:26:13 UTC (rev 16583) +++ root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.js 2010-03-16 16:27:40 UTC (rev 16584) @@ -44,6 +44,7 @@ var contentElement = jQuery(bodyElement).children("div:first").get(0); var dragElement = document.getElementById(id + ":d"); var reorderElement = document.getElementById(id + ":r"); + var reorderMarkerElement = document.getElementById(id + ":rm"); var widthInput = document.getElementById(id + ":wi"); var normalPartStyle = richfaces.getCSSRule(".rich-extable-part-width").style; @@ -143,15 +144,15 @@ jQuery(dragElement).setPosition({left:Math.max(resizeData.left + MIN_WIDTH, event.pageX)}); return false; }; + var beginResize = function(event) { var className = this.parentNode.className.match(new RegExp(WIDTH_CLASS_NAME_BASE + "[^\w]*"))[0]; - var thisElement = jQuery(this); resizeData = { className : className, - left : thisElement.parent().offset().left + left : jQuery(this).parent().offset().left }; - dragElement.style.height = element.clientHeight + "px"; - jQuery(dragElement).setPosition({top:thisElement.offset().top, left:event.pageX}); + dragElement.style.height = element.offsetHeight + "px"; + jQuery(dragElement).setPosition({top:jQuery(element).offset().top, left:event.pageX}); dragElement.style.display = "block"; jQuery(document).bind("mousemove", drag); jQuery(document).one("mouseup", endResize); @@ -183,12 +184,28 @@ var beginReorder = function(event) { idOfReorderingColumn = this.className.match(new RegExp(WIDTH_CLASS_NAME_BASE + "[^\w]*"))[0].substr(WIDTH_CLASS_NAME_BASE.length); //To try to do this without substr. jQuery(document).bind("mousemove", reorder); - jQuery(element).children(".rich-extable-header").find(".rich-extable-header-cell").one("mouseup", endReorder); + jQuery(element).children(".rich-extable-header").find(".rich-extable-header-cell").bind("mouseover", overReorder); jQuery(document).one("mouseup", cancelReorder); return false; }; + var overReorder = function(event) { + var thisElement = jQuery(this); + var offset = thisElement.offset(); + jQuery(reorderMarkerElement).setPosition({top:offset.top + thisElement.height(), left:offset.left - 5}); + reorderMarkerElement.style.display = "block"; + thisElement.one("mouseout", outReorder); + thisElement.one("mouseup", endReorder); + }; + + var outReorder = function(event) { + reorderMarkerElement.style.display = ""; + jQuery(this).unbind("mouseup", endReorder); + }; + var endReorder = function(event) { + reorderMarkerElement.style.display = ""; + jQuery(this).unbind("mouseout", outReorder); var id = this.className.match(new RegExp(WIDTH_CLASS_NAME_BASE + "[^\w]*"))[0].substr(WIDTH_CLASS_NAME_BASE.length); //To try to do this without substr. var colunmsOrder = ""; jQuery(element).children(".rich-extable-header").find(".rich-extable-header-cell").each(function() { @@ -214,7 +231,7 @@ var cancelReorder = function(event) { jQuery(document).unbind("mousemove", reorder); - jQuery(element).children(".rich-extable-header").find(".rich-extable-header-cell").unbind("mouseup", endReorder); + jQuery(element).children(".rich-extable-header").find(".rich-extable-header-cell").unbind("mouseover", overReorder); reorderElement.style.display = "none"; };