From 317e00cce1d1ba07e76f48f139220b79a4c1d7b6 Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Mon, 13 Jan 2025 11:37:30 +0100
Subject: [PATCH] Use `plone.app.z3cform.widgets.OrderedSelect` in Plone 6.1

---
 CHANGES.rst                             |   3 +-
 src/collective/taxonomy/widget.py       |   8 +-
 src/collective/taxonomy/widget_input.pt | 367 +++++++-----------------
 3 files changed, 109 insertions(+), 269 deletions(-)

diff --git a/CHANGES.rst b/CHANGES.rst
index d944b60..ec4e7f0 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -14,7 +14,8 @@ New features:
 
 Bug fixes:
 
-- *add item here*
+- Use `plone.app.z3cform.widgets.OrderedSelect` in Plone 6.1
+  [petschki]
 
 
 3.1.5 (2024-11-05)
diff --git a/src/collective/taxonomy/widget.py b/src/collective/taxonomy/widget.py
index 0706849..a8e16aa 100644
--- a/src/collective/taxonomy/widget.py
+++ b/src/collective/taxonomy/widget.py
@@ -1,7 +1,6 @@
 from collective.taxonomy.interfaces import ITaxonomySelectWidget
 from plone.memoize import ram
 from z3c.form import interfaces
-from z3c.form.browser.orderedselect import OrderedSelectWidget
 from z3c.form.widget import FieldWidget
 
 import zope.component
@@ -9,6 +8,13 @@
 import zope.schema.interfaces
 
 
+try:
+    # Plone 6.1
+    from plone.app.z3cform.widgets.orderedselect import OrderedSelectWidget
+except ImportError:
+    from z3c.form.browser.orderedselect import OrderedSelectWidget
+
+
 def _items_cachekey(fun, self):
     # try to get modified time of taxonomy utility
     try:
diff --git a/src/collective/taxonomy/widget_input.pt b/src/collective/taxonomy/widget_input.pt
index 0a742d6..ddd4d7b 100644
--- a/src/collective/taxonomy/widget_input.pt
+++ b/src/collective/taxonomy/widget_input.pt
@@ -3,276 +3,109 @@
       xmlns:tal="http://xml.zope.org/namespaces/tal"
       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 virtual 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);
-    }
-  }
-
-// error message for missing selection
-function selectionError() {
-  alert("Must select something!");
-}
-
-/* ]]> */
-  </script>
-
-  <table class="ordered-selection-field"
-         border="0"
-  >
-    <tr>
-      <td>
-        <select class=""
-                id="from"
-                name="from"
-                size="5"
-                style="width: 100%"
-                tal:attributes="
-                  id string:${view/id}-from;
-                  name string:${view/name}.from;
-                  class view/klass;
-                  Xstyle 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:content="nocall:entry/content"
-                  tal:attributes="
-                    value entry/value;
-                  "
-                  i18n:translate=""
-          ></option>
-        </select>
-      </td>
-    </tr>
-    <tr>
-      <td style="text-align: center; padding-top: 5px; padding-bottom: 5px;">
-        <button name="to2fromButton"
-                onclick="javascript:to2from()"
-                type="button"
-                value="&uarr;"
-                tal:attributes="
-                  onClick string:javascript:to2from('${view/id}');
-                "
-        >&uarr;</button>
-        <button name="from2toButton"
-                onclick="javascript:from2to()"
-                type="button"
-                value="&darr;"
-                tal:attributes="
-                  onClick string:javascript:from2to('${view/id}');
-                "
-        >&darr;</button>
-      </td>
-    </tr>
-    <tr>
-      <td style="text-align: right">
-        <select class=""
-                id="to"
-                name="to"
-                size="5"
-                style="width: 100%"
-                tal:attributes="
-                  id string:${view/id}-to;
-                  name string:${view/name}.to;
-                  class view/klass;
-                  Xstyle 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:content="nocall:entry/content"
-                  tal:attributes="
-                    value entry/value;
-                  "
-                  i18n:translate=""
-          ></option>
-        </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}');"
-          >
+  <script src="++resource++orderedselect_input.js"
+          type="text/javascript"
+  ></script>
+
+  <table border="0" class="ordered-selection-field"
+       tal:attributes="id view/id">
+  <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>
+      <button onclick="javascript:from2to()"
+              name="from2toButton" type="button" value="&rarr;"
+              tal:attributes="onClick string:javascript:from2to('${view/id}')"
+          >&rarr;</button>
+      <br />
+      <button onclick="javascript:to2from()"
+              name="to2fromButton" type="button" value="&larr;"
+              tal:attributes="onClick string:javascript:to2from('${view/id}')"
+          >&larr;</button>
+    </td>
+    <td>
+      <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" style="display: none"
+            tal:attributes="id string:${view/id}-toDataContainer">
+        <script type="text/javascript" tal:content="string:copyDataForSubmit('${view/id}');">
           /*  <![CDATA[ */
           // initial copying of field "field.to" --> "field"
           copyDataForSubmit("<i tal:replace="${view/id}"/>");
           /* ]]> */
-          </script>
-        </span>
+        </script>
+      </span>
+    </td>
+    <td>
+      <button
+          onclick="javascript:moveUp()"
+          name="upButton" type="button" value="&uarr;"
+          tal:attributes="onClick string:javascript:moveUp('${view/id}')"
+          >&uarr;</button>
+      <br />
+      <button
+          onclick="javascript:moveDown()"
+          name="downButton" type="button" value="&darr;"
+          tal:attributes="onClick string:javascript:moveDown('${view/id}')"
+          >&darr;</button>
+    </td>
+  </tr>
+</table>
 
-      </td>
-    </tr>
-  </table>
 </html>