yafowil.widget.datetime 2.0.0__py2.py3-none-any.whl

yafowil/widget/datetime/resources/bootstrap5/widget.js

@@ -0,0 +1,597 @@
+var yafowil_datetime = (function (exports, $, Popper) {
+    'use strict';
+
+    class DatepickerWidget extends Datepicker {
+        static initialize(context) {
+            $('input.datepicker', context).each(function() {
+                let elem = $(this);
+                if (window.yafowil_array !== undefined &&
+                    window.yafowil_array.inside_template(elem)) {
+                    return;
+                }
+                new DatepickerWidget(elem, elem.data('date-locale'));
+            });
+        }
+        constructor(elem, locale, opts={}) {
+            let opts_ = {
+                language: locale,
+                orientation: 'bottom',
+                buttonClass: 'btn',
+                todayHighlight: true,
+                autohide: true
+            };
+            let lower_edge = elem.offset().top + elem.outerHeight() + 250;
+            if (lower_edge > $(document).height()) {
+                opts_.orientation = "top";
+            }
+            let locale_options = DatepickerWidget.locale_options;
+            Object.assign(opts_, locale_options[locale] || locale_options.en);
+            Object.assign(opts_, opts);
+            super(elem[0], opts_);
+            elem.data('yafowil-datepicker', this);
+            this.elem = elem;
+            this.adapt();
+            this.trigger = $(`<button />`)
+                .addClass('datepicker-trigger btn btn-outline-secondary')
+                .text('...')
+                .insertAfter(elem);
+            this.toggle_picker = this.toggle_picker.bind(this);
+            this.trigger.on('mousedown touchstart', this.toggle_picker);
+            this.trigger.on('click', (e) => {e.preventDefault();});
+            this.on_change_date = this.on_change_date.bind(this);
+            this.elem.on('changeDate', this.on_change_date);
+            if (window.ts !== undefined) {
+                ts.ajax.attach(this, elem);
+            }
+            let created_event = $.Event('datepicker_created', {widget: this});
+            this.elem.trigger(created_event);
+        }
+        on_change_date() {
+            this.elem.trigger('change');
+        }
+        adapt() {
+            const p_el = $(this.picker.element);
+            $('.datepicker-picker', p_el).addClass('card');
+            const header = $('.datepicker-header', p_el).addClass('card-header bg-primary');
+            $('.btn', header).addClass('btn-primary');
+            $('.datepicker-main', p_el).addClass('card-body');
+        }
+        unload() {
+            if (window.ts !== undefined) {
+                ts.deprecate(
+                    'yafowil.widget.datepicker.unload',
+                    'yafowil.widget.datepicker.destroy',
+                    'yafowil 2.1'
+                );
+            }
+            this.destroy();
+        }
+        toggle_picker(evt) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            if (this.picker.active || this.active) {
+                this.hide();
+                this.elem.blur();
+            } else {
+                this.show();
+            }
+        }
+        destroy() {
+            this.trigger.off('mousedown touchstart', this.toggle_picker);
+            this.trigger.off();
+            this.elem.off('changeDate', this.on_change_date);
+            super.destroy();
+            this.elem.off().removeData().remove();
+        }
+    }
+    DatepickerWidget.locale_options = {
+        en: {
+            weekStart: 1,
+            format: 'mm.dd.yyyy'
+        },
+        de: {
+            weekStart: 1,
+            format: 'dd.mm.yyyy'
+        }
+    };
+    function datepicker_on_array_add(inst, context) {
+        DatepickerWidget.initialize(context);
+    }
+    function register_datepicker_array_subscribers() {
+        if (window.yafowil_array === undefined) {
+            return;
+        }
+        window.yafowil_array.on_array_event('on_add', datepicker_on_array_add);
+    }
+
+    class TimepickerButton {
+        constructor(elem, parent) {
+            this.elem = elem;
+            this.parent = parent;
+        }
+        get selected() {
+            return this.elem.hasClass('selected');
+        }
+        set selected(value) {
+            if (value) {
+                this.parent.remove_previously_selected();
+                this.elem.addClass('selected');
+            } else {
+                this.elem.removeClass('selected');
+            }
+        }
+        get previously_selected() {
+            return this.elem.hasClass('prev-selected');
+        }
+        set previously_selected(value) {
+            if (value) {
+                this.elem.addClass('prev-selected');
+            } else {
+                this.elem.removeClass('prev-selected');
+            }
+        }
+    }
+    class TimepickerButtonContainer {
+        constructor(picker, elem) {
+            this.picker = picker;
+            this.elem = elem;
+            this.children = [];
+        }
+        unload_all() {
+            for (let child of this.children) {
+                child.elem.off('click', child.on_click);
+            }
+        }
+        unselect_all() {
+            for (let child of this.children) {
+                child.selected = false;
+            }
+        }
+        mark_previously_selected() {
+            for (let child of this.children) {
+                if (child.selected) {
+                    child.previously_selected = true;
+                    child.selected = false;
+                }
+            }
+        }
+        remove_previously_selected() {
+            for (let child of this.children) {
+                child.previously_selected = false;
+            }
+        }
+    }
+    class TimepickerHour extends TimepickerButton {
+        constructor(hours, container, value, period) {
+            let elem = $('<div />')
+                .addClass('cell')
+                .text(new String(value).padStart(2, '0'))
+                .appendTo(container);
+            super(elem, hours);
+            this.hours = hours;
+            this.picker = hours.picker;
+            this.period = period;
+            this.on_click = this.on_click.bind(this);
+            this.elem.on('click', this.on_click);
+        }
+        on_click(e) {
+            let hour = this.elem.text();
+            this.hours.unselect_all();
+            this.selected = true;
+            this.picker.period = this.period;
+            this.picker.hour = hour;
+        }
+    }
+    class TimepickerMinute extends TimepickerButton {
+        constructor(minutes, container, value) {
+            let elem = $('<div />')
+                .addClass('cell')
+                .text(new String(value).padStart(2, '0'))
+                .appendTo(container);
+            super(elem, minutes);
+            this.minutes = minutes;
+            this.picker = minutes.picker;
+            this.on_click = this.on_click.bind(this);
+            this.elem.on('click', this.on_click);
+        }
+        on_click(e) {
+            this.minutes.unselect_all();
+            this.selected = true;
+            this.picker.minute = this.elem.text();
+        }
+    }
+    class TimepickerHours extends TimepickerButtonContainer {
+        constructor(picker, container) {
+            super(picker, $('<div />').addClass('card-body hours-content'));
+            if (picker.clock === 24) {
+                this.create_clock_24();
+            } else if (picker.clock === 12) {
+                this.create_clock_12();
+            }
+            this.to_minute = this.to_minute.bind(this);
+            let header = $('<div />')
+                .addClass('header card-header bg-primary text-white')
+                .text(picker.translate('hour'));
+            this.minutes_btn = $('<button />')
+                .append($('<i class="bi bi-caret-right"/>'))
+                .append($('<span>Minute</span>'))
+                .addClass('to_minutes d-block d-sm-none btn p-0 float-end')
+                .on('click', this.to_minute)
+                .appendTo(header);
+            this.container_elem = $('<div />')
+                .addClass('card timepicker-hours')
+                .append(header)
+                .append(this.elem)
+                .appendTo(container);
+        }
+        create_clock_24() {
+            for (let i = 0; i < 24; i++) {
+                this.children.push(new TimepickerHour(this, this.elem, i));
+            }
+        }
+        create_clock_12() {
+            $('<span />').addClass('am').text('A.M.').appendTo(this.elem);
+            let hours_am = $('<div />').addClass('am').appendTo(this.elem);
+            $('<span />').addClass('pm').text('P.M.').appendTo(this.elem);
+            let hours_pm = $('<div />').addClass('pm').appendTo(this.elem);
+            for (let i = 0; i < 12; i++) {
+                this.children.push(new TimepickerHour(this, hours_am, i, 'AM'));
+            }
+            for (let i = 0; i < 12; i++) {
+                this.children.push(new TimepickerHour(this, hours_pm, i, 'PM'));
+            }
+            this.elem.css('grid-template-rows', '1fr 1fr');
+            this.elem.css('grid-template-columns', 'auto 1fr');
+        }
+        to_minute(e) {
+            e.preventDefault();
+            this.container_elem.hide();
+            this.picker.minutes.container_elem.show();
+        }
+    }
+    class TimepickerMinutes extends TimepickerButtonContainer {
+        constructor(picker, container, step) {
+            super(picker, $('<div />').addClass('card-body minutes-content'));
+            this.step = step;
+            let count = 60 / step;
+            let columns = 0;
+            if (count <= 32) {
+                columns = Math.ceil(count / 4);
+                let cols = '1fr '.repeat(Math.ceil(count / 4));
+                this.elem.css(
+                    'grid-template-columns',
+                    cols
+                );
+            } else {
+                columns = 10;
+                this.elem.css(
+                    'grid-template-columns',
+                    '1fr '.repeat(10)
+                );
+                if (picker.clock === 24) {
+                    $('div.hours-content', picker.dd_elem).css({
+                        'grid-template-columns': '1fr 1fr 1fr 1fr'
+                    });
+                } else {
+                    $('div.am, div.pm', picker.dd_elem).css({
+                        'grid-template-columns': '1fr 1fr 1fr 1fr'
+                    });
+                }
+            }
+            this.columns_count = columns;
+            for (let i = 0; i < count; i++) {
+                this.children.push(new TimepickerMinute(this, this.elem, i * step));
+            }
+            this.to_hour = this.to_hour.bind(this);
+            let header = $('<div />')
+                .addClass('header card-header bg-primary text-white')
+                .text(picker.translate('minute'));
+            this.hours_btn = $('<button />')
+                .append($('<i class="bi bi-caret-left"/>'))
+                .append($('<span>Hour</span>'))
+                .addClass('to_hours d-block d-sm-none btn p-0 float-end')
+                .on('click', this.to_hour)
+                .appendTo(header);
+            this.container_elem = $('<div />')
+                .addClass('card timepicker-minutes')
+                .append(header)
+                .append(this.elem)
+                .appendTo(container);
+        }
+        to_hour(e) {
+            e.preventDefault();
+            this.container_elem.hide();
+            this.picker.hours.container_elem.show();
+        }
+    }
+    class TimepickerWidget {
+        static initialize(context) {
+            $('input.timepicker', context).each(function() {
+                let elem = $(this);
+                if (window.yafowil_array !== undefined &&
+                    window.yafowil_array.inside_template(elem)) {
+                    return;
+                }
+                elem.attr('spellcheck', false);
+                new TimepickerWidget(elem, {
+                    language: elem.data('time-locale'),
+                    clock: elem.data('time-clock'),
+                    step: elem.data('time-minutes_step')
+                });
+            });
+        }
+        constructor(elem, opts) {
+            elem.data('yafowil-timepicker', this);
+            this.elem = elem;
+            this.language = opts.language || 'en';
+            this.clock = opts.clock || 24;
+            this.period = null;
+            this.hour = '';
+            this.minute = '';
+            if (opts.step <= 0 || opts.step > 60 || typeof opts.step !== 'number') {
+                this.step = 5;
+            } else {
+                this.step = opts.step;
+            }
+            this.trigger_elem = $('<button />')
+                .addClass('timepicker-trigger btn btn-outline-secondary')
+                .text('...')
+                .insertAfter(elem);
+            let dd_elem = this.dd_elem = $('<div />')
+                .addClass('timepicker-dropdown')
+                .insertAfter(elem.closest('.input-group'));
+            let dd_container = $('<div />')
+                .addClass('timepicker-container card-group shadow')
+                .appendTo(dd_elem);
+            this.hours = new TimepickerHours(this, dd_container);
+            this.minutes = new TimepickerMinutes(this, dd_container, this.step);
+            this.calc_flex_basis(this.minutes.columns_count);
+            this.validate();
+            this.show_dropdown = this.show_dropdown.bind(this);
+            this.elem.on('focus', this.show_dropdown);
+            this.toggle_dropdown = this.toggle_dropdown.bind(this);
+            this.trigger_elem.on('click', this.toggle_dropdown);
+            this.hide_dropdown = this.hide_dropdown.bind(this);
+            $(document).on('click', this.hide_dropdown);
+            this.on_keypress = this.on_keypress.bind(this);
+            this.elem.on('keypress', this.on_keypress);
+            this.validate = this.validate.bind(this);
+            this.elem.on('keyup', this.validate);
+            this.popper = Popper.createPopper(this.elem[0], this.dd_elem[0], {
+                placement: "bottom-start",
+                modifiers: [
+                  {
+                      name: 'preventOverflow',
+                      options: {
+                          boundary: 'viewport',
+                          padding: 10,
+                      },
+                  },
+                  {
+                    name: "flip",
+                    options: {
+                      allowedAutoPlacements: ["top-start", "bottom-start"],
+                      rootBoundary: "viewport"
+                    }
+                  }
+                ]
+            });
+            let created_event = $.Event('timepicker_created', {widget: this});
+            this.elem.trigger(created_event);
+            if (window.ts !== undefined) {
+                window.ts.ajax.attach(this, elem);
+            }
+        }
+        calc_flex_basis(minutesColumns) {
+            let hoursColumns = 6;
+            if (60 / this.step > 32) {
+                if (this.clock === 24) {
+                    hoursColumns = 4;
+                } else {
+                    hoursColumns = 5;
+                }
+            }
+            if (minutesColumns < 2) {
+                minutesColumns = 2;
+            }
+            const total_columns = hoursColumns + minutesColumns;
+            const hoursFlexBasis = (hoursColumns / total_columns) * 100;
+            const minutesFlexBasis = (minutesColumns / total_columns) * 100;
+            this.hours.container_elem.css('flex-basis', hoursFlexBasis.toFixed(2) + '%');
+            this.minutes.container_elem.css('flex-basis', minutesFlexBasis.toFixed(2) + '%');
+            const containerWidth = `calc(${total_columns * 40}px + 4rem)`;
+            this.dd_elem.css('width', containerWidth);
+        }
+        unload() {
+            if (window.ts !== undefined) {
+                ts.deprecate(
+                    'yafowil.widget.timepicker.unload',
+                    'yafowil.widget.timepicker.destroy',
+                    'yafowil 2.1'
+                );
+            }
+            this.destroy();
+        }
+        get hour() {
+            return this._hour;
+        }
+        set hour(hour) {
+            this._hour = hour;
+            this.set_time();
+        }
+        get minute() {
+            return this._minute;
+        }
+        set minute(minute) {
+            this._minute = minute;
+            this.set_time();
+        }
+        set_time() {
+            if (this.hour === '' || this.minute === '') {
+                return;
+            }
+            if (this.clock === 24) {
+                this.elem.val(`${this.hour}:${this.minute}`);
+            } else if (this.clock === 12) {
+                this.elem.val(`${this.hour}:${this.minute}${this.period}`);
+            }
+            this.elem.trigger('change');
+            this.hour = '';
+            this.minute = '';
+            this.hours.mark_previously_selected();
+            this.minutes.mark_previously_selected();
+            if ($(window).width() <= 575) {
+                this.reset_visibility();
+            }
+            this.dd_elem.hide();
+        }
+        reset_visibility() {
+            this.hours.container_elem.show();
+            this.minutes.container_elem.hide();
+        }
+        hide_dropdown(e) {
+            if (e.target !== this.elem[0] && e.target !== this.trigger_elem[0]) {
+                if ($(e.target).closest(this.dd_elem).length === 0) {
+                    this.dd_elem.hide();
+                    if (this.hour === '' || this.minute === '') {
+                        this._hour = '';
+                        this._minute = '';
+                    }
+                    this.hours.unselect_all();
+                    this.minutes.unselect_all();
+                }
+            }
+        }
+        show_dropdown(e) {
+            this.dd_elem.show();
+            this.popper.forceUpdate();
+        }
+        toggle_dropdown(e) {
+            e.preventDefault();
+            this.dd_elem.toggle();
+            this.popper.forceUpdate();
+        }
+        on_keypress(e) {
+            e.preventDefault();
+            let val = this.elem.val();
+            let cursor_pos = e.target.selectionStart;
+            if (e.key === 'Enter') {
+                this.dd_elem.hide();
+                this.elem.blur();
+            }
+            if (cursor_pos <= 4) {
+                if (e.key.match(new RegExp('[0-9]'))) {
+                    this.elem.val(val + e.key);
+                    if (cursor_pos === 2) {
+                        this.elem.val(`${val}:${e.key}`);
+                    }
+                }
+            } else if (cursor_pos === 5 && this.clock === 12) {
+                let correct = ['a', 'A', 'p', 'P'];
+                if (correct.includes(e.key)) {
+                    this.elem.val(val + e.key);
+                }
+            } else if (cursor_pos === 6 && this.clock === 12) {
+                if (e.key === 'm' || e.key === 'M') {
+                    this.elem.val(val + e.key);
+                }
+            }    }
+        validate() {
+            if (!this.elem.val()) return;
+            let time = this.elem.val(),
+                match_24 = new RegExp(/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/),
+                match_12 = new RegExp(/^(?:0?\d|1[012]):[0-5]\d[apAP][mM]$/),
+                hour = time.substr(0, 2),
+                hour_index = parseInt(hour),
+                minute = time.substr(3, 2),
+                minute_index = parseInt(minute) / this.step;
+            if (this.clock === 24) {
+                if (!time.match(match_24) || time.length < 5) {
+                    return;
+                }
+            } else if (this.clock === 12) {
+                if (!time.match(match_12) || time.length < 7) {
+                    return;
+                }
+                let period = time.substr(5).toUpperCase();
+                this.period = (period === 'PM') ? 'PM' : 'AM';
+                if (period === 'PM') hour_index += 12;
+            }
+            let hour_elem = this.hours.children[hour_index];
+            hour_elem.on_click();
+            let minute_elem = this.minutes.children[minute_index];
+            if (minute_elem) {
+                minute_elem.on_click();
+            } else {
+                this.minutes.unselect_all();
+            }
+        }
+        translate(msgid) {
+            let locales = this.constructor.locales,
+                locale = locales[this.language] || locales.en;
+            return locale[msgid];
+        }
+        destroy() {
+            $(document).off('click', this.hide_dropdown);
+            this.popper.destroy();
+            this.hours.unload_all();
+            this.minutes.unload_all();
+            this.dd_elem.remove();
+        }
+    }
+    TimepickerWidget.locales = {
+        en: {
+            hour: 'Hour',
+            minute: 'Minute'
+        },
+        de: {
+            hour: 'Stunde',
+            minute: 'Minute'
+        }
+    };
+    function timepicker_on_array_add(inst, context) {
+        TimepickerWidget.initialize(context);
+    }
+    function register_timepicker_array_subscribers() {
+        if (window.yafowil_array === undefined) {
+            return;
+        }
+        window.yafowil_array.on_array_event('on_add', timepicker_on_array_add);
+    }
+
+    $(function() {
+        if (window.ts !== undefined) {
+            ts.ajax.register(DatepickerWidget.initialize, true);
+            ts.ajax.register(TimepickerWidget.initialize, true);
+        } else if (window.bdajax !== undefined) {
+            bdajax.register(DatepickerWidget.initialize, true);
+            bdajax.register(TimepickerWidget.initialize, true);
+        } else {
+            DatepickerWidget.initialize();
+            TimepickerWidget.initialize();
+        }
+        register_datepicker_array_subscribers();
+        register_timepicker_array_subscribers();
+    });
+
+    exports.DatepickerWidget = DatepickerWidget;
+    exports.TimepickerButton = TimepickerButton;
+    exports.TimepickerButtonContainer = TimepickerButtonContainer;
+    exports.TimepickerHour = TimepickerHour;
+    exports.TimepickerHours = TimepickerHours;
+    exports.TimepickerMinute = TimepickerMinute;
+    exports.TimepickerMinutes = TimepickerMinutes;
+    exports.TimepickerWidget = TimepickerWidget;
+    exports.register_datepicker_array_subscribers = register_datepicker_array_subscribers;
+    exports.register_timepicker_array_subscribers = register_timepicker_array_subscribers;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+
+    window.yafowil = window.yafowil || {};
+    window.yafowil.datetime = exports;
+
+
+    return exports;
+
+})({}, jQuery, Popper);

yafowil/widget/datetime/resources/bootstrap5/widget.min.js

@@ -0,0 +1 @@
+var yafowil_datetime=function(e,t,i){"use strict";class s extends Datepicker{static initialize(e){t("input.datepicker",e).each((function(){let e=t(this);void 0!==window.yafowil_array&&window.yafowil_array.inside_template(e)||new s(e,e.data("date-locale"))}))}constructor(e,i,r={}){let o={language:i,orientation:"bottom",buttonClass:"btn",todayHighlight:!0,autohide:!0};e.offset().top+e.outerHeight()+250>t(document).height()&&(o.orientation="top");let a=s.locale_options;Object.assign(o,a[i]||a.en),Object.assign(o,r),super(e[0],o),e.data("yafowil-datepicker",this),this.elem=e,this.adapt(),this.trigger=t("<button />").addClass("datepicker-trigger btn btn-outline-secondary").text("...").insertAfter(e),this.toggle_picker=this.toggle_picker.bind(this),this.trigger.on("mousedown touchstart",this.toggle_picker),this.trigger.on("click",(e=>{e.preventDefault()})),this.on_change_date=this.on_change_date.bind(this),this.elem.on("changeDate",this.on_change_date),void 0!==window.ts&&ts.ajax.attach(this,e);let l=t.Event("datepicker_created",{widget:this});this.elem.trigger(l)}on_change_date(){this.elem.trigger("change")}adapt(){const e=t(this.picker.element);t(".datepicker-picker",e).addClass("card");const i=t(".datepicker-header",e).addClass("card-header bg-primary");t(".btn",i).addClass("btn-primary"),t(".datepicker-main",e).addClass("card-body")}unload(){void 0!==window.ts&&ts.deprecate("yafowil.widget.datepicker.unload","yafowil.widget.datepicker.destroy","yafowil 2.1"),this.destroy()}toggle_picker(e){e.preventDefault(),e.stopPropagation(),this.picker.active||this.active?(this.hide(),this.elem.blur()):this.show()}destroy(){this.trigger.off("mousedown touchstart",this.toggle_picker),this.trigger.off(),this.elem.off("changeDate",this.on_change_date),super.destroy(),this.elem.off().removeData().remove()}}function r(e,t){s.initialize(t)}function o(){void 0!==window.yafowil_array&&window.yafowil_array.on_array_event("on_add",r)}s.locale_options={en:{weekStart:1,format:"mm.dd.yyyy"},de:{weekStart:1,format:"dd.mm.yyyy"}};class a{constructor(e,t){this.elem=e,this.parent=t}get selected(){return this.elem.hasClass("selected")}set selected(e){e?(this.parent.remove_previously_selected(),this.elem.addClass("selected")):this.elem.removeClass("selected")}get previously_selected(){return this.elem.hasClass("prev-selected")}set previously_selected(e){e?this.elem.addClass("prev-selected"):this.elem.removeClass("prev-selected")}}class l{constructor(e,t){this.picker=e,this.elem=t,this.children=[]}unload_all(){for(let e of this.children)e.elem.off("click",e.on_click)}unselect_all(){for(let e of this.children)e.selected=!1}mark_previously_selected(){for(let e of this.children)e.selected&&(e.previously_selected=!0,e.selected=!1)}remove_previously_selected(){for(let e of this.children)e.previously_selected=!1}}class n extends a{constructor(e,i,s,r){super(t("<div />").addClass("cell").text(new String(s).padStart(2,"0")).appendTo(i),e),this.hours=e,this.picker=e.picker,this.period=r,this.on_click=this.on_click.bind(this),this.elem.on("click",this.on_click)}on_click(e){let t=this.elem.text();this.hours.unselect_all(),this.selected=!0,this.picker.period=this.period,this.picker.hour=t}}class d extends a{constructor(e,i,s){super(t("<div />").addClass("cell").text(new String(s).padStart(2,"0")).appendTo(i),e),this.minutes=e,this.picker=e.picker,this.on_click=this.on_click.bind(this),this.elem.on("click",this.on_click)}on_click(e){this.minutes.unselect_all(),this.selected=!0,this.picker.minute=this.elem.text()}}class h extends l{constructor(e,i){super(e,t("<div />").addClass("card-body hours-content")),24===e.clock?this.create_clock_24():12===e.clock&&this.create_clock_12(),this.to_minute=this.to_minute.bind(this);let s=t("<div />").addClass("header card-header bg-primary text-white").text(e.translate("hour"));this.minutes_btn=t("<button />").append(t('<i class="bi bi-caret-right"/>')).append(t("<span>Minute</span>")).addClass("to_minutes d-block d-sm-none btn p-0 float-end").on("click",this.to_minute).appendTo(s),this.container_elem=t("<div />").addClass("card timepicker-hours").append(s).append(this.elem).appendTo(i)}create_clock_24(){for(let e=0;e<24;e++)this.children.push(new n(this,this.elem,e))}create_clock_12(){t("<span />").addClass("am").text("A.M.").appendTo(this.elem);let e=t("<div />").addClass("am").appendTo(this.elem);t("<span />").addClass("pm").text("P.M.").appendTo(this.elem);let i=t("<div />").addClass("pm").appendTo(this.elem);for(let t=0;t<12;t++)this.children.push(new n(this,e,t,"AM"));for(let e=0;e<12;e++)this.children.push(new n(this,i,e,"PM"));this.elem.css("grid-template-rows","1fr 1fr"),this.elem.css("grid-template-columns","auto 1fr")}to_minute(e){e.preventDefault(),this.container_elem.hide(),this.picker.minutes.container_elem.show()}}class c extends l{constructor(e,i,s){super(e,t("<div />").addClass("card-body minutes-content")),this.step=s;let r=60/s,o=0;if(r<=32){o=Math.ceil(r/4);let e="1fr ".repeat(Math.ceil(r/4));this.elem.css("grid-template-columns",e)}else o=10,this.elem.css("grid-template-columns","1fr ".repeat(10)),24===e.clock?t("div.hours-content",e.dd_elem).css({"grid-template-columns":"1fr 1fr 1fr 1fr"}):t("div.am, div.pm",e.dd_elem).css({"grid-template-columns":"1fr 1fr 1fr 1fr"});this.columns_count=o;for(let e=0;e<r;e++)this.children.push(new d(this,this.elem,e*s));this.to_hour=this.to_hour.bind(this);let a=t("<div />").addClass("header card-header bg-primary text-white").text(e.translate("minute"));this.hours_btn=t("<button />").append(t('<i class="bi bi-caret-left"/>')).append(t("<span>Hour</span>")).addClass("to_hours d-block d-sm-none btn p-0 float-end").on("click",this.to_hour).appendTo(a),this.container_elem=t("<div />").addClass("card timepicker-minutes").append(a).append(this.elem).appendTo(i)}to_hour(e){e.preventDefault(),this.container_elem.hide(),this.picker.hours.container_elem.show()}}class p{static initialize(e){t("input.timepicker",e).each((function(){let e=t(this);void 0!==window.yafowil_array&&window.yafowil_array.inside_template(e)||(e.attr("spellcheck",!1),new p(e,{language:e.data("time-locale"),clock:e.data("time-clock"),step:e.data("time-minutes_step")}))}))}constructor(e,s){e.data("yafowil-timepicker",this),this.elem=e,this.language=s.language||"en",this.clock=s.clock||24,this.period=null,this.hour="",this.minute="",s.step<=0||s.step>60||"number"!=typeof s.step?this.step=5:this.step=s.step,this.trigger_elem=t("<button />").addClass("timepicker-trigger btn btn-outline-secondary").text("...").insertAfter(e);let r=this.dd_elem=t("<div />").addClass("timepicker-dropdown").insertAfter(e.closest(".input-group")),o=t("<div />").addClass("timepicker-container card-group shadow").appendTo(r);this.hours=new h(this,o),this.minutes=new c(this,o,this.step),this.calc_flex_basis(this.minutes.columns_count),this.validate(),this.show_dropdown=this.show_dropdown.bind(this),this.elem.on("focus",this.show_dropdown),this.toggle_dropdown=this.toggle_dropdown.bind(this),this.trigger_elem.on("click",this.toggle_dropdown),this.hide_dropdown=this.hide_dropdown.bind(this),t(document).on("click",this.hide_dropdown),this.on_keypress=this.on_keypress.bind(this),this.elem.on("keypress",this.on_keypress),this.validate=this.validate.bind(this),this.elem.on("keyup",this.validate),this.popper=i.createPopper(this.elem[0],this.dd_elem[0],{placement:"bottom-start",modifiers:[{name:"preventOverflow",options:{boundary:"viewport",padding:10}},{name:"flip",options:{allowedAutoPlacements:["top-start","bottom-start"],rootBoundary:"viewport"}}]});let a=t.Event("timepicker_created",{widget:this});this.elem.trigger(a),void 0!==window.ts&&window.ts.ajax.attach(this,e)}calc_flex_basis(e){let t=6;60/this.step>32&&(t=24===this.clock?4:5),e<2&&(e=2);const i=t+e,s=t/i*100,r=e/i*100;this.hours.container_elem.css("flex-basis",s.toFixed(2)+"%"),this.minutes.container_elem.css("flex-basis",r.toFixed(2)+"%");const o=`calc(${40*i}px + 4rem)`;this.dd_elem.css("width",o)}unload(){void 0!==window.ts&&ts.deprecate("yafowil.widget.timepicker.unload","yafowil.widget.timepicker.destroy","yafowil 2.1"),this.destroy()}get hour(){return this._hour}set hour(e){this._hour=e,this.set_time()}get minute(){return this._minute}set minute(e){this._minute=e,this.set_time()}set_time(){""!==this.hour&&""!==this.minute&&(24===this.clock?this.elem.val(`${this.hour}:${this.minute}`):12===this.clock&&this.elem.val(`${this.hour}:${this.minute}${this.period}`),this.elem.trigger("change"),this.hour="",this.minute="",this.hours.mark_previously_selected(),this.minutes.mark_previously_selected(),t(window).width()<=575&&this.reset_visibility(),this.dd_elem.hide())}reset_visibility(){this.hours.container_elem.show(),this.minutes.container_elem.hide()}hide_dropdown(e){e.target!==this.elem[0]&&e.target!==this.trigger_elem[0]&&0===t(e.target).closest(this.dd_elem).length&&(this.dd_elem.hide(),""!==this.hour&&""!==this.minute||(this._hour="",this._minute=""),this.hours.unselect_all(),this.minutes.unselect_all())}show_dropdown(e){this.dd_elem.show(),this.popper.forceUpdate()}toggle_dropdown(e){e.preventDefault(),this.dd_elem.toggle(),this.popper.forceUpdate()}on_keypress(e){e.preventDefault();let t=this.elem.val(),i=e.target.selectionStart;if("Enter"===e.key&&(this.dd_elem.hide(),this.elem.blur()),i<=4)e.key.match(new RegExp("[0-9]"))&&(this.elem.val(t+e.key),2===i&&this.elem.val(`${t}:${e.key}`));else if(5===i&&12===this.clock){["a","A","p","P"].includes(e.key)&&this.elem.val(t+e.key)}else 6===i&&12===this.clock&&("m"!==e.key&&"M"!==e.key||this.elem.val(t+e.key))}validate(){if(!this.elem.val())return;let e=this.elem.val(),t=new RegExp(/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/),i=new RegExp(/^(?:0?\d|1[012]):[0-5]\d[apAP][mM]$/),s=e.substr(0,2),r=parseInt(s),o=e.substr(3,2),a=parseInt(o)/this.step;if(24===this.clock){if(!e.match(t)||e.length<5)return}else if(12===this.clock){if(!e.match(i)||e.length<7)return;let t=e.substr(5).toUpperCase();this.period="PM"===t?"PM":"AM","PM"===t&&(r+=12)}this.hours.children[r].on_click();let l=this.minutes.children[a];l?l.on_click():this.minutes.unselect_all()}translate(e){let t=this.constructor.locales;return(t[this.language]||t.en)[e]}destroy(){t(document).off("click",this.hide_dropdown),this.popper.destroy(),this.hours.unload_all(),this.minutes.unload_all(),this.dd_elem.remove()}}function m(e,t){p.initialize(t)}function u(){void 0!==window.yafowil_array&&window.yafowil_array.on_array_event("on_add",m)}return p.locales={en:{hour:"Hour",minute:"Minute"},de:{hour:"Stunde",minute:"Minute"}},t((function(){void 0!==window.ts?(ts.ajax.register(s.initialize,!0),ts.ajax.register(p.initialize,!0)):void 0!==window.bdajax?(bdajax.register(s.initialize,!0),bdajax.register(p.initialize,!0)):(s.initialize(),p.initialize()),o(),u()})),e.DatepickerWidget=s,e.TimepickerButton=a,e.TimepickerButtonContainer=l,e.TimepickerHour=n,e.TimepickerHours=h,e.TimepickerMinute=d,e.TimepickerMinutes=c,e.TimepickerWidget=p,e.register_datepicker_array_subscribers=o,e.register_timepicker_array_subscribers=u,Object.defineProperty(e,"__esModule",{value:!0}),window.yafowil=window.yafowil||{},window.yafowil.datetime=e,e}({},jQuery,Popper);

yafowil/widget/datetime/resources/default/datepicker.min.css

@@ -0,0 +1 @@
+input.dateinput{display:inline-block;margin-right:45px}button.datepicker-trigger{height:34px;margin:0;padding:0;position:absolute;transform:translateX(calc(-100% - 5px));width:34px}div.datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:2000}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:.25rem;border-radius:6px;display:inline-block;padding:5px}.dateinput{width:10em}.datepicker-dropdown .datepicker-picker{box-shadow:0 .5rem 1rem rgba(0,0,0,.175)}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:.25rem;cursor:default;display:block;flex:1;margin-bottom:5px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f8f9fa;box-shadow:inset 0 1px 1px rgba(0,0,0,.1)}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex;width:300px}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.28571%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f8f9fa;box-shadow:inset 0 -1px 1px rgba(0,0,0,.1);font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .btn{background-color:#fff;border:0;padding:5px}.datepicker-controls .btn:focus,.datepicker-controls .btn:hover{background-color:#e2e6ea;border-color:#dae0e5;color:#212529}.datepicker-controls .btn:focus{box-shadow:0 0 0 .2rem hsla(220,4%,85%,.5)}.datepicker-controls .btn:disabled{background-color:#f8f9fa;border-color:#f8f9fa;color:#212529}.datepicker-controls .btn:not(:disabled):active{background-color:#dae0e5;border-color:#d3d9df;color:#212529}.datepicker-controls .btn:not(:disabled):active:focus{box-shadow:0 0 0 .2rem hsla(220,4%,85%,.5)}.datepicker-header .datepicker-controls .btn{border-color:transparent;font-weight:700}.datepicker-footer .datepicker-controls .btn{border-radius:.2rem;font-size:.875rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.9375rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#dee2e6;font-size:.875rem;width:2.25rem}@media(max-width:22.5rem){.datepicker-view .week{width:1.96875rem}.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#f1f3f5}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:var(--yafowil-accent-color,#0d6efd);color:var(--yafowil-accent-font-color,#fff);font-weight:600}.datepicker-cell.disabled,.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#cdd0d4}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f8f9fa;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused,.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#f1f3f5}.datepicker-cell.today:not(.selected){background-color:#eee}.datepicker-cell.today:not(.selected):not(.disabled){color:#000}.datepicker-cell.today.focused:not(.selected){background-color:#eee}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#6c757d;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#666f76}.datepicker-cell.range-start{border-radius:.25rem 0 0 .25rem}.datepicker-cell.range-end{border-radius:0 .25rem .25rem 0}.datepicker-cell.range{background-color:#e9ecef;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#e2e6ea}.datepicker-cell.range.disabled{color:#cbd3da}.datepicker-cell.range.focused{background-color:#dadfe4}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:var(--yafowil-accent-color,#0d6efd)}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em rgba(102,176,255,.2)}

yafowil/widget/datetime/resources/default/timepicker.min.css

@@ -0,0 +1 @@
+input.timeinput{display:inline-block;margin-right:45px;width:6em}button.timepicker-trigger{height:34px;margin:0;padding:0;position:absolute;transform:translateX(calc(-100% - 5px));width:34px}.timepicker-dropdown{background-color:#fff;border-radius:6px;box-shadow:0 .5rem 1rem rgba(0,0,0,.18);display:none;margin-top:4px;padding:5px;position:absolute;z-index:1000}.timepicker-container{display:flex;height:100%}.timepicker-container .header{background:none;border-radius:5px;font-weight:700;height:30px;padding:5px}.timepicker-container .header:hover{background:#dae0e5}.timepicker-container .cell{align-items:center;border-radius:3px;cursor:pointer;display:flex;justify-content:center;padding:5px;user-select:none}.timepicker-container .cell:hover{background:#f9f9f9}.timepicker-container .cell.selected{background-color:var(--yafowil-accent-color,#0d6efd);color:var(--yafowil-accent-font-color,#fff);font-weight:600}.timepicker-container .timepicker-hours{background:#fff;margin-right:6px}.timepicker-container .timepicker-hours .hours-content{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr;width:100%}.timepicker-container .timepicker-hours div.am,.timepicker-container .timepicker-hours div.pm{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr}.timepicker-container .timepicker-hours div.am{border-bottom:1px solid #e7e7e7}.timepicker-container .timepicker-hours span.am,.timepicker-container .timepicker-hours span.pm{float:left;font-size:10px;font-weight:600;padding:0 6px;position:relative;top:25px}.timepicker-container .timepicker-minutes{background:#fff;flex:auto}.timepicker-container .timepicker-minutes .minutes-content{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr;width:100%}.timepicker-container .timepicker-minutes .minutes-content:before{border-left:1px solid #e7e7e7;bottom:0;content:"";height:100%;position:absolute;transform:translateX(-4px)}.datetime-picker>div{display:inline-block}