jsl-ui 9.18.3 → 9.18.4

package/lib/ui/date.picker/lib/fns.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @file Utility functions for function manipulation.
+ */
+/**
+ * bufferFn buffers calls to fn so they only happen every ms milliseconds
+ *
+ * @param {number} ms number of milliseconds
+ * @param {function} fn the function to be buffered
+ * @returns {function}
+ */
+export declare function bufferFn(ms: any, fn: any): () => void;
+/**
+ * noop is a function which does nothing at all.
+ */
+export declare function noop(): void;
+/**
+ * copy properties from object o2 to object o1.
+ *
+ * @params {Object} o1
+ * @params {Object} o2
+ * @returns {Object}
+ */
+export declare function cp(...params: any[]): any;

package/lib/ui/date.picker/lib/fns.js

@@ -0,0 +1,43 @@
+/**
+ * @file Utility functions for function manipulation.
+ */
+/**
+ * bufferFn buffers calls to fn so they only happen every ms milliseconds
+ *
+ * @param {number} ms number of milliseconds
+ * @param {function} fn the function to be buffered
+ * @returns {function}
+ */
+export function bufferFn(ms, fn) {
+    var timeout = undefined;
+    return function () {
+        clearTimeout(timeout);
+        timeout = setTimeout(fn, ms);
+    };
+}
+/**
+ * noop is a function which does nothing at all.
+ */
+export function noop() { }
+/**
+ * copy properties from object o2 to object o1.
+ *
+ * @params {Object} o1
+ * @params {Object} o2
+ * @returns {Object}
+ */
+export function cp() {
+    var params = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        params[_i] = arguments[_i];
+    }
+    var args = arguments;
+    var o1 = args[0];
+    for (var i = 1; i < args.length; ++i) {
+        var o2 = args[i] || {};
+        for (var key in o2) {
+            o1[key] = o2[key];
+        }
+    }
+    return o1;
+}

package/lib/ui/date.picker/mode/base-mode.d.ts

@@ -0,0 +1,26 @@
+import { noop } from '../lib/fns';
+export default function BaseMode(input: any, emit: any, opts: any): {
+    el: any;
+    opts: any;
+    shouldFocusOnBlur: boolean;
+    shouldFocusOnRender: boolean;
+    state: {
+        selectedDate: Date;
+        view: string;
+        hilightedDate: any;
+    };
+    adjustPosition: typeof noop;
+    containerHTML: string;
+    attachToDom: () => void;
+    updateInput: (selectedDate: any) => void;
+    computeSelectedDate: () => any;
+    currentView: () => any;
+    open: () => void;
+    isVisible: () => boolean;
+    hasFocus: () => boolean;
+    shouldHide: () => boolean;
+    close: (becauseOfBlur?: boolean) => void;
+    destroy: () => void;
+    render: () => void;
+    setState: (state: any) => void;
+};

package/lib/ui/date.picker/mode/base-mode.js

@@ -0,0 +1,248 @@
+/**
+ * @file Defines the base date picker behavior, overridden by various modes.
+ */
+import dayPicker from '../views/day-picker';
+import monthPicker from '../views/month-picker';
+import yearPicker from '../views/year-picker';
+import { bufferFn, noop } from '../lib/fns';
+import { on, CustomEvent, Key } from '../lib/dom';
+import { constrainDate } from '../lib/date-manip';
+var views = {
+    day: dayPicker,
+    year: yearPicker,
+    month: monthPicker
+};
+export default function BaseMode(input, emit, opts) {
+    var detatchInputEvents; // A function that detaches all events from the input
+    var closing = false; // A hack to prevent calendar from re-opening when closing.
+    var selectedDate; // The currently selected date
+    var dp = {
+        // The root DOM element for the date picker, initialized on first open.
+        el: undefined,
+        opts: opts,
+        shouldFocusOnBlur: true,
+        shouldFocusOnRender: true,
+        state: initialState(),
+        adjustPosition: noop,
+        containerHTML: '<div class="dp"></div>',
+        attachToDom: function () {
+            opts.appendTo.appendChild(dp.el);
+        },
+        updateInput: function (selectedDate) {
+            var e = new CustomEvent('change', { bubbles: true });
+            e.simulated = true;
+            input.value = selectedDate ? opts.format(selectedDate) : '';
+            input.dispatchEvent(e);
+        },
+        computeSelectedDate: function () {
+            return opts.parse(input.value);
+        },
+        currentView: function () {
+            return views[dp.state.view];
+        },
+        open: function () {
+            if (closing) {
+                return;
+            }
+            if (!dp.el) {
+                dp.el = createContainerElement(opts, dp.containerHTML);
+                attachContainerEvents(dp);
+            }
+            selectedDate = constrainDate(dp.computeSelectedDate(), opts.min, opts.max);
+            dp.state.hilightedDate = selectedDate || opts.hilightedDate;
+            dp.state.view = 'day';
+            dp.attachToDom();
+            dp.render();
+            emit('open');
+        },
+        isVisible: function () {
+            return !!dp.el && !!dp.el.parentNode;
+        },
+        hasFocus: function () {
+            var focused = document.activeElement;
+            return dp.el &&
+                dp.el.contains(focused) &&
+                focused.className.indexOf('dp-focuser') < 0;
+        },
+        shouldHide: function () {
+            return dp.isVisible();
+        },
+        close: function (becauseOfBlur) {
+            var el = dp.el;
+            if (!dp.isVisible()) {
+                return;
+            }
+            if (el) {
+                var parent = el.parentNode;
+                parent && parent.removeChild(el);
+            }
+            closing = true;
+            if (becauseOfBlur && dp.shouldFocusOnBlur) {
+                focusInput(input);
+            }
+            // When we close, the input often gains refocus, which
+            // can then launch the date picker again, so we buffer
+            // a bit and don't show the date picker within N ms of closing
+            setTimeout(function () {
+                closing = false;
+            }, 100);
+            emit('close');
+        },
+        destroy: function () {
+            dp.close();
+            detatchInputEvents();
+        },
+        render: function () {
+            if (!dp.el) {
+                return;
+            }
+            var hadFocus = dp.hasFocus();
+            var html = dp.currentView().render(dp);
+            html && (dp.el.firstChild.innerHTML = html);
+            dp.adjustPosition();
+            if (hadFocus || dp.shouldFocusOnRender) {
+                focusCurrent(dp);
+            }
+        },
+        // Conceptually similar to setState in React, updates
+        // the view state and re-renders.
+        setState: function (state) {
+            for (var key in state) {
+                dp.state[key] = state[key];
+            }
+            emit('statechange');
+            dp.render();
+        },
+    };
+    detatchInputEvents = attachInputEvents(input, dp);
+    // Builds the initial view state
+    // selectedDate is a special case and causes changes to hilightedDate
+    // hilightedDate is set on open, so remains undefined initially
+    // view is the current view (day, month, year)
+    function initialState() {
+        return {
+            get selectedDate() {
+                return selectedDate;
+            },
+            set selectedDate(dt) {
+                if (dt && !opts.inRange(dt)) {
+                    return;
+                }
+                if (dt) {
+                    selectedDate = new Date(dt);
+                    dp.state.hilightedDate = selectedDate;
+                }
+                else {
+                    selectedDate = dt;
+                }
+                dp.updateInput(selectedDate);
+                emit('select');
+                dp.close();
+            },
+            view: 'day',
+            hilightedDate: undefined
+        };
+    }
+    return dp;
+}
+function createContainerElement(opts, containerHTML) {
+    var el = document.createElement('div');
+    el.className = opts.mode;
+    el.innerHTML = containerHTML;
+    return el;
+}
+function attachInputEvents(input, dp) {
+    var bufferShow = bufferFn(5, function () {
+        if (dp.shouldHide()) {
+            dp.close();
+        }
+        else {
+            dp.open();
+        }
+    });
+    var off = [
+        on('blur', input, bufferFn(150, function () {
+            if (!dp.hasFocus()) {
+                dp.close(true);
+            }
+        })),
+        on('mousedown', input, function () {
+            if (input === document.activeElement && !dp.isVisible()) {
+                bufferShow();
+            }
+        }),
+        on('focus', input, bufferShow),
+        on('input', input, function (e) {
+            try {
+                var date = dp.opts.parse(e.target.value);
+                dp.setState({
+                    hilightedDate: date
+                });
+            }
+            catch (e) {
+                //ignore invalid dates while input
+            }
+        }),
+    ];
+    // Unregister all events that were registered above.
+    return function () {
+        off.forEach(function (f) {
+            f();
+        });
+    };
+}
+function focusCurrent(dp) {
+    var current = dp.el.querySelector('.dp-current');
+    return current && current.focus();
+}
+function attachContainerEvents(dp) {
+    var el = dp.el;
+    var calEl = el.querySelector('.dp');
+    // Hack to get iOS to show active CSS states
+    el.ontouchstart = noop;
+    function onClick(e) {
+        e.target.className.split(' ').forEach(function (evt) {
+            var handler = dp.currentView().onClick[evt];
+            handler && handler(e, dp);
+        });
+    }
+    // The calender fires a blur event *every* time we redraw
+    // this means we need to buffer the blur event to see if
+    // it still has no focus after redrawing, and only then
+    // do we return focus to the input. A possible other approach
+    // would be to set context.redrawing = true on redraw and
+    // set it to false in the blur event.
+    on('blur', calEl, bufferFn(150, function () {
+        if (!dp.hasFocus()) {
+            dp.close(true);
+        }
+    }));
+    on('keydown', el, function (e) {
+        if (e.keyCode === Key.enter) {
+            onClick(e);
+        }
+        else {
+            dp.currentView().onKeyDown(e, dp);
+        }
+    });
+    // If the user clicks in non-focusable space, but
+    // still within the date picker, we don't want to
+    // hide, so we need to hack some things...
+    on('mousedown', calEl, function (e) {
+        e.target.focus && e.target.focus(); // IE hack
+        if (document.activeElement !== e.target) {
+            e.preventDefault();
+            focusCurrent(dp);
+        }
+    });
+    on('click', el, onClick);
+}
+function focusInput(input) {
+    // When the modal closes, we need to focus the original input so the
+    // user can continue tabbing from where they left off.
+    input.focus();
+    // iOS zonks out if we don't blur the input, so...
+    if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
+        input.blur();
+    }
+}

package/lib/ui/date.picker/mode/dropdown-mode.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @file Defines the dropdown date picker behavior.
+ */
+export default function DropdownMode(input: any, emit: any, opts: any): {
+    el: any;
+    opts: any;
+    shouldFocusOnBlur: boolean;
+    shouldFocusOnRender: boolean;
+    state: {
+        selectedDate: Date;
+        view: string;
+        hilightedDate: any;
+    };
+    adjustPosition: typeof import("../lib/fns").noop;
+    containerHTML: string;
+    attachToDom: () => void;
+    updateInput: (selectedDate: any) => void;
+    computeSelectedDate: () => any;
+    currentView: () => any;
+    open: () => void;
+    isVisible: () => boolean;
+    hasFocus: () => boolean;
+    shouldHide: () => boolean;
+    close: (becauseOfBlur?: boolean) => void;
+    destroy: () => void;
+    render: () => void;
+    setState: (state: any) => void;
+};

package/lib/ui/date.picker/mode/dropdown-mode.js

@@ -0,0 +1,50 @@
+/**
+ * @file Defines the dropdown date picker behavior.
+ */
+import BaseMode from './base-mode';
+export default function DropdownMode(input, emit, opts) {
+    var dp = BaseMode(input, emit, opts);
+    dp.shouldFocusOnBlur = false;
+    Object.defineProperty(dp, 'shouldFocusOnRender', {
+        get: function () {
+            return input !== document.activeElement;
+        }
+    });
+    dp.adjustPosition = function () {
+        autoPosition(input, dp);
+    };
+    return dp;
+}
+function autoPosition(input, dp) {
+    var inputPos = input.getBoundingClientRect();
+    var win = window;
+    adjustCalY(dp, inputPos, win);
+    adjustCalX(dp, inputPos, win);
+    dp.el.style.visibility = '';
+}
+function adjustCalX(dp, inputPos, win) {
+    var cal = dp.el;
+    var scrollLeft = win.pageXOffset;
+    var inputLeft = inputPos.left + scrollLeft;
+    var maxRight = win.innerWidth + scrollLeft;
+    var offsetWidth = cal.offsetWidth;
+    var calRight = inputLeft + offsetWidth;
+    var shiftedLeft = maxRight - offsetWidth;
+    var left = calRight > maxRight && shiftedLeft > 0 ? shiftedLeft : inputLeft;
+    cal.style.left = left + 'px';
+}
+function adjustCalY(dp, inputPos, win) {
+    var cal = dp.el;
+    var scrollTop = win.pageYOffset;
+    var inputTop = scrollTop + inputPos.top;
+    var calHeight = cal.offsetHeight;
+    var belowTop = inputTop + inputPos.height + 8;
+    var aboveTop = inputTop - calHeight - 8;
+    var isAbove = (aboveTop > 0 && belowTop + calHeight > scrollTop + win.innerHeight);
+    var top = isAbove ? aboveTop : belowTop;
+    if (cal.classList) {
+        cal.classList.toggle('dp-is-above', isAbove);
+        cal.classList.toggle('dp-is-below', !isAbove);
+    }
+    cal.style.top = top + 'px';
+}

package/lib/ui/date.picker/mode/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @file Defines the various date picker modes (modal, dropdown, permanent)
+ */
+export default function Mode(input: any, emit: any, opts: any): {
+    el: any;
+    opts: any;
+    shouldFocusOnBlur: boolean;
+    shouldFocusOnRender: boolean;
+    state: {
+        selectedDate: Date;
+        view: string;
+        hilightedDate: any;
+    };
+    adjustPosition: typeof import("../lib/fns").noop;
+    containerHTML: string;
+    attachToDom: () => void;
+    updateInput: (selectedDate: any) => void;
+    computeSelectedDate: () => any;
+    currentView: () => any;
+    open: () => void;
+    isVisible: () => boolean;
+    hasFocus: () => boolean;
+    shouldHide: () => boolean;
+    close: (becauseOfBlur?: boolean) => void;
+    destroy: () => void;
+    render: () => void;
+    setState: (state: any) => void;
+};

package/lib/ui/date.picker/mode/index.js

@@ -0,0 +1,18 @@
+/**
+ * @file Defines the various date picker modes (modal, dropdown, permanent)
+ */
+import ModalMode from './modal-mode';
+import DropdownMode from './dropdown-mode';
+import PermanentMode from './permanent-mode';
+export default function Mode(input, emit, opts) {
+    input = input && input.tagName ? input : document.querySelector(input);
+    if (opts.mode === 'dp-modal') {
+        return ModalMode(input, emit, opts);
+    }
+    if (opts.mode === 'dp-below') {
+        return DropdownMode(input, emit, opts);
+    }
+    if (opts.mode === 'dp-permanent') {
+        return PermanentMode(input, emit, opts);
+    }
+}

package/lib/ui/date.picker/mode/modal-mode.d.ts

@@ -0,0 +1,25 @@
+export default function ModalMode(input: any, emit: any, opts: any): {
+    el: any;
+    opts: any;
+    shouldFocusOnBlur: boolean;
+    shouldFocusOnRender: boolean;
+    state: {
+        selectedDate: Date;
+        view: string;
+        hilightedDate: any;
+    };
+    adjustPosition: typeof import("../lib/fns").noop;
+    containerHTML: string;
+    attachToDom: () => void;
+    updateInput: (selectedDate: any) => void;
+    computeSelectedDate: () => any;
+    currentView: () => any;
+    open: () => void;
+    isVisible: () => boolean;
+    hasFocus: () => boolean;
+    shouldHide: () => boolean;
+    close: (becauseOfBlur?: boolean) => void;
+    destroy: () => void;
+    render: () => void;
+    setState: (state: any) => void;
+};

package/lib/ui/date.picker/mode/modal-mode.js

@@ -0,0 +1,17 @@
+/**
+ * @file Defines the modal date picker behavior.
+ */
+import BaseMode from './base-mode';
+export default function ModalMode(input, emit, opts) {
+    var dp = BaseMode(input, emit, opts);
+    // In modal mode, users really shouldn't be able to type in
+    // the input, as all input is done via the calendar.
+    input.readonly = true;
+    // In modal mode, we need to know when the user has tabbed
+    // off the end of the calendar, and set focus to the original
+    // input. To do this, we add a special element to the DOM.
+    // When the user tabs off the bottom of the calendar, they
+    // will tab onto this element.
+    dp.containerHTML += '<a href="#" class="dp-focuser">.</a>';
+    return dp;
+}

package/lib/ui/date.picker/mode/permanent-mode.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @file Defines the permanent date picker behavior.
+ */
+import { noop } from '../lib/fns';
+export default function PermanentMode(root: any, emit: any, opts: any): {
+    el: any;
+    opts: any;
+    shouldFocusOnBlur: boolean;
+    shouldFocusOnRender: boolean;
+    state: {
+        selectedDate: Date;
+        view: string;
+        hilightedDate: any;
+    };
+    adjustPosition: typeof noop;
+    containerHTML: string;
+    attachToDom: () => void;
+    updateInput: (selectedDate: any) => void;
+    computeSelectedDate: () => any;
+    currentView: () => any;
+    open: () => void;
+    isVisible: () => boolean;
+    hasFocus: () => boolean;
+    shouldHide: () => boolean;
+    close: (becauseOfBlur?: boolean) => void;
+    destroy: () => void;
+    render: () => void;
+    setState: (state: any) => void;
+};

package/lib/ui/date.picker/mode/permanent-mode.js

@@ -0,0 +1,19 @@
+/**
+ * @file Defines the permanent date picker behavior.
+ */
+import { noop } from '../lib/fns';
+import BaseMode from './base-mode';
+export default function PermanentMode(root, emit, opts) {
+    var dp = BaseMode(root, emit, opts);
+    dp.close = noop;
+    dp.updateInput = noop;
+    dp.shouldFocusOnRender = opts.shouldFocusOnRender;
+    dp.computeSelectedDate = function () {
+        return opts.hilightedDate;
+    };
+    dp.attachToDom = function () {
+        root.appendChild(dp.el);
+    };
+    dp.open();
+    return dp;
+}

package/lib/ui/date.picker/views/day-picker.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @file Manages the calendar / day-picker view.
+ */
+declare const _default: {
+    onKeyDown: typeof keyDown;
+    onClick: {
+        'dp-day': typeof selectDay;
+        'dp-next': typeof gotoNextMonth;
+        'dp-prev': typeof gotoPrevMonth;
+        'dp-today': typeof selectToday;
+        'dp-clear': typeof clear;
+        'dp-close': typeof close;
+        'dp-cal-month': typeof showMonthPicker;
+        'dp-cal-year': typeof showYearPicker;
+    };
+    render: typeof render;
+};
+export default _default;
+/**
+ * view renders the calendar (day picker) as an HTML string.
+ *
+ * @param {DatePickerContext} context the date picker being rendered
+ * @returns {string}
+ */
+declare function render(dp: any): string;
+/**
+ * keyDown handles the key down event for the day-picker
+ *
+ * @param {Event} e
+ * @param {DatePickerContext} dp
+ */
+declare function keyDown(e: any, dp: any): void;
+declare function selectToday(e: any, dp: any): void;
+declare function clear(e: any, dp: any): void;
+declare function close(e: any, dp: any): void;
+declare function showMonthPicker(e: any, dp: any): void;
+declare function showYearPicker(e: any, dp: any): void;
+declare function gotoNextMonth(e: any, dp: any): void;
+declare function gotoPrevMonth(e: any, dp: any): void;
+declare function selectDay(e: any, dp: any): void;