Attachment 167653 Details for Bug 36651 – Bug 36651: Add placeholder text to the search bar in the OPAC

[patch] Bug 36651: Add placeholder text to the search bar in the OPAC

Bug-36651-Add-placeholder-text-to-the-search-bar-i.patch (text/plain), 11.14 KB, created by Pedro Amorim on 2024-06-12 12:24:13 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Pedro Amorim

Created: 2024-06-12 12:24:13 UTC

Size: 11.14 KB

patch

obsolete

>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> 
> 
>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

Actions: View | Diff | Splinter Review

Attachments on bug 36651: 167628 | 167653 | 167661 | 168010