studip-ui.js

import { $gettext } from './lib/gettext.js';
import eventBus from "./lib/event-bus";

/**
 * This file contains extensions/adjustments for jQuery UI.
 */

(function ($, STUDIP) {

    $.widget( "ui.dialog", $.ui.dialog, {
        _allowInteraction: function( event ) {
            return hasParentWhich(isCKBodyWrapper)(event.target) ||  this._super( event );
        },
    });

    function hasParentWhich(predicate) {
        return function tryParent(element) {
            if (!element?.parentElement) {
                return false;
            }

            return predicate(element) || tryParent(element.parentElement);
        };
    }

    function isCKBodyWrapper(element) {
        return element?.classList?.contains('ck-body-wrapper');
    }

    /**
     * Setup and refine date picker, add automated handling for .has-date-picker
     * and [data-date-picker].
     * Note: [date-datepicker] would be a way better selector but unfortunately
     * jQuery UI's Datepicker itself stores vital data in the the "datepicker"
     * data() variable, so we cannot use it and need to use "date-picker"
     * instead.
     *
     * @author  Jan-Hendrik Willms <tleilax+studip@gmail.com>
     * @license GPL2 or any later version
     * @since   Stud.IP 3.4
     */

    'use strict';

    // Exit if datepicker is undefined (which it should never be)
    if ($.datepicker === undefined) {
        return;
    }

    // Exit if datetimepicker is undefined (which it should never be)
    if ($.ui.timepicker === undefined) {
        return;
    }

    // Setup Stud.IP's own datepicker extensions
    STUDIP.UI = STUDIP.UI || {};
    STUDIP.UI.Datepicker = {
        selector: '.has-date-picker,[data-date-picker]',
        // Initialize all datepickers that not yet been initialized (e.g. in dialogs)
        init: function () {
            $(this.selector).filter(function () {
                return $(this).data('date-picker-init') === undefined;
            }).each(function () {
                $(this).data('date-picker-init', true).datepicker();
            });
        },
        // Apply registered handlers. Take care: This happens upon before a
        // picker is shown as well as after a date has been selected.
        refresh: function () {
            $(this.selector).each(function () {
                var element = this,
                    options = $(element).data().datePicker;
                if (options) {
                    $.each(options, function (key, value) {
                        if (STUDIP.UI.Datepicker.dataHandlers[key] !== undefined) {
                            STUDIP.UI.Datepicker.dataHandlers[key].call(element, value);
                        }
                    });
                }
            });
        }
    };

    // Define handlers for any data-datepicker option
    STUDIP.UI.Datepicker.dataHandlers = {
        // Ensure this date is not later (<=) than another date by setting
        // the maximum allowed date the other date.
        // This will also set this date to the maximum allowed date if it
        // currently later than the allowed maximum date.
        '<=': function (selector, offset) {
            var this_date = $(this).datepicker('getDate'),
                max_date = null,
                temp,
                adjustment = 0;

            if ($(this).data().datePicker.offset) {
                temp = $(this).data().datePicker.offset;
                adjustment = parseInt($(temp).val(), 10);
            }

            // Get max date by either actual dates or maxDate options on
            // all matching elements
            if (selector === 'today') {
                max_date = new Date();
            } else {
                $(selector).each(function () {
                    var date = $(this).datepicker('getDate') || $(this).datepicker('option', 'maxDate');
                    if (date && (!max_date || date < max_date)) {
                        max_date = new Date(date);
                    }
                });
            }

            // Set max date and adjust current date if neccessary
            if (max_date) {
                max_date.setTime(max_date.getTime() - (offset || 0) * 24 * 60 * 60 * 1000);

                temp = new Date(max_date);
                temp.setDate(temp.getDate() - adjustment);

                if (this_date && this_date > max_date) {
                    $(this).datepicker('setDate', temp);
                }

                $(this).datepicker('option', 'maxDate', max_date);
            } else {
                $(this).datepicker('option', 'maxDate', null);
            }
        },
        // Ensure this date is earlier (<) than another date by setting the
        // maximum allowed date to the other date - 1 day.
        // This will also set this date to the maximum allowed date - 1 day
        // if it is currently later than the allowed maximum date.
        '<': function (selector) {
            STUDIP.UI.Datepicker.dataHandlers['<='].call(this, selector, 1);
        },
        // Ensure this date is not earlier (>=) than another date by setting
        // the minimum allowed date to the other date.
        // This will also set this date to the minimum allowed date if it is
        // currently earlier than the allowed minimum date.
        '>=': function (selector, offset) {
            var this_date = $(this).datepicker('getDate'),
                min_date = null,
                temp,
                adjustment = 0;

            if ($(this).data().datePicker.offset) {
                temp = $(this).data().datePicker.offset;
                adjustment = parseInt($(temp).val(), 10);
            }

            // Get min date by either actual dates or minDate options on
            // all matching elements
            if (selector === 'today') {
                min_date = new Date();
            } else {
                $(selector).each(function () {
                    var date = $(this).datepicker('getDate') || $(this).datepicker('option', 'minDate');
                    if (date && (!min_date || date > min_date)) {
                        min_date = new Date(date);
                    }
                });
            }

            // Set min date and adjust current date if neccessary
            if (min_date) {
                min_date.setTime(min_date.getTime() + (offset || 0) * 24 * 60 * 60 * 1000);

                temp = new Date(min_date);
                temp.setDate(temp.getDate() + adjustment);

                if (this_date && this_date < min_date) {
                    $(this).datepicker('setDate', temp);
                }

                $(this).datepicker('option', 'minDate', min_date);
            } else {
                $(this).datepicker('option', 'minDate', null);
            }
        },
        // Ensure this date is later (>) than another date by setting the
        // minimum allowed date to the other date + 1 day.
        // This will also set this date to the minimum allowed date + 1 day
        // if it is currently earlier than the allowed minimum date.
        '>': function (selector) {
            STUDIP.UI.Datepicker.dataHandlers['>='].call(this, selector, 1);
        }
    };

    STUDIP.UI.DateTimepicker = {
        selector: '.has-datetime-picker,[data-datetime-picker]',
        // Initialize all datetimepickers that not yet been initialized (e.g. in dialogs)
        init: function () {
            $(this.selector).filter(function () {
                return $(this).data('datetime-picker-init') === undefined;
            }).each(function () {
                $(this).data('datetime-picker-init', true).datetimepicker();
            });
        },
        // Apply registered handlers. Take care: This happens upon before a
        // picker is shown as well as after a date has been selected.
        refresh: function () {
            $(this.selector).each(function () {
                var element = this,
                    options = $(element).data().datetimePicker;
                if (options) {
                    $.each(options, function (key, value) {
                        if (STUDIP.UI.DateTimepicker.dataHandlers[key] !== undefined) {
                            STUDIP.UI.DateTimepicker.dataHandlers[key].call(element, value);
                        }
                    });
                }
            });
        }
    };

    // Define handlers for any data-datepicker option
    STUDIP.UI.DateTimepicker.dataHandlers = {
        // Ensure this date is not later (<=) than another date by setting
        // the maximum allowed date the other date.
        // This will also set this date to the maximum allowed date if it
        // currently later than the allowed maximum date.
        '<=': function (selector, offset) {
            var this_date = $(this).datetimepicker('getDate'),
                max_date = null,
                temp;

            if ((offset === undefined) && $(selector).data('offset')) {
                temp   = $(selector).data('offset');
                offset = parseInt($(temp).val(), 10);
            }

            // Get max date by either actual dates or maxDate options on
            // all matching elements
            if (selector === 'today') {
                max_date = new Date();
                max_date.setHours(0, 23, 59, 59);
            } else {
                $(selector).each(function () {
                    var date = $(this).datetimepicker('getDate') || $(this).datetimepicker('option', 'maxDate');
                    if (date && (!max_date || date < max_date)) {
                        max_date = new Date(date);
                    }
                });
            }

            // Set max date and adjust current date if neccessary
            if (max_date) {
                max_date.setTime(max_date.getTime() - (offset || 0) * 24 * 60 * 60 * 1000);

                if (this_date && this_date > max_date) {
                    $(this).datetimepicker('setDate', max_date);
                }

                $(this).datetimepicker('option', 'maxDate', max_date);
            } else {
                $(this).datetimepicker('option', 'maxDate', null);
            }
        },
        // Ensure this date is earlier (<) than another date by setting the
        // maximum allowed date to the other date - 1 day.
        // This will also set this date to the maximum allowed date - 1 day
        // if it is currently later than the allowed maximum date.
        '<': function (selector) {
            STUDIP.UI.DateTimepicker.dataHandlers['<='].call(this, selector, 1);
        },
        // Ensure this date is not earlier (>=) than another date by setting
        // the minimum allowed date to the other date.
        // This will also set this date to the minimum allowed date if it is
        // currently earlier than the allowed minimum date.
        '>=': function (selector, offset) {
            var this_date = $(this).datetimepicker('getDate'),
                min_date = null,
                temp;

            if ((offset === undefined) && $(selector).data('offset')) {
                temp   = $(selector).data('offset');
                offset = parseInt($(temp).val(), 10);
            }

            // Get min date by either actual dates or minDate options on
            // all matching elements
            if (selector === 'today') {
                min_date = new Date();
                min_date.setHours(0, 0, 0);
            } else {
                $(selector).each(function () {
                    var date = $(this).datetimepicker('getDate') || $(this).datetimepicker('option', 'minDate');
                    if (date && (!min_date || date > min_date)) {
                        min_date = new Date(date);
                    }
                });
            }

            // Set min date and adjust current date if neccessary
            if (min_date) {
                min_date.setTime(min_date.getTime() + (offset || 0) * 24 * 60 * 60 * 1000);

                if (this_date && this_date < min_date) {
                    $(this).datetimepicker('setDate', min_date);
                }

                $(this).datetimepicker('option', 'minDate', min_date);
            } else {
                $(this).datetimepicker('option', 'minDate', null);
            }
        },
        // Ensure this date is later (>) than another date by setting the
        // minimum allowed date to the other date + 1 day.
        // This will also set this date to the minimum allowed date + 1 day
        // if it is currently earlier than the allowed minimum date.
        '>': function (selector) {
            STUDIP.UI.DateTimepicker.dataHandlers['>='].call(this, selector, 1);
        }
    };

    STUDIP.UI.Timepicker = {
        selector: '.has-time-picker,[data-time-picker]',
        // Initialize all datetimepickers that not yet been initialized (e.g. in dialogs)
        init: function () {
            $(this.selector).filter(function () {
                return $(this).data('time-picker-init') === undefined;
            }).each(function () {
                $(this).addClass('hasTimepicker').data('time-picker-init', true).timepicker();
            });
        },
        // Apply registered handlers. Take care: This happens upon before a
        // picker is shown as well as after a date has been selected.
        refresh: function () {
            $(this.selector).each(function () {
                var element = this,
                    options = $(element).data().timePicker;
                if (options) {
                    $.each(options, function (key, value) {
                        if (STUDIP.UI.Timepicker.dataHandlers[key] !== undefined) {
                            STUDIP.UI.Timepicker.dataHandlers[key].call(element, value);
                        }
                    });
                }
            });
        }
    };

    STUDIP.UI.Timepicker.parseTime = (time) => {
        const split = time.split(':');
        return {
            hour: parseInt(split[0], 10),
            minute: parseInt(split[1], 10)
        };
    };
    STUDIP.UI.Timepicker.createTime = (hours, minutes) => {
        return ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2);
    };
    STUDIP.UI.Timepicker.setTime = (time) => {
        const date = new Date();
        const parsed = STUDIP.UI.Timepicker.parseTime(time);

        date.setHours(parsed.hour);
        date.setMinutes(parsed.minute);

        return date;
    };

    // Define handlers for any data-time-picker option
    // TODO: This don't work well if at all. We should probably switch to
    // another (date) timepicker
    STUDIP.UI.Timepicker.dataHandlers = {
        // Ensure this time is not later (<=) than another time by setting
        // the maximum allowed time on the other time.
        // This will also set this time to the maximum allowed time if it is
        // currently later than the allowed maximum time.
        '<=': function (selector, offset) {
            var this_time = this.value;
            var max_time = null;
            var temp;

            if ((offset === undefined) && $(selector).data('offset')) {
                temp   = $(selector).data('offset');
                offset = parseInt($(temp).val(), 10);
            }

            // Get max time by either actual times
            $(selector).each(function () {
                var time = this.value;
                if (time && (!max_time || time < max_time)) {
                    max_time = time;
                }
            });

            // Set max time and adjust current time if neccessary
            if (max_time) {
                const parsed = STUDIP.UI.Timepicker.parseTime(max_time);
                max_time = STUDIP.UI.Timepicker.createTime(
                    Math.min(23, Math.max(0, parsed.hour - (offset || 0))),
                    parsed.minute
                );

                console.log('max time:', this_time, max_time);
                if (this_time && this_time > max_time) {
                    $(this).timepicker(STUDIP.UI.Timepicker.parseTime(max_time));
                }

                $(this).timepicker({
                    maxTime: STUDIP.UI.Timepicker.setTime(max_time)
                });
            } else {
                $(this).timepicker({
                    maxTime: null
                });
            }
        },
        // Ensure this date is earlier (<) than another date by setting the
        // maximum allowed date to the other date - 1 day.
        // This will also set this date to the maximum allowed date - 1 day
        // if it is currently later than the allowed maximum date.
        '<': function (selector) {
            STUDIP.UI.Timepicker.dataHandlers['<='].call(this, selector, 1);
        },
        // Ensure this date is not earlier (>=) than another date by setting
        // the minimum allowed date to the other date.
        // This will also set this date to the minimum allowed date if it is
        // currently earlier than the allowed minimum date.
        '>=': function (selector, offset) {
            var this_time = this.value;
            var min_time = null;
            var temp;

            if ((offset === undefined) && $(selector).data('offset')) {
                temp   = $(selector).data('offset');
                offset = parseInt($(temp).val(), 10);
            }

            // Get min time by either actual times
            $(selector).each(function () {
                var time = this.value;
                if (time && (!min_time || time > min_time)) {
                    min_time = time;
                }
            });

            // Set min time and adjust current time if neccessary
            if (min_time) {
                const parsed = STUDIP.UI.Timepicker.parseTime(min_time);
                min_time = STUDIP.UI.Timepicker.createTime(
                    Math.min(23, Math.max(0, parsed.hour + (offset || 0))),
                    parsed.minute
                );

                console.log('min time:', this_time, min_time);
                if (this_time && this_time < min_time) {
                    $(this).timepicker(STUDIP.UI.Timepicker.parseTime(min_time));
                }

                $(this).timepicker({
                    minTime: STUDIP.UI.Timepicker.setTime(min_time)
                });
            } else {
                $(this).timepicker({
                    minTime: null
                });
            }
        },
        // Ensure this date is later (>) than another date by setting the
        // minimum allowed date to the other date + 1 day.
        // This will also set this date to the minimum allowed date + 1 day
        // if it is currently earlier than the allowed minimum date.
        '>': function (selector) {
            STUDIP.UI.Timepicker.dataHandlers['>='].call(this, selector, 1);
        }
    };

    // Apply defaults including date picker handlers
    const defaults = {
        beforeShow (input) {
            STUDIP.UI.Datepicker.refresh();
            STUDIP.UI.DateTimepicker.refresh();
            STUDIP.UI.Timepicker.refresh();

            if ($(input).parents('.ui-dialog').length > 0) {
                return;
            }

            $(input).css({
                'position': 'relative',
                'z-index': 1002
            });
        },
        showButtonPanel: true,
        onSelect: function (value, instance) {
            if (value !== instance.lastVal) {
                $(this).change();
            }
        }
    };

    $.datepicker.setDefaults({
        ...defaults,
        beforeShow (input) {
            // Don't lose original behaviour
            defaults.beforeShow(input);

            if ($(input).parents('.ui-dialog').length > 0) {
                $('.ui-dialog-content').bind('scroll.datepicker-scroll', _.debounce($.proxy(DpHideOnScroll, null, input), 100, {leading:true, trailing:false}));
            }
            $(window).bind('scroll.datepicker-scroll', _.debounce($.proxy(DpHideOnScroll, null, input), 100, {leading:true, trailing:false}));

            if ($(input).closest('#sidebar').length === 0) {
                return;
            }

            const button = input.nextElementSibling;
            if (button && button.matches('input[type="submit"]')) {
                button.style.position = 'relative';
                button.style.zIndex = input.style.zIndex;
            }
        },
        onClose (date, inst) {
            $(this).one('click.picker', function () {
                $(this).datepicker('show');
            }).on('blur', function () {
                $(this).off('click.picker');
            });

            if ($(this).parents('.ui-dialog').length > 0) {
                $('.ui-dialog-content').unbind('scroll.datepicker-scroll');
            } else {
                $(window).unbind('scroll.datepicker-scroll');
            }
        }
    });

    $.timepicker.setDefaults(defaults);

    eventBus.on('studip:set-locale', () => {
        const locale = {
            closeText: $gettext('Schließen'),
            prevText: $gettext('Zurück'),
            nextText: $gettext('Vor'),
            currentText: $gettext('Jetzt'),
            monthNames: [
                $gettext('Januar'),
                $gettext('Februar'),
                $gettext('März'),
                $gettext('April'),
                $gettext('Mai'),
                $gettext('Juni'),
                $gettext('Juli'),
                $gettext('August'),
                $gettext('September'),
                $gettext('Oktober'),
                $gettext('November'),
                $gettext('Dezember')
            ],
            monthNamesShort: [
                $gettext('Jan'),
                $gettext('Feb'),
                $gettext('Mär'),
                $gettext('Apr'),
                $gettext('Mai'),
                $gettext('Jun'),
                $gettext('Jul'),
                $gettext('Aug'),
                $gettext('Sep'),
                $gettext('Okt'),
                $gettext('Nov'),
                $gettext('Dez')
            ],
            dayNames: [
                $gettext('Sonntag'),
                $gettext('Montag'),
                $gettext('Dienstag'),
                $gettext('Mittwoch'),
                $gettext('Donnerstag'),
                $gettext('Freitag'),
                $gettext('Samstag')
            ],
            dayNamesShort: [
                $gettext('So'),
                $gettext('Mo'),
                $gettext('Di'),
                $gettext('Mi'),
                $gettext('Do'),
                $gettext('Fr'),
                $gettext('Sa')
            ],
            weekHeader: $gettext('Wo'),
            dateFormat: 'dd.mm.yy',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: '',
            changeMonth: true,
            changeYear: true,
            timeOnlyTitle: $gettext('Zeit wählen'),
            timeText: $gettext('Zeit'),
            hourText: $gettext('Stunde'),
            minuteText: $gettext('Minute'),
            secondText: $gettext('Sekunde'),
            millisecText: $gettext('Millisekunde'),
            microsecText: $gettext('Mikrosekunde'),
            timezoneText: $gettext('Zeitzone'),
            timeFormat: $gettext('HH:mm'),
            amNames: [$gettext('vorm.'), 'AM', 'A'],
            pmNames: [$gettext('nachm.'), 'PM', 'P']
        };
        // Set dayNamesMin to dayNamesShort since they are equal
        locale.dayNamesMin = locale.dayNamesShort;

        $.datepicker.setDefaults(locale);
        $.timepicker.setDefaults(locale);
    });

    var DpHideOnScroll = function () {
        var input = arguments[0];
        $(input).blur();
        $(input).datepicker('hide');
    }

    // Jump to current date when "Now" is clicked
    var _gotoToday = $.datepicker._gotoToday;
    $.datepicker._gotoToday = function(id) {
        _gotoToday.call(this, id);
        this._selectDate(id);
    };

    // Attach global focus handler on date picker elements
    $(document).on('focus', STUDIP.UI.Datepicker.selector, () => {
        STUDIP.UI.Datepicker.init();
    });

    // Attach global focus handler on datetime picker elements
    $(document).on('focus', STUDIP.UI.DateTimepicker.selector, () => {
        STUDIP.UI.DateTimepicker.init();
    });

    // Attach global focus handler on time picker elements
    $(document).on('focus', STUDIP.UI.Timepicker.selector, (event) => {
        if (!$(event.target).attr('pattern')) {
            $(event.target).attr('pattern', '^[012]\\d:[0-5]\\d$');
        }

        STUDIP.UI.Timepicker.init();
    }).on('keyup', STUDIP.UI.Timepicker.selector, (event) => {
        const input = event.target;
        input.value = input.value.replace(/:+$/, ':');

        const value = input.value.trim();
        if (value.length === 2 && event.which !== 8) {
            input.value += ':';
        }
    }).on('blur', STUDIP.UI.Timepicker.selector, (event) => {
        if (event.target.checkValidity()) {
            return;
        }

        const input = event.target;
        let value = input.value.trim();
        value = value.replace(/:/g, '');
        if (['0', '1', '2'].indexOf(value.substr(0, 1)) === -1) {
            value = '0' + value;
        }
        value = (value + '00').substr(0, 4);

        input.value = value.substr(0, 2) + ':' + value.substr(2, 2);
    });

}(jQuery, STUDIP));