Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use time strings formatted for the locale for homework set dates. #1615

Merged
merged 6 commits into from
Apr 7, 2022
Merged

Use time strings formatted for the locale for homework set dates. #1615

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e8d8e10
Use time strings formatted for the locale for homework set dates.
drgrice1 Mar 15, 2022
9ad7ce3
Adjust the times used by flatpickr to account for the difference between
drgrice1 Apr 3, 2022
736f5ff
Switch to using Luxon to parse dates for the date time picker. Also,
drgrice1 Apr 4, 2022
63433b8
Make the date picker button activatable via the keyboard for
drgrice1 Apr 4, 2022
c55db23
Make the date/time inputs always left-to-right, even for right-to-left
drgrice1 Apr 6, 2022
4f20299
Remove the translation from underscore to space in the locale names.
drgrice1 Apr 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions conf/defaults.config
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -983,11 +983,7 @@ $pg{displayModes} = [
#### Default settings for homework editor pages
##########################################################################################

# Whether the homework editor pages should show the datetimepicker
$options{useDateTimePicker} = 1;

# Whether the homework editor pages should show options for conditional release

$options{enableConditionalRelease} = 0;

# In the hmwk sets editor, how deep to search within templates for .def files;
Expand Down Expand Up @@ -1627,15 +1623,6 @@ $ConfigValues = [
type => 'popuplist',
hashVar => '{hardcopyTheme}'
},
{
var => 'options{useDateTimePicker}',
doc => x('Use Date Picker'),
doc2 => x(
'Enables the use of the date picker on the Homework Sets Editor 2 page and the '
. 'Problem Set Detail page'
),
type => 'boolean'
},
{
var => 'showCourseHomeworkTotals',
doc => x('Show Total Homework Grade on Grades Page'),
Expand Down
96 changes: 87 additions & 9 deletions htdocs/js/apps/DatePicker/datepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,25 @@
(() => {
document.querySelectorAll('.datepicker-group').forEach((open_rule) => {
if (open_rule.dataset.enableDatepicker !== '1') return;
// Date/time formats for the languages supported by webwork.
// Note that these formats are chosen to match the perl DateTime::Locale formats.
// Make sure that anytime a new language is added, its format is added here.
const datetimeFormats = {
en: 'L/d/yy, h:mm a',
'en-US': 'L/d/yy, h:mm a',
'cs-CZ': 'dd.LL.yy H:mm',
de: 'dd.LL.yy, HH:mm',
es: 'd/L/yy H:mm',
'fr-CA': "yyyy-LL-dd HH 'h' mm",
fr: 'dd/LL/yyyy HH:mm',
'he-IL': 'd.L.yyyy, H:mm',
hu: 'yyyy. LL. dd. H:mm',
ko: 'yy. L. d. a h:mm',
'ru-RU': 'dd.LL.yyyy, HH:mm',
tr: 'd.LL.yyyy HH:mm',
'zh-CN': 'yyyy/L/d ah:mm',
'zh-HK': 'yyyy/L/d ah:mm'
};

document.querySelectorAll('.datepicker-group').forEach((open_rule) => {
const name = open_rule.name.replace('.open_date', '');

const groupRules = [
Expand All @@ -26,23 +44,83 @@
for (const rule of groupRules) {
const orig_value = rule.value;

flatpickr(rule.parentNode, {
luxon.Settings.defaultLocale = rule.dataset.locale ?? 'en';

// Compute the time difference between the current browser timezone and the the course timezone.
// flatpickr gives the time in the browser's timezone, and this is used to adjust to the course timezone.
// Note that this is converted to seconds.
const timezoneAdjustment =
parseInt(Intl.DateTimeFormat('en-US', { timeZoneName: 'shortOffset' })
.format(new Date).split(' ')[1].slice(3) || '0') * 3600000
- parseInt(Intl.DateTimeFormat('en-US',
{ timeZone: rule.dataset.timezone ?? 'America/New_York', timeZoneName: 'shortOffset' })
.format(new Date).split(' ')[1].slice(3) || '0') * 3600000;

const fp = flatpickr(rule.parentNode, {
allowInput: true,
enableTime: true,
minuteIncrement: 1,
dateFormat: 'm/d/Y at h:iK',
altInput: true,
dateFormat: 'U',
altFormat: datetimeFormats[luxon.Settings.defaultLocale],
ariaDateFormat: datetimeFormats[luxon.Settings.defaultLocale],
defaultDate: orig_value,
defaultHour: 0,
locale: rule.dataset.locale ? rule.dataset.locale.substring(0, 2) : 'en',
clickOpens: false,
disableMobile: true,
wrap: true,
plugins: [ new confirmDatePlugin({ confirmText: rule.dataset.doneText ?? 'Done', showAlways: true }) ],
onChange() {
if (rule.value.toLowerCase() !== orig_value) rule.classList.add('changed');
else rule.classList.remove('changed');
onChange(selectedDates) {
if (this.input.value === orig_value) this.altInput.classList.remove('changed');
else this.altInput.classList.add('changed');
},
onClose: update
onClose: update,
onReady(selectedDates) {
// Flatpickr hides the original input and adds the alternate input after it. That messes up the
// bootstrap input group styling. So move the now hidden original input after the created alternate
// input to fix that.
this.altInput.after(this.input);

// Make the alternate input left-to-right even for right-to-left languages.
this.altInput.dir = 'ltr';

this.altInput.addEventListener('blur', update);
},
parseDate(datestr, format) {
// Deal with the case of a unix timestamp. The timezone needs to be adjusted back as this is for
// the unix timestamp stored in the hidden input whose value will be sent to the server.
if (format === 'U') return new Date(parseInt(datestr) * 1000 - timezoneAdjustment);

// Next attempt to parse the datestr with the current format. This should not be adjusted. It is
// for display only.
const date = luxon.DateTime.fromFormat(datestr, format);
if (date.isValid) return date.toJSDate();

// Finally, fall back to the previous value in the original input if that failed. This is the case
// that the user typed a time that isn't in the valid format. So fallback to the last valid time
// that was displayed. This also should not be adjusted.
return new Date(this.lastFormattedDate.getTime());
},
formatDate(date, format) {
// Save this date for the fallback in parseDate.
this.lastFormattedDate = date;

// In this case the date provided is in the browser's time zone. So it needs to be adjusted to the
// timezone of the course.
if (format === 'U') return (date.getTime() + timezoneAdjustment) / 1000;

return luxon.DateTime.fromMillis(date.getTime())
.toFormat(datetimeFormats[luxon.Settings.defaultLocale]);
}
});

rule.addEventListener('blur', update);
rule.nextElementSibling.addEventListener('keydown', (e) => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
fp.open();
}
});
}
});
})();
11 changes: 9 additions & 2 deletions htdocs/js/apps/ProblemSetDetail/problemsetdetail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -463,8 +463,15 @@
if (!overrideCheck) return;
const changeHandler = () => overrideCheck.checked = input.value != '';
input.addEventListener('change', changeHandler);
input.addEventListener('keyup', changeHandler);
input.addEventListener('blur', () => { if (input.value == '') overrideCheck.checked = false; });
if (input.parentElement.classList.contains('flatpickr')) {
// Attach the keyup and blur handlers to the flatpickr alternate input.
input.previousElementSibling?.addEventListener('keyup', changeHandler);
input.previousElementSibling?.addEventListener('blur',
() => { if (input.previousElementSibling.value == '') overrideCheck.checked = false; });
} else {
input.addEventListener('keyup', changeHandler);
input.addEventListener('blur', () => { if (input.value == '') overrideCheck.checked = false; });
}
});

// Make the override checkboxes for selects checked or unchecked appropriately
Expand Down
87 changes: 83 additions & 4 deletions htdocs/js/apps/ProblemSetList/problemsetlist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,19 +41,98 @@
});
}

// Date/time formats for the languages supported by webwork.
// Note that these formats are chosen to match the perl DateTime::Locale formats.
// Make sure that anytime a new language is added, its format is added here.
const datetimeFormats = {
en: 'L/d/yy, h:mm a',
'en-US': 'L/d/yy, h:mm a',
'cs-CZ': 'dd.LL.yy H:mm',
de: 'dd.LL.yy, HH:mm',
es: 'd/L/yy H:mm',
'fr-CA': "yyyy-LL-dd HH 'h' mm",
fr: 'dd/LL/yyyy HH:mm',
'he-IL': 'd.L.yyyy, H:mm',
hu: 'yyyy. LL. dd. H:mm',
ko: 'yy. L. d. a h:mm',
'ru-RU': 'dd.LL.yyyy, HH:mm',
tr: 'd.LL.yyyy HH:mm',
'zh-CN': 'yyyy/L/d ah:mm',
'zh-HK': 'yyyy/L/d ah:mm'
};

// Initialize the date/time picker for the import form.
const importDateShift = document.getElementById('import_date_shift');
if (importDateShift) {
flatpickr(importDateShift.parentNode, {

luxon.Settings.defaultLocale = importDateShift.dataset.locale ?? 'en';

// Compute the time difference between the current browser timezone and the the course timezone.
// flatpickr gives the time in the browser's timezone, and this is used to adjust to the course timezone.
// Note that this is converted to microseconds.
const timezoneAdjustment =
parseInt(Intl.DateTimeFormat('en-US', { timeZoneName: 'shortOffset' })
.format(new Date).split(' ')[1].slice(3) || '0') * 3600000
- parseInt(Intl.DateTimeFormat('en-US',
{ timeZone: importDateShift.dataset.timezone ?? 'UTC', timeZoneName: 'shortOffset' })
.format(new Date).split(' ')[1].slice(3) || '0') * 3600000

const fp = flatpickr(importDateShift.parentNode, {
allowInput: true,
enableTime: true,
minuteIncrement: 1,
dateFormat: 'm/d/Y at h:iK',
altInput: true,
dateFormat: 'U',
altFormat: datetimeFormats[luxon.Settings.defaultLocale],
ariaDateFormat: datetimeFormats[luxon.Settings.defaultLocale],
defaultHour: 0,
locale: importDateShift.dataset.locale ? importDateShift.dataset.locale.substring(0, 2) : 'en',
clickOpens: false,
disableMobile: true,
wrap: true,
plugins: [ new confirmDatePlugin({ confirmText: importDateShift.dataset.doneText, showAlways: true })
],
plugins: [ new confirmDatePlugin({ confirmText: importDateShift.dataset.doneText, showAlways: true }) ],
onReady(selectedDates) {
// Flatpickr hides the original input and adds the alternate input after it. That messes up the
// bootstrap input group styling. So move the now hidden original input after the created alternate
// input to fix that.
this.altInput.after(this.input);

// Make the alternate input left-to-right even for right-to-left languages.
this.altInput.dir = 'ltr';
},
parseDate(datestr, format) {
// Deal with the case of a unix timestamp. The timezone needs to be adjusted back as this is for
// the unix timestamp stored in the hidden input whose value will be sent to the server.
if (format === 'U') return new Date(parseInt(datestr) * 1000 - timezoneAdjustment);

// Next attempt to parse the datestr with the current format. This should not be adjusted. It is
// for display only.
const date = luxon.DateTime.fromFormat(datestr, format);
if (date.isValid) return date.toJSDate();

// Finally, fall back to the previous value in the original input if that failed. This is the case
// that the user typed a time that isn't in the valid format. So fallback to the last valid time
// that was displayed. This also should not be adjusted.
return new Date(this.lastFormattedDate.getTime());
},
formatDate(date, format) {
// Save this date for the fallback in parseDate.
this.lastFormattedDate = date;

// In this case the date provided is in the browser's time zone. So it needs to be adjusted to the
// timezone of the course.
if (format === 'U') return (date.getTime() + timezoneAdjustment) / 1000;

return luxon.DateTime.fromMillis(date.getTime())
.toFormat(datetimeFormats[luxon.Settings.defaultLocale]);
}
});

importDateShift.nextElementSibling.addEventListener('keydown', (e) => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
fp.open();
}
});
}
})();
6 changes: 4 additions & 2 deletions htdocs/js/apps/UserDetail/userdetail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,10 @@
if (!overrideCheck) return;
const changeHandler = () => overrideCheck.checked = input.value != '';
input.addEventListener('change', changeHandler);
input.addEventListener('keyup', changeHandler);
input.addEventListener('blur', () => { if (input.value == '') overrideCheck.checked = false; });
// Attach the keyup and blur handlers to the flatpickr alternate input.
input.previousElementSibling?.addEventListener('keyup', changeHandler);
input.previousElementSibling?.addEventListener('blur',
() => { if (input.previousElementSibling.value == '') overrideCheck.checked = false; });
});

// If the "Assign All Sets to Current User" button is clicked, then check all assignments.
Expand Down
1 change: 1 addition & 0 deletions htdocs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"iframe-resizer": "^4.3.2",
"jquery": "^3.6.0",
"jquery-ui-dist": "^1.13.1",
"luxon": "^2.3.1",
"mathjax": "^3.2.0",
"sortablejs": "^1.14.0"
},
Expand Down
2 changes: 1 addition & 1 deletion htdocs/themes/math4/math4.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -915,7 +915,7 @@ span {

/* Problem set list */
.set_table .input-group .form-control {
max-width: 11rem;
max-width: 10rem;
}

/* Problem graders */
Expand Down
10 changes: 10 additions & 0 deletions htdocs/third-party-assets.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,23 @@
"node_modules/codemirror/lib/codemirror.js": "https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.min.js",
"node_modules/flatpickr/dist/flatpickr.min.css": "https://cdn.jsdelivr.net/npm/[email protected]/dist/flatpickr.min.css",
"node_modules/flatpickr/dist/flatpickr.min.js": "https://cdn.jsdelivr.net/npm/[email protected]/dist/flatpickr.min.js",
"node_modules/flatpickr/dist/l10n/cs.js": "https://cdn.jsdelivr.net/npm/[email protected]/dist/l10n/cs.min.js",
"node_modules/flatpickr/dist/l10n/es.js": "https://cdn.jsdelivr.net/npm/[email protected]/dist/l10n/es.min.js",
"node_modules/flatpickr/dist/l10n/fr.js": "https://cdn.jsdelivr.net/npm/[email protected]/dist/l10n/fr.min.js",
"node_modules/flatpickr/dist/l10n/he.js": "https://cdn.jsdelivr.net/npm/[email protected]/dist/l10n/he.min.js",
"node_modules/flatpickr/dist/l10n/hu.js": "https://cdn.jsdelivr.net/npm/[email protected]/dist/l10n/hu.min.js",
"node_modules/flatpickr/dist/l10n/ko.js": "https://cdn.jsdelivr.net/npm/[email protected]/dist/l10n/ko.min.js",
"node_modules/flatpickr/dist/l10n/ru.js": "https://cdn.jsdelivr.net/npm/[email protected]/dist/l10n/ru.min.js",
"node_modules/flatpickr/dist/l10n/tr.js": "https://cdn.jsdelivr.net/npm/[email protected]/dist/l10n/tr.min.js",
"node_modules/flatpickr/dist/l10n/zh.js": "https://cdn.jsdelivr.net/npm/[email protected]/dist/l10n/zh.min.js",
"node_modules/flatpickr/dist/plugins/confirmDate/confirmDate.css": "https://cdn.jsdelivr.net/npm/[email protected]/dist/plugins/confirmDate/confirmDate.min.css",
"node_modules/flatpickr/dist/plugins/confirmDate/confirmDate.js": "https://cdn.jsdelivr.net/npm/[email protected]/dist/plugins/confirmDate/confirmDate.min.js",
"node_modules/iframe-resizer/js/iframeResizer.contentWindow.min.js": "https://cdn.jsdelivr.net/npm/[email protected]/js/iframeResizer.contentWindow.min.js",
"node_modules/iframe-resizer/js/iframeResizer.min.js": "https://cdn.jsdelivr.net/npm/[email protected]/js/iframeResizer.min.js",
"node_modules/jquery-ui-dist/jquery-ui.min.css": "https://cdn.jsdelivr.net/npm/[email protected]/jquery-ui.min.css",
"node_modules/jquery-ui-dist/jquery-ui.min.js": "https://cdn.jsdelivr.net/npm/[email protected]/jquery-ui.min.js",
"node_modules/jquery/dist/jquery.min.js": "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js",
"node_modules/luxon/build/global/luxon.min.js": "https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js",
"node_modules/mathjax/es5/tex-chtml.js": "https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-chtml.js",
"node_modules/sortablejs/Sortable.min.js": "https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"
}
Loading