Author: vmolotkov Date: 2007-11-05 12:13:01 -0500 (Mon, 05 Nov 2007) New Revision: 3768 Modified: trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/css/orderingList.xcss trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/LayoutManager.js trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/OrderingList.js trunk/sandbox/ui/orderingList/src/main/templates/org/richfaces/htmlOrderingList.jspx Log: Correction of component loading Modified: trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/css/orderingList.xcss =================================================================== --- trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/css/orderingList.xcss 2007-11-05 17:00:17 UTC (rev 3767) +++ trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/css/orderingList.xcss 2007-11-05 17:13:01 UTC (rev 3768) @@ -67,11 +67,11 @@ padding : 2px 0px 0px 2px; } -#internal_header_tab { +.ol_internal_header_tab { width : 100%; } -#internal_header_tab th { +.ol_internal_header_tab th { background : #4A75B5; color : #FFFFFF; @@ -84,21 +84,21 @@ white-space: nowrap; } -#internal_header_tab .ol_endcol { +.ol_internal_header_tab .ol_endcol { border-right : 0px; white-space: nowrap; } -#internal_tab { +.ol_internal_tab { width : 100%; } -#internal_tab .ol_endcol { +.ol_internal_tab .ol_endcol { border-right : 0px; white-space: nowrap; } -#internal_tab td { +.ol_internal_tab td { color : #000000; font-family : Arial; font-size :11px; @@ -109,15 +109,15 @@ } -#internal_tab tr.ol_select { +.ol_internal_tab tr.ol_select { background : #EAF0F8; } -#internal_tab tr.ol_active { +.ol_internal_tab tr.ol_active { background : #C6D6EA; } -#internal_tab tr.ol_normal { +.ol_internal_tab tr.ol_normal { } .body { Modified: trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/LayoutManager.js =================================================================== --- trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/LayoutManager.js 2007-11-05 17:00:17 UTC (rev 3767) +++ trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/LayoutManager.js 2007-11-05 17:13:01 UTC (rev 3768) @@ -1,4 +1,5 @@ LayoutManager = function(headerId, contentId) { + alert(''); this.headerTable = document.getElementById(headerId); this.contentTable = document.getElementById(contentId); this.headerDiv = this.headerTable.parentNode; Modified: trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/OrderingList.js =================================================================== --- trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/OrderingList.js 2007-11-05 17:00:17 UTC (rev 3767) +++ trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/OrderingList.js 2007-11-05 17:13:01 UTC (rev 3768) @@ -8,9 +8,10 @@ } } -Shuttle = function(containerId, tableId, focusKeeperId, valueKeeperId) { +Shuttle = function(containerId, contentTableId, headerTableId, focusKeeperId, valueKeeperId, + upControlId, downControlId, firstControlId, lastControlId, onclickControlId) { this.container = document.getElementById(containerId); - this.shuttleTable = document.getElementById(tableId); + this.shuttleTable = document.getElementById(contentTableId); this.shuttleTbody = this.shuttleTable.tBodies[0]; this.items = null; @@ -29,10 +30,7 @@ this.focusKeeper.onkeydown = function(e) { obj.onkeydownHandler(window.event || e); } - - //FIXME - var layoutManager = new LayoutManager('internal_header_tab', 'internal_tab'); - layoutManager.widthSynchronization(); + this.init(contentTableId, headerTableId, upControlId, downControlId, firstControlId, lastControlId, onclickControlId, focusKeeperId); } Shuttle.ASC = "acs"; @@ -53,6 +51,18 @@ Shuttle.SELECTION_MARKER = "s"; Shuttle.ITEM_SEPARATOR = ","; +Shuttle.prototype.init = function(contentTableId, headerTableId, upControlId, downControlId, firstControlId, lastControlId, onclickControlId, focusKeeperId) { + var obj = this; + Shuttle.setFocus(focusKeeperId); + var layoutManager = new LayoutManager(headerTableId, contentTableId); + layoutManager.widthSynchronization(); + document.getElementById(upControlId).onclick = function() {obj.moveSelectedItems('up');}; + document.getElementById(downControlId).onclick = function() {obj.moveSelectedItems('down');}; + document.getElementById(firstControlId).onclick = function() {obj.moveSelectedItems('first');}; + document.getElementById(lastControlId).onclick = function() {obj.moveSelectedItems('last');}; + document.getElementById(contentTableId).onclick = function(e) {obj.onclickHandler(window.event || e);}; +} + Shuttle.prototype.retrieveShuttleItems = function() { var rows = this.shuttleTbody.rows; this.shuttleItems = new Array(); @@ -175,14 +185,23 @@ } } + var key = event.keyCode || event.which; + if (event.ctrlKey) { - this.addSelectedItem(activeElem); - this.activeItem = activeElem; + if (key == 65) { + //Ctrl + A + this.selectAll(); + } else { + this.addSelectedItem(activeElem); + this.activeItem = activeElem; + } } else if (event.shiftKey) { - this.selectionItemGroup(activeElem); + this.selectItemGroup(activeElem); + } else if (key == 13) { + //space } else { this.selectionItem(activeElem); - this.activeItem = activeElem; + this.activeItem = activeElem; } this.activeItem.className = Shuttle.ACTIVE_ITEM_CLASS; @@ -197,6 +216,11 @@ case 40 : this.moveSelectedItems('down'); break; //down arrow } } + +Shuttle.prototype.selectAll = function() { + this.selectItemRange(startIndex, endIndex); +} + /** * Click handler */ @@ -240,7 +264,7 @@ /** * Shift+Click handler */ -Shuttle.prototype.selectionItemGroup = function(currentItem) { +Shuttle.prototype.selectItemGroup = function(currentItem) { //FIXME var activeItemIndex = this.activeItem.rowIndex; var startIndex; @@ -256,12 +280,16 @@ this.resetMarked(); + this.selectItemRange(startIndex, endIndex); +} + +Shuttle.prototype.selectItemRange = function(startIndex, endIndex) { var rows = this.shuttleTbody.rows; for (var i = startIndex; i <= endIndex; i++) { rows[i].className = Shuttle.SELECTED_ITEM_CLASS; this.selectedItems.push(rows[i]); this.getSelectItemByNode(rows[i])._selected = true; - } + } } Shuttle.prototype.resetMarked = function() { Modified: trunk/sandbox/ui/orderingList/src/main/templates/org/richfaces/htmlOrderingList.jspx =================================================================== --- trunk/sandbox/ui/orderingList/src/main/templates/org/richfaces/htmlOrderingList.jspx 2007-11-05 17:00:17 UTC (rev 3767) +++ trunk/sandbox/ui/orderingList/src/main/templates/org/richfaces/htmlOrderingList.jspx 2007-11-05 17:13:01 UTC (rev 3768) @@ -15,19 +15,7 @@ scripts/SelectItem.js,scripts/OrderingList.js,scripts/LayoutManager.js </h:scripts> - <f:clientid var="clientId"/> - <script type="text/javascript"> - function init() { - var shuttle = new Shuttle('#{clientId}', 'internal_tab', '#{clientId}focusKeeper', '#{clientId}valueKeeper'); - Shuttle.setFocus('#{clientId}focusKeeper'); - document.getElementById('up').onclick = function() {shuttle.moveSelectedItems('up');}; - document.getElementById('down').onclick = function() {shuttle.moveSelectedItems('down');}; - document.getElementById('first').onclick = function() {shuttle.moveSelectedItems('first');}; - document.getElementById('last').onclick = function() {shuttle.moveSelectedItems('last');}; - document.getElementById('#{clientId}table').onclick = function(e) {shuttle.onclickHandler(window.event || e);}; - } - </script> - + <f:clientId var="clientId"/> <div id="#{clientId}" onclick="Shuttle.setFocus('#{clientId}focusKeeper')"> <input id="#{clientId}focusKeeper" type="button" value="" style="position: absolute; left: -32767;" name="focusKeeper"/> <input id="#{clientId}valueKeeper" type="hidden" name="#{clientId}" value=""/> @@ -35,14 +23,14 @@ <table id="#{clientId}table" cellpadding="0" cellspacing="0" class="ol_body"> <tr> <td> - <div class="ol_list"> + <div id="#{clientId}headerBox" class="ol_list"> <div class="ol_list_header"> - <table id="internal_header_tab" cellpadding="0" cellspacing="0"> + <table id="#{clientId}internal_header_tab" class="ol_internal_header_tab" cellpadding="0" cellspacing="0"> <f:call name="encodeOrderingListStructure"/> </table> </div> - <div class="ol_list_content"> - <table id="internal_tab" cellpadding="0" cellspacing="0"> + <div id="#{clientId}contentBox" class="ol_list_content"> + <table id="#{clientId}internal_tab" class="ol_internal_tab" cellpadding="0" cellspacing="0"> <tbody id="#{clientId}tbody"> <vcp:body> <f:call name="renderChildren" /> @@ -54,17 +42,19 @@ </td> </tr> </table> - - <a id="sortLabel" href="#">Header</a><br/> - <a id="up" href="#" >up</a><br/> - <a id="down" href="#" >down</a><br/> - <a id="first" href="#" >first</a><br/> - <a id="last" href="#" >last</a> + <f:clientId var="clientId"/> + <a id="#{clientId}sortLabel" href="#">Header</a><br/> + <a id="#{clientId}up" href="#" >up</a><br/> + <a id="#{clientId}down" href="#" >down</a><br/> + <a id="#{clientId}first" href="#" >first</a><br/> + <a id="#{clientId}last" href="#" >last</a> </div> - <script type="text/javascript"> - //document.body.onselectstart = function() {return false;}; + <f:clientId var="cId"/> + <script type="text/javascript">'#{cId}' + document.body.onselectstart = function() {return false;}; document.body.className = "body"; - if(LayoutManager.isIE()) document.body.onload = init; - else document.body.onload = init(); + var shuttle = new Shuttle('#{cId}', '#{cId}internal_tab', '#{cId}internal_header_tab', + '#{cId}focusKeeper', '#{cId}valueKeeper','#{cId}up', '#{cId}down', '#{cId}first', + '#{cId}last', '#{cId}sortLabel'); </script> </f:root> \ No newline at end of file