-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Replace JQuery Datetimepicker with Tempus Dominus (#526)
* Uninstall old Datetimepicker * Remove old import hack for Datetimepicker * Try out Tempus Dominus datetimepicker on assignments * Show datetimepicker when clicking in text field Note that the datetimepicker is not really accessible right now. Hopefully, there will be some improvement related to this soon. See here: Eonasdan/tempus-dominus#2390 * Shrink "action" and enlargen "Deadline" column * Do not use not working jQuery version of datetimepicker * Remove autocomplete from input field * Improve accessibility of Datetimepicker (keyboard events & focus) * Add error message for invalid format & decouple from assignment view * Clean up datetimepicker.js * Change invalid date format string * Fix "is-invalid" CSS classes via JS * Get rid of old datetimepicker occurrences * Get rid of "moment" as dependency for formatting dates * Wait for document to be ready to init datetimepicker Also close the datetimepicker when a date was selected * Replace old datetimepicker in publish media modal * Fix datetimepicker in assignments view * Do not close datetimepicker when only time is changed * Improve comment * Check if date is undefined * Prevent turbolink issue with datetimepicker * Fix assignment title CSS id * Empty error message upon update of assignment * Restore old code for "assignment_title" * Use 'before-cache' instead of 'load' with Turbolinks
- Loading branch information
Showing
17 changed files
with
217 additions
and
106 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| // Initialize on page load (when js file is dynamically loaded) | ||
| $(document).ready(startInitialization); | ||
|
|
||
| // On page change (e.g. go back and forth in browser) | ||
| $(document).on('turbolinks:before-cache', () => { | ||
| // Remove stale datetimepickers | ||
| $('.tempus-dominus-widget').remove(); | ||
| }); | ||
|
|
||
| function startInitialization() { | ||
| const pickerElements = $('.td-picker'); | ||
| if (pickerElements.length == 0) { | ||
| console.error('No datetimepicker element found on page, although requested.'); | ||
| return; | ||
| } | ||
|
|
||
| pickerElements.each((i, element) => { | ||
| element = $(element); | ||
| const datetimePicker = initDatetimePicker(element); | ||
| registerErrorHandlers(datetimePicker, element); | ||
| registerFocusHandlers(datetimePicker, element); | ||
| }); | ||
| } | ||
|
|
||
| function initDatetimePicker(element) { | ||
| // see https://getdatepicker.com | ||
| return new tempusDominus.TempusDominus( | ||
| element.get(0), | ||
| { | ||
| display: { | ||
| sideBySide: true, // clock to the right of the calendar | ||
| }, | ||
| localization: { | ||
| startOfTheWeek: 1, | ||
| // choose format to be compliant with backend time format | ||
| format: 'yyyy-MM-dd HH:mm', | ||
| hourCycle: 'h23', | ||
| } | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| function registerErrorHandlers(datetimePicker, element) { | ||
| // Catch Tempus Dominus error when user types in invalid date | ||
| // this is rather hacky at the moment, see this discussion: | ||
| // https://github.com/Eonasdan/tempus-dominus/discussions/2656 | ||
| datetimePicker.dates.oldParseInput = datetimePicker.dates.parseInput; | ||
| datetimePicker.dates.parseInput = (input) => { | ||
| try { | ||
| return datetimePicker.dates.oldParseInput(input); | ||
| } catch (err) { | ||
| const errorMsg = element.find('.td-error').data('td-invalid-date'); | ||
| element.find('.td-error').text(errorMsg).show(); | ||
| datetimePicker.dates.clear(); | ||
| } | ||
| }; | ||
|
|
||
| datetimePicker.subscribe(tempusDominus.Namespace.events.change, (e) => { | ||
| // see https://getdatepicker.com/6/namespace/events.html#change | ||
|
|
||
| // Clear error message | ||
| if (e.isValid && !e.isClear) { | ||
| element.find('.td-error').empty(); | ||
| } | ||
|
|
||
| // If date was selected, close datetimepicker. | ||
| // However: leave the datetimepicker open if user only changed time | ||
| if (e.oldDate && e.date && !hasUserChangedDate(e.oldDate, e.date)) { | ||
| datetimePicker.hide(); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| function hasUserChangedDate(oldDate, newDate) { | ||
| return oldDate.getHours() != newDate.getHours() | ||
| || oldDate.getMinutes() != newDate.getMinutes(); | ||
| } | ||
|
|
||
| function registerFocusHandlers(datetimePicker, element) { | ||
| // Show datetimepicker when user clicks in text field next to button | ||
| // or when input field receives focus | ||
| var isButtonInvokingFocus = false; | ||
|
|
||
| element.find('.td-input').on('click focusin', (e) => { | ||
| try { | ||
| if (!isButtonInvokingFocus) { | ||
| datetimePicker.show(); | ||
| } | ||
| } | ||
| finally { | ||
| isButtonInvokingFocus = false; | ||
| } | ||
| }); | ||
|
|
||
| element.find('.td-picker-button').on('click', () => { | ||
| isButtonInvokingFocus = true; | ||
| element.find('.td-input').focus(); | ||
| }); | ||
|
|
||
| // Hide datetimepicker when input field loses focus | ||
| element.find('.td-input').blur((e) => { | ||
| if (!e.relatedTarget) { | ||
| return; | ||
| } | ||
| datetimePicker.hide(); | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +0,0 @@ | ||
| @import "jquery-datetimepicker/build/jquery.datetimepicker.min.css" | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -34,6 +34,18 @@ | |
| integrity="sha256-rADF2WO6GbkNb5O9gqHdjQ/XhrfnXDtPdHdRe5KQmek=" | ||
| crossorigin="anonymous"> | ||
| </script> | ||
|
|
||
| <!-- Tempus Dominus Datetimepicker --> | ||
| <!-- Font awesome required for icons in Datetimepicker --> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/solid.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/fontawesome.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"> | ||
| </script> | ||
| <script src="https://cdn.jsdelivr.net/npm/@eonasdan/[email protected]/dist/js/tempus-dominus.js"> | ||
| </script> | ||
| <link rel="stylesheet" | ||
| href="https://cdn.jsdelivr.net/npm/@eonasdan/[email protected]/dist/css/tempus-dominus.css"> | ||
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sanitize-html.min.js" integrity="sha256-+Tha6wUu+wzAOUzilJ7AmF4OXc3CsY1aMsWopnCVwb4=" crossorigin="anonymous"></script> | ||
| <script defer | ||
| src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" | ||
|
|
@@ -59,6 +71,8 @@ | |
| </script> | ||
| <![endif]--> | ||
|
|
||
|
|
||
|
|
||
| <meta name="viewport" | ||
| content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.