Author: vmolotkov Date: 2007-11-16 14:13:18 -0500 (Fri, 16 Nov 2007) New Revision: 4049 Added: trunk/sandbox/ui/listShuttle/src/main/resources/org/ trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/ trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/ trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/ trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/css/ trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/css/listShuttle.xcss trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/scripts/ trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/scripts/ListBase.js trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/scripts/ListShuttle.js trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/scripts/OrderingList.js trunk/sandbox/ui/listShuttle/src/main/templates/org/ trunk/sandbox/ui/listShuttle/src/main/templates/org/richfaces/ trunk/sandbox/ui/listShuttle/src/main/templates/org/richfaces/htmlListShuttle.jspx Log: list shuttle Added: trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/css/listShuttle.xcss =================================================================== --- trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/css/listShuttle.xcss (rev 0) +++ trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/css/listShuttle.xcss 2007-11-16 19:13:18 UTC (rev 4049) @@ -0,0 +1,204 @@ +<?xml version="1.0" encoding="UTF-8"?> +<f:template xmlns:f='http:/jsf.exadel.com/template' + xmlns:u='http:/jsf.exadel.com/template/util' + xmlns="http://www.w3.org/1999/xhtml" > + +<f:verbatim><![CDATA[ + + +.ol_button_layout{padding : 15px 8px 15px 0px;} +.ol_button_border{border : 1px solid #bfbfc0; margin-bottom : 3px;} +.ol_button{background : url(ol_images/bg_header.png) top left #C6D6EA repeat-x; cursor : pointer; padding : 2px; font-family : Arial; font-size :11px;} +.ol_button_light{background : url(ol_images/bg_header.png) top left #C6D6EA repeat-x; border : 1px solid #E79A00;cursor : pointer; padding : 1px; font-family : Arial; font-size :11px;} +.ol_button_dis{background : #bfbfc0; border : 1px solid #bfbfc0; margin-bottom : 3px; padding : 1px} +.ol_button_press{background : url(ol_images/bg_press.png) top left repeat-x #EAF0F8; border : 1px solid #E79A00; padding : 2px 0px 0px 2px;font-family : Arial; font-size :11px;} +.ol_center_button_col_valign{vertical-align : middle} +.ol_right_button_col_valign{vertical-align : middle} +.ol_button_content{font-family : Arial; font-size :11px; padding : 0px 0px 0px 0px; text-align : center;} + +/* +.ol_button_clicked { + background : repeat scroll left top; + border : 1px solid #bfbfc0; + margin-bottom : 3px; + cursor : pointer; + padding : 1px; +} + +.ol_button_dis { + background : #bfbfc0; + border : 1px solid #bfbfc0; + margin-bottom : 3px; + padding : 1px; +} + +.ol_button_press { + background : #4A75B5; + border : 1px solid #bfbfc0; + margin-bottom : 3px; + padding : 2px 0px 0px 2px; +} +*/ + +.ol_caption { + padding : 1px; + height: 8px; +} + +.ol_body{border : 0px solid #bfbfc0;} + +.ol_label{font-family : Arial; font-size :11px; font-weight : bold;} + +.ol_out_label{padding : 3px 3px 3px 8px} + +.ol_list{background : #FFFFFF; border : 1px solid #bfbfc0;} + +.ol_outputlist{ margin : 0px 8px 8px 8px;} + +.ol_list_content { + overflow-y : scroll; + overflow-x: auto; + /*width: 300px; + height: 232px;*/ + width: 200px; + height: 150px; +} + +.ol_list_header { + overflow: hidden; + /*width: 300px;*/ + height: 18px; +} + +.ol_internal_header_tab { + background : repeat scroll left top; + /*width : 100%;*/ +} + +.ol_internal_header_tab th{background : url(ol_images/bg_header.png) top left repeat-x #C6D6EA; color : #000000; font-family : Arial; font-size :11px; font-weight : normal; border-bottom : 1px solid #bfbfc0;border-right : 1px solid #bfbfc0;border-left : 1px solid #EAF0F8;border-top : 1px solid #FFFFFF; padding : 2px} + +.ol_internal_header_tab .ol_endcol { + border-right : 0px; + white-space: nowrap; +} + +.ol_internal_tab { + width : 100%; +} + +.ol_internal_tab .ol_endcol{border-right : 0px;} + +.ol_internal_tab td{font-family : Arial; font-size :11px; border-bottom : 1px solid #bfbfc0; border-top : 1px solid #FFFFFF; padding : 2px;} + +.ol_internal_tab tr.ol_select{background : #EAF0F8} + +.ol_internal_tab tr.ol_active { + background : #EAF0F8; color : #4A75B5; +} + +.ol_internal_tab tr.ol_active td{ + color : #4A75B5; +} + +.ol_internal_tab tr.ol_normal { +} + +.ol_control_shown { + /*visibility: visible;*/ + display: block; +} +.ol_control_hidden { + /*visibility: hidden;*/ + display: none; +} + +.body { + -moz-user-select: none; +} +]]> +</f:verbatim> + +<u:selector name=".ol_cell, .ol_cell *"> + <u:style name="color" skin="generalTextColor"/> + <u:style name="font-size" skin="generalSizeFont"/> + <u:style name="font-family" skin="generalFamilyFont"/> + <u:style name="border" value="0"/> + <u:style name="white-space" value="nowrap"/> +</u:selector> +<u:selector name=".ol_control_bn_up"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.OrderingListIconUp" /> + </u:style> +</u:selector> +<u:selector name=".ol_control_bn_down"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.OrderingListIconDown" /> + </u:style> +</u:selector> +<u:selector name=".ol_control_bn_top"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.OrderingListIconTop" /> + </u:style> +</u:selector> +<u:selector name=".ol_control_bn_bottom"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.OrderingListIconBottom" /> + </u:style> +</u:selector> +<u:selector name=".ol_control_dbn_up"> + <u:style name="disabled" value="true"/> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.OrderingListIconUpDisabled" /> + </u:style> +</u:selector> +<u:selector name=".ol_control_dbn_down"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.OrderingListIconDownDisabled" /> + </u:style> +</u:selector> +<u:selector name=".ol_control_dbn_top"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.OrderingListIconTopDisabled" /> + </u:style> +</u:selector> +<u:selector name=".ol_control_dbn_bottom"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.OrderingListIconBottomDisabled" /> + </u:style> +</u:selector> + +<u:selector name=".ol_button"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.gradientimages.OrderingListHeaderGradient" /> + </u:style> + <u:style name="background-color" skin="headerBackgroundColor" /> +</u:selector> + +<u:selector name=".ol_button_clicked"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.gradientimages.OrderingListClickedGradient" /> + </u:style> + <u:style name="background-color" skin="headerBackgroundColor" /> +</u:selector> + +<u:selector name=".ol_internal_header_tab th"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.gradientimages.OrderingListHeaderGradient" /> + </u:style> + <u:style name="background-color" skin="headerBackgroundColor" /> +</u:selector> + +<u:selector name=".ol_internal_tab tr.ol_select"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.gradientimages.OrderingListSelectGradient" /> + </u:style> + <u:style name="background-color" skin="additionalBackgroundColor" /> +</u:selector> + +<u:selector name=".ol_internal_tab tr.ol_active"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.gradientimages.OrderingListSelectGradient" /> + </u:style> + <u:style name="background-color" skin="additionalBackgroundColor" /> +</u:selector> +</f:template> \ No newline at end of file Added: trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/scripts/ListBase.js =================================================================== --- trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/scripts/ListBase.js (rev 0) +++ trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/scripts/ListBase.js 2007-11-16 19:13:18 UTC (rev 4049) @@ -0,0 +1,310 @@ +if(!window.Richfaces) window.Richfaces = {}; + +Richfaces.ListBase.prototype = { + initialize : function(containerId, contentTableId, headerTableId, focusKeeperId, valueKeeperId, + onclickControlId) { + this.container = $(containerId); + this.shuttleTable = $(contentTableId); + this.valueKeeper = $(valueKeeperId); + this.focusKeeper = $(focusKeeperId); + this.focusKeeper.focused = false; + this.setFocus(); + this.focusKeeper.observe("keydown", (function(e) {this.onkeydownHandler(window.event || e)}).bindAsEventListener(this)); + this.focusKeeper.observe("blur", function (e) {this.focusListener(e);}.bindAsEventListener(this)); + + this.shuttleTbody = this.shuttleTable.tBodies[0]; + + this.items = null; + this.selectedItems = new Array(); + this.retrieveShuttleItems(containerId); + + this.shuttle = null; + this.sortOrder = Shuttle.ASC; + + this.activeItem = null; + + this.onorderchanged = onorderchanged; + + this.shuttleTop = LayoutManager.getElemXY(this.shuttleTable).top; + + $(contentTableId).observe("click", function(e) {this.onclickHandler(window.event || e)}.bindAsEventListener(this)); + }, + + retrieveShuttleItems : function(containerId) { + var rows = this.shuttleTbody.rows; + this.shuttleItems = new Array(); + var id; + + for (var i = 0; i < rows.length; i++) { + var row = rows[i]; + id = row.id.split(containerId + ":")[1]; + this.shuttleItems[i] + = new Richfaces.SelectItem(null, (id || i), + ((Richfaces.SelectItems.isSelected(row)) ? true : false), row); + if (Richfaces.SelectItems.isSelected(row)) { + this.selectedItems.push(row); + } + if (Richfaces.SelectItems.isActive(row)) { + this.activeItem = row; + } + } + }, + + getExtremeItem : function(position) { //FIXME + var extremeItem = this.selectedItems[0]; + var currentItem; + + for (var i = 1; i < this.selectedItems.length; i++) { + currentItem = this.selectedItems[i]; + if (position == "first") { + if (currentItem.rowIndex < extremeItem.rowIndex) { + extremeItem = currentItem; + } + } else { + if (currentItem.rowIndex > extremeItem.rowIndex) { + extremeItem = currentItem; + } + } + } + return extremeItem; + }, + + getEventTargetRow : function(event) { + var activeElem; + if (event.rangeParent) { + //activeElem = event.rangeParent.parentNode; + activeElem = event.target; + } else { + activeElem = event.srcElement; + } + + if (activeElem == null) { + return; + } + + if (activeElem.tagName && Shuttle.CONTROL_SET.indexOf(activeElem.tagName) != -1) { + return; + } + + while (activeElem.tagName.toLowerCase() != "tr") { + activeElem = activeElem.parentNode; + if (!activeElem.tagName) { + return; //for IE + } + } + + return activeElem; + }, + + onkeydownHandler : function(event) { + var action = null; + switch (event.keyCode) { + case 34 : action = 'last'; this.moveSelectedItems(action ,event); break; //page down + case 33 : action = 'first'; this.moveSelectedItems(action, event); break; //page up + case 38 : //up arrow + action = 'up'; + this.moveActiveItem(action, event); + break; + case 40 : //down arrow + action = 'down'; + this.moveActiveItem(action, event); + break; + case 65 : // Ctrl + A + if (event.ctrlKey) { + this.selectAll(); + Shuttle.stopPropogation(event); + } + Richfaces.SelectItems.doActive(this.activeItem); + this.saveState(); + break; + case 32 : this.invertSelection(event); this.saveState(); break; //blank + } + }, + + invertSelection : function(event) { + var eventItem = this.activeItem; + var eventShuttleItem = this.getSelectItemByNode(eventItem); + if (eventShuttleItem._selected) { + eventShuttleItem._selected = false; + this.selectedItems.remove(eventShuttleItem); + } else { + eventShuttleItem._selected = true; + this.selectedItems.push(eventShuttleItem); + } + }, + + moveActiveItem : function(action, event) { + var item = this.activeItem; + var rows = this.shuttleTbody.rows; + if ((action == 'up') && (item.rowIndex > 0)) { + this.changeActiveItems(rows[item.rowIndex - 1], item); + } else if ((action == 'down') && (item.rowIndex < this.shuttleItems.length - 1)) { + this.changeActiveItems(rows[item.rowIndex + 1], item); + } + + this.saveState(); + this.autoScrolling(action, event); + this.controlListManager(); + }, + + changeActiveItems : function(newItem, item) { + var shuttleItem = this.getSelectItemByNode(item); + var newShuttleItem = this.getSelectItemByNode(newItem); + + this.resetMarked(); + + Richfaces.SelectItems.doActive(newItem); + newItem._selected = true; + this.activeItem = newItem; + this.selectedItems.push(newItem); + }, + + selectAll : function() { + var startIndex = 0; + var endIndex = this.shuttleItems.length - 1; + this.selectItemRange(startIndex, endIndex); + }, + + /** + * Click handler + */ + selectionItem : function(activeItem) { + var markedItem = this.getSelectItemByNode(activeItem); + var markedShuttleItem = activeItem; + + if (markedItem != null) { + this.resetMarked(); + if (markedItem._selected) { + markedItem._selected = false; + } else { + markedItem._selected = true; + this.selectedItems[0] = markedShuttleItem; + } + } + }, + + /** + * CTRL+Click handler + */ + addSelectedItem : function(activeItem) { + var markedItem = this.getSelectItemByNode(activeItem); + var markedShuttleItem = activeItem; + + if (markedItem._selected) { + this.selectedItems.remove(markedShuttleItem); + markedItem._selected = false; + } else { + markedItem._selected = true; + this.selectedItems.push(markedShuttleItem); + } + + Richfaces.SelectItems.doSelect(this.activeItem); + + if (this.activeItem && !this.getSelectItemByNode(this.activeItem)._selected) { + Richfaces.SelectItems.doNormal(this.activeItem); + } + }, + + /** + * Shift+Click handler + */ + selectItemGroup : function(currentItem) { + //FIXME + var activeItemIndex = this.activeItem.rowIndex; + var startIndex; + var endIndex; + + if (currentItem.rowIndex > activeItemIndex) { + startIndex = activeItemIndex; + endIndex = currentItem.rowIndex; + } else { + startIndex = currentItem.rowIndex; + endIndex = activeItemIndex; + } + + this.resetMarked(); + + this.selectItemRange(startIndex, endIndex); + }, + + selectItemRange : function(startIndex, endIndex) { + var rows = this.shuttleTbody.rows; + for (var i = startIndex; i <= endIndex; i++) { + Richfaces.SelectItems.doSelect(rows[i]); + this.selectedItems.push(rows[i]); + this.getSelectItemByNode(rows[i])._selected = true; + } + }, + + resetMarked : function() { + var rows = this.shuttleTbody.rows; + for (var i = 0; i < rows.length; i++) { + var shuttleItem = rows[i]; + Richfaces.SelectItems.doNormal(shuttleItem); + this.getSelectItemByNode(shuttleItem)._selected = false; //FIXME + } + this.selectedItems.length = 0; + }, + + getSelectItemByNode : function(selectItemNode) { + for (var i = 0; i < this.shuttleItems.length; i++) { + var item = this.shuttleItems[i]; + if (selectItemNode.rowIndex == item._node.rowIndex) { + return item; + } + } + return null; + }, + + autoScrolling : function(action, event) { + this.selectedItems.sort(this.compareByRowIndex); + var increment; + var scrollTop = this.shuttleTable.parentNode.scrollTop; + if (action == 'up' || action == 'first') { + var targetItemTop = LayoutManager.getElemXY(this.selectedItems[0]).top; + increment = (targetItemTop - scrollTop) - this.shuttleTop; + if (increment < 0) { + this.shuttleTable.parentNode.scrollTop += increment; + } + } else if (action == 'down' || action == 'last') { + var item = this.selectedItems[this.selectedItems.length - 1]; + targetItemBottom = LayoutManager.getElemXY(this.selectedItems[this.selectedItems.length - 1]).top + item.offsetHeight; + var increment = (targetItemBottom - scrollTop) - (this.shuttleTop + this.shuttleTable.parentNode.offsetHeight - LayoutManager.SCROLL_WIDTH); + if (increment > 0) { + this.shuttleTable.parentNode.scrollTop += increment; + } + } + Event.stop(event); + }, + + setFocus : function() { + this.focusKeeper.focus(); + this.focusKeeper.focused = true; + if (this.isListActive()) { + this.shuttleTable.className = Shuttle.ORDERING_LIST_CLASSES.active; + } + }, + + focusListener : function(e) { + e = e || window.event; + this.focusKeeper.focusused = false; + this.shuttleTable.className = Shuttle.ORDERING_LIST_CLASSES.normal; + }, + + compareByLabel : function(obj1, obj2) { + obj1 = obj1._label; + obj2 = obj2._label; + return Richfaces.ListBase.compare(obj1, obj2); + }, + + compareByRowIndex : function(obj1, obj2) { + obj1 = obj1.rowIndex; + obj2 = obj2.rowIndex; + return Richfaces.ListBase.compare(obj1, obj2); + } +} + + +Richfaces.ListBase.compare = function(obj1, obj2) { + return ((obj1 == obj2) ? 0 : ((obj1 < obj2) ? -1 : 1)); +} Added: trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/scripts/ListShuttle.js =================================================================== Added: trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/scripts/OrderingList.js =================================================================== --- trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/scripts/OrderingList.js (rev 0) +++ trunk/sandbox/ui/listShuttle/src/main/resources/org/richfaces/renderkit/html/scripts/OrderingList.js 2007-11-16 19:13:18 UTC (rev 4049) @@ -0,0 +1,156 @@ +if(!window.Richfaces) window.Richfaces = {}; +Object.extend(OrderingList, ListBase); + +Richfaces.OrderingList = { + initialize: function(ids, onorderchanged) { + this.controlList = null; + this.onorderchanged = onorderchanged; + + this.initControlList(ids); + }, + + initControlList : function(ids) { + for (var i = 0; i < ids.length; i++) { + var id = ids[i]; + var node = document.getElementById(containerId + id[0]); + var disNode = document.getElementById(containerId + id[1]); + if (node && disNode) { + Shuttle.addClickListener(node, Shuttle.HANDLERS[id[0]].bindAsEventListener(this)); + this.controlList[i] = new Control(node, disNode, false, false, id[0]); + } + } + this.controlListManager(); + }, + + controlListManager : function() { + this.selectedItems.sort(this.compareByRowIndex); + var control; + //FIXME + if ((this.shuttleItems.length <= 1) || (this.selectedItems.length == 0)) { + this.controlsProcessing(["first", "last", "down", "up"]); + } else if (this.selectedItems[0].rowIndex == 0) { + this.controlsProcessing(["first", "up"]); + } else if (this.selectedItems[this.selectedItems.length - 1].rowIndex == (this.shuttleItems.length - 1)) { + this.controlsProcessing(["down", "last"]); + } else { + this.controlsProcessing(); + } + }, + + controlsProcessing : function(disabledControls) { + for (var i = 0; i < this.controlList.length; i++) { + control = this.controlList[i]; + if (control != null) { + if (disabledControls != null && disabledControls.indexOf(control.action) != -1) control.doDisable(); + else control.doEnable(); + } + } + }, + + moveSelectedItems : function(action, event) { + event = window.event||event; + var rows = this.shuttleTbody.rows; + var item; + if (this.selectedItems.length > 0) { + this.selectedItems.sort(this.compareByRowIndex); + + if ((action == 'up') && this.getExtremeItem("first").previousSibling) { + for (var i = 0; i < this.selectedItems.length; i++) { + item = this.selectedItems[i]; + item.parentNode.insertBefore(item, item.previousSibling); + } + } else if ((action == 'down') && this.getExtremeItem("last").nextSibling) { + for (var i = this.selectedItems.length - 1; i > -1; i--) { + item = this.selectedItems[i]; + item.parentNode.insertBefore(item.nextSibling, item); + } + } else if (action == 'first') { + var incr = this.selectedItems[0].rowIndex; + for (var i = 0; i < this.selectedItems.length; i++) { + item = this.selectedItems[i]; + item.parentNode.insertBefore(item, rows[item.rowIndex - incr]); + } + } else if (action == 'last') { + var length = this.shuttleItems.length; + var incr = length - this.selectedItems[this.selectedItems.length - 1].rowIndex; + for (var i = this.selectedItems.length - 1; i > -1; i--) { + item = this.selectedItems[i]; + if (item.rowIndex + incr > length - 1) { + item.parentNode.insertBefore(item, null); + } else { + item.parentNode.insertBefore(item, rows[item.rowIndex + incr]); + } + } + } + + this.shuttleItems = new Array(); + for (var i = 0; i < rows.length; i++) { + this.shuttleItems.push(rows[i].item); + } + if (action != null) + this.autoScrolling(action, event); + + this.onorderchanged(); + this.controlListManager(); + this.saveState(); + } + }, + + onkeydownHandler : function(event) { + var action = null; + switch (event.keyCode) { + case 34 : action = 'last'; this.moveSelectedItems(action ,event); break; //page down + case 33 : action = 'first'; this.moveSelectedItems(action, event); break; //page up + case 38 : //up arrow + action = 'up'; + if (event.ctrlKey) { + this.moveSelectedItems(action, event); + } else { + this.moveActiveItem(action, event); + } + break; + case 40 : //down arrow + action = 'down'; + if (event.ctrlKey) { + this.moveSelectedItems(action ,event); + } else { + this.moveActiveItem(action, event); + } + break; + case 65 : // Ctrl + A + if (event.ctrlKey) { + this.selectAll(); + Shuttle.stopPropogation(event); + } + Richfaces.SelectItems.doActive(this.activeItem); + this.saveState(); + break; + case 32 : this.invertSelection(event); this.saveState(); break; //blank + } + }, + + toString : function() { + var result = new Array(); + for (var i = 0; i < this.shuttleItems.length; i++) { + var item = this.shuttleItems[i]; + result.push(item._id); + if (item._selected) { + result.push(Shuttle.SELECTION_MARKER); + } + if (this.activeItem && (this.activeItem.rowIndex == item._node.rowIndex)) { + result.push(Shuttle.ACTIVITY_MARKER); + } + if (i != (this.shuttleItems.length - 1)) { + result.push(Shuttle.ITEM_SEPARATOR); + } + } + return result.join(""); + }, + + saveState : function() { + if (this.activeItem != null || (this.selectedItems.length > 0)) { + this.valueKeeper.value = this.toString(); + } + } + +} \ No newline at end of file Added: trunk/sandbox/ui/listShuttle/src/main/templates/org/richfaces/htmlListShuttle.jspx =================================================================== --- trunk/sandbox/ui/listShuttle/src/main/templates/org/richfaces/htmlListShuttle.jspx (rev 0) +++ trunk/sandbox/ui/listShuttle/src/main/templates/org/richfaces/htmlListShuttle.jspx 2007-11-16 19:13:18 UTC (rev 4049) @@ -0,0 +1,119 @@ +<?xml version="1.0" encoding="UTF-8"?> +<f:root + xmlns:f="http://ajax4jsf.org/cdk/template" + xmlns:c=" http://java.sun.com/jsf/core" + xmlns:ui=" http://ajax4jsf.org/cdk/ui" + xmlns:u=" http://ajax4jsf.org/cdk/u" + xmlns:x=" http://ajax4jsf.org/cdk/x" + baseclass="org.richfaces.renderkit.OrderingListRendererBase" + class="org.richfaces.renderkit.html.OrderingListRenderer" + component="org.richfaces.component.UIOrderingList" + > + <h:styles>css/orderingList.xcss</h:styles> + + <h:scripts> + new org.ajax4jsf.javascript.PrototypeScript(), + scripts/SelectItem.js, + scripts/LayoutManager.js + scripts/Control.js, + scripts/OrderingList.js, + </h:scripts> + + <f:clientId var="clientId"/> + <vcp:body> + <f:clientId var="clientId"/> + <div id="#{clientId}" x:passThruWithExclusions="id"> + <input id="#{clientId}focusKeeper" type="button" value="" style="width: 1px; position: absolute; left: -32767px;" name="focusKeeper"/> + <input id="#{clientId}valueKeeper" type="hidden" name="#{clientId}" value="#{component.submittedString}"/> + + <table id="#{clientId}table" cellpadding="0" cellspacing="0" class="ol_body"> + <tbody> + <tr> + <td class="ol_caption"> + <f:call name="encodeTLCaption"/> + </td> + </tr> + <tr> + <td> + <div id="#{clientId}headerBox" class="ol_list ol_outputlist"> + <div class="ol_list_header" style="width: #{component.attributes['listWidth']}px;"> + <table id="#{clientId}internal_header_tab" class="ol_internal_header_tab rich-ordering-list-items" cellpadding="0" cellspacing="0"> + <f:call name="encodeTLHeader"/> + </table> + </div> + <div id="#{clientId}contentBox" class="ol_list_content" style="width: #{component.attributes['listWidth']}px; height:#{component.attributes['listHeight']}px;"> + <table id="#{clientId}internal_tab" class="ol_internal_tab" cellpadding="0" cellspacing="0"> + <tbody id="#{clientId}tbody"> + <f:call name="encodeTLRows" /> + </tbody> + </table> + </div> + </div> + </td> + </tr> + </tbody> + </table> + <a id="#{clientId}sortLabel" href="#">Header</a> + </div> + + <div id="#{clientId}" x:passThruWithExclusions="id"> + <input id="#{clientId}tlFocusKeeper" type="button" value="" style="width: 1px; position: absolute; left: -32767px;" name="focusKeeper"/> + <input id="#{clientId}tlValueKeeper" type="hidden" name="#{clientId}" value="#{component.submittedString}"/> + + <table id="#{clientId}tlTable" cellpadding="0" cellspacing="0" class="ol_body"> + <tbody> + <tr> + <td colspan="2" class="ol_caption"> + <f:call name="encodeSLCaption"/> + </td> + </tr> + <tr> + <td> + <div id="#{clientId}tlHeaderBox" class="ol_list ol_outputlist"> + <div class="ol_list_header" style="width: #{component.attributes['listWidth']}px;"> + <table id="#{clientId}tlInternal_header_tab" class="ol_internal_header_tab rich-ordering-list-items" cellpadding="0" cellspacing="0"> + <f:call name="encodeSLHeader"/> + </table> + </div> + <div id="#{clientId}tlContentBox" class="ol_list_content" style="width: #{component.attributes['listWidth']}px; height:#{component.attributes['listHeight']}px;"> + <table id="#{clientId}tlInternal_tab" class="ol_internal_tab" cellpadding="0" cellspacing="0"> + <tbody id="#{clientId}tlTbody"> + <f:call name="encodeSLRows" /> + </tbody> + </table> + </div> + </div> + </td> + <td class="ol_center_button_col_valign"> + <div class="ol_button_layout"> + <f:call name="encodeSLControlsFacets" /> + </div> + </td> + </tr> + </tbody> + </table> + <a id="#{clientId}sortLabel" href="#">Header</a> + + </div> + </vcp:body> + <f:clientId var="cId"/> + <script type="text/javascript"> + var clientId = '#{cId}'; + if (window.attachEvent) { + window.attachEvent("onload", init); + } else { + window.addEventListener("load", init, false); + } + document.body.onselectstart = function() {return false;}; + document.body.className = "body"; + function init() { + var cotrolsIdPrefix = [['up', 'disup'], ['down', 'disdown'], ['last', 'dislast'], ['first','disfirst']]; + var sourceList = new Shuttle('#{cId}', '#{cId}internal_tab', '#{cId}internal_header_tab', '#{cId}focusKeeper', '#{cId}valueKeeper', cotrolsIdPrefix, '#{cId}sortLabel', function() {#{component.attributes['onorderchanged']}}); + var targetList = new Shuttle('#{cId}', '#{cId}tlInternal_tab', '#{cId}tlInternal_header_tab', '#{cId}tlFocusKeeper', '#{cId}tlValueKeeper', cotrolsIdPrefix, '#{cId}tlSortLabel', function() {#{component.attributes['onorderchanged']}}); + var sourceLayoutManager = new LayoutManager('#{clientId}internal_header_tab', '#{clientId}internal_tab'); + var sourceLayoutManager = new LayoutManager('#{clientId}tlInternal_header_tab', '#{clientId}tlInternal_tab'); + layoutManager.widthSynchronization(); + } + //setTimeout(init, 0); + </script> +</f:root> \ No newline at end of file