| <?xml version="1.0"?> |
| <!-- $Id$ --> |
| <!DOCTYPE script PUBLIC |
| "-//Apache Software Foundation//Tapestry Script Specification 3.0//EN" |
| "http://jakarta.apache.org/tapestry/dtd/Script_3_0.dtd"> |
| <script> |
| <!-- |
| |
| input symbols: |
| palette - the Palette instance |
| selectImage - reference to the select image |
| selectDisabledImage - referece to the disabled select image |
| deselectImage - reference to the deselect image |
| deselectDisabledImage - reference to the disbled deselect image |
| upImage - reference to the move up image |
| upDisabledImage - reference to the disabled move up image |
| downImage - reference to the move down image |
| downDisabledImage - reference to the disabled move down image |
| |
| Note: "reference" means the result of Body.getPreloadedImageReference(). The |
| up and down images are only needed if user sorting is enabled. |
| |
| output symbols: |
| formSubmitFunctionName - name of a function to be executed when the form submits |
| availableName - the name of the available element |
| selectImageName - the name to use for the select image (inside the select link) |
| selectOnClickScript - the script to assign to the select link's onclick attribute |
| deselectOnClickScript - the script to assign to the deselect link's onclick attribute |
| deselectImageName - the name to use for the deselect image (inside the deselect link) |
| upImageName - the name of the up image (inside the up link) |
| downImageName the name of the move down image (inside the down link) |
| upOnClickScript - the script to assign to the up link's onclick attribute |
| downOnClickScript - the script to assign to the down link's onclick attribute |
| --> |
| |
| <include-script resource-path="/org/apache/tapestry/html/PracticalBrowserSniffer.js"/> |
| <include-script resource-path="/org/apache/tapestry/contrib/palette/PaletteFunctions.js"/> |
| |
| <input-symbol key="palette" class="org.apache.tapestry.contrib.palette.Palette" required="yes"/> |
| <input-symbol key="selectImage" class="java.lang.String" required="yes"/> |
| <input-symbol key="selectDisabledImage" class="java.lang.String" required="yes"/> |
| <input-symbol key="deselectImage" class="java.lang.String" required="yes"/> |
| <input-symbol key="deselectDisabledImage" class="java.lang.String" required="yes"/> |
| <input-symbol key="upImage" class="java.lang.String"/> |
| <input-symbol key="upDisabledImage" class="java.lang.String"/> |
| <input-symbol key="downImage" class="java.lang.String"/> |
| <input-symbol key="downDisabledImage" class="java.lang.String"/> |
| |
| <set key="formName" expression="palette.form.name"/> |
| <set key="name" expression="palette.name"/> |
| <set key="sortLabel" expression="palette.sort == @org.apache.tapestry.contrib.palette.SortMode@LABEL"/> |
| <set key="sortValue" expression="palette.sort == @org.apache.tapestry.contrib.palette.SortMode@VALUE"/> |
| <set key="sortUser" expression="palette.sort == @org.apache.tapestry.contrib.palette.SortMode@USER"/> |
| |
| |
| <!-- baseName - base name from which other names are generated --> |
| |
| <let key="baseName" unique="yes"> |
| ${name} |
| </let> |
| |
| <let key="buttons"> |
| ${baseName}$buttons |
| </let> |
| |
| <let key="selectDisabled"> |
| ${buttons}.selectDisabled |
| </let> |
| |
| <let key="deselectDisabled"> |
| ${buttons}.deselectDisabled |
| </let> |
| |
| <let key="upDisabled"> |
| ${buttons}.upDisabled |
| </let> |
| |
| <let key="downDisabled"> |
| ${buttons}.downDisabled |
| </let> |
| |
| <let key="availableName"> |
| ${name}$avail |
| </let> |
| |
| <let key="updateFunctionName"> |
| update_${baseName} |
| </let> |
| |
| <let key="selectFunctionName"> |
| select_${baseName} |
| </let> |
| |
| <let key="selectOnClickScript"> |
| javascript:${selectFunctionName}(); |
| </let> |
| |
| <let key="deselectFunctionName"> |
| deselect_${baseName} |
| </let> |
| |
| <let key="deselectOnClickScript"> |
| javascript:${deselectFunctionName}(); |
| </let> |
| |
| <let key="formSubmitFunctionName"> |
| onsubmit_${baseName} |
| </let> |
| |
| <let key="selectImageName"> |
| ${baseName}$selectImage |
| </let> |
| |
| <let key="selectImagePath"> |
| document.${selectImageName} |
| </let> |
| |
| <let key="deselectImageName"> |
| ${baseName}$deselectImage |
| </let> |
| |
| <let key="deselectImagePath"> |
| document.${deselectImageName} |
| </let> |
| |
| <let key="formPath"> |
| document.${formName} |
| </let> |
| |
| <let key="selectedPath"> |
| ${formPath}.${name} |
| </let> |
| |
| <let key="selectedChangeFunctionName"> |
| onChange_${baseName}_selected |
| </let> |
| |
| <let key="availablePath"> |
| ${formPath}.${availableName} |
| </let> |
| |
| <let key="availableChangeFunctionName"> |
| onChange_${baseName}_available |
| </let> |
| |
| |
| <let key="upImageName"> |
| ${baseName}$upimage |
| </let> |
| |
| <let key="upImagePath"> |
| document.${upImageName} |
| </let> |
| |
| <let key="downImageName"> |
| ${baseName}$downimage |
| </let> |
| |
| <let key="downImagePath"> |
| document.${downImageName} |
| </let> |
| |
| <let key="moveUpFunctionName"> |
| moveup_${baseName} |
| </let> |
| |
| <let key="upOnClickScript"> |
| javascript:${moveUpFunctionName}(); |
| </let> |
| |
| <let key="moveDownFunctionName"> |
| movedown_${baseName} |
| </let> |
| |
| <let key="downOnClickScript"> |
| javascript:${moveDownFunctionName}(); |
| </let> |
| |
| |
| <body> |
| |
| <!-- A variable that is used to track which of the buttons are enabled |
| or disabled. All of the buttons are disabled until the page finishes |
| loading, at which point the update function will determine which |
| can be used. --> |
| |
| var ${buttons} = new Object(); |
| ${selectDisabled} = true; |
| ${deselectDisabled} = true; |
| <if expression="sortUser"> |
| ${upDisabled} = true; |
| ${downDisabled} = true; |
| </if> |
| |
| function ${updateFunctionName}() |
| { |
| var disabled = ${availablePath}.selectedIndex < 0; |
| |
| ${selectDisabled} = disabled; |
| |
| if (document.images) |
| ${selectImagePath}.src = |
| disabled ? ${selectDisabledImage} |
| : ${selectImage}; |
| |
| var selected = ${selectedPath}; |
| var index = selected.selectedIndex; |
| |
| disabled = index < 0; |
| ${deselectDisabled} = disabled; |
| |
| if (document.images) |
| ${deselectImagePath}.src = |
| disabled ? ${deselectDisabledImage} |
| : ${deselectImage}; |
| <if expression="sortUser"> |
| var upImage = ${upImagePath}; |
| var downImage = ${downImagePath}; |
| |
| ${upDisabled} = true; |
| ${downDisabled} = true; |
| |
| if (document.images) |
| { |
| upImage.src = ${upDisabledImage}; |
| downImage.src = ${downDisabledImage}; |
| } |
| |
| <!-- If there's no selection in the "selected" column, then leave |
| both buttons disabled. --> |
| |
| if (disabled) |
| return; |
| |
| <!-- Search for a second selected item --> |
| |
| for (var i = index + 1; i < selected.options.length; i++) |
| { |
| <!-- Found a second selected option, so leave buttons disabled. --> |
| if (selected.options[i].selected) |
| return; |
| } |
| |
| ${upDisabled} = (index == 0); |
| ${downDisabled} = (index == selected.options.length - 1); |
| |
| if (document.images) |
| { |
| if (!${upDisabled}) |
| upImage.src = ${upImage}; |
| |
| if (!${downDisabled}) |
| downImage.src = ${downImage}; |
| } |
| </if> |
| } |
| |
| function ${selectFunctionName}() |
| { |
| if (${selectDisabled}) |
| return; |
| |
| var source = ${availablePath}; |
| var target = ${selectedPath}; |
| |
| palette_transfer_selections(source, target); |
| <if expression="sortLabel"> |
| palette_sort_by_label(target); |
| </if> |
| <if expression="sortValue"> |
| palette_sort_by_value(target); |
| </if> |
| ${updateFunctionName}(); |
| } |
| |
| function ${deselectFunctionName}() |
| { |
| if (${deselectDisabled}) |
| return; |
| |
| var source = ${selectedPath}; |
| var target = ${availablePath}; |
| |
| palette_transfer_selections(source, target); |
| <if expression="sortLabel"> |
| palette_sort_by_label(target); |
| </if> |
| <if expression="sortValue"> |
| palette_sort_by_value(target); |
| </if> |
| ${updateFunctionName}(); |
| } |
| |
| function ${formSubmitFunctionName}() |
| { |
| palette_clear_selections(${availablePath}); |
| palette_select_all(${selectedPath}); |
| |
| return true; |
| } |
| <if expression="sortUser"> |
| function ${moveUpFunctionName}() |
| { |
| if (${upDisabled}) |
| return; |
| |
| var element = ${selectedPath}; |
| var options = element.options; |
| |
| palette_swap_options(options, element.selectedIndex, element.selectedIndex - 1); |
| |
| ${updateFunctionName}(); |
| } |
| |
| function ${moveDownFunctionName}() |
| { |
| if (${downDisabled}) |
| return; |
| |
| var element = ${selectedPath}; |
| var options = element.options; |
| |
| palette_swap_options(options, element.selectedIndex, element.selectedIndex + 1); |
| |
| ${updateFunctionName}(); |
| } |
| </if> |
| function ${selectedChangeFunctionName}() |
| { |
| palette_clear_selections(${availablePath}); |
| ${updateFunctionName}(); |
| } |
| |
| function ${availableChangeFunctionName}() |
| { |
| palette_clear_selections(${selectedPath}); |
| ${updateFunctionName}(); |
| } |
| </body> |
| |
| <initialization> |
| |
| ${selectedPath}.onchange = ${selectedChangeFunctionName}; |
| ${selectedPath}.ondblclick = ${deselectFunctionName}; |
| ${availablePath}.onchange = ${availableChangeFunctionName}; |
| ${availablePath}.ondblclick = ${selectFunctionName}; |
| |
| </initialization> |
| </script> |