From 3dd55ca547f5ca2271c2d3346ca2ee8d82ff85d1 Mon Sep 17 00:00:00 2001 From: Maryse Simard Date: Wed, 23 Oct 2019 15:34:39 -0400 Subject: [PATCH] Bug 7882: Add ability to move and reorder fields in MARC editor MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Use jQueryUI sortable to make fields and subfields moveable in the MARC editor for both records and authorities. This patch convert items from div's to ul's and consequently alter css and js to match. It also replace the up arrow with a more adapted icon (from font awesome). Primary authorship by Elliott Davis. To Test: 1. Add or edit a record in cataloguing module. 2. You should be able to move the fields and subfields around. - You can click on any part of the element to drag it, the move icon to the left of the item is a good place to do it. => You can only change the order of fields of the same tag. 3. Make sure all of the javascript driven fonctionnality still work : - Duplicate fields/subfields - Remove fields/subfields - Using the tag editor for control fields or to link authorities - etc 4. Reorder some fields/subfields and save the record. 5. Edit the record again. 6. The order in the editor should match the changes which were saved. - Empty subfields should appear after the ones with content. 7. Repeat steps 1-6 with the authority editor. Signed-off-by: Séverine QUEUNE Signed-off-by: Jonathan Druart Signed-off-by: Martin Renvoize Signed-off-by: Joy Nelson (cherry picked from commit 23724c9c7410c0f8b432cfd8019b30753a672d5b) Signed-off-by: Lucas Gass --- cataloguing/addbiblio.pl | 2 +- .../intranet-tmpl/prog/css/addbiblio.css | 51 +++++++++++++++-- .../en/modules/authorities/authorities.tt | 28 ++++++---- .../authorities/blinddetail-biblio-search.tt | 6 +- .../prog/en/modules/cataloguing/addbiblio.tt | 28 ++++++---- koha-tmpl/intranet-tmpl/prog/img/up.png | Bin 362 -> 0 bytes koha-tmpl/intranet-tmpl/prog/js/cataloging.js | 52 +++++++----------- 7 files changed, 108 insertions(+), 59 deletions(-) delete mode 100644 koha-tmpl/intranet-tmpl/prog/img/up.png diff --git a/cataloguing/addbiblio.pl b/cataloguing/addbiblio.pl index 6478bb2dfe..8fd050826e 100755 --- a/cataloguing/addbiblio.pl +++ b/cataloguing/addbiblio.pl @@ -511,7 +511,7 @@ sub build_tabs { for ( my $tabloop = 0 ; $tabloop <= $max_num_tab ; $tabloop++ ) { my @loop_data = (); #innerloop in the template. my $i = 0; - foreach my $tag (@tab_data) { + foreach my $tag (sort @tab_data) { $i++; next if ! $tag; my ($indicator1, $indicator2); diff --git a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css index 9fdbedb93c..28cf3414c2 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css +++ b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css @@ -15,6 +15,49 @@ div#toolbar { margin: .3em 0; } +ul.sortable_field, ul.sortable_subfield { + margin-bottom: 0; + padding-left: 0; +} + +ul li.tag, ul li.tag li.subfield_line { + list-style-type: none; + position: relative; + padding-left: 30px; +} + +ul li.tag:before, ul li.tag li.subfield_line:before { + position: absolute; + font-family: 'FontAwesome'; + font-size: .8em; + top: 0; + left: 10px; + content: "\f047"; +} + +ul li.tag:before { + padding-top: 1.7em; +} + +li.ui-sortable-helper { + background-color: #e0e0e0; + max-height: 150px; + padding: 2px; + border-radius: 4px; +} + +li.ui-sortable-helper ul li { + display: none !important; +} + +.sortable_subfield .ui-sortable-helper input.flat { + background-color: transparent; +} + +ul li.tag li.subfield_line.ui-sortable-helper::before { + top: 5px; +} + .buttonPlus { font-weight : bold; text-decoration : none; @@ -44,14 +87,14 @@ a.expandfield { padding: .7em 0; } -div.subfield_line { +li.subfield_line { padding-bottom: .3em; float: left; clear: left; width: 100%; } -div.subfield_line label { +li.subfield_line label { font-size:89%; float: left; padding-right : .4em; @@ -266,7 +309,7 @@ tbody tr.active td { } @media (min-width: 768px) { - div.subfield_line label { + li.subfield_line label { width: 20em; } @@ -280,7 +323,7 @@ tbody tr.active td { } @media (min-width: 1200px) { - div.subfield_line label { + li.subfield_line label { width: 25em; } diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/authorities.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/authorities.tt index 51f4b2af84..bf2dffc6ca 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/authorities.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/authorities.tt @@ -12,7 +12,9 @@ }); var Sticky; $(document).ready(function() { - $('#authoritytabs').tabs(); + var tabs = $('#authoritytabs').tabs(); + $( "ul.sortable_field", tabs ).sortable(); + $( "ul.sortable_subfield", tabs ).sortable(); Sticky = $("#toolbar"); Sticky.hcSticky({ stickTo: ".main", @@ -235,9 +237,17 @@ function confirmnotdup(redirect){ [% FOREACH BIG_LOO IN BIG_LOOP %]
+ [% previous = "" %] [% FOREACH innerloo IN BIG_LOO.innerloop %] [% IF ( innerloo.tag ) %] -
+ [% IF innerloo.tag != previous %] + [% IF previous != "" %] + + [% END %] + [% previous = innerloo.tag %] +
    + [% END %] +
  • [% UNLESS hide_marc %] [% IF advancedMARCEditor %] @@ -316,9 +326,10 @@ function confirmnotdup(redirect){
    +
      [% FOREACH subfield_loo IN innerloo.subfield_loop %] -
      +
    • [% UNLESS advancedMARCEditor %] [% IF ( subfield_loo.fixedfield ) %]
      • + [% END %] -
+ + [% END %] + [% END %]
[% END %] diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/blinddetail-biblio-search.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/blinddetail-biblio-search.tt index b9635b372a..6822225ea9 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/blinddetail-biblio-search.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/blinddetail-biblio-search.tt @@ -46,7 +46,7 @@ } catch(e) { return; } - var field_start = whichfield.parentNode.parentNode; + var field_start = whichfield.parentNode.parentNode.parentNode; // Sets the good number of form fields for the specified subfield // Returns false if the cloning failed @@ -58,7 +58,7 @@ // Find the subfield we want to clone var re = new RegExp('^subfield' + subfield_name,'g'); - var subfields = $(field_start).children('div').filter( function() { + var subfields = $(field_start).children('ul').children('li').filter( function() { return this.id.match(re); }); @@ -89,7 +89,7 @@ // Find the subfields where we will add the new values var re = new RegExp('^subfield' + subfield_name,'g'); - var subfields = $(field_start).children('div').filter( function() { + var subfields = $(field_start).children('ul').children('li').filter( function() { return this.id.match(re); }); diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt index 44387ff9bd..8bbb1bfa44 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt @@ -23,9 +23,11 @@ $("#toolbar").hide(); [% END %] - $('#addbibliotabs').tabs().bind('show.ui-tabs', function(e, ui) { + var $tabs = $('#addbibliotabs').tabs().bind('show.ui-tabs', function(e, ui) { $("#"+ui.panel.id+" input:eq(0)").focus(); }); + $( "ul.sortable_field", $tabs ).sortable(); + $( "ul.sortable_subfield", $tabs ).sortable(); [% IF tab %] link = $("a[href='#[% tab | html %]']"); @@ -664,9 +666,17 @@ [% IF ( BIG_LOOP.size > 1 ) %]

Section [% BIG_LOO.number | html %]

[% END %] + [% previous = "" %] [% FOREACH innerloo IN BIG_LOO.innerloop %] [% IF ( innerloo.tag ) %] -
+ [% IF innerloo.tag != previous %] + [% IF previous != "" %] + + [% END %] + [% previous = innerloo.tag %] +
    + [% END %] +
  • [% IF advancedMARCEditor %] [% innerloo.tag | html %] @@ -725,9 +735,10 @@
    +
      [% FOREACH subfield_loo IN innerloo.subfield_loop %] -
      +
    • [% UNLESS advancedMARCEditor %] [% IF ( subfield_loo.fixedfield ) %]
      • + [% END # /FOREACH subfield_loop %] -
+ + [% END %] [% END # /FOREACH BIG_LOO.innerloop %] + [% END # /FOREACH BIG_LOOP %] diff --git a/koha-tmpl/intranet-tmpl/prog/img/up.png b/koha-tmpl/intranet-tmpl/prog/img/up.png deleted file mode 100644 index f3ede90e338da29efc9085968fe7df265fdb738a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 362 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJOS+@4BLl - var divs = original.getElementsByTagName('div'); - for(var i=0,divslen = divs.length ; i + var lis = original.getElementsByTagName('li'); + for(var i=0,lislen = lis.length ; i show all subfields - divs[i].style.display = 'block'; - } else if (divs[i].style.display == 'none') { + lis[i].style.display = 'block'; + } else if (lis[i].style.display == 'none') { // show - divs[i].style.display = 'block'; + lis[i].style.display = 'block'; } else { // hide - divs[i].style.display = 'none'; + lis[i].style.display = 'none'; } } } @@ -101,16 +101,16 @@ var Select2Utils = { * @param advancedMARCEditor '0' for false, '1' for true */ function CloneField(index, hideMarc, advancedMARCEditor) { - var original = document.getElementById(index); //original
+ var original = document.getElementById(index); //original
  • Select2Utils.removeSelect2(original); var clone = original.cloneNode(true); var new_key = CreateKey(); var new_id = original.getAttribute('id')+new_key; - clone.setAttribute('id',new_id); // setting a new id for the parent div + clone.setAttribute('id',new_id); // setting a new id for the parent li - var divs = clone.getElementsByTagName('div'); + var divs = Array.from(clone.getElementsByTagName('li')).concat(Array.from(clone.getElementsByTagName('div'))); // if hide_marc, indicators are hidden fields // setting a new name for the new indicator @@ -120,10 +120,10 @@ function CloneField(index, hideMarc, advancedMARCEditor) { } // settings all subfields - for(var i=0,divslen = divs.length ; i