From fed3353a364b529c0304c00b4ab2915cd455571b Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 30 Apr 2024 17:56:13 +0000
Subject: [PATCH] Bug 36651: Add placeholder text to the search bar in the OPAC

This patch adds placeholder text to the OPAC search bar, with JavaScript
to change the placeholder based on the user's search type selection.

To test, apply the patch and go to the OPAC.

- The search bar should by default have the placeholder "Search the
  catalog by keyword"
- Change the search type (Author, Title, etc). The placeholder text
  should change accordingly.

Signed-off-by: Pedro Amorim <pedro.amorim@ptfs-europe.com>
---
 .../bootstrap/en/includes/masthead.inc        | 41 ++++++++++---------
 koha-tmpl/opac-tmpl/bootstrap/js/global.js    | 12 +++++-
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
index 682a0656a8..624b5a4df0 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
@@ -4,6 +4,7 @@
 [% USE Categories %]
 [% USE AuthClient %]
 [% USE AdditionalContents %]
+[% PROCESS 'i18n.inc' %]
 [% PROCESS 'html_helpers.inc' %]
 [% IF Koha.Preference( 'CookieConsent' ) %]
     [% USE JSConsents %]
@@ -192,51 +193,51 @@
                                             <div class="col-sm-auto order-2 order-sm-2">
                                                 <select name="idx" id="masthead_search" class="form-control">
                                                     [% IF ( ms_kw ) %]
-                                                        <option selected="selected" value="">Library catalog</option>
+                                                        <option selected="selected" value="" data-placeholder="[% t("Search the catalog by keyword") | html %]">Library catalog</option>
                                                     [% ELSE %]
-                                                        <option value="">Library catalog</option>
+                                                        <option value="" data-placeholder="[% t("Search the catalog by keyword") | html %]">Library catalog</option>
                                                     [% END # /ms_kw %]
                                                     [% IF ( ms_ti ) %]
-                                                        <option selected="selected" value="ti">Title</option>
+                                                        <option selected="selected" value="ti" data-placeholder="[% t("Search the catalog by title") | html %]">Title</option>
                                                     [% ELSE %]
-                                                        <option value="ti">Title</option>
+                                                        <option value="ti" data-placeholder="[% t("Search the catalog by title") | html %]">Title</option>
                                                     [% END # /ms_ti %]
                                                     [% IF ( ms_au ) %]
-                                                        <option selected="selected" value="au">Author</option>
+                                                        <option selected="selected" value="au" data-placeholder="[% t("Search the catalog by author") | html %]">Author</option>
                                                     [% ELSE %]
-                                                        <option value="au">Author</option>
+                                                        <option value="au" data-placeholder="[% t("Search the catalog by author") | html %]">Author</option>
                                                     [% END # /ms_au%]
                                                     [% IF ( ms_su ) %]
-                                                        <option selected="selected" value="su">Subject</option>
+                                                        <option selected="selected" value="su" data-placeholder="[% t("Search the catalog by subject") | html %]">Subject</option>
                                                     [% ELSE %]
-                                                        <option value="su">Subject</option>
+                                                        <option value="su" data-placeholder="[% t("Search the catalog by subject") | html %]">Subject</option>
                                                     [% END # /ms_su %]
                                                     [% IF ( ms_nb ) %]
-                                                        <option selected="selected" value="nb">ISBN</option>
+                                                        <option selected="selected" value="nb" data-placeholder="[% t("Search the catalog by ISBN") | html %]">ISBN</option>
                                                     [% ELSE %]
-                                                        <option value="nb">ISBN</option>
+                                                        <option value="nb" data-placeholder="[% t("Search the catalog by ISBN") | html %]">ISBN</option>
                                                     [% END # /ms_nb%]
                                                     [% IF ( ms_ns ) %]
-                                                        <option selected="selected" value="ns">ISSN</option>
+                                                        <option selected="selected" value="ns" data-placeholder="[% t("Search the catalog by ISSN") | html %]">ISSN</option>
                                                     [% ELSE %]
-                                                        <option value="ns">ISSN</option>
+                                                        <option value="ns" data-placeholder="[% t("Search the catalog by ISSN") | html %]">ISSN</option>
                                                     [% END # /ms_ns%]
                                                     [% IF ( ms_se ) %]
-                                                        <option selected="selected" value="se">Series</option>
+                                                        <option selected="selected" value="se" data-placeholder="[% t("Search the catalog by series") | html %]">Series</option>
                                                     [% ELSE %]
-                                                        <option value="se">Series</option>
+                                                        <option value="se" data-placeholder="[% t("Search the catalog by series") | html %]">Series</option>
                                                     [% END # /ms_se %]
                                                     [% IF ( Koha.Preference('OPACNumbersPreferPhrase') ) %]
                                                         [% IF ( ms_callnumcommaphr ) %]
-                                                            <option selected="selected" value="callnum,phr">Call number</option>
+                                                            <option selected="selected" value="callnum,phr" data-placeholder="[% t("Search the catalog by call number") | html %]">Call number</option>
                                                         [% ELSE %]
-                                                            <option value="callnum,phr">Call number</option>
+                                                            <option value="callnum,phr" data-placeholder="[% t("Search the catalog by call number") | html %]">Call number</option>
                                                         [% END #/ms_callnumcommaphr %]
                                                     [% ELSE %]
                                                         [% IF ( ms_callnum ) %]
-                                                            <option selected="selected" value="callnum">Call number</option>
+                                                            <option selected="selected" value="callnum" data-placeholder="[% t("Search the catalog by call number") | html %]">Call number</option>
                                                         [% ELSE %]
-                                                            <option value="callnum">Call number</option>
+                                                            <option value="callnum" data-placeholder="[% t("Search the catalog by call number") | html %]">Call number</option>
                                                         [% END # /ms_callnum %]
                                                     [% END # /IF OPACNumbersPreferPhrase %]
                                                 </select>
@@ -244,9 +245,9 @@
 
                                             <div class="col order-4 order-sm-3">
                                                 [% IF ( !Koha.Preference( 'OpacAddMastheadLibraryPulldown' ) == 1 && mylibraryfirst ) %]
-                                                    <input type="text" class="transl1 form-control form-control-filtered" id="translControl1" name="q" value="[% ms_value | html %]" data-toggle="tooltip" data-placement="top" title="Searching in [% Branches.GetName( mylibraryfirst ) | html %] only" /><span id="translControl"></span>
+                                                    <input type="text" class="transl1 form-control form-control-filtered" id="translControl1" name="q" value="[% ms_value | html %]" data-toggle="tooltip" data-placement="top" title="Searching in [% Branches.GetName( mylibraryfirst ) | html %] only" placeholder="Search the catalog by keyword" /><span id="translControl"></span>
                                                 [% ELSE %]
-                                                    <input type="text" class="transl1 form-control" id="translControl1" name="q" value="[% ms_value | html %]" /><span id="translControl"></span>
+                                                    <input type="text" class="transl1 form-control" id="translControl1" name="q" value="[% ms_value | html %]" placeholder="Search the catalog by keyword" /><span id="translControl"></span>
                                                 [% END # /ms_value %]
                                             </div> <!-- /.col -->
 
diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
index 9a48e3a8f5..694239e95a 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js
+++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
@@ -249,7 +249,12 @@ var facetHandler = function (e) {
     $(".menu-collapse").toggle();
 };
 
-$(document).ready(function () {
+function setPlaceholder(){
+    let search_placeholder = $("#masthead_search option:selected").data("placeholder");
+    $("#translControl1").attr("placeholder", search_placeholder );
+}
+
+$(document).ready(function(){
     $("html").removeClass("no-js").addClass("js");
     $(".close").click(function () {
         window.close();
@@ -337,4 +342,9 @@ $(document).ready(function () {
         e.preventDefault();
         $("html,body").animate({ scrollTop: 0 }, "slow");
     });
+
+    setPlaceholder();
+    $("#masthead_search").on("change", function(){
+        setPlaceholder();
+    });
 });
-- 
2.34.1