289 lines
9.6 KiB
XML
289 lines
9.6 KiB
XML
<html xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:tal="http://xml.zope.org/namespaces/tal"
|
|
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
|
|
tal:omit-tag="">
|
|
<script type="text/javascript">
|
|
/* <![CDATA[ */
|
|
function moveItems(from, to)
|
|
{
|
|
// shortcuts for selection fields
|
|
var src = document.getElementById(from);
|
|
var tgt = document.getElementById(to);
|
|
|
|
if (src.selectedIndex == -1) selectionError();
|
|
else
|
|
{
|
|
// iterate over all selected items
|
|
// --> attribute "selectedIndex" doesn't support multiple selection.
|
|
// Anyway, it works here, as a moved item isn't selected anymore,
|
|
// thus "selectedIndex" indicating the "next" selected item :)
|
|
while (src.selectedIndex > -1)
|
|
if (src.options[src.selectedIndex].selected)
|
|
{
|
|
// create a new virtal object with values of item to copy
|
|
temp = new Option(src.options[src.selectedIndex].text,
|
|
src.options[src.selectedIndex].value);
|
|
// append virtual object to targe
|
|
tgt.options[tgt.length] = temp;
|
|
// want to select newly created item
|
|
temp.selected = true;
|
|
// delete moved item in source
|
|
src.options[src.selectedIndex] = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
// move item from "from" selection to "to" selection
|
|
function from2to(name)
|
|
{
|
|
moveItems(name+"-from", name+"-to");
|
|
copyDataForSubmit(name);
|
|
}
|
|
|
|
// move item from "to" selection back to "from" selection
|
|
function to2from(name)
|
|
{
|
|
moveItems(name+"-to", name+"-from");
|
|
copyDataForSubmit(name);
|
|
}
|
|
|
|
function swapFields(a, b)
|
|
{
|
|
// swap text
|
|
var temp = a.text;
|
|
a.text = b.text;
|
|
b.text = temp;
|
|
// swap value
|
|
temp = a.value;
|
|
a.value = b.value;
|
|
b.value = temp;
|
|
// swap selection
|
|
temp = a.selected;
|
|
a.selected = b.selected;
|
|
b.selected = temp;
|
|
}
|
|
|
|
// move selected item in "to" selection one up
|
|
function moveUp(name)
|
|
{
|
|
// shortcuts for selection field
|
|
var toSel = document.getElementById(name+"-to");
|
|
|
|
if (toSel.selectedIndex == -1)
|
|
selectionError();
|
|
else if (toSel.options[0].selected)
|
|
alert("Cannot move further up!");
|
|
else for (var i = 0; i < toSel.length; i++)
|
|
if (toSel.options[i].selected)
|
|
{
|
|
swapFields(toSel.options[i-1], toSel.options[i]);
|
|
copyDataForSubmit(name);
|
|
}
|
|
}
|
|
|
|
// move selected item in "to" selection one down
|
|
function moveDown(name)
|
|
{
|
|
// shortcuts for selection field
|
|
var toSel = document.getElementById(name+"-to");
|
|
|
|
if (toSel.selectedIndex == -1) {
|
|
selectionError();
|
|
} else if (toSel.options[toSel.length-1].selected) {
|
|
alert("Cannot move further down!");
|
|
} else {
|
|
for (var i = toSel.length-1; i >= 0; i--) {
|
|
if (toSel.options[i].selected) {
|
|
swapFields(toSel.options[i+1], toSel.options[i]);
|
|
}
|
|
}
|
|
copyDataForSubmit(name);
|
|
}
|
|
}
|
|
|
|
// copy each item of "toSel" into one hidden input field
|
|
function copyDataForSubmit(name)
|
|
{
|
|
// shortcuts for selection field and hidden data field
|
|
var toSel = document.getElementById(name+"-to");
|
|
var toDataContainer = document.getElementById(name+"-toDataContainer");
|
|
|
|
// delete all child nodes (--> complete content) of "toDataContainer" span
|
|
while (toDataContainer.hasChildNodes())
|
|
toDataContainer.removeChild(toDataContainer.firstChild);
|
|
|
|
// create new hidden input fields - one for each selection item of
|
|
// "to" selection
|
|
for (var i = 0; i < toSel.options.length; i++)
|
|
{
|
|
// create virtual node with suitable attributes
|
|
var newNode = document.createElement("input");
|
|
var newAttr = document.createAttribute("name");
|
|
newAttr.nodeValue = name.replace(/-/g, '.')+':list';
|
|
newNode.setAttributeNode(newAttr);
|
|
|
|
newAttr = document.createAttribute("type");
|
|
newAttr.nodeValue = "hidden";
|
|
newNode.setAttributeNode(newAttr);
|
|
|
|
newAttr = document.createAttribute("value");
|
|
newAttr.nodeValue = toSel.options[i].value;
|
|
newNode.setAttributeNode(newAttr);
|
|
|
|
// actually append virtual node to DOM tree
|
|
toDataContainer.appendChild(newNode);
|
|
}
|
|
}
|
|
|
|
function newElem(name)
|
|
{
|
|
var src = document.getElementById(name+'-iadd');
|
|
var tgt = document.getElementById(name+'-to');
|
|
|
|
temp = new Option(src.value);
|
|
tgt.options[tgt.length] = temp;
|
|
temp.selected = true;
|
|
src.value = '';
|
|
copyDataForSubmit(name);
|
|
}
|
|
|
|
// error message for missing selection
|
|
function selectionError()
|
|
{alert("Must select something!")}
|
|
|
|
function formwidgetadd_autocomplete_ready(event, data, formatted) {
|
|
(function($) {
|
|
var input_box = $(event.target);
|
|
|
|
name = input_box.attr('id');
|
|
name = name.substr(0, name.lastIndexOf('-'));
|
|
var tgt = document.getElementById(name+'-to');
|
|
|
|
temp = new Option(data[1], data[0]);
|
|
tgt.options[tgt.length] = temp;
|
|
temp.selected = true;
|
|
copyDataForSubmit(name);
|
|
}(jQuery));
|
|
}
|
|
|
|
/* ]]> */
|
|
</script>
|
|
|
|
<table border="0" class="ordered-selection-field">
|
|
<tr>
|
|
<td>
|
|
<select id="from" name="from" class="" multiple="" size="5"
|
|
tal:attributes="id string:${view/id}-from;
|
|
name string:${view/name}.from;
|
|
class view/klass;
|
|
style view/style;
|
|
title view/title;
|
|
lang view/lang;
|
|
onclick view/onclick;
|
|
ondblclick view/ondblclick;
|
|
onmousedown view/onmousedown;
|
|
onmouseup view/onmouseup;
|
|
onmouseover view/onmouseover;
|
|
onmousemove view/onmousemove;
|
|
onmouseout view/onmouseout;
|
|
onkeypress view/onkeypress;
|
|
onkeydown view/onkeydown;
|
|
onkeyup view/onkeyup;
|
|
disabled view/disabled;
|
|
tabindex view/tabindex;
|
|
onfocus view/onfocus;
|
|
onblur view/onblur;
|
|
onchange view/onchange;
|
|
multiple view/multiple;
|
|
size view/size">
|
|
<option tal:repeat="entry view/notselectedItems"
|
|
tal:attributes="value entry/value"
|
|
tal:content="nocall:entry/content" i18n:translate=""/>
|
|
</select>
|
|
</td>
|
|
<td style="text-align: center">
|
|
<button onclick="javascript:from2to()"
|
|
name="from2toButton" type="button" value="→"
|
|
tal:attributes="onClick string:javascript:from2to('${view/id}')"
|
|
>→</button>
|
|
<br />
|
|
<button onclick="javascript:to2from()"
|
|
name="to2fromButton" type="button" value="←"
|
|
tal:attributes="onClick string:javascript:to2from('${view/id}')"
|
|
>←</button>
|
|
</td>
|
|
<td rowspan="2" style="vertical-align: top">
|
|
<select id="to" name="to" class="" multiple="" size="5"
|
|
tal:attributes="id string:${view/id}-to;
|
|
name string:${view/name}.to;
|
|
class view/klass;
|
|
style view/style;
|
|
title view/title;
|
|
lang view/lang;
|
|
onclick view/onclick;
|
|
ondblclick view/ondblclick;
|
|
onmousedown view/onmousedown;
|
|
onmouseup view/onmouseup;
|
|
onmouseover view/onmouseover;
|
|
onmousemove view/onmousemove;
|
|
onmouseout view/onmouseout;
|
|
onkeypress view/onkeypress;
|
|
onkeydown view/onkeydown;
|
|
onkeyup view/onkeyup;
|
|
disabled view/disabled;
|
|
tabindex view/tabindex;
|
|
onfocus view/onfocus;
|
|
onblur view/onblur;
|
|
onchange view/onchange;
|
|
multiple view/multiple;
|
|
size view/size">
|
|
<option tal:repeat="entry view/selectedItems"
|
|
tal:attributes="value entry/value"
|
|
tal:content="nocall:entry/content" i18n:translate=""/>
|
|
</select>
|
|
<input name="foo-empty-marker" type="hidden"
|
|
tal:attributes="name string:${view/name}-empty-marker"/>
|
|
<span id="toDataContainer"
|
|
tal:attributes="id string:${view/id}-toDataContainer">
|
|
<script type="text/javascript" tal:content="string:
|
|
copyDataForSubmit('${view/id}');">
|
|
// initial copying of field "field.to" --> "field"
|
|
copyDataForSubmit("<i tal:replace="${view/id}"/>");
|
|
</script>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<button
|
|
onclick="javascript:moveUp()"
|
|
name="upButton" type="button" value="↑"
|
|
tal:attributes="onClick string:javascript:moveUp('${view/id}')"
|
|
>↑</button>
|
|
<br />
|
|
<button
|
|
onclick="javascript:moveDown()"
|
|
name="downButton" type="button" value="↓"
|
|
tal:attributes="onClick string:javascript:moveDown('${view/id}')"
|
|
>↓</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding-top: 1em">
|
|
<input type="text" id="iadd" name="iadd"
|
|
tal:attributes="id string:${view/id}-iadd;
|
|
disabled view/disabled;
|
|
name string:${view/name}.iadd;"/>
|
|
</td>
|
|
<td style="padding-top: 1em">
|
|
<button
|
|
onclick="..."
|
|
name="addButton" type="button" value="add"
|
|
tal:attributes="onClick string:javascript:newElem('${view/id}')"
|
|
>→</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<script type="text/javascript" tal:content="view/js">
|
|
</script>
|
|
|
|
</html>
|