From 25d52f60bced9b26c928c26c88fec23e8d2b14c5 Mon Sep 17 00:00:00 2001
From: Andrii Nugged <nugged@gmail.com>
Date: Thu, 16 Nov 2023 18:20:55 +0200
Subject: [PATCH] Bug 35425: Optimize UX when dragging a Tag or Subfield

To reproduce:
1. Open any biblio and edit that record.
   (select "Edit record" from the "Edit" drop-down menu).
2. Check that selecting the text in any draggable block input/textarea
   fields with a mouse is not possible - it starts dragging instantly.
3. Apply the patch
4. Make sure that draging is activated only when you click
   on the "::" icon in front of the dragged item. And text selection
   works correctly.

Signed-off-by: Phil Ringnalda <phil@chetcolibrary.org>
---
 .../intranet-tmpl/prog/css/addbiblio.css      | 14 ++++-------
 .../prog/en/modules/cataloguing/addbiblio.tt  | 24 +++++++++++--------
 koha-tmpl/intranet-tmpl/prog/js/cataloging.js |  2 ++
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
index 40dc457193..acfae906bf 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
@@ -40,20 +40,16 @@ ul li.tag::before {
     top: 0;
 }
 
-ul li.tag.sortable_tag::before,
-ul li.tag li.subfield_line::before {
+ul .handle {
     color: #999;
-    content: "\f58e";
     cursor: move;
     font-family: "Font Awesome 6 Free";
-    font-size: .8em;
-    left: 10px;
-    position: absolute;
-    top: -3px;
+    font-size: 1em;
+    padding-right: 3px;
 }
 
-ul li.tag li.subfield_line::before {
-    top: 3px;
+ul li.subfield_line .handle {
+    font-size: .8em;
 }
 
 li.sortable-ghost {
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 68cb3126ce..3f09598fa1 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
@@ -78,17 +78,17 @@
             selectTab( "#tab0XX_panel" );
         }
 
-        $("#addbibliotabs ul.sortable_field").each( (i, e) => {
-            Sortable.create(e, {
-                animation: 150
+        function initializeSortable(selector) {
+            $(selector).each((i, e) => {
+                Sortable.create(e, {
+                    handle: '.handle',
+                    direction: 'vertical',
+                    animation: 150,
+                });
             });
-        });
-
-        $("#addbibliotabs ul.sortable_subfield").each( (i, e) => {
-            Sortable.create(e, {
-                animation: 150
-            });
-        });
+        }
+        initializeSortable("#addbibliotabs ul.sortable_field");
+        initializeSortable("#addbibliotabs ul.sortable_subfield");
 
         [% IF tab %]
             hash = "#[% tab | html %]";
@@ -1089,6 +1089,9 @@ $(document).ready(function(){
                                             <li class="tag clearfix" id="tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
                                         [% END %]
                                             <div class="tag_title" id="div_indicator_tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
+                                                [% IF ( innerloo.repeatable ) %]
+                                                <span class="handle">&#xf58e;</span>
+                                                [% END %]
                                                 [% IF advancedMARCEditor %]
                                                     <a href="#" tabindex="1" class="tagnum" title="[% innerloo.tag_lib | html %] - Click to expand this tag" data-field_id="tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">[% innerloo.tag | html %]</a>
                                                 [% ELSE %]
@@ -1151,6 +1154,7 @@ $(document).ready(function(){
                                                 <!--  One line on the marc editor -->
                                                 <li class="subfield_line" style="[% subfield_loo.visibility | html %]" id="subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]">
                                                     <div class="subfieldcode">
+                                                        <span class="handle">&#xf58e;</span>
                                                         <input type="text"
                                                                 title="[% subfield_loo.marc_lib | $raw %]"
                                                                 style=" [% IF ( subfield_loo.fixedfield ) %]display:none; [% END %]border:0;"
diff --git a/koha-tmpl/intranet-tmpl/prog/js/cataloging.js b/koha-tmpl/intranet-tmpl/prog/js/cataloging.js
index 64a5c4cc7f..01c9bcfe99 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/cataloging.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/cataloging.js
@@ -326,6 +326,8 @@ function CloneField(index, hideMarc, advancedMARCEditor) {
 
     $(clone).find("ul.sortable_subfield").each((i, e) => {
         Sortable.create(e, {
+            handle: '.handle',
+            direction: 'vertical',
             animation: 150,
         });
     });
-- 
2.40.0