Attachment 106878 Details for Bug 22399 – Bug 22399: Improve responsive behavior of the basic marc editor

[patch] Bug 22399: Improve responsive behavior of the basic marc editor

Bug-22399-Improve-responsive-behavior-of-the-basic.patch (text/plain), 26.72 KB, created by Owen Leonard on 2020-07-14 18:52:01 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2020-07-14 18:52:01 UTC

Size: 26.72 KB

patch

obsolete

>From 49e642f02034a6263d0610623816e75b7ee11e00 Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Tue, 14 Jul 2020 18:46:19 +0000
>Subject: [PATCH] Bug 22399: Improve responsive behavior of the basic marc
> editor
>
>This patch makes markup and style changes to the basic MARC editor in
>order to improve the page's handling of smaller browser widths. It adds
>flexbox styling to elements of the form to help accomplish this.
>
>To test, apply the patch and load a record for editing in the basic MARC
>editor.
>
>- Adjust your browser width and confirm that the form adjusts well
>  to various widths.
>- Test that the markup changes haven't broken the JavaScript-driven
>  features in the editor:
>  - Clone tags
>  - Delete tags
>  - Expand and collapse tags
>  - Clone subfields
>  - Delete subfields
>  - Re-order subfields
>  - Cataloging plugins:
>    - Focus-driven plugins like on tag 000
>    - Popup plugins like 008 or authority-linked tags
>    - Select2-styled dropdowns (e.g. 942$c Item type).
>- Test the add/edit items form to confirm that it is still styled as it
>  was before.
>---
> koha-tmpl/intranet-tmpl/prog/css/addbiblio.css     |  59 ++++++---
> .../prog/en/modules/cataloguing/addbiblio.tt       | 132 +++++++++++----------
> koha-tmpl/intranet-tmpl/prog/js/cataloging.js      |  74 ++++++------
> 3 files changed, 153 insertions(+), 112 deletions(-)
>
>diff --git a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
>index 1b642eced3..df2ab3cf54 100644
>--- a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
>+++ b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
>@@ -109,8 +109,8 @@ li.subfield_line {
> li.subfield_line label {
>     font-size:89%;
>     float: left;
>-	 padding-right : .4em;
>-    width: 16em;
>+    padding-right: .4em;
>+    width: 10em;
>     text-align: left;
>     clear:left;
> }
>@@ -151,12 +151,29 @@ a.tagnum {
> }
> 
> .subfieldcode {
>-	display: block;
>-	float: left;
>+    display: block;
>+    float: left;
> }
> 
> .labelsubfield {
>-	float:left;
>+    float: left;
>+}
>+
>+#cat_addbiblio .subfieldcode {
>+    float: none;
>+}
>+
>+#cat_addbiblio .labelsubfield {
>+    font-size: 90%;
>+}
>+
>+#cat_addbiblio .subfield {
>+    float: none;
>+    padding: .25em .5em;
>+}
>+
>+#cat_addbiblio .subfield label {
>+    color: #00698a;
> }
> 
> .input_marceditor {
>@@ -164,6 +181,24 @@ a.tagnum {
> 	width:30em;
> }
> 
>+#cat_addbiblio .input_marceditor {
>+    float: none;
>+    width: 100%;
>+}
>+
>+#cat_addbiblio .subfield_line {
>+    display: flex;
>+}
>+
>+#cat_addbiblio .field_marceditor {
>+    flex-grow: 1;
>+    padding: .25em .5em;
>+}
>+
>+#cat_addbiblio .subfield_loop_mandatory {
>+    padding: .25em .5em;
>+}
>+
> .indicator {
>     width: 1em;
>     box-sizing: content-box;
>@@ -177,12 +212,13 @@ a.tagnum {
> #cataloguing_additem_newitem fieldset.rows li {
> 	padding-bottom : 3px;
> }
>+
> #cataloguing_additem_newitem .input_marceditor {
>-	width : auto;
>+    width: auto;
> }
> 
> #cataloguing_additem_newitem textarea.input_marceditor {
>-     width : 31em;
>+    width: 31em;
> }
> 
> .mandatory_marker {
>@@ -193,18 +229,11 @@ a.tagnum {
> .linktools a {margin:0 2px;padding:2px;background-color:#FFF;text-align:center; }
> .linktools a:first-child { border-bottom: 1px solid #DDD; }
> .linktools a:hover { background-color: #FFC; }
>-.subfield_controls { margin : 0 .5em; }
>+.subfield_controls { margin: 0 .5em; }
> 
> #cataloguing_additem_itemlist {
> 	margin-bottom : 1em;
> }
>-.yui-gf div.first {
>-	width : 19%;
>-}
>-
>-.yui-gf .yui-u {
>-	width: 79.2%;
>-}
> 
> tbody tr.active:nth-child(2n+1) td,
> tbody tr.active td {
>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 66d253e363..3497d570b1 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
>+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
>@@ -479,7 +479,9 @@
> [% INCLUDE 'select2.inc' %]
> <script>
>   $(document).ready(function() {
>-    $('.subfield_line select').select2();
>+    $('.subfield_line select').select2({
>+        width: "100%"
>+    });
>   });
> </script>
> 
>@@ -787,81 +789,87 @@
>                                         [% FOREACH subfield_loo IN innerloo.subfield_loop %]
>                                             
>                                             <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">
>+                                                    <input type="text"
>+                                                            title="[% subfield_loo.marc_lib | $raw %]"
>+                                                            style=" [% IF ( subfield_loo.fixedfield ) %]display:none; [% END %]border:0;"
>+                                                            name="tag_[% subfield_loo.tag | html %]_code_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]"
>+                                                            value="[% subfield_loo.subfield | html %]"
>+                                                            size="1"
>+                                                            maxlength="1"
>+                                                            class="flat"
>+                                                            tabindex="0" />
>+                                                </div>
>                                                 [% UNLESS advancedMARCEditor %]
>-                                                    [% IF ( subfield_loo.fixedfield ) %]
>-                                                        <label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" style="display:none;" class="labelsubfield">
>+                                                    [% IF ( subfield_loo.mandatory ) %]
>+                                                        <div class="subfield subfield_mandatory">
>+                                                    [% ELSIF ( subfield_loo.important ) %]
>+                                                        <div class="subfield subfield_important">
>                                                     [% ELSE %]
>-                                                        <label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" class="labelsubfield">
>+                                                        <div class="subfield">
>                                                     [% END %]
>-                                                [% END %]
>-
>-                                                    <span class="subfieldcode">
>-                                                            <input type="text"
>-                                                                title="[% subfield_loo.marc_lib | $raw %]"
>-                                                                style=" [% IF ( subfield_loo.fixedfield ) %]display:none; [% END %]border:0;"
>-                                                                name="tag_[% subfield_loo.tag | html %]_code_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]"
>-                                                                value="[% subfield_loo.subfield | html %]"
>-                                                                size="1"
>-                                                                maxlength="1"
>-                                                                class="flat"
>-                                                                tabindex="0" />
>-                                                    </span>
>-
>-                                                [% UNLESS advancedMARCEditor %]
>-                                                        [% IF ( subfield_loo.mandatory ) %]
>-                                                            <span class="subfield subfield_mandatory">
>-                                                        [% ELSIF ( subfield_loo.important ) %]
>-                                                            <span class="subfield subfield_important">
>+                                                        [% IF ( subfield_loo.fixedfield ) %]
>+                                                            <label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" style="display:none;" class="labelsubfield">
>                                                         [% ELSE %]
>-                                                            <span class="subfield">
>+                                                            <label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" class="labelsubfield">
>                                                         [% END %]
>                                                         [% subfield_loo.marc_lib | $raw %]
>-                                                        </span>
>-                                                    </label>
>+                                                        </label>
>+                                                    </div>
>                                                 [% END %]
> 
>-                                                [% SET mv = subfield_loo.marc_value %]
>-                                                [% IF ( mv.type == 'text' ) %]
>-                                                    [% IF ( mv.readonly == 1 ) %]
>-                                                        <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor readonly" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" readonly="readonly" />
>-                                                    [% ELSE %]
>-                                                        <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" />
>-                                                    [% END %]
> 
>-                                                    [% IF ( mv.authtype ) %]
>-                                                        <span class="subfield_controls"><a href="#" class="buttonDot tag_editor" onclick="openAuth(this.parentNode.parentNode.getElementsByTagName('input')[1].id,'[%- mv.authtype | html -%]','biblio'); return false;" tabindex="1" title="Tag editor">Tag editor</a></span>
>-                                                    [% END %]
>-                                                [% ELSIF ( mv.type == 'text_complex' ) %]
>-                                                    <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor framework_plugin" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" />
>-                                                    <span class="subfield_controls">
>-                                                        [% IF mv.noclick %]
>-                                                            <span class="buttonDot tag_editor disabled" tabindex="-1" title="Field autofilled by plugin"></span>
>+                                                [% SET mv = subfield_loo.marc_value %]
>+                                                <div id="field_marceditor[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]" class="field_marceditor">
>+                                                    [% IF ( mv.type == 'text' ) %]
>+                                                        [% IF ( mv.readonly == 1 ) %]
>+                                                            <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor readonly" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" readonly="readonly" />
>                                                         [% ELSE %]
>-                                                            <a href="#" id="buttonDot_[% mv.id | html %]" class="buttonDot tag_editor framework_plugin" tabindex="1" title="Tag editor">Tag editor</a>
>+                                                            <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" />
>                                                         [% END %]
>-                                                    </span>
>-                                                    [% mv.javascript | $raw %]
>-                                                [% ELSIF ( mv.type == 'hidden' ) %]
>-                                                    <input tabindex="1" type="hidden" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" value="[%- mv.value | html -%]" />
>-                                                [% ELSIF ( mv.type == 'textarea' ) %]
>-                                                    <textarea cols="70" rows="4" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" class="input_marceditor" tabindex="1">[%- mv.value | html -%]</textarea>
>-                                                [% ELSIF ( mv.type == 'select' ) %]
>-                                                    <select name="[%- mv.name | html -%]" tabindex="1" size="1" class="input_marceditor" id="[%- mv.id | html -%]">
>-                                                    [% FOREACH aval IN mv.values %]
>-                                                        [% IF aval == mv.default %]
>-                                                        <option value="[%- aval | html -%]" selected="selected">[%- mv.labels.$aval | html -%]</option>
>-                                                        [% ELSE %]
>-                                                        <option value="[%- aval | html -%]">[%- mv.labels.$aval | html -%]</option>
>+
>+                                                    [% ELSIF ( mv.type == 'text_complex' ) %]
>+                                                        <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor framework_plugin" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" />
>+
>+                                                        [% mv.javascript | $raw %]
>+                                                    [% ELSIF ( mv.type == 'hidden' ) %]
>+                                                        <input tabindex="1" type="hidden" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" value="[%- mv.value | html -%]" />
>+                                                    [% ELSIF ( mv.type == 'textarea' ) %]
>+                                                        <textarea cols="70" rows="4" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" class="input_marceditor" tabindex="1">[%- mv.value | html -%]</textarea>
>+                                                    [% ELSIF ( mv.type == 'select' ) %]
>+                                                        <select name="[%- mv.name | html -%]" tabindex="1" size="1" class="input_marceditor" id="[%- mv.id | html -%]">
>+                                                        [% FOREACH aval IN mv.values %]
>+                                                            [% IF aval == mv.default %]
>+                                                            <option value="[%- aval | html -%]" selected="selected">[%- mv.labels.$aval | html -%]</option>
>+                                                            [% ELSE %]
>+                                                            <option value="[%- aval | html -%]">[%- mv.labels.$aval | html -%]</option>
>+                                                            [% END %]
>                                                         [% END %]
>-                                                    [% END %]
>-                                                    </select>
>-                                                [% END  # /IF (mv.type...) %]
>+                                                        </select>
>+                                                    [% END  # /IF (mv.type...) %]
>+                                                </div>
>                                                 [% IF ( subfield_loo.mandatory ) %]
>-                                                    <span class="required">Required</span>
>+                                                    <div class="subfield_loop_mandatory">
>+                                                        <span class="required">Required</span>
>+                                                    </div>
>                                                 [% ELSIF ( subfield_loo.important ) %]
>-                                                    <span class="important">Important</span>
>+                                                    <div class="subfield_loop_mandatory">
>+                                                        <span class="important">Important</span>
>+                                                    </div>
>                                                 [% END %]
>-                                                <span class="subfield_controls">
>+                                                <div class="subfield_controls">
>+                                                    [% IF ( mv.type == 'text' ) %]
>+                                                        [% IF ( mv.authtype ) %]
>+                                                            <a href="#" class="buttonDot tag_editor" onclick="openAuth(this.parentNode.parentNode.getElementsByTagName('input')[1].id,'[%- mv.authtype | html -%]','biblio'); return false;" tabindex="1" title="Tag editor">Tag editor</a>
>+                                                        [% END %]
>+                                                    [% ELSIF ( mv.type == 'text_complex' ) %]
>+                                                            [% IF mv.noclick %]
>+                                                                <span class="buttonDot tag_editor disabled" tabindex="-1" title="Field autofilled by plugin"></span>
>+                                                            [% ELSE %]
>+                                                                <a href="#" id="buttonDot_[% mv.id | html %]" class="buttonDot tag_editor framework_plugin" tabindex="1" title="Tag editor">Tag editor</a>
>+                                                            [% END %]
>+                                                        </span>
>+                                                    [% END %]
>                                                     [% IF ( subfield_loo.repeatable ) %]
>                                                         <a href="#" class="buttonPlus" tabindex="1" onclick="CloneSubfield('subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]','[% advancedMARCEditor | html %]'); return false;">
>                                                             <img src="[% interface | html %]/[% theme | html %]/img/clone-subfield.png" alt="Clone" title="Clone this subfield" />
>@@ -870,7 +878,7 @@
>                                                             <img src="[% interface | html %]/[% theme | html %]/img/delete-subfield.png" alt="Delete" title="Delete this subfield" />
>                                                         </a>
>                                                     [% END %]
>-                                                </span>
>+                                                </div>
>                                             </li> 
>                                             
>                                         [% END # /FOREACH subfield_loop %]
>diff --git a/koha-tmpl/intranet-tmpl/prog/js/cataloging.js b/koha-tmpl/intranet-tmpl/prog/js/cataloging.js
>index c74d953979..a74177ebc4 100644
>--- a/koha-tmpl/intranet-tmpl/prog/js/cataloging.js
>+++ b/koha-tmpl/intranet-tmpl/prog/js/cataloging.js
>@@ -65,10 +65,10 @@ function ExpandField(index) {
>         if(lis[i].getAttribute('id').match(/^subfield/)){  // if it s a subfield
>             if (!lis[i].style.display) {
>                 // first time => show all subfields
>-                lis[i].style.display = 'block';
>+                lis[i].style.display = 'flex';
>             } else if (lis[i].style.display == 'none') {
>                 // show
>-                lis[i].style.display = 'block';
>+                lis[i].style.display = 'flex';
>             } else {
>                 // hide
>                 lis[i].style.display = 'none';
>@@ -91,7 +91,9 @@ var Select2Utils = {
>         if ($.fn.select2) {
>             var selects = element.getElementsByTagName('select');
>             for (var i=0; i < selects.length; i++) {
>-                $(selects[i]).select2();
>+                $(selects[i]).select2({
>+                    width: "100%"
>+                });
>             }
>         }
>     }
>@@ -124,7 +126,7 @@ function CloneField(index, hideMarc, advancedMARCEditor) {
>     // settings all subfields
>     var divslen = divs.length;
>     for( i=0; i < divslen ; i++ ){      // foreach div/li
>-        if(divs[i].getAttribute("id").match(/^subfield/)){  // if it s a subfield
>+        if( divs[i].getAttribute("id") && divs[i].getAttribute("id").match(/^subfield/)){  // if it s a subfield
> 
>             // set the attribute for the new 'li' subfields
>             divs[i].setAttribute('id',divs[i].getAttribute('id')+new_key);
>@@ -145,38 +147,38 @@ function CloneField(index, hideMarc, advancedMARCEditor) {
>                     textareas[j].value = "";
>                 }
>             }
>+            if( inputs.length > 0 ){
>+                inputs[0].setAttribute('id',inputs[0].getAttribute('id')+new_key);
>+                inputs[0].setAttribute('name',inputs[0].getAttribute('name')+new_key);
> 
>-            inputs[0].setAttribute('id',inputs[0].getAttribute('id')+new_key);
>-            inputs[0].setAttribute('name',inputs[0].getAttribute('name')+new_key);
>-
>-            try {
>-                id_input = inputs[1].getAttribute('id')+new_key;
>-                inputs[1].setAttribute('id',id_input);
>-                inputs[1].setAttribute('name',inputs[1].getAttribute('name')+new_key);
>-            } catch(e) {
>-                try{ // it s a select if it is not an input
>-                    var selects = divs[i].getElementsByTagName('select');
>-                    id_input = selects[0].getAttribute('id')+new_key;
>-                    selects[0].setAttribute('id',id_input);
>-                    selects[0].setAttribute('name',selects[0].getAttribute('name')+new_key);
>-                }catch(e2){ // it is a textarea if it s not a select or an input
>-                    var textaeras = divs[i].getElementsByTagName('textarea');
>-                    id_input = textaeras[0].getAttribute('id')+new_key;
>-                    textaeras[0].setAttribute('id',id_input);
>-                    textaeras[0].setAttribute('name',textaeras[0].getAttribute('name')+new_key);
>+                try {
>+                    id_input = inputs[1].getAttribute('id')+new_key;
>+                    inputs[1].setAttribute('id',id_input);
>+                    inputs[1].setAttribute('name',inputs[1].getAttribute('name')+new_key);
>+                } catch(e) {
>+                    try{ // it s a select if it is not an input
>+                        var selects = divs[i].getElementsByTagName('select');
>+                        id_input = selects[0].getAttribute('id')+new_key;
>+                        selects[0].setAttribute('id',id_input);
>+                        selects[0].setAttribute('name',selects[0].getAttribute('name')+new_key);
>+                    }catch(e2){ // it is a textarea if it s not a select or an input
>+                        var textareas = divs[i].getElementsByTagName('textarea');
>+                        if( textareas.length > 0 ){
>+                            id_input = textareas[0].getAttribute('id')+new_key;
>+                            textareas[0].setAttribute('id',id_input);
>+                            textareas[0].setAttribute('name',textareas[0].getAttribute('name')+new_key);
>+                        }
>+                    }
>+                }
>+                if( $(inputs[1]).hasClass('framework_plugin') ) {
>+                    olddiv= original.getElementsByTagName('li')[i];
>+                    oldcontrol= olddiv.getElementsByTagName('input')[1];
>+                    AddEventHandlers( oldcontrol,inputs[1],id_input );
>                 }
>             }
>-            if( $(inputs[1]).hasClass('framework_plugin') ) {
>-                olddiv= original.getElementsByTagName('li')[i];
>-                oldcontrol= olddiv.getElementsByTagName('input')[1];
>-                AddEventHandlers( oldcontrol,inputs[1],id_input );
>-            }
>-
>-            if (advancedMARCEditor == '0') {
>-                // when cloning a subfield, re set its label too.
>-                var labels = divs[i].getElementsByTagName('label');
>-                labels[0].setAttribute('for',id_input);
>-            }
>+            // when cloning a subfield, re set its label too.
>+            var labels = divs[i].getElementsByTagName('label');
>+            labels[0].setAttribute('for', id_input);
> 
>             // setting its '+' and '-' buttons
>             try {
>@@ -227,7 +229,7 @@ function CloneField(index, hideMarc, advancedMARCEditor) {
>             }
> 
>         } else { // it's a indicator div
>-            if(divs[i].getAttribute('id').match(/^div_indicator/)){
>+            if ( divs[i].getAttribute("id") && divs[i].getAttribute('id').match(/^div_indicator/)) {
> 
>                 // setting a new id for the indicator div
>                 divs[i].setAttribute('id',divs[i].getAttribute('id')+new_key);
>@@ -331,7 +333,9 @@ function CloneSubfield(index, advancedMARCEditor){
>     if(advancedMARCEditor == '0') {
>         // when cloning a subfield, reset its label too.
>         var label = clone.getElementsByTagName('label')[0];
>-        label.setAttribute('for',id_input);
>+        if( label ){
>+            label.setAttribute('for',id_input);
>+        }
>     }
> 
>     // setting a new id for the parent div
>-- 
>2.11.0

Actions: View | Diff | Splinter Review

Attachments on bug 22399: 85569 | 85570 | 85572 | 85621 | 85666 | 106877 | 106878 | 109855 | 112045 | 112390 | 112446