Bugzilla – Attachment 85199 Details for
Bug 21870
Convert browser alerts to modals: OPAC user summary
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 21870: Convert browser alerts to modals: OPAC user summary
Bug-21870-Convert-browser-alerts-to-modals-OPAC-us.patch (text/plain), 11.84 KB, created by
José-Mario Monteiro-Santos
on 2019-02-15 21:16:16 UTC
(
hide
)
Description:
Bug 21870: Convert browser alerts to modals: OPAC user summary
Filename:
MIME Type:
Creator:
José-Mario Monteiro-Santos
Created:
2019-02-15 21:16:16 UTC
Size:
11.84 KB
patch
obsolete
>From 791f82b31a658cd41e73ddd89519466addc70bf4 Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Wed, 27 Jun 2018 17:01:02 +0000 >Subject: [PATCH] Bug 21870: Convert browser alerts to modals: OPAC user > summary > >This patch updates the user summary page in the OPAC so that JavaScript >alerts are replaced with Bootstrap modals. This provides us the ability >to more carefully control the content of confirmation dialogs and their >control buttons. > >A global function for defining a modal confirmation boxes has been >added, to which one can pass: > > - The modal title > - Body > - Text for submit and cancel buttons > - A callback function to trigger on submit > >To test, apply the patch and clear your browser cache if necessary. > > - Log in to the OPAC as a user who has holds and article requests. > - Test the following interactions, both the confirmation and cancel > options for each: > - Cancel a hold > - Suspend all holds > - Resume all holds > - Cancel an article request > >Signed-off-by: Jose-Mario Monteiro-Santos <jose-mario.monteiro-santos@inLibro.com> >--- > .../opac-tmpl/bootstrap/en/modules/opac-user.tt | 74 ++++++++++++++++++---- > koha-tmpl/opac-tmpl/bootstrap/js/global.js | 36 +++++++++++ > 2 files changed, 96 insertions(+), 14 deletions(-) > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt >index 7af3a0f..1256bf6 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt >@@ -762,10 +762,10 @@ > [% END # / IF SuspendHoldsOpac %] > <td class="modify"> > [% IF ( RESERVE.is_cancelable_from_opac ) %] >- <form action="/cgi-bin/koha/opac-modrequest.pl" method="post"> >+ <form id="delete_hold_[% RESERVE.reserve_id | html %]" action="/cgi-bin/koha/opac-modrequest.pl" method="post"> > <input type="hidden" name="biblionumber" value="[% RESERVE.biblionumber | html %]" /> > <input type="hidden" name="reserve_id" value="[% RESERVE.reserve_id | html %]" /> >- <button type="submit" name="submit" class="btn btn-xs btn-danger" onclick="return confirmDelete(MSG_CONFIRM_DELETE_HOLD);"><i class="fa fa-remove"></i> Cancel</button></form> >+ <button data-title="[% RESERVE.biblio.title | html %] [% FOREACH s IN RESERVE.biblio.subtitles %] [% s | html %] [% END %] [% RESERVE.item.enumchron | html %]" data-reserve_id="[% RESERVE.reserve_id | html %]" type="submit" class="btn btn-sm btn-danger btn-delete-hold"><i class="fa fa-remove"></i> Cancel</button></form> > [% END %] > </td> > </tr> >@@ -775,8 +775,8 @@ > > [% IF SuspendHoldsOpac %] > <div> >- <form class="form-inline" action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post"> >- <button type="submit" name="submit" class="btn" onclick="return confirmDelete(MSG_CONFIRM_SUSPEND_HOLDS);"><i class="fa fa-pause"></i> Suspend all holds</button> >+ <form class="form-inline" id="suspend_all_holds" action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post"> >+ <button type="submit" id="suspend_all_submit" class="btn"><i class="fa fa-pause"></i> Suspend all holds</button> > <input type="hidden" name="suspend" value="1" /> > > [% IF AutoResumeSuspendedHolds %] >@@ -788,8 +788,8 @@ > </div> > <br/> > <div> >- <form action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post"> >- <button type="submit" name="submit" class="btn" onclick="return confirmDelete(MSG_CONFIRM_RESUME_HOLDS);"><i class="fa fa-play"></i> Resume all suspended holds</button> >+ <form id="resume_all_holds" action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post"> >+ <button type="submit" id="resume_all_submit" class="btn"><i class="fa fa-play"></i> Resume all suspended holds</button> > <input type="hidden" name="suspend" value="0" /> > </form> > </div> >@@ -885,7 +885,10 @@ > > <td class="article-request-cancel"> > <span class="tdlabel">Cancel:</span> >- <a class="btn btn-xs btn-danger" href="opac-article-request-cancel.pl?id=[% ar.id | html %]" onclick="return confirmDelete(MSG_CONFIRM_DELETE_ARTREQ);"><i class="fa fa-remove"></i> Cancel</a> >+ <form action="/cgi-bin/koha/opac-article-request-cancel.pl" id="delete_article_request_[% ar.id | html %]"> >+ <input type="hidden" name="id" value="[% ar.id | html %]" /> >+ <button data-title="[% ar.biblio.title | html %] [% ar.item.enumchron | html %]" data-article-request_id="[% ar.id | html %]" type="submit" class="btn btn-sm btn-danger btn-delete-article-request"><i class="fa fa-remove"></i> Cancel</button> >+ </form> > </td> > </tr> > [% END %] >@@ -917,17 +920,10 @@ > [% END %] > > [% INCLUDE 'opac-bottom.inc' %] >- >- > [% BLOCK jsinclude %] > [% INCLUDE 'calendar.inc' %] > [% INCLUDE 'datatables.inc' %] > <script> >- //<![CDATA[ >- var MSG_CONFIRM_DELETE_ARTREQ = _("Are you sure you want to cancel this article request?"); >- var MSG_CONFIRM_DELETE_HOLD = _("Are you sure you want to cancel this hold?"); >- var MSG_CONFIRM_SUSPEND_HOLDS = _("Are you sure you want to suspend all holds?"); >- var MSG_CONFIRM_RESUME_HOLDS = _("Are you sure you want to resume all suspended holds?"); > > $(document).ready(function(){ > $('#opac-user-views').tabs(); >@@ -936,6 +932,56 @@ > $(".modal-nojs").addClass("modal").addClass("hide").removeClass("modal-nojs"); > $(".suspend-until").prop("readonly",1); > >+ $(".btn-delete-hold").on("click", function(e){ >+ e.preventDefault(); >+ var hold_title = $(this).data("title"); >+ var reserve_id = $(this).data("reserve_id"); >+ var body = "<p><strong>" + hold_title + "</strong></p>"; >+ confirmModal( hold_title, _("Are you sure you want to cancel this hold?"), _("Yes, cancel hold"), _("No, do not cancel hold"), function( result ){ >+ if( result ){ >+ $("#delete_hold_" + reserve_id ).submit(); >+ } >+ } >+ ); >+ }); >+ >+ $(".btn-delete-article-request").on("click", function(e){ >+ e.preventDefault(); >+ var hold_title = $(this).data("title"); >+ var article_request_id = $(this).data("article-request_id"); >+ var body = "<p><strong>" + hold_title + "</strong></p>"; >+ confirmModal( hold_title, _("Are you sure you want to cancel this article request?"), _("Yes, cancel article request"), _("No, do not cancel article request"), function( result ){ >+ if( result ){ >+ $("#delete_article_request_" + article_request_id ).submit(); >+ } >+ } >+ ); >+ }); >+ >+ $("#suspend_all_submit").on("click", function(e){ >+ e.preventDefault(); >+ var title = _("Are you sure you want to suspend all holds?"); >+ var body = _("All holds will be suspended."); >+ confirmModal( body, title, _("Yes, suspend all holds"), "", function( result ){ >+ if( result ){ >+ $("#suspend_all_holds").submit(); >+ } >+ } >+ ); >+ }); >+ >+ $("#resume_all_submit").on("click", function(e){ >+ e.preventDefault(); >+ var title = _("Are you sure you want to resume all suspended holds?"); >+ var body = _("All holds will resume."); >+ confirmModal( body, title, _("Yes, resume all holds"), _("No, do not resume holds"), function( result ){ >+ if( result ){ >+ $("#resume_all_holds").submit(); >+ } >+ } >+ ); >+ }); >+ > var dTables = $("#checkoutst,#holdst,#overduest,#opac-user-relative-issues-table"); > dTables.each(function(){ > var thIndex = $(this).find("th.psort").index(); >diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js >index 8de2e70..7f95b32 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js >+++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js >@@ -51,3 +51,39 @@ function suffixOf (s, tok) { > var index = s.indexOf(tok); > return s.substring(index + 1); > } >+ >+// Adapted from https://gist.github.com/jnormore/7418776 >+function confirmModal(message, title, yes_label, no_label, callback) { >+ $("#bootstrap-confirm-box-modal").data('confirm-yes', false); >+ if($("#bootstrap-confirm-box-modal").length == 0) { >+ $("body").append('<div id="bootstrap-confirm-box-modal" class="modal">\ >+ <div class="modal-dialog">\ >+ <div class="modal-content">\ >+ <div class="modal-header" style="min-height:40px;">\ >+ <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>\ >+ <h4 class="modal-title"></h4>\ >+ </div>\ >+ <div class="modal-body"><p></p></div>\ >+ <div class="modal-footer">\ >+ <a href="#" id="bootstrap-confirm-box-modal-submit" class="btn btn-danger"><i class="fa fa-check"></i></a>\ >+ <a href="#" id="bootstrap-confirm-box-modal-cancel" data-dismiss="modal" class="btn btn-default"><i class="fa fa-remove"></i></a>\ >+ </div>\ >+ </div>\ >+ </div>\ >+ </div>'); >+ $("#bootstrap-confirm-box-modal-submit").on('click', function () { >+ $("#bootstrap-confirm-box-modal").data('confirm-yes', true); >+ $("#bootstrap-confirm-box-modal").modal('hide'); >+ return false; >+ }); >+ $("#bootstrap-confirm-box-modal").on('hide.bs.modal', function () { >+ if(callback) callback($("#bootstrap-confirm-box-modal").data('confirm-yes')); >+ }); >+ } >+ >+ $("#bootstrap-confirm-box-modal .modal-header h4").text( title || "" ); >+ $("#bootstrap-confirm-box-modal .modal-body p").text( message || "" ); >+ $("#bootstrap-confirm-box-modal-submit").text( yes_label || 'Confirm' ); >+ $("#bootstrap-confirm-box-modal-cancel").text( no_label || 'Cancel' ); >+ $("#bootstrap-confirm-box-modal").modal('show'); >+} >\ No newline at end of file >-- >2.7.4
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 21870
:
82557
|
85199
|
85218