Bug 30706: Fix space in check for dateformat preference
[koha-ffzg.git] / koha-tmpl / intranet-tmpl / prog / en / includes / calendar.inc
index f6d9e9b..47a3f76 100644 (file)
+[% USE Asset %]
 [% USE Koha %]
-<script type="text/javascript">
-//<![CDATA[
-
-var debug    = "[% debug %]";
-var dformat  = "[% dateformat %]";
-var sentmsg = 0;
-if (debug > 1) {alert("dateformat: " + dformat + "\ndebug is on (level " + debug + ")");}
-var MSG_PLEASE_ENTER_A_VALID_DATE = _("Please enter a valid date (should match %s).");
-
-function is_valid_date(date) {
-    // An empty string is considered as a valid date for convenient reasons.
-    if ( date === '' ) return 1;
-
-    var dateformat = dateformat_str = '[% Koha.Preference('dateformat') %]';
-    if ( dateformat == 'us' ) {
-        if ( date.search(/^\d{2}\/\d{2}\/\d{4}($|\s)/) == -1 ) return 0;
-        dateformat = 'mm/dd/yy';
-    } else if ( dateformat == 'metric' ) {
-        if ( date.search(/^\d{2}\/\d{2}\/\d{4}($|\s)/) == -1 ) return 0;
-        dateformat = 'dd/mm/yy';
-    } else if (dateformat == 'iso' ) {
-        if ( date.search(/^\d{4}-\d{2}-\d{2}($|\s)/) == -1 ) return 0;
-        dateformat = 'yy-mm-dd';
-    } else if ( dateformat == 'dmydot' ) {
-        if ( date.search(/^\d{2}\.\d{2}\.\d{4}($|\s)/) == -1 ) return 0;
-        dateformat = 'dd.mm.yy';
-    }
-    try {
-        $.datepicker.parseDate(dateformat, date);
-    } catch (e) {
-        return 0;
-    };
-    return 1;
-}
-
-function get_dateformat_str(dateformat) {
-    var dateformat_str;
-    if ( dateformat == 'us' ) {
-        dateformat_str = 'mm/dd/yyyy';
-    } else if ( dateformat == 'metric' ) {
-        dateformat_str = 'dd/mm/yyyy';
-    } else if (dateformat == 'iso' ) {
-        dateformat_str = 'yyyy-mm-dd';
-    } else if ( dateformat == 'dmydot' ) {
-        dateformat_str = 'dd.mm.yyyy';
-    }
-    return dateformat_str;
-}
-
-function validate_date (dateText, inst) {
-    if ( !is_valid_date(dateText) ) {
-        var dateformat_str = get_dateformat_str( '[% Koha.Preference('dateformat') %]' );
-        alert(MSG_PLEASE_ENTER_A_VALID_DATE.format(dateformat_str));
-        $('#'+inst.id).val('');
+[% 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";
     }
-}
-
-function Date_from_syspref(dstring) {
-        var dateX = dstring.split(/[-/.]/);
-        if (debug > 1 && sentmsg < 1) {sentmsg++; alert("Date_from_syspref(" + dstring + ") splits to:\n" + dateX.join("\n"));}
-        if (dformat === "iso") {
-                return new Date(dateX[0], (dateX[1] - 1), dateX[2]);  // YYYY-MM-DD to (YYYY,m(0-11),d)
-        } else if (dformat === "us") {
-                return new Date(dateX[2], (dateX[0] - 1), dateX[1]);  // MM/DD/YYYY to (YYYY,m(0-11),d)
-        } else if (dformat === "metric") {
-                return new Date(dateX[2], (dateX[1] - 1), dateX[0]);  // DD/MM/YYYY to (YYYY,m(0-11),d)
-        } else if (dformat === "dmydot") {
-                return new Date(dateX[2], (dateX[1] - 1), dateX[0]);  // DD.MM.YYYY to (YYYY,m(0-11),d)
-        } else {
-                if (debug > 0) {alert("KOHA ERROR - Unrecognized date format: " +dformat);}
-                return 0;
-        }
-}
-
-function DateTime_from_syspref(date_time) {
-        var parts = date_time.split(" ");
-        var date = parts[0];
-        var time = parts[1];
-        parts = time.split(":");
-        var hour = parts[0];
-        var minute = parts[1];
-
-        if ( hour < 0 || hour > 23 ) {
-            return 0;
-        }
-        if ( minute < 0 || minute > 59 ) {
-            return 0;
-        }
-
-        var datetime = Date_from_syspref( date );
-
-        if ( isNaN( datetime.getTime() ) ) {
-            return 0;
-        }
-
-        datetime.setHours( hour );
-        datetime.setMinutes( minute );
-
-        return datetime;
-}
-
-
-/* Instead of including multiple localization files as you would normally see with
-   jQueryUI we expose the localization strings in the default configuration */
-jQuery(function($){
-    $.datepicker.regional[''] = {
-        closeText: _("Done"),
-        prevText: _("Prev"),
-        nextText: _("Next"),
-        currentText: _("Today"),
-        monthNames: [_("January"),_("February"),_("March"),_("April"),_("May"),_("June"),
-        _("July"),_("August"),_("September"),_("October"),_("November"),_("December")],
-        monthNamesShort: [_("Jan"), _("Feb"), _("Mar"), _("Apr"), _("May"), _("Jun"),
-        _("Jul"), _("Aug"), _("Sep"), _("Oct"), _("Nov"), _("Dec")],
-        dayNames: [_("Sunday"), _("Monday"), _("Tuesday"), _("Wednesday"), _("Thursday"), _("Friday"), _("Saturday")],
-        dayNamesShort: [_("Sun"), _("Mon"), _("Tue"), _("Wed"), _("Thu"), _("Fri"), _("Sat")],
-        dayNamesMin: [_("Su"),_("Mo"),_("Tu"),_("We"),_("Th"),_("Fr"),_("Sa")],
-        weekHeader: _("Wk"),
-        dateFormat: "[% IF ( dateformat == "us" ) %]mm/dd/yy[% ELSIF ( dateformat == "metric" ) %]dd/mm/yy[% ELSIF ( dateformat == "dmydot" ) %]dd.mm.yy[% ELSE %]yy-mm-dd[% END %]",
-        firstDay: [% Koha.Preference('CalendarFirstDayOfWeek') %],
-        isRTL: [% IF ( bidi ) %]true[% ELSE %]false[% END %],
-        showMonthAfterYear: false,
-        yearSuffix: ''};
-    $.datepicker.setDefaults($.datepicker.regional['']);
-});
-
-$(document).ready(function(){
-
-$.datepicker.setDefaults({
-        showOn: "both",
-        changeMonth: true,
-        changeYear: true,
-        buttonImage: '[% interface %]/[% theme %]/img/famfamfam/silk/calendar.png',
-        buttonImageOnly: true,
-        showButtonPanel: true,
-        showOtherMonths: true,
-        selectOtherMonths: true
-    });
-
-    $( ".datepicker" ).datepicker({
-        onClose: function(dateText, inst) {
-            validate_date(dateText, inst);
+    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
         },
-    }).on("change", function(e, value) {
-        if ( ! is_valid_date( $(this).val() ) ) {$(this).val("");}
-    });
-    // http://jqueryui.com/demos/datepicker/#date-range
-    var dates = $( ".datepickerfrom, .datepickerto" ).datepicker({
-        changeMonth: true,
-        numberOfMonths: 1,
-        onSelect: function( selectedDate ) {
-            var option = this.id == "from" ? "minDate" : "maxDate",
-                instance = $( this ).data( "datepicker" );
-                date = $.datepicker.parseDate(
-                    instance.settings.dateFormat ||
-                    $.datepicker._defaults.dateFormat,
-                    selectedDate, instance.settings );
-            dates.not( this ).datepicker( "option", option, date );
+        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(dateText, inst) {
-            validate_date(dateText, inst);
+        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();
+            }
         },
-    }).on("change", function(e, value) {
-        if ( ! is_valid_date( $(this).val() ) ) {$(this).val("");}
+        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 %]