jsl-ui 9.28.2 → 9.28.3

package/lib/ui/date.picker/views/day-picker.js

@@ -1,155 +1,155 @@
-/**
- * @file Manages the calendar / day-picker view.
- */
-import { Key } from '../lib/dom';
-import { now, datesEq, shiftMonth, shiftDay } from '../lib/date-manip';
-export default {
-    onKeyDown: keyDown,
-    onClick: {
-        'dp-day': selectDay,
-        'dp-next': gotoNextMonth,
-        'dp-prev': gotoPrevMonth,
-        'dp-today': selectToday,
-        'dp-clear': clear,
-        'dp-close': close,
-        'dp-cal-month': showMonthPicker,
-        'dp-cal-year': showYearPicker,
-    },
-    render: render
-};
-/**
- * view renders the calendar (day picker) as an HTML string.
- *
- * @param {DatePickerContext} context the date picker being rendered
- * @returns {string}
- */
-function render(dp) {
-    var opts = dp.opts;
-    var lang = opts.lang;
-    var state = dp.state;
-    var dayNames = lang.days;
-    var dayOffset = opts.dayOffset || 0;
-    var selectedDate = state.selectedDate;
-    var hilightedDate = state.hilightedDate;
-    var hilightedMonth = hilightedDate.getMonth();
-    var today = now().getTime();
-    return ('<div class="dp-cal">' +
-        '<header class="dp-cal-header">' +
-        '<button tabindex="-1" type="button" class="dp-prev">Prev</button>' +
-        '<button tabindex="-1" type="button" class="dp-cal-month">' +
-        lang.months[hilightedMonth] +
-        '</button>' +
-        '<button tabindex="-1" type="button" class="dp-cal-year">' +
-        hilightedDate.getFullYear() +
-        '</button>' +
-        '<button tabindex="-1" type="button" class="dp-next">Next</button>' +
-        '</header>' +
-        '<div class="dp-days">' +
-        dayNames.map(function (name, i) {
-            return ('<span class="dp-col-header">' + dayNames[(i + dayOffset) % dayNames.length] + '</span>');
-        }).join('') +
-        mapDays(hilightedDate, dayOffset, function (date) {
-            var isNotInMonth = date.getMonth() !== hilightedMonth;
-            var isDisabled = !opts.inRange(date);
-            var isToday = date.getTime() === today;
-            var className = 'dp-day';
-            className += (isNotInMonth ? ' dp-edge-day' : '');
-            className += (datesEq(date, hilightedDate) ? ' dp-current' : '');
-            className += (datesEq(date, selectedDate) ? ' dp-selected' : '');
-            className += (isDisabled ? ' dp-day-disabled' : '');
-            className += (isToday ? ' dp-day-today' : '');
-            className += ' ' + opts.dateClass(date, dp);
-            return ('<button tabindex="-1" type="button" class="' + className + '" data-date="' + date.getTime() + '">' +
-                date.getDate() +
-                '</button>');
-        }) +
-        '</div>' +
-        '<footer class="dp-cal-footer">' +
-        '<button tabindex="-1" type="button" class="dp-today">' + lang.today + '</button>' +
-        '<button tabindex="-1" type="button" class="dp-clear">' + lang.clear + '</button>' +
-        '<button tabindex="-1" type="button" class="dp-close">' + lang.close + '</button>' +
-        '</footer>' +
-        '</div>');
-}
-/**
- * keyDown handles the key down event for the day-picker
- *
- * @param {Event} e
- * @param {DatePickerContext} dp
- */
-function keyDown(e, dp) {
-    var key = e.keyCode;
-    var shiftBy = (key === Key.left) ? -1 :
-        (key === Key.right) ? 1 :
-            (key === Key.up) ? -7 :
-                (key === Key.down) ? 7 :
-                    0;
-    if (key === Key.esc) {
-        dp.close();
-    }
-    else if (shiftBy) {
-        e.preventDefault();
-        dp.setState({
-            hilightedDate: shiftDay(dp.state.hilightedDate, shiftBy)
-        });
-    }
-}
-function selectToday(e, dp) {
-    dp.setState({
-        selectedDate: now(),
-    });
-}
-function clear(e, dp) {
-    dp.setState({
-        selectedDate: null,
-    });
-}
-function close(e, dp) {
-    dp.close();
-}
-function showMonthPicker(e, dp) {
-    dp.setState({
-        view: 'month'
-    });
-}
-function showYearPicker(e, dp) {
-    dp.setState({
-        view: 'year'
-    });
-}
-function gotoNextMonth(e, dp) {
-    var hilightedDate = dp.state.hilightedDate;
-    dp.setState({
-        hilightedDate: shiftMonth(hilightedDate, 1)
-    });
-}
-function gotoPrevMonth(e, dp) {
-    var hilightedDate = dp.state.hilightedDate;
-    dp.setState({
-        hilightedDate: shiftMonth(hilightedDate, -1)
-    });
-}
-function selectDay(e, dp) {
-    dp.setState({
-        selectedDate: new Date(parseInt(e.target.getAttribute('data-date'))),
-    });
-}
-function mapDays(currentDate, dayOffset, fn) {
-    var result = '';
-    var iter = new Date(currentDate);
-    iter.setDate(1);
-    iter.setDate(1 - iter.getDay() + dayOffset);
-    // If we are showing monday as the 1st of the week,
-    // and the monday is the 2nd of the month, the sunday won't
-    // show, so we need to shift backwards
-    if (dayOffset && iter.getDate() === dayOffset + 1) {
-        iter.setDate(dayOffset - 6);
-    }
-    // We are going to have 6 weeks always displayed to keep a consistent
-    // calendar size
-    for (var day = 0; day < (6 * 7); ++day) {
-        result += fn(iter);
-        iter.setDate(iter.getDate() + 1);
-    }
-    return result;
-}
+/**
+ * @file Manages the calendar / day-picker view.
+ */
+import { Key } from '../lib/dom';
+import { now, datesEq, shiftMonth, shiftDay } from '../lib/date-manip';
+export default {
+    onKeyDown: keyDown,
+    onClick: {
+        'dp-day': selectDay,
+        'dp-next': gotoNextMonth,
+        'dp-prev': gotoPrevMonth,
+        'dp-today': selectToday,
+        'dp-clear': clear,
+        'dp-close': close,
+        'dp-cal-month': showMonthPicker,
+        'dp-cal-year': showYearPicker,
+    },
+    render: render
+};
+/**
+ * view renders the calendar (day picker) as an HTML string.
+ *
+ * @param {DatePickerContext} context the date picker being rendered
+ * @returns {string}
+ */
+function render(dp) {
+    var opts = dp.opts;
+    var lang = opts.lang;
+    var state = dp.state;
+    var dayNames = lang.days;
+    var dayOffset = opts.dayOffset || 0;
+    var selectedDate = state.selectedDate;
+    var hilightedDate = state.hilightedDate;
+    var hilightedMonth = hilightedDate.getMonth();
+    var today = now().getTime();
+    return ('<div class="dp-cal">' +
+        '<header class="dp-cal-header">' +
+        '<button tabindex="-1" type="button" class="dp-prev">Prev</button>' +
+        '<button tabindex="-1" type="button" class="dp-cal-month">' +
+        lang.months[hilightedMonth] +
+        '</button>' +
+        '<button tabindex="-1" type="button" class="dp-cal-year">' +
+        hilightedDate.getFullYear() +
+        '</button>' +
+        '<button tabindex="-1" type="button" class="dp-next">Next</button>' +
+        '</header>' +
+        '<div class="dp-days">' +
+        dayNames.map(function (name, i) {
+            return ('<span class="dp-col-header">' + dayNames[(i + dayOffset) % dayNames.length] + '</span>');
+        }).join('') +
+        mapDays(hilightedDate, dayOffset, function (date) {
+            var isNotInMonth = date.getMonth() !== hilightedMonth;
+            var isDisabled = !opts.inRange(date);
+            var isToday = date.getTime() === today;
+            var className = 'dp-day';
+            className += (isNotInMonth ? ' dp-edge-day' : '');
+            className += (datesEq(date, hilightedDate) ? ' dp-current' : '');
+            className += (datesEq(date, selectedDate) ? ' dp-selected' : '');
+            className += (isDisabled ? ' dp-day-disabled' : '');
+            className += (isToday ? ' dp-day-today' : '');
+            className += ' ' + opts.dateClass(date, dp);
+            return ('<button tabindex="-1" type="button" class="' + className + '" data-date="' + date.getTime() + '">' +
+                date.getDate() +
+                '</button>');
+        }) +
+        '</div>' +
+        '<footer class="dp-cal-footer">' +
+        '<button tabindex="-1" type="button" class="dp-today">' + lang.today + '</button>' +
+        '<button tabindex="-1" type="button" class="dp-clear">' + lang.clear + '</button>' +
+        '<button tabindex="-1" type="button" class="dp-close">' + lang.close + '</button>' +
+        '</footer>' +
+        '</div>');
+}
+/**
+ * keyDown handles the key down event for the day-picker
+ *
+ * @param {Event} e
+ * @param {DatePickerContext} dp
+ */
+function keyDown(e, dp) {
+    var key = e.keyCode;
+    var shiftBy = (key === Key.left) ? -1 :
+        (key === Key.right) ? 1 :
+            (key === Key.up) ? -7 :
+                (key === Key.down) ? 7 :
+                    0;
+    if (key === Key.esc) {
+        dp.close();
+    }
+    else if (shiftBy) {
+        e.preventDefault();
+        dp.setState({
+            hilightedDate: shiftDay(dp.state.hilightedDate, shiftBy)
+        });
+    }
+}
+function selectToday(e, dp) {
+    dp.setState({
+        selectedDate: now(),
+    });
+}
+function clear(e, dp) {
+    dp.setState({
+        selectedDate: null,
+    });
+}
+function close(e, dp) {
+    dp.close();
+}
+function showMonthPicker(e, dp) {
+    dp.setState({
+        view: 'month'
+    });
+}
+function showYearPicker(e, dp) {
+    dp.setState({
+        view: 'year'
+    });
+}
+function gotoNextMonth(e, dp) {
+    var hilightedDate = dp.state.hilightedDate;
+    dp.setState({
+        hilightedDate: shiftMonth(hilightedDate, 1)
+    });
+}
+function gotoPrevMonth(e, dp) {
+    var hilightedDate = dp.state.hilightedDate;
+    dp.setState({
+        hilightedDate: shiftMonth(hilightedDate, -1)
+    });
+}
+function selectDay(e, dp) {
+    dp.setState({
+        selectedDate: new Date(parseInt(e.target.getAttribute('data-date'))),
+    });
+}
+function mapDays(currentDate, dayOffset, fn) {
+    var result = '';
+    var iter = new Date(currentDate);
+    iter.setDate(1);
+    iter.setDate(1 - iter.getDay() + dayOffset);
+    // If we are showing monday as the 1st of the week,
+    // and the monday is the 2nd of the month, the sunday won't
+    // show, so we need to shift backwards
+    if (dayOffset && iter.getDate() === dayOffset + 1) {
+        iter.setDate(dayOffset - 6);
+    }
+    // We are going to have 6 weeks always displayed to keep a consistent
+    // calendar size
+    for (var day = 0; day < (6 * 7); ++day) {
+        result += fn(iter);
+        iter.setDate(iter.getDate() + 1);
+    }
+    return result;
+}

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

@@ -1,26 +1,26 @@
-/**
- * @file Manages the month-picker view.
- */
-declare const _default: {
-    onKeyDown: typeof keyDown;
-    onClick: {
-        'dp-month': typeof onChooseMonth;
-    };
-    render: typeof render;
-};
-export default _default;
-declare function onChooseMonth(e: any, dp: any): void;
-/**
- * render renders the month picker as an HTML string
- *
- * @param {DatePickerContext} dp the date picker context
- * @returns {string}
- */
-declare function render(dp: any): string;
-/**
- * keyDown handles keydown events that occur in the month picker
- *
- * @param {Event} e
-* @param {DatePickerContext} dp
- */
-declare function keyDown(e: any, dp: any): void;
+/**
+ * @file Manages the month-picker view.
+ */
+declare const _default: {
+    onKeyDown: typeof keyDown;
+    onClick: {
+        'dp-month': typeof onChooseMonth;
+    };
+    render: typeof render;
+};
+export default _default;
+declare function onChooseMonth(e: any, dp: any): void;
+/**
+ * render renders the month picker as an HTML string
+ *
+ * @param {DatePickerContext} dp the date picker context
+ * @returns {string}
+ */
+declare function render(dp: any): string;
+/**
+ * keyDown handles keydown events that occur in the month picker
+ *
+ * @param {Event} e
+* @param {DatePickerContext} dp
+ */
+declare function keyDown(e: any, dp: any): void;

package/lib/ui/date.picker/views/month-picker.js

@@ -1,65 +1,65 @@
-/**
- * @file Manages the month-picker view.
- */
-import { Key } from '../lib/dom';
-import { shiftMonth, setMonth } from '../lib/date-manip';
-export default {
-    onKeyDown: keyDown,
-    onClick: {
-        'dp-month': onChooseMonth
-    },
-    render: render
-};
-function onChooseMonth(e, dp) {
-    dp.setState({
-        hilightedDate: setMonth(dp.state.hilightedDate, parseInt(e.target.getAttribute('data-month'))),
-        view: 'day',
-    });
-}
-/**
- * render renders the month picker as an HTML string
- *
- * @param {DatePickerContext} dp the date picker context
- * @returns {string}
- */
-function render(dp) {
-    var opts = dp.opts;
-    var lang = opts.lang;
-    var months = lang.months;
-    var currentDate = dp.state.hilightedDate;
-    var currentMonth = currentDate.getMonth();
-    return ('<div class="dp-months">' +
-        months.map(function (month, i) {
-            var className = 'dp-month';
-            className += (currentMonth === i ? ' dp-current' : '');
-            return ('<button tabindex="-1" type="button" class="' + className + '" data-month="' + i + '">' +
-                month +
-                '</button>');
-        }).join('') +
-        '</div>');
-}
-/**
- * keyDown handles keydown events that occur in the month picker
- *
- * @param {Event} e
-* @param {DatePickerContext} dp
- */
-function keyDown(e, dp) {
-    var key = e.keyCode;
-    var shiftBy = (key === Key.left) ? -1 :
-        (key === Key.right) ? 1 :
-            (key === Key.up) ? -3 :
-                (key === Key.down) ? 3 :
-                    0;
-    if (key === Key.esc) {
-        dp.setState({
-            view: 'day',
-        });
-    }
-    else if (shiftBy) {
-        e.preventDefault();
-        dp.setState({
-            hilightedDate: shiftMonth(dp.state.hilightedDate, shiftBy, true)
-        });
-    }
-}
+/**
+ * @file Manages the month-picker view.
+ */
+import { Key } from '../lib/dom';
+import { shiftMonth, setMonth } from '../lib/date-manip';
+export default {
+    onKeyDown: keyDown,
+    onClick: {
+        'dp-month': onChooseMonth
+    },
+    render: render
+};
+function onChooseMonth(e, dp) {
+    dp.setState({
+        hilightedDate: setMonth(dp.state.hilightedDate, parseInt(e.target.getAttribute('data-month'))),
+        view: 'day',
+    });
+}
+/**
+ * render renders the month picker as an HTML string
+ *
+ * @param {DatePickerContext} dp the date picker context
+ * @returns {string}
+ */
+function render(dp) {
+    var opts = dp.opts;
+    var lang = opts.lang;
+    var months = lang.months;
+    var currentDate = dp.state.hilightedDate;
+    var currentMonth = currentDate.getMonth();
+    return ('<div class="dp-months">' +
+        months.map(function (month, i) {
+            var className = 'dp-month';
+            className += (currentMonth === i ? ' dp-current' : '');
+            return ('<button tabindex="-1" type="button" class="' + className + '" data-month="' + i + '">' +
+                month +
+                '</button>');
+        }).join('') +
+        '</div>');
+}
+/**
+ * keyDown handles keydown events that occur in the month picker
+ *
+ * @param {Event} e
+* @param {DatePickerContext} dp
+ */
+function keyDown(e, dp) {
+    var key = e.keyCode;
+    var shiftBy = (key === Key.left) ? -1 :
+        (key === Key.right) ? 1 :
+            (key === Key.up) ? -3 :
+                (key === Key.down) ? 3 :
+                    0;
+    if (key === Key.esc) {
+        dp.setState({
+            view: 'day',
+        });
+    }
+    else if (shiftBy) {
+        e.preventDefault();
+        dp.setState({
+            hilightedDate: shiftMonth(dp.state.hilightedDate, shiftBy, true)
+        });
+    }
+}

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

@@ -1,20 +1,20 @@
-/**
- * @file Manages the year-picker view.
- */
-declare const _default: {
-    render: typeof render;
-    onKeyDown: typeof keyDown;
-    onClick: {
-        'dp-year': typeof onChooseYear;
-    };
-};
-export default _default;
-/**
- * view renders the year picker as an HTML string.
- *
- * @param {DatePickerContext} dp the date picker context
- * @returns {string}
- */
-declare function render(dp: any): string;
-declare function onChooseYear(e: any, dp: any): void;
-declare function keyDown(e: any, dp: any): void;
+/**
+ * @file Manages the year-picker view.
+ */
+declare const _default: {
+    render: typeof render;
+    onKeyDown: typeof keyDown;
+    onClick: {
+        'dp-year': typeof onChooseYear;
+    };
+};
+export default _default;
+/**
+ * view renders the year picker as an HTML string.
+ *
+ * @param {DatePickerContext} dp the date picker context
+ * @returns {string}
+ */
+declare function render(dp: any): string;
+declare function onChooseYear(e: any, dp: any): void;
+declare function keyDown(e: any, dp: any): void;

package/lib/ui/date.picker/views/year-picker.js

@@ -1,66 +1,66 @@
-/**
- * @file Manages the year-picker view.
- */
-import { Key } from '../lib/dom';
-import { setYear, shiftYear, constrainDate } from '../lib/date-manip';
-export default {
-    render: render,
-    onKeyDown: keyDown,
-    onClick: {
-        'dp-year': onChooseYear
-    },
-};
-/**
- * view renders the year picker as an HTML string.
- *
- * @param {DatePickerContext} dp the date picker context
- * @returns {string}
- */
-function render(dp) {
-    var state = dp.state;
-    var currentYear = state.hilightedDate.getFullYear();
-    var selectedYear = state.selectedDate.getFullYear();
-    return ('<div class="dp-years">' +
-        mapYears(dp, function (year) {
-            var className = 'dp-year';
-            className += (year === currentYear ? ' dp-current' : '');
-            className += (year === selectedYear ? ' dp-selected' : '');
-            return ('<button tabindex="-1" type="button" class="' + className + '" data-year="' + year + '">' +
-                year +
-                '</button>');
-        }) +
-        '</div>');
-}
-function onChooseYear(e, dp) {
-    dp.setState({
-        hilightedDate: setYear(dp.state.hilightedDate, parseInt(e.target.getAttribute('data-year'))),
-        view: 'day',
-    });
-}
-function keyDown(e, dp) {
-    var key = e.keyCode;
-    var opts = dp.opts;
-    var shiftBy = (key === Key.left || key === Key.up) ? 1 :
-        (key === Key.right || key === Key.down) ? -1 :
-            0;
-    if (key === Key.esc) {
-        dp.setState({
-            view: 'day',
-        });
-    }
-    else if (shiftBy) {
-        e.preventDefault();
-        var shiftedYear = shiftYear(dp.state.hilightedDate, shiftBy);
-        dp.setState({
-            hilightedDate: constrainDate(shiftedYear, opts.min, opts.max),
-        });
-    }
-}
-function mapYears(dp, fn) {
-    var result = '';
-    var max = dp.opts.max.getFullYear();
-    for (var i = max; i >= dp.opts.min.getFullYear(); --i) {
-        result += fn(i);
-    }
-    return result;
-}
+/**
+ * @file Manages the year-picker view.
+ */
+import { Key } from '../lib/dom';
+import { setYear, shiftYear, constrainDate } from '../lib/date-manip';
+export default {
+    render: render,
+    onKeyDown: keyDown,
+    onClick: {
+        'dp-year': onChooseYear
+    },
+};
+/**
+ * view renders the year picker as an HTML string.
+ *
+ * @param {DatePickerContext} dp the date picker context
+ * @returns {string}
+ */
+function render(dp) {
+    var state = dp.state;
+    var currentYear = state.hilightedDate.getFullYear();
+    var selectedYear = state.selectedDate.getFullYear();
+    return ('<div class="dp-years">' +
+        mapYears(dp, function (year) {
+            var className = 'dp-year';
+            className += (year === currentYear ? ' dp-current' : '');
+            className += (year === selectedYear ? ' dp-selected' : '');
+            return ('<button tabindex="-1" type="button" class="' + className + '" data-year="' + year + '">' +
+                year +
+                '</button>');
+        }) +
+        '</div>');
+}
+function onChooseYear(e, dp) {
+    dp.setState({
+        hilightedDate: setYear(dp.state.hilightedDate, parseInt(e.target.getAttribute('data-year'))),
+        view: 'day',
+    });
+}
+function keyDown(e, dp) {
+    var key = e.keyCode;
+    var opts = dp.opts;
+    var shiftBy = (key === Key.left || key === Key.up) ? 1 :
+        (key === Key.right || key === Key.down) ? -1 :
+            0;
+    if (key === Key.esc) {
+        dp.setState({
+            view: 'day',
+        });
+    }
+    else if (shiftBy) {
+        e.preventDefault();
+        var shiftedYear = shiftYear(dp.state.hilightedDate, shiftBy);
+        dp.setState({
+            hilightedDate: constrainDate(shiftedYear, opts.min, opts.max),
+        });
+    }
+}
+function mapYears(dp, fn) {
+    var result = '';
+    var max = dp.opts.max.getFullYear();
+    for (var i = max; i >= dp.opts.min.getFullYear(); --i) {
+        result += fn(i);
+    }
+    return result;
+}