Bug 17817: Fix cloning subfields using select2

Based on Jonathan's patch (the DO NOT PUSH one), I put together this fix.
What was changed is that select2 is reinitialized only after the cloned element
has been appended to the DOM (so that select2 can correctly calculate the field's
width). Also, I changed the selectors that searched for the line divs (for reordering)
and for the subfield's input element (for erasing the field's value) to be more specific,
since select2 introduced divs that broke some assumptions about the expected HTML structure

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
I confirm that these 2 patches fix the add item and mod biblio views as
well as the batch item modification tools.

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/js/cataloging.js b/koha-tmpl/intranet-tmpl/prog/js/cataloging.js
index ee03961..6fd9346 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/js/cataloging.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/cataloging.js
@@ -73,6 +73,23 @@ function ExpandField(index) {
         }
     }
 }
+
+var Select2Utils = {
+  removeSelect2: function(element) {
+    var selects = element.getElementsByTagName('select');
+    for (var i=0; i < selects.length; i++) {
+      $(selects[i]).select2('destroy');
+    }
+  },
+
+  initSelect2: function(element) {
+    var selects = element.getElementsByTagName('select');
+    for (var i=0; i < selects.length; i++) {
+      $(selects[i]).select2();
+    }
+  }
+};
+
 /**
  * To clone a field
  * @param hideMarc '0' for false, '1' for true
@@ -80,6 +97,8 @@ function ExpandField(index) {
  */
 function CloneField(index, hideMarc, advancedMARCEditor) {
     var original = document.getElementById(index); //original <div>
+    Select2Utils.removeSelect2(original);
+
     var clone = original.cloneNode(true);
     var new_key = CreateKey();
     var new_id  = original.getAttribute('id')+new_key;
@@ -244,8 +263,12 @@ function CloneField(index, hideMarc, advancedMARCEditor) {
 
     // insert this line on the page
     original.parentNode.insertBefore(clone,original.nextSibling);
+
+    Select2Utils.initSelect2(original);
+    Select2Utils.initSelect2(clone);
 }
 
+
 /**
  * To clone a subfield
  * @param index
@@ -253,6 +276,7 @@ function CloneField(index, hideMarc, advancedMARCEditor) {
  */
 function CloneSubfield(index, advancedMARCEditor){
     var original = document.getElementById(index); //original <div>
+    Select2Utils.removeSelect2(original);
     var clone = original.cloneNode(true);
     var new_key = CreateKey();
     // set the attribute for the new 'div' subfields
@@ -327,8 +351,13 @@ function CloneSubfield(index, advancedMARCEditor){
     }
     // insert this line on the page
     original.parentNode.insertBefore(clone,original.nextSibling);
+
+    //Restablish select2 for the cloned elements.
+    Select2Utils.initSelect2(original);
+    Select2Utils.initSelect2(clone);
+
     // delete data of cloned subfield
-    document.getElementById(linkid).value = "";
+    clone.querySelectorAll('input.input_marceditor').value = "";
 }
 
 function AddEventHandlers (oldcontrol, newcontrol, newinputid ) {
@@ -413,8 +442,8 @@ function upSubfield(index) {
     }
     var tag = line.parentNode; // get the dad of this line. (should be "<div id='tag_...'>")
 
-    // getting all subfields for this tag
-    var subfields = tag.getElementsByTagName('div');
+    // getting all visible subfields for this tag
+    var subfields = tag.querySelectorAll("div.subfield_line");
     var subfieldsLength = subfields.length;
 
     if(subfieldsLength<=1) return; // nothing to do if there is just one subfield.
@@ -422,8 +451,8 @@ function upSubfield(index) {
     // among all subfields
     for(var i=0;i<subfieldsLength;i++){
         if(subfields[i].getAttribute('id') == index){ //looking for the subfield which is clicked :
-            if(i==1){ // if the clicked subfield is on the top
-                tag.appendChild(subfields[1]);
+            if(i==0){ // if the clicked subfield is on the top
+                tag.appendChild(subfields[0]);
                 return;
             } else {
                 var lineAbove = subfields[i-1];
@@ -449,6 +478,7 @@ function unHideSubfield(index,labelindex) {
  * @param original subfield div to clone
  */
 function CloneItemSubfield(original){
+    Select2Utils.removeSelect2(original);
     var clone = original.cloneNode(true);
     var new_key = CreateKey();
 
@@ -488,6 +518,8 @@ function CloneItemSubfield(original){
 
     // insert this line on the page
     original.parentNode.insertBefore(clone,original.nextSibling);
+    Select2Utils.initSelect2(original);
+    Select2Utils.initSelect2(clone);
 }
 
 /**