Koha/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc
Owen Leonard de2d8ba3e4 Bug 30011: Update links to jQueryUI assets, remove datepicker references, etc.
This patch updates templates to include the new version of jQueryUI. It
removes some references to the now unused datepicker widget as well as
the jQuery timepicker addon.

Some minor JavaScript and style updates to fix issues resulting from the
upgrade.

To test, apply the patch and update the CSS in the staff interface AND
in the OPAC
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

IN THE OPAC:

 - The OPAC only uses the tabs jQueryUI widget.
 - View pages where tabs are used: Bibliographic details, user summary,
   advanced search.

IN THE STAFF INTERFACE:

 - The staff interface uses four jQueryUI widgets: accordion,
   autocomplete, sortable, and tabs
 - Test the accordion widget on two pages: Administration -> Table
   settings and Patrons -> Patrons requesting modifications.
 - Test autocomplete (requires PatronAutoComplete to be enabled) on
   various pages. For example:
   - From the "Check out" tab in the header search box.
   - From the "Search patrons" tab in the header search box, e.g. from
     the main Patrons page.
   - Place hold -> Search patrons.
   - Tools -> Patron lists -> Add patrons to list -> Patron search.
 - Test sortable:
   - Administration -> System preferences -> Language.
     - With more than one language installed you should be able to
       drag to re-order the enabled languages. Confirm that your change
       is saved successfully.
   - Administration -> MARC bibliographic framework -> MARC structure ->
     Edit subfields on a tag with multiple subfields. You should be able
     to drag to re-order the tabs at the top of the subfield constraints
     edit page. Confirm that your changes are saved successfully.
   - Cataloging -> New record. Test that you can re-order subfields
     under a tag with multiple subfields and that your changes are
     saved.
 - Tabs: View various pages with tabs: Check out, bibliographic details,
   basic MARC editor. They're everywhere.

Also confirm that the removal of the leftover datepicker doesn't affect
pages which use the calendar include: Test various pages which use
Flatpickr, e.g. check out, renew, reports, etc.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
2022-04-08 15:49:16 +02:00

181 lines
7 KiB
PHP

[% USE Asset %]
[% USE Koha %]
[% USE raw %]
<!-- calendar.inc -->
[% FILTER collapse %]
<script>
var debug = "[% debug | html %]";
var dateformat_pref = "[% Koha.Preference('dateformat ') | html %]";
var flatpickr_dateformat_string = "";
switch ( dateformat_pref ){
case "us":
flatpickr_dateformat_string = "m/d/Y";
break;
case "metric":
flatpickr_dateformat_string = "d/m/Y";
break;
case "dmydot":
flatpickr_dateformat_string = "d.m.Y";
break;
default:
flatpickr_dateformat_string = "Y-m-d";
}
var sentmsg = 0;
var bidi = [% IF(bidi) %] true[% ELSE %] false[% END %];
var calendarFirstDayOfWeek = '[% Koha.Preference('CalendarFirstDayOfWeek') | html %]';
var flatpickr_timeformat_string = [% IF Koha.Preference('TimeFormat') == '12hr' %]"G:i K"[% ELSE %]"H:i"[% END %];
var flatpickr_timeformat = [% IF Koha.Preference('TimeFormat') == '12hr' %]false[% ELSE %]true[% END %];
</script>
<!-- / calendar.inc -->
[% Asset.js("js/calendar.js") | $raw %]
[% Asset.js("lib/flatpickr/flatpickr.min.js") | $raw %]
[% Asset.js("lib/flatpickr/shortcut-buttons-flatpickr.min.js") | $raw %]
<script>
flatpickr.l10ns.default.weekdays = flatpickr_weekdays;
flatpickr.l10ns.default.months = flatpickr_months;
flatpickr.setDefaults({
allowInput: true,
dateFormat: flatpickr_dateformat_string,
nextArrow: '<i class="fa fa-fw fa-arrow-right"></i>',
prevArrow: '<i class="fa fa-fw fa-arrow-left"></i>',
time_24hr: flatpickr_timeformat,
defaultHour: 23,
defaultMinute: 59,
locale: {
"firstDayOfWeek": calendarFirstDayOfWeek
},
onReady: function( selectedDates, dateStr, instance ){
/* When flatpickr instance is created, automatically append a "clear date" link */
$(instance.input)
/* Add a wrapper element so that we can prevent the clear button from wrapping */
.wrap("<span class='flatpickr_wrapper'></span>")
.attr("autocomplete", "off")
.after( $("<a/>")
.attr("href","#")
.addClass("clear_date")
.on("click", function(e){
e.preventDefault();
instance.clear();
})
.addClass("fa fa-fw fa-remove")
.attr("aria-hidden", true)
.attr("aria-label", _("Clear date") )
).keydown(function(e) {
var key = (event.keyCode ? event.keyCode : event.which);
if ( key == 40 ) {
instance.set('allowInput',false);
}
});
},
onClose: function( selectedDates, dateText, instance) {
validate_date( dateText, instance );
var thisInput = instance.input;
if ( thisInput.hasAttribute('data-date_to') ) {
var endPicker = document.querySelector("#"+thisInput.dataset.date_to)._flatpickr;
endPicker.set('minDate', selectedDates[0]);
}
let = on_close_focus = $(thisInput).data('flatpickr-on-close-focus');
if ( on_close_focus ) {
$(on_close_focus).focus();
}
},
plugins: [
ShortcutButtonsPlugin({
button: [
{
label: _("Yesterday")
},
{
label: _("Today")
},
{
label: _("Tomorrow")
}
],
label: _("or"),
onClick: (index, fp) => {
let date;
let hh = 23, mm = 59;
switch (index) {
case 0:
date = new Date().fp_incr(-1);
break;
case 1:
date = new Date();
if ( $(fp.input).data("flatpickr-pastinclusive") === true ) {
hh = date.getHours();
mm = date.getMinutes();
}
break;
case 2:
date = new Date().fp_incr(1);
break;
}
date.setHours(hh, mm, 0, 0);
fp.setDate(date);
}
})
]
});
$(document).ready(function(){
$(".flatpickr").each(function(){
let options = {};
let refresh_max_date = 0;
let disable_buttons = [];
if( $(this).data("flatpickr-futuredate") === true ) {
let original_date = $(this).val();
if ( original_date ) {
original_date = Date_from_syspref( original_date ).getTime();
let tomorrow = new Date().fp_incr(1).getTime();
options['enable'] = [function(date){
date = date.getTime();
if ( date == original_date ) return true;
if ( date >= tomorrow) return true;
}];
}
else {
options['minDate'] = new Date().fp_incr(1);
}
disable_buttons.push(0); /* Yesterday */
disable_buttons.push(1); /* Today */
}
if( $(this).data("flatpickr-pastinclusive") === true ) {
options['maxDate'] = new Date(); /* Not today or hh:mm will be 00:00 */
refresh_max_date = 1;
disable_buttons.push(2); /* Tomorrow */
}
if( $(this).data("flatpickr-pastdate") === true ) {
options['maxDate'] = new Date().fp_incr(-1);
disable_buttons.push(1); /* Today */
disable_buttons.push(2); /* Tomorrow */
}
if ( $(this).data('flatpickr-enable-time') === true ) {
options['enableTime'] = true;
options['dateFormat'] = flatpickr_dateformat_string + " " + flatpickr_timeformat_string;
}
let fp = $(this).flatpickr(options);
$(disable_buttons).each(function(index, value){
$(fp.calendarContainer).find(".shortcut-buttons-flatpickr-button[data-index='"+value+"']").prop("disabled", "disabled");
});
if ( refresh_max_date ) {
/* Refresh the maxDate every 30 secondes to make sure the user will not
be stuck with the minute passed.
Adding 1 minute to not introduce a gap.
Example: last update at 40s, a new minute passed at 00.
Between 00 and 10s the user won't be able click 'Today'.
*/
setInterval(() => {
let now = new Date();
fp.set("maxDate", now.setMinutes(now.getMinutes() + 1));
}, 30000);
}
});
});
</script>
[% END %]