Koha/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt
Owen Leonard 9cb89b4639 Bug 20168: Update of the OPAC bootstrap template to bootstrap v4
This patch updates the version of Bootstrap in the OPAC from 2.3.1 to
4.5.0. The Bootstrap JavaScript files have been replaced with custom
builds of the 4.5.0 JavaScript source files. The Bootstrap CSS is now
built into the OPAC CSS by loading the required Bootstrap 4.5.0 SCSS
files in node_modules.

OPAC SCSS now starts with Bootstrap customizations:

/* Bootstrap variable customizations */
$headings-color: #727272;
...

Followed by loading the necessary Bootstrap SCSS files:

/* Bootstrap imports */
@import "../../../../../node_modules/bootstrap/scss/functions";
@import "../../../../../node_modules/bootstrap/scss/variables";
...

Followed by our CSS. The build process for generating compiled CSS now
creates a file which bundles Bootstrap CSS and ours. Removed from the
Koha source: Bootstrap CSS files, Bootstrap "glyphicons" images.

The upgrade to Bootstrap 4 involved a lot of markup changes to conform
with new Bootstrap classes, especially in classes related to the grid.
Besides duplicating the grid we used before, this upgrade adds some new
features made possible by Bootstrap 4.5's use of flexbox as a layout
tool. This includes custom ordering of columns based on class names:
https://getbootstrap.com/docs/4.5/layout/grid/#order-classes.

Other areas where the most changes have been made: Navigation menus,
breadcrumb menus, buttons, dropdowns.

Bootstrap's JavaScript file is now "bootstrap.bundle.min.js" to reflect
the fact that a required JavaScript asset is now distributed separately
in Bootstrap 4. The "bundle" version includes Popper.js.

Unrelated changes: Indentation corrections, removal of invalid
"//<![CDATA[" markers, removal of invalid script type attributes.

To test, apply the patch and run 'yarn install' to install Bootstrap as
an npm module. Run 'yarn build --view opac' to regenerate the OPAC CSS.

Test as many aspect of the OPAC as possible, viewing pages at various
browser widths to confirm that everything adjusts well. Test with
various OPAC interface system preferences enabled and disabled.

Test self checkout and self checkin.

Known issues: RTL support has not been updated.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
2020-09-09 14:13:03 +02:00

254 lines
18 KiB
Text

[% USE Koha %]
[% INCLUDE 'doc-head-open.inc' %]
<title>[% IF ( LibraryNameTitle ) %][% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %][% ELSE %]Koha online[% END %] catalog &rsaquo; Your messaging settings</title>
[% INCLUDE 'doc-head-close.inc' %]
[% BLOCK cssinclude %][% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-messaging' %]
[% INCLUDE 'masthead.inc' %]
<div class="main">
<nav aria-label="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb-item">
<a href="/cgi-bin/koha/opac-main.pl">Home</a>
</li>
<li class="breadcrumb-item">
<a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
</li>
<li class="breadcrumb-item" aria-current="IsPatronPage">
<a href="#">Your messaging settings</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col col-lg-2 order-2 order-lg-1">
<div id="navigation">
[% INCLUDE 'navigation.inc' IsPatronPage=1 %]
</div>
</div>
<div class="col-md-12 col-lg-10 order-1">
[% IF Koha.Preference( 'EnhancedMessagingPreferencesOPAC' ) %]
<div id="usermessaging" class="maincontent">
<h3>Your messaging settings</h3>
[% IF ( settings_updated ) %]
<div class="alert alert-success"><h4>Settings updated</h4></div>
[% END %]
<form action="/cgi-bin/koha/opac-messaging.pl" method="post" name="opacmessaging">
<input type="hidden" name="csrf_token" value="[% csrf_token | html %]" />
<input type="hidden" name="modify" value="yes" />
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>&nbsp;</th>
<th>Days in advance</th>
[% IF ( SMSSendDriver ) %]<th>SMS</th>[% END %]
[% IF ( TalkingTechItivaPhone ) %]<th>Phone</th>[% END %]
<th>Email</th>
<th>Digests only <i id="info_digests" data-toggle="tooltip" title="You can ask for a digest to reduce the number of messages. Messages will be saved and sent as a single message." data-placement="right" class="fa fa-info-circle"></i></th>
</tr>
</thead>
<tbody>
[% FOREACH messaging_preference IN messaging_preferences %]
<tr>
<td>[% IF ( messaging_preference.Item_Due ) %]Item due
[% ELSIF ( messaging_preference.Advance_Notice ) %]Advance notice
[% ELSIF ( messaging_preference.Upcoming_Events ) %]Upcoming events
[% ELSIF ( messaging_preference.Hold_Filled ) %]Hold filled
[% ELSIF ( messaging_preference.Item_Check_in ) %]Item check-in
[% ELSIF ( messaging_preference.Item_Checkout ) %]Item checkout
[% ELSE %]Unknown [% END %]</td>
[% IF ( messaging_preference.takes_days ) %]
<td><select class="input-mini" name="[% messaging_preference.message_attribute_id | html %]-DAYS">
[% FOREACH select_day IN messaging_preference.select_days %]
[% IF ( select_day.selected ) %]
<option value="[% select_day.day | html %]" selected="selected">[% select_day.day | html %]</option>
[% ELSE %]
<option value="[% select_day.day | html %]">[% select_day.day | html %]</option>
[% END %]
[% END %]
</select></td>
[% ELSE %]
<td>-</td>
[% END %]
[% IF ( SMSSendDriver ) %]
[% IF ( messaging_preference.transport_sms ) %]
<td>
[% IF ( messaging_preference.transports_sms ) %]
<input type="checkbox" id="sms[% messaging_preference.message_attribute_id | html %]" name="[% messaging_preference.message_attribute_id | html %]" value="sms" checked="checked" />
[% ELSE %]
<input type="checkbox" id="sms[% messaging_preference.message_attribute_id | html %]" name="[% messaging_preference.message_attribute_id | html %]" value="sms" />
[% END %]
</td>
[% ELSE %]
<td>-</td>
[% END %]
[% END %]
[% IF ( TalkingTechItivaPhone ) %]
[% IF ( messaging_preference.transport_phone ) %]
<td>
[% IF ( messaging_preference.transports_phone ) %]
<input type="checkbox"
id="phone[% messaging_preference.message_attribute_id | html %]"
name="[% messaging_preference.message_attribute_id | html %]"
value="phone" checked="checked" onclick = "document.opacmessaging.none[% messaging_preference.message_attribute_id | html %].checked=false;" />
[% ELSE %]
<input type="checkbox"
id="phone[% messaging_preference.message_attribute_id | html %]"
name="[% messaging_preference.message_attribute_id | html %]"
value="phone" onclick = "document.opacmessaging.none[% messaging_preference.message_attribute_id | html %].checked=false;" />
[% END %]
</td>
[% ELSE %]
<td>-</td>
[% END %]
[% END %]
[% IF ( messaging_preference.transport_email ) %]
<td>
[% IF ( messaging_preference.transports_email ) %]
<input type="checkbox" id="email[% messaging_preference.message_attribute_id | html %]" name="[% messaging_preference.message_attribute_id | html %]" value="email" checked="checked" onclick = "document.opacmessaging.none[% messaging_preference.message_attribute_id | html %].checked=false;" />
[% ELSE %]
<input type="checkbox" id="email[% messaging_preference.message_attribute_id | html %]" name="[% messaging_preference.message_attribute_id | html %]" value="email" onclick = "document.opacmessaging.none[% messaging_preference.message_attribute_id | html %].checked=false;" />
[% END %]
</td>
[% ELSE %]
<td>-</td>
[% END %]
[% IF ( messaging_preference.has_digest ) %]
<td>
[% IF ( messaging_preference.digest ) %]
<input type="checkbox" id="digest[% messaging_preference.message_attribute_id | html %]" value="[% messaging_preference.message_attribute_id | html %]" name="digest" checked="checked" onclick = "document.opacmessaging.none[% messaging_preference.message_attribute_id | html %].checked=false;" />
[% ELSE %]
<input type="checkbox" id="digest[% messaging_preference.message_attribute_id | html %]" value="[% messaging_preference.message_attribute_id | html %]" name="digest" onclick = "document.opacmessaging.none[% messaging_preference.message_attribute_id | html %].checked=false;" />
[% END %]
</td>
[% ELSE %]
<td>-</td>
[% END %]
</tr>
[% END # / FOREACH messaging_preferences%]
</tbody>
</table>
[% IF ( SMSSendDriver || Koha.Preference('TranslateNotices') ) %]
<fieldset class="rows">
<ol>
[% IF ( SMSSendDriver ) %]
<li>
<strong>Notice:</strong> Some charges for text messages may be incurred when using this service. Please check with your mobile service provider if you have questions.
</li>
<li>
<label for="SMSnumber">SMS number:</label>
<input type="text" id="SMSnumber" name="SMSnumber" value="[% SMSnumber | html %]" pattern="^\+?[1-9]\d{1,14}$" />
<div class="hint">Please enter numbers only. <strong>(123) 456-7890</strong> would be entered as <strong>1234567890</strong>.</div>
</li>
[% IF ( SMSSendDriver == 'Email' ) %]
<li>
<label for="sms_provider_id">SMS provider:</label>
<select id="sms_provider_id" name="sms_provider_id">
<option value="">Unknown</option>
[% FOREACH s IN sms_providers %]
[% IF s.id == sms_provider_id %]
<option value="[% s.id | html %]" selected="selected">[% s.name | html %]</option>
[% ELSE %]
<option value="[% s.id | html %]">[% s.name | html %]</option>
[% END %]
[% END %]
</select>
<div class="hint">Please contact a library staff member if you are unsure of your mobile service provider, or you do not see your provider in this list.</div>
</li>
[% END # /IF ( SMSSendDriver == 'Email' ) %]
[% END # /IF SMSSendDriver %]
[% IF Koha.Preference('TranslateNotices') %]
<li>
<label for="lang">Preferred language for notices: </label>
<select id="lang" name="lang">
<option value="default">Default</option>
[% FOR language IN languages %]
[% FOR sublanguage IN language.sublanguages_loop %]
[% IF language.plural %]
[% IF sublanguage.rfc4646_subtag == patron_lang %]
<option value="[% sublanguage.rfc4646_subtag | html %]" selected="selected">[% sublanguage.native_description | html %] [% sublanguage.region_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>
[% ELSE %]
<option value="[% sublanguage.rfc4646_subtag | html %]">[% sublanguage.native_description | html %] [% sublanguage.region_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>
[% END %]
[% ELSE %]
[% IF sublanguage.rfc4646_subtag == patron_lang %]
<option value="[% sublanguage.rfc4646_subtag | html %]" selected="selected">[% sublanguage.native_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>
[% ELSE %]
<option value="[% sublanguage.rfc4646_subtag | html %]">[% sublanguage.native_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>
[% END %]
[% END # /IF language.plural %]
[% END # /FOR sublanguage %]
[% END #/FOR language %]
</select> <!-- /#lang -->
</li>
[% END #/IF Koha.Preference('TranslateNotices') %]
</ol>
</fieldset>
[% END #/IF SMSSendDriver || Koha.Preference('TranslateNotices') %]
<fieldset class="action">
<input type="submit" value="Submit changes" class="btn btn-primary" />
<a class="cancel" href="/cgi-bin/koha/opac-user.pl">Cancel</a>
</fieldset>
</form>
</div> <!-- / #usermessaging -->
[% ELSE %]
<h4>You are not allowed to call this page directly</h4>
[% END # /IF Koha.Preference( 'EnhancedMessagingPreferencesOPAC' ) %]
</div> <!-- / .col-lg-10 -->
</div> <!-- / .row -->
</div> <!-- / .container-fluid -->
</div> <!-- / .main -->
[% INCLUDE 'opac-bottom.inc' %]
[% BLOCK jsinclude %]
<script>
$(document).ready(function(){
$(".none").click(function(){
if($(this).attr("checked")){
var rowid = $(this).attr("id");
newid = Number(rowid.replace("none",""))
$("#sms"+newid).removeAttr("checked");
$("#email"+newid).removeAttr("checked");
$("#digest"+newid).removeAttr("checked");
$("#rss"+newid).removeAttr("checked");
}
});
$("#info_digests").tooltip();
});
function normalizeSMS(value){
let has_plus = value.charAt(0) === '+';
let new_value = value.replace(/\D/g,'');
if ( has_plus ) new_value = '+' + new_value;
return new_value;
}
var sms_input = document.getElementById('SMSnumber');
if (typeof sms_input !== 'undefined' && sms_input !== null) {
sms_input.addEventListener('keyup', function(){
var field = sms_input.value;
sms_input.value = normalizeSMS(field);
});
sms_input.addEventListener('paste', function(event) {
let paste = (event.clipboardData || window.clipboardData).getData('text');
setTimeout(function () {
sms_input.value = normalizeSMS(paste);
}, 100);
});
}
</script>
[% END %]