Bug 16557 - Remove the use of "onclick" from several include files

This patch modifies several include files, removing "onclick" attributes
in favor of defining events in JavaScript.

A reusable "toggle" function has been added to the global JS file so
that clicking elements with the class "toggle_element" will toggle the
display of elements as defined in the click target's "data-element"
attribute.

Also changed: In subtypes_unimarc.inc some capitalization errors have
been fixed and label/id pairs corrected.

To test, apply the patch and clear your browser cache if necessary.

- On the Acquisitions home page, click the "Orders search" header search
  tab. Clicking the [+] link should expand and collapse the additional
  search fields.

- On the checkout or patron detail page, view the "Restrictions" tab.
  Click to add a restriction and use the datepicker to select a date.
  Clicking the "Clear date" link should clear the date.

- Trigger the help window on any page. Clicking the "close window"
  button should work correctly.

- Go to Administration -> Patron categories -> Edit. Checking and
  unchecking messaging preference options should work correctly. The "do
  not notify" checkbox should clear other checkboxes in that row and
  vice versa.

- In Serials, from a subscription detail page, clicking the "Renew"
  button should trigger the renew popup.

- Go to Acquisitions -> Vendor -> Add to basket -> From a subscription.
  Clicking the "Advanced search" link in the left hand sidebar should
  toggle the sidebar search form.

- In a UNIMARC system, view the advanced search page. Clicking the "Show
  coded information filters" link should show additional search fields.
  (I tested in my MARC21 system by temporarily moving line 174 of
  advsearch.tt to line 172).

Signed-off-by: Claire Gravely <c.gravely@arts.ac.uk>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc
index 5aebf54..26ab7f1 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc
@@ -14,8 +14,8 @@
         <label for="title">Title: </label> <input type="text" id="title" name="title" size="15" value="[% title %]" />
         <label for="searchsupplier">Vendor:</label> <input type="text" id="searchsupplier" name="name" size="15" value="[% name|html %]" />
         <input type="hidden" id="do_search" name="do_search" value="do" />
-        <span class="filteraction" id="filteraction_off" style="display:none"> <a href="#" onclick="$('#filters,.filteraction').toggle();">[-]</a></span>
-        <span class="filteraction" id="filteraction_on"> <a href="#" onclick="$('#filters,.filteraction').toggle();">[+]</a></span>
+        <span class="filteraction" id="filteraction_off" style="display:none"> <a href="#" class="toggle_element" data-element="#filters,.filteraction">[-]</a></span>
+        <span class="filteraction" id="filteraction_on"> <a href="#" class="toggle_element" data-element="#filters,.filteraction">[+]</a></span>
     <input value="Submit" class="submit" type="submit" /> <a href="/cgi-bin/koha/acqui/histsearch.pl">Advanced search</a>
     <p id="filters" style="display:none">
       <label for="basket">Basket: </label><input type="text" name="basket" id="basket" />

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/borrower_debarments.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/borrower_debarments.inc
index aea0889..e3adea0 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/borrower_debarments.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/borrower_debarments.inc
@@ -17,6 +17,11 @@
                 mrform.hide();
                 e.preventDefault();
             });
+            $(".clear-date").on("click",function(e){
+                e.preventDefault();
+                var fieldID = this.id.replace("clear-date-","");
+                $("#" + fieldID).val("");
+            });
         })
     //]]>
 </script>
@@ -75,7 +80,7 @@
                 <ol>
                     <li><label for="rcomment">Comment:</label> <input type="text" id="rcomment" name="comment" /></li>
                     <li><label for="rexpiration">Expiration:</label> <input name="expiration" id="rexpiration" size="10" readonly="readonly" value="" class="datepicker" />
-                        <a href='#' onclick="document.getElementById('expiration').value='';">Clear date</a></li>
+                        <a href="#" class="clear-date" id="clear-date-rexpiration">Clear date</a></li>
                 </ol>
             <fieldset class="action"><input type="submit" value="Add restriction" /> <a href="#" class="cancel" id="cancel_manual_restriction">Cancel</a></fieldset>
             </fieldset>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/help-bottom.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/help-bottom.inc
index b7b72c7..9a2fb5a 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/help-bottom.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/help-bottom.inc
@@ -1,5 +1,5 @@
 <form action="/cgi-bin/koha/edithelp.pl" method="post">
-  <fieldset class="action"><input type="button" class="submit" onclick="window.close(); return false;" value="Close help window" />
+  <fieldset class="action"><input type="button" class="close" value="Close help window" />
   <input type="hidden" name="type" value="modify" />
   <input type="hidden" name="referer" value="[% referer %]" />
   <input type="submit" class="submit" value="Edit help" /></fieldset>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/messaging-preference-form.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/messaging-preference-form.inc
index 953b9ef..a5da438 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/messaging-preference-form.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/messaging-preference-form.inc
@@ -5,7 +5,7 @@ $(document).ready(function(){
     $(".none").click(function(){
         if($(this).prop("checked")){
             var rowid = $(this).attr("id");
-            newid = Number(rowid.replace("none",""))
+            newid = Number(rowid.replace("none",""));
             $("#sms"+newid).prop("checked", false);
             $("#email"+newid).prop("checked", false);
             $("#phone"+newid).prop("checked", false);
@@ -13,6 +13,12 @@ $(document).ready(function(){
             $("#rss"+newid).prop("checked", false);
         }
     });
+    $(".active_notify").on("change",function(){
+        var attr_id = $(this).data("attr-id");
+        if( $(this).prop("checked") ){
+            $("#none" + attr_id ).prop("checked", false);
+        }
+    });
     $("#info_digests").tooltip();
 });
 //]]>
@@ -75,12 +81,12 @@ $(document).ready(function(){
                  <input type="checkbox"
                  id="sms[% messaging_preference.message_attribute_id %]"
                  name="[% messaging_preference.message_attribute_id %]"
-                 value="sms" checked="checked" onclick = "$('#none'+'[% messaging_preference.message_attribute_id %]').prop('checked', false);" />
+                 value="sms" checked="checked" class="active_notify" data-attr-id="[% messaging_preference.message_attribute_id %]" />
               [% ELSE %]
                  <input type="checkbox"
                  id="sms[% messaging_preference.message_attribute_id %]"
                  name="[% messaging_preference.message_attribute_id %]"
-                 value="sms" onclick = "$('#none'+'[% messaging_preference.message_attribute_id %]').prop('checked', false);" />
+                 value="sms" class="active_notify" data-attr-id="[% messaging_preference.message_attribute_id %]" />
               [% END %]
           [% END %]
       </td>[% END %]
@@ -103,12 +109,12 @@ $(document).ready(function(){
                  <input type="checkbox"
                  id="phone[% messaging_preference.message_attribute_id %]"
                  name="[% messaging_preference.message_attribute_id %]"
-                 value="phone" checked="checked" onclick = "$('#none'+'[% messaging_preference.message_attribute_id %]').prop('checked', false);" />
+                 value="phone" checked="checked" class="active_notify" data-attr-id="[% messaging_preference.message_attribute_id %]" />
               [% ELSE %]
                  <input type="checkbox"
                  id="phone[% messaging_preference.message_attribute_id %]"
                  name="[% messaging_preference.message_attribute_id %]"
-                 value="phone" onclick = "$('#none'+'[% messaging_preference.message_attribute_id %]').prop('checked', false);" />
+                 value="phone" class="active_notify" data-attr-id="[% messaging_preference.message_attribute_id %]" />
               [% END %]
           [% END %]
       </td>[% END %]
@@ -132,12 +138,12 @@ $(document).ready(function(){
             <input type="checkbox"
                  id="email[% messaging_preference.message_attribute_id %]"
                  name="[% messaging_preference.message_attribute_id %]"
-                 value="email" checked="checked" onclick = "$('#none'+'[% messaging_preference.message_attribute_id %]').prop('checked', false);" />
+                 value="email" checked="checked" class="active_notify" data-attr-id="[% messaging_preference.message_attribute_id %]" />
               [% ELSE %]
             <input type="checkbox"
                  id="email[% messaging_preference.message_attribute_id %]"
                  name="[% messaging_preference.message_attribute_id %]"
-                 value="email" onclick = "$('#none'+'[% messaging_preference.message_attribute_id %]').prop('checked', false);" />
+                 value="email" class="active_notify" data-attr-id="[% messaging_preference.message_attribute_id %]" />
               [% END %]
           [% END %]
       </td>
@@ -164,12 +170,12 @@ $(document).ready(function(){
                 <input type="checkbox"
                      id="digest[% messaging_preference.message_attribute_id %]"
                      value="[% messaging_preference.message_attribute_id %]"
-                     name="digest" checked="checked" onclick = "$('#none'+'[% messaging_preference.message_attribute_id %]').prop('checked', false);" />
+                     name="digest" checked="checked" class="active_notify" data-attr-id="[% messaging_preference.message_attribute_id %]" />
               [% ELSE %]
                 <input type="checkbox"
                      id="digest[% messaging_preference.message_attribute_id %]"
                      value="[% messaging_preference.message_attribute_id %]"
-                     name="digest" onclick = "$('#none'+'[% messaging_preference.message_attribute_id %]').prop('checked', false);" />
+                     name="digest" class="active_notify" data-attr-id="[% messaging_preference.message_attribute_id %]" />
               [% END %]
           [% END %]
       </td>
@@ -188,7 +194,7 @@ $(document).ready(function(){
             <input type="checkbox"
                  id="rss[% messaging_preference.message_attribute_id %]"
                  name="[% messaging_preference.message_attribute_id %]"
-                 value="rss"   [% messaging_preference.transport_rss %] onclick = "$('#none'+'[% messaging_preference.message_attribute_id %]').prop('checked', false);" />
+                 value="rss"   [% messaging_preference.transport_rss %] class="active_notify" data-attr-id="[% messaging_preference.message_attribute_id %]" />
           [% END %]
       </td>
       [% ELSE %]

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/serials-toolbar.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/serials-toolbar.inc
index 729d2ee..02348b2 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/serials-toolbar.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/serials-toolbar.inc
@@ -67,7 +67,7 @@
 
         [% IF not cannotedit or CAN_user_serials_receive_serials %]
             [% IF CAN_user_serials_renew_subscription and not closed %]
-                <div class="btn-group"><a id="renew" class="btn btn-small" href="#" onclick="popup([% subscriptionid %])"><i class="fa fa-refresh"></i> Renew</a></div>
+                <div class="btn-group"><a id="renew" class="btn btn-small" href="#"><i class="fa fa-refresh"></i> Renew</a></div>
             [% END %]
             [% IF CAN_user_serials_receive_serials and not closed %]
                 <div class="btn-group"><a id="receive" class="btn btn-small" href="/cgi-bin/koha/serials/serials-edit.pl?subscriptionid=[% subscriptionid %]&amp;serstatus=1,3"><i class="fa fa-inbox"></i> Receive</a></div>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/subscriptions-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/subscriptions-search.inc
index 4f6f1ca..9d6abd7 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/subscriptions-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/subscriptions-search.inc
@@ -1,7 +1,7 @@
 <div id="advsearch">
     <form action="" method="get">
         <fieldset class="brief">
-            <a id="unfold_advsearch" style="cursor:pointer" onclick="$('#advsearch_form').slideToggle(400);">Advanced search</a>
+        <a href="#" class="toggle_element" data-element="#advsearch_form">Advanced search</a>
             <div id="advsearch_form" style="display:none">
             <ol>
               <li>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/subtypes_unimarc.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/subtypes_unimarc.inc
index 02f146f..d564f78 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/subtypes_unimarc.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/subtypes_unimarc.inc
@@ -1,11 +1,14 @@
-<a onclick="javascript:if (document.getElementsByName('Coded_Fields')[0].style.display=='none'){document.getElementsByName('Coded_Fields')[0].style.display='block';} else {document.getElementsByName('Coded_Fields')[0].style.display='none';}">Coded information filters</a>
-<div id="yui-b" style="display:none;" name="Coded_Fields" >
+<p>
+    <a id="show_coded_fields" class="toggle_element" data-element="#Coded_Fields,#show_coded_fields,#hide_coded_fields" href="#"><i class="fa fa-plus-square-o"></i> Show coded information filters</a>
+    <a id="hide_coded_fields" class="toggle_element" data-element="#Coded_Fields,#show_coded_fields,#hide_coded_fields" href="#" style="display:none;"><i class="fa fa-minus-square-o"></i> Hide coded information filters</a>
+</p>
+<div style="display:none;" id="Coded_Fields">
 <!-- SUBTYPE LIMITS -->
-               <fieldset>
-               <legend>Coded Fields</legend>
-               <p>
-               <label>Audience</label>
-               <select name="limit" class="subtype">
+        <fieldset>
+        <legend>Coded fields</legend>
+        <p>
+        <label for="audience">Audience: </label>
+        <select id="audience" name="limit" class="subtype">
             <option value="" selected="selected" >Any</option>
             <option value="ta:a">juvenile, general</option>
             <option value="ta:b">pre-primary (0-5)</option>
@@ -16,10 +19,10 @@
             <option value="ta:m">adult, General</option>
             <option value="ta:u">unknown</option>
                </select>
-               </p>
+        </p>
                <p>
-        <label>Physical presentation</label>
-        <select name="limit" class="subtype">
+        <label for="physical_presentation">Physical presentation: </label>
+        <select id="physical_presentation" name="limit" class="subtype">
             <option value="" selected="selected" >Any</option>
             <option value="ff8-23:r">regular print</option>
             <option value="ff8-23:d">large print</option>
@@ -33,10 +36,10 @@
             <option value="ff8-23:t">microform</option>
             <option value="ff8-23:z">other form of textual material</option>
                </select>
-               </p>
+        </p>
                <p>
-        <label>Literary genre</label>
-               <select name="limit" class="subtype">
+            <label for="literary_genre">Literary genre: </label>
+            <select id="literary_genre" name="limit" class="subtype">
                        <option value="" selected="selected" >Any</option>
             <option value="lf:a">fiction</option>
             <option value="lf:b">drama</option>
@@ -52,8 +55,8 @@
     </select>
     </p>
         <p>
-               <label>Biography</label>
-        <select name="limit" class="subtype" size="1">
+            <label for="biography">Biography: </label>
+            <select id="biography" name="limit" class="subtype">
             <option value="">Any</option>
                 <option value="bio:y">not a biography</option>
                 <option value="bio:a">autobiography</option>
@@ -63,8 +66,8 @@
                </select>
         </p>
         <p>
-               <label>Illustration</label>
-        <select name="limit" class="subtype" size="1">
+            <label for="illustration">Illustration: </label>
+            <select id="illustration" name="limit" class="subtype">
             <option value="">Any</option>
                 <option value="ff8-18-21:a">illustrations</option>
                 <option value="ff8-18-21:b">maps</option>
@@ -85,8 +88,8 @@
         </select>
         </p>
                <p>
-               <label>Content</label>
-               <select name="limit" class="subtype">
+            <label for="content">Content: </label>
+            <select id="content" name="limit" class="subtype">
                        <option value="" >Any</option>
             <option value="ctype:a" >bibliography</option>
             <option value="ctype:b" >catalogue</option>
@@ -114,8 +117,8 @@
                </select>
         </p>
         <p>
-               <label>Video Types</label>
-               <select name="limit" class="subtype">
+            <label for="video_types">Video types: </label>
+            <select id="video_types" name="limit" class="subtype">
             <option value="">Any</option>
                        <option value="Video-mt:a">motion picture</option>
                        <option value="Video-mt:b">visual projection</option>
@@ -123,11 +126,12 @@
                </select>
         </p>
                </fieldset>
+
                <fieldset>
-               <legend>Serials</legend><p>
+        <legend>Serials</legend>
                <p>
-               <label>Serial Type</label>
-               <select name="limit" class="subtype">
+            <label for="serial_type">Serial type: </label>
+            <select id="serial_type" name="limit" class="subtype">
            <option value="">Any type</option>
             <option value="ff8-21:a">Periodical</option>
             <option value="ff8-21:b">Monographic series</option>
@@ -137,10 +141,10 @@
             <option value="ff8-21:g">Updating website</option>
             <option value="ff8-21:z">Other</option>
                </select>
-               </p>
-               <p>
-               <label>Periodicity</label>
-               <select name="limit" class="subtype">
+        </p>
+        <p>
+            <label for="periodicity">Periodicity: </label>
+            <select id="periodicity" name="limit" class="subtype">
                        <option value="">Any</option>
             <option value="ff8-18:a">Daily</option>
             <option value="ff8-18:b">Semiweekly</option>
@@ -161,10 +165,10 @@
             <option value="ff8-18:u">Unknown</option>
             <option value="ff8-18:z">Other</option>
                </select>
-               </p>
-               <p>
-               <label>Regularity</label>
-               <select name="limit" class="subtype">
+        </p>
+        <p>
+            <label for="regularity">Regularity: </label>
+            <select id="regularity" name="limit" class="subtype">
             <option value="">Any regularity</option>
             <option value="ff8-19:a">regular</option>
             <option value="ff8-19:b">normalised irregular</option>
@@ -172,10 +176,11 @@
             <option value="ff8-19:u">unknown</option>
                </select>
         </p>
-
         </fieldset>
+
                <fieldset>
-               <legend>Picture</legend><p>
+        <legend>Picture</legend>
+        <p>
                <select name="limit" class="subtype">
                                <option value="">Any</option>
                                <option value="Graphics-type:a">collage</option>

diff --git a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
index 5f9ed72..90fb095 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
@@ -52,10 +52,16 @@ $.fn.selectTabByID = function (tabID) {
     $("body").on("keypress", ".noEnterSubmit", function(e){
         return checkEnter(e);
     });
+
     $(".keep_text").on("click",function(){
         var field_index = $(this).parent().index();
         keep_text( field_index );
     });
+
+    $(".toggle_element").on("click",function(e){
+        e.preventDefault();
+        $( $(this).data("element") ).toggle();
+    });
 });
 
 // http://jennifermadden.com/javascript/stringEnterKeyDetector.html