From 6bfbff41f6081dd65b0a4afa9155a125f31de973 Mon Sep 17 00:00:00 2001 From: Sarah Vaupel Date: Wed, 20 Apr 2022 01:09:40 +0200 Subject: [PATCH] feat(frontend): remove deprecated tail.DateTime --- frontend/src/utils/form/datepicker.css | 727 ------------------------- frontend/src/utils/form/datepicker.js | 169 +----- package.json | 1 - 3 files changed, 4 insertions(+), 893 deletions(-) delete mode 100644 frontend/src/utils/form/datepicker.css diff --git a/frontend/src/utils/form/datepicker.css b/frontend/src/utils/form/datepicker.css deleted file mode 100644 index b052a1e7c..000000000 --- a/frontend/src/utils/form/datepicker.css +++ /dev/null @@ -1,727 +0,0 @@ -@charset "UTF-8"; -/* - | tail.datetime - The vanilla way to select dates and times! - | @file ./less/tail.datetime-default-green.less - | @author SamBrishes - | @version 0.4.13 - Beta - | - | @website https://github.com/pytesNET/tail.DateTime - | @license X11 / MIT License - | @copyright Copyright © 2018 - 2019 SamBrishes, pytesNET - */ - -/* @start MAIN CALENDAR */ -.tail-datetime-calendar, .tail-datetime-calendar *, .tail-datetime-calendar *:before, -.tail-datetime-calendar *:after{ - box-sizing: border-box; - -webkit-box-sizing: border-box; -} -.tail-datetime-calendar{ - top: 0; - left: 0; - width: 275px; - height: auto; - margin: 15px; - padding: 0; - z-index: 15; - display: block; - position: absolute; - visibility: hidden; - direction: ltr; - border-collapse: separate; - /* font-family: "Open Sans", Calibri, Arial, sans-serif; */ - background-color: white; - border-width: 0; - border-style: solid; - border-color: transparent; - border-radius: 3px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3125); - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3125); -} -.tail-datetime-calendar:after{ - clear: both; - content: ""; - display: block; - font-size: 0; - visibility: hidden; -} -.tail-datetime-calendar.calendar-static{ - top: auto; - left: auto; - margin-left: auto; - margin-right: auto; - position: static; - visibility: visible; -} -.tail-datetime-calendar button.calendar-close{ - top: 100%; - right: 15px; - color: #303438; - width: 35px; - height: 25px; - margin: 1px 0 0 0; - padding: 5px 10px; - opacity: 0.5; - outline: none; - display: inline-block; - position: absolute; - font-size: 14px; - line-height: 1.125em; - text-shadow: none; - background-color: white; - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\ - 9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjMzAzNDM4IiBkP\ - SJNNy40OCA4bDMuNzUgMy43NS0xLjQ4IDEuNDhMNiA5LjQ4bC0zLjc1IDMuNzUtMS40OC0xLjQ4TDQuNTIgOCAuNzcgNC4y\ - NWwxLjQ4LTEuNDhMNiA2LjUybDMuNzUtMy43NSAxLjQ4IDEuNDhMNy40OCA4eiIvPjwvc3ZnPg=="); - background-repeat: no-repeat; - background-position: center center; - border-width: 0; - border-style: solid; - border-color: transparent; - border-radius: 0 0 3px 3px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3125); - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3125); - transition: opacity 142ms linear; - -webkit-transition: opacity 142ms linear; -} -.tail-datetime-calendar button.calendar-close:hover{ - opacity: 1; -} -/* @end MAIN CALENDAR */ - -/* @start CALENDAR TOOLTIP */ -.tail-datetime-calendar .calendar-tooltip{ - color: white; - width: auto; - margin: 0; - padding: 0; - display: block; - position: absolute; - background-color: #202428; - border-radius: 3px; -} -.tail-datetime-calendar .calendar-tooltip:before{ - top: -7px; - left: 50%; - width: 0; - height: 0; - margin: 0 0 0 -6px; - content: ""; - display: block; - position: absolute; - border-width: 0 7px 7px 7px; - border-style: solid; - border-color: transparent transparent #202428 transparent; -} -.tail-datetime-calendar .calendar-tooltip .tooltip-inner{ - width: auto; - margin: 0; - padding: 4px 7px; - display: block; - font-size: 12px; - line-height: 14px; -} -/* @end CALENDAR TOOLTIP */ - -/* @start CALENDAR ACTIONs */ -.tail-datetime-calendar .calendar-actions{ - color: white; - width: 100%; - height: 36px; - margin: 0; - padding: 0; - display: table; - overflow: hidden; - border-spacing: 0; - border-collapse: separate; - background-color: var(--color-primary); - border-width: 0; - border-style: solid; - border-color: transparent; - border-radius: 3px 3px 0 0; -} -.tail-datetime-calendar .calendar-actions span{ - margin: 0; - padding: 0; - display: table-cell; - position: relative; - text-align: center; - line-height: 36px; - text-shadow: -1px -1px 0 var(--color-dark); - background-repeat: no-repeat; - background-position: center center; -} -.tail-datetime-calendar .calendar-actions span[data-action]{ - cursor: pointer; -} -.tail-datetime-calendar .calendar-actions span.action{ - width: 36px; - font-size: 22px; -} -.tail-datetime-calendar .calendar-actions span.label{ - width: auto; -} -.tail-datetime-calendar .calendar-actions span:first-child:before{ - right: -1px; -} -.tail-datetime-calendar .calendar-actions span:last-child:before{ - left: -1px; -} -.tail-datetime-calendar .calendar-actions span:first-child:hover:before, -.tail-datetime-calendar .calendar-actions span:last-child:hover:before{ - display: none; -} -.tail-datetime-calendar .calendar-actions span[data-action]:hover{ - background-color: var(--color-dark); -} -.tail-datetime-calendar .calendar-actions span.action-prev{ - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\ - 9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iT\ - TYgMkwwIDhsNiA2VjJ6Ii8+PC9zdmc+"); -} -.tail-datetime-calendar .calendar-actions span.action-next{ - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\ - 9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iT\ - TAgMTRsNi02LTYtNnYxMnoiLz48L3N2Zz4="); -} -.tail-datetime-calendar .calendar-actions span.action-submit{ - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\ - 9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkP\ - SJNMTIgNWwtOCA4LTQtNCAxLjUtMS41TDQgMTBsNi41LTYuNUwxMiA1eiIvPjwvc3ZnPg=="); -} -.tail-datetime-calendar .calendar-actions span.action-cancel{ - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\ - 9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkP\ - SJNNy40OCA4bDMuNzUgMy43NS0xLjQ4IDEuNDhMNiA5LjQ4bC0zLjc1IDMuNzUtMS40OC0xLjQ4TDQuNTIgOCAuNzcgNC4y\ - NWwxLjQ4LTEuNDhMNiA2LjUybDMuNzUtMy43NSAxLjQ4IDEuNDhMNy40OCA4eiIvPjwvc3ZnPg=="); -} -/* @end CALENDAR ACTIONs */ - -/* @start CALENDAR DATEPICKER */ -.tail-datetime-calendar .calendar-datepicker{ - width: 100%; - margin: 0; - padding: 0; - display: block; - position: relative; -} -.tail-datetime-calendar .calendar-datepicker table{ - width: 100%; - margin: 0; - padding: 0; - border-spacing: 0; - border-collapse: separate; -} -.tail-datetime-calendar .calendar-datepicker table tr th, -.tail-datetime-calendar .calendar-datepicker table tr td{ - color: #303438; - height: 30px; - padding: 0; - position: relative; - font-size: 13px; - text-align: center; - font-weight: normal; - text-shadow: none; - line-height: 30px; - background-color: transparent; - border-width: 0; - border-style: solid; - border-color: transparent; - border-radius: 0px; -} -.tail-datetime-calendar .calendar-datepicker table tr th{ - color: white; - background-color: var(--color-lightblack); -} -.tail-datetime-calendar .calendar-datepicker table tr td{ - cursor: pointer; -} -.tail-datetime-calendar .calendar-datepicker table tr td span.inner{ - margin: 0; - padding: 0; - display: inline-block; -} -.tail-datetime-calendar .calendar-datepicker table tr td.date-disabled{ - cursor: not-allowed; - color: #909498; - background-color: #F0F0F0; -} -.tail-datetime-calendar .calendar-datepicker table tr td.date-disabled:after{ - left: 3px; - bottom: 3px; - width: 35px; - height: 1px; - margin: 0; - padding: 0; - content: ""; - display: inline-block; - position: absolute; - background-color: #bfbfbf; - transform-origin: 2px -5px; - transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -webkit-transform: rotate(-45deg); -} -.tail-datetime-calendar .calendar-datepicker table tr td.date-previous, -.tail-datetime-calendar .calendar-datepicker table tr td.date-next{ - color: #909498; - background-color: #F0F0F0; -} -.tail-datetime-calendar .calendar-datepicker table tr td.date-today:before, -.tail-datetime-calendar .calendar-datepicker table tr td .tooltip-tick{ - top: 5px; - width: 5px; - height: 5px; - margin: 0; - padding: 0; - z-index: 20; - content: ""; - display: inline-block; - position: absolute; - border-width: 0; - border-style: solid; - border-color: transparent; - border-radius: 50%; -} -.tail-datetime-calendar .calendar-datepicker table tr td.date-today:before{ - left: 5px; - background-color: #E67D1E; -} -.tail-datetime-calendar .calendar-datepicker table tr td .tooltip-tick{ - right: 5px; - background-color: #202428; -} -.tail-datetime-calendar .calendar-datepicker table tr td .tooltip-tick:before, -.tail-datetime-calendar .calendar-datepicker table tr td .tooltip-tick:after{ - display: none; -} -.tail-datetime-calendar .calendar-datepicker table tr th.calendar-week, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-day{ - width: 14.28571429%; - height: 35px; -} -.tail-datetime-calendar .calendar-datepicker table tr th.calendar-week span.inner, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-day span.inner{ - width: 31px; - height: 31px; - line-height: 29px; - border-width: 1px; - border-style: solid; - border-color: transparent; - border-radius: 50%; -} -.tail-datetime-calendar .calendar-datepicker table tr th.calendar-week:hover span.inner, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-day:hover span.inner{ - border-color: #cccccc; -} -.tail-datetime-calendar .calendar-datepicker table tr th.calendar-week.date-disabled span.inner, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-day.date-disabled span.inner, -.tail-datetime-calendar .calendar-datepicker table tr th.calendar-week.date-disabled:hover span.inner, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-day.date-disabled:hover span.inner{ - border-color: transparent; -} -.tail-datetime-calendar .calendar-datepicker table tr th.calendar-week.date-select span.inner, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-day.date-select span.inner, -.tail-datetime-calendar .calendar-datepicker table tr th.calendar-week.date-select:hover span.inner, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-day.date-select:hover span.inner{ - color: var(--color-fontsec); - border-color: var(--color-fontsec); -} -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade{ - width: 33.33333333%; - height: 40px; - transition: color 142ms linear; - -webkit-transition: color 142ms linear; -} -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month.date-today:before, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year.date-today:before, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade.date-today:before{ - left: 50%; - margin-left: -2.5px; -} -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month span.inner, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year span.inner, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade span.inner{ - width: auto; - height: 31px; - line-height: 29px; -} -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month span.inner:before, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year span.inner:before, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade span.inner:before, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month span.inner:after, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year span.inner:after, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade span.inner:after{ - width: 20px; - height: 20px; - content: ""; - z-index: 15; - display: inline-block; - position: absolute; - border-width: 1px; - border-style: solid; - border-color: transparent; - transition: all 142ms linear; - -webkit-transition: all 142ms linear; -} -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month span.inner:before, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year span.inner:before, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade span.inner:before{ - top: 0; - left: 0; -} -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month:hover span.inner:before, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year:hover span.inner:before, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade:hover span.inner:before{ - top: 6px; - left: 6px; - border-top-color: #cccccc; - border-left-color: #cccccc; -} -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month span.inner:after, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year span.inner:after, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade span.inner:after{ - right: 0; - bottom: 0; -} -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-month:hover span.inner:after, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year:hover span.inner:after, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade:hover span.inner:after{ - right: 6px; - bottom: 6px; - border-right-color: #cccccc; - border-bottom-color: #cccccc; -} -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-year, -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade{ - width: 25%; -} -.tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade span.inner{ - height: 54px; - padding: 7px 15px; - text-align: left; - line-height: 20px; -} -/* @end CALENDAR DATEPICKER */ - -/* @start CALENDAR TIMEPICKER */ -.tail-datetime-calendar .calendar-timepicker{ - width: 100%; - margin: 0; - padding: 0; - display: block; - text-align: center; - border-width: 1px 0 0 0; - border-style: solid; - border-color: #d9d9d9; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field{ - width: 28%; - margin: 0; - padding: 15px 0 7px 0; - display: inline-block; - position: relative; - text-align: center; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field:first-of-type{ - text-align: right; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field:last-of-type{ - text-align: left; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field input[type="text"]{ - color: #303438; - width: 100%; - height: 29px; - margin: 0; - z-index: 4; - padding: 3px 20px 3px 5px; - outline: 0; - display: inline-block; - position: relative; - font-size: 12px; - text-align: center; - line-height: 23px; - appearance: textfield; - -moz-appearance: textfield; - -webkit-appearance: textfield; - background-color: #F0F0F0; - border-width: 0; - border-style: solid; - border-color: transparent; - border-radius: 3px; - box-shadow: none; - -webkit-box-shadow: none; - transition: color 142ms linear, border 142ms linear, background 142ms linear; - -webkit-transition: color 142ms linear, border 142ms linear, background 142ms linear; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field input[type="text"]:hover{ - color: #303438; - background-color: #E0E0E0; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field input[type="text"]:focus{ - color: #303438; - background-color: #E0E0E0; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field input[type="text"]:disabled{ - cursor: not-allowed; - color: #A0A4A8; - background-color: #F6F6F6; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field button.picker-step{ - min-width: 0px; - width: 20px; - height: 15px; - right: 0; - margin: 0; - padding: 0; - z-index: 15; - display: inline-block; - position: absolute; - background-color: #F0F0F0; - box-shadow: none; - -webkit-box-shadow: none; - transition: border 142ms linear, background 142ms linear; - -webkit-transition: border 142ms linear, background 142ms linear; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field button.picker-step:before{ - top: 4px; - left: 50%; - width: 0; - height: 0; - margin: 0 0 0 -4px; - padding: 0; - content: ""; - display: inline-block; - position: absolute; - transition: border 142ms linear; - -webkit-transition: border 142ms linear; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field button.picker-step.step-up{ - top: 15px; - border-width: 0 0 1px 1px; - border-style: solid; - border-color: white; - border-radius: 0 2px 0 0; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field button.picker-step.step-up:hover{ - background-color: #E0E0E0; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field button.picker-step.step-up:before{ - border-width: 0 4px 5px 4px; - border-style: solid; - border-color: transparent transparent #303438 transparent; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field button.picker-step.step-down{ - top: 29px; - border-width: 1px 0 0 1px; - border-style: solid; - border-color: white; - border-radius: 0 0 2px 0; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field button.picker-step.step-down:hover{ - background-color: #E0E0E0; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field button.picker-step.step-down:before{ - border-width: 5px 4px 0 4px; - border-style: solid; - border-color: #303438 transparent transparent transparent; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button.step-up{ - border-color: rgba(255, 255, 255, 0.8); - background-color: var(--color-primary); -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button.step-up:hover{ - background-color: var(--color-dark); -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button.step-up:before{ - border-bottom-color: white; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button + button.step-down{ - border-color: rgba(255, 255, 255, 0.8); - background-color: var(--color-primary); -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button + button.step-down:hover{ - background-color: var(--color-dark); -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button + button.step-down:before{ - border-top-color: white; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field input:disabled + button.step-up{ - cursor: not-allowed; - border-color: rgba(255, 255, 255, 0.8); - background-color: #F6F6F6; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field input:disabled + button.step-up:hover{ - background-color: #F6F6F6; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field input:disabled + button.step-up:before{ - border-bottom-color: #A0A4A8; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field input:disabled + button + button.step-down{ - cursor: not-allowed; - border-color: rgba(255, 255, 255, 0.8); - background-color: #F6F6F6; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field input:disabled + button + button.step-down:hover{ - background-color: #F6F6F6; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field input:disabled + button + button.step-down:before{ - border-top-color: #A0A4A8; -} -.tail-datetime-calendar .calendar-timepicker .timepicker-field label{ - color: #303438; - margin: 0; - padding: 0; - display: block; - font-size: 12px; - text-align: center; -} -.tail-datetime-calendar .calendar-timepicker label.timepicker-switch{ - cursor: pointer; - margin: 15px 0 -5px 0; - display: block; - text-align: center; - vertical-align: top; -} -.tail-datetime-calendar .calendar-timepicker label.timepicker-switch:before, -.tail-datetime-calendar .calendar-timepicker label.timepicker-switch:after{ - width: auto; - margin: 0; - padding: 0 5px; - font-size: 12px; - line-height: 16px; - vertical-align: top; -} -.tail-datetime-calendar .calendar-timepicker label.timepicker-switch:before{ - content: attr(data-am); -} -.tail-datetime-calendar .calendar-timepicker label.timepicker-switch:after{ - content: attr(data-pm); -} -.tail-datetime-calendar .calendar-timepicker label.timepicker-switch input[type="checkbox"]{ - display: none; -} -.tail-datetime-calendar .calendar-timepicker label.timepicker-switch input[type="checkbox"] + span{ - display: inline-block; - position: relative; - vertical-align: top; -} -.tail-datetime-calendar .calendar-timepicker label.timepicker-switch input[type="checkbox"] + span:before{ - width: 50px; - height: 16px; - content: ""; - display: inline-block; - vertical-align: top; - border-width: 1px; - border-style: solid; - border-color: var(--color-primary); - border-radius: 14px; - transition: border 284ms linear; - -webkit-transition: border 284ms linear; -} -.tail-datetime-calendar .calendar-timepicker label.timepicker-switch input[type="checkbox"] + span:after{ - top: 3px; - left: 4px; - right: 30px; - width: auto; - height: 10px; - margin: 0; - padding: 0; - content: ""; - display: inline-block; - position: absolute; - background-color: var(--color-primary); - border-radius: 15px; - vertical-align: top; - transition: left 284ms linear, right 284ms linear 284ms, background 284ms linear; - -webkit-transition: left 284ms linear, right 284ms linear 284ms, background 284ms linear; -} -.tail-datetime-calendar .calendar-timepicker label.timepicker-switch input[type="checkbox"]:checked + span:before{ - border-color: #E67D1E; -} -.tail-datetime-calendar .calendar-timepicker label.timepicker-switch input[type="checkbox"]:checked + span:after{ - left: 30px; - right: 4px; - background-color: #E67D1E; - transition: right 284ms linear, left 284ms linear 284ms, background 284ms linear; - -webkit-transition: right 284ms linear, left 284ms linear 284ms, background 284ms linear; -} -.tail-datetime-calendar .calendar-actions + .calendar-timepicker{ - border-width: 0; -} -/* @end CALENDAR TIMEPICKER */ - -/* @start RTL */ -.tail-datetime-calendar.rtl{ - direction: rtl; -} -.tail-datetime-calendar.rtl .calendar-actions span.action-next, -.tail-datetime-calendar.rtl .calendar-actions span.action-prev{ - transform: rotate(180deg); - -moz-transform: rotate(180deg); - -webkit-transform: rotate(180deg); -} -.tail-datetime-calendar.rtl .calendar-datepicker table tr td.date-disabled:after{ - right: 3px; - transform: rotate(45deg); - -moz-transform: rotate(45deg); - -webkit-transform: rotate(45deg); -} -.tail-datetime-calendar.rtl .calendar-datepicker table tr td.date-today:before{ - right: 5px; -} -.tail-datetime-calendar.rtl .calendar-datepicker table tr td .tooltip-tick{ - left: 5px; -} -.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-month.date-today:before, -.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-year.date-today:before, -.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-decade.date-today:before{ - right: 50%; - margin-right: -2.5px; -} -.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-month:hover span.inner:before, -.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-year:hover span.inner:before, -.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-decade:hover span.inner:before{ - right: 6px; - border-right-color: #cccccc; -} -.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-month span.inner:after, -.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-year span.inner:after, -.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-decade span.inner:after{ - left: 0; -} -.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-month:hover span.inner:after, -.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-year:hover span.inner:after, -.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-decade:hover span.inner:after{ - left: 6px; - border-left-color: #cccccc; -} -.tail-datetime-calendar.rtl .calendar-datepicker table tr td.calendar-decade span.inner{ - text-align: right; -} -.tail-datetime-calendar.rtl .calendar-timepicker .timepicker-field:first-child{ - text-align: left; - padding-left: 0; - padding-right: 25px; -} -.tail-datetime-calendar.rtl .calendar-timepicker .timepicker-field:last-child{ - text-align: right; - padding-left: 25px; - padding-right: 0; -} -.tail-datetime-calendar.rtl .calendar-timepicker .timepicker-field:first-child input[type="text"]{ - margin-left: -1px; - margin-right: 0; - border-radius: 0 3px 3px 0; -} -.tail-datetime-calendar.rtl .calendar-timepicker .timepicker-field:last-child input[type="text"]{ - margin-left: 0; - margin-right: -1px; - border-radius: 3px 0 0 3px; -} -/* @end RTL */ - -/*# sourceMappingURL=tail.datetime-default-green.map */ diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js index c6273c07b..b2906dd4e 100644 --- a/frontend/src/utils/form/datepicker.js +++ b/frontend/src/utils/form/datepicker.js @@ -1,17 +1,9 @@ -import datetime from 'tail.datetime'; -import './datepicker.css'; import { Utility } from '../../core/utility'; import moment from 'moment'; import { EventManager, EventWrapper, EVENT_TYPE } from '../../lib/event-manager/event-manager'; import * as defer from 'lodash.defer'; -const KEYCODE_ESCAPE = 27; -const Z_INDEX_MODAL = 9999; - -// should be the same as ATTR_SUBMIT_LOCKED in async-table util -// TODO move to global config -const ATTR_DATEPICKER_OPEN = 'submit-locked'; // INTERNAL (Uni2work specific) formats for formatting dates and/or times const FORM_DATE_FORMAT = { @@ -20,10 +12,6 @@ const FORM_DATE_FORMAT = { 'datetime-local': moment.HTML5_FMT.DATETIME_LOCAL_SECONDS, }; -// FANCY (tail.datetime specific) formats for displaying dates and/or times -const FORM_DATE_FORMAT_DATE_DT = 'dd.mm.YYYY'; -const FORM_DATE_FORMAT_TIME_DT = 'HH:ii:ss'; - // FANCY (moment specific) formats for displaying dates and/or times const FORM_DATE_FORMAT_DATE_MOMENT = 'DD.MM.YYYY'; const FORM_DATE_FORMAT_TIME_MOMENT = 'HH:mm:ss'; @@ -36,38 +24,7 @@ const FORM_DATE_FORMAT_MOMENT = { const DATEPICKER_UTIL_SELECTOR = 'input[type="date"], input[type="time"], input[type="datetime-local"]'; const DATEPICKER_INITIALIZED_CLASS = 'datepicker--initialized'; -const DATEPICKER_OPEN_CLASS = 'calendar-open'; -const DATEPICKER_CONFIG = { - 'global': { - // set default time to 00:00:00 - timeHours: 0, - timeMinutes: 0, - timeSeconds: 0, - - weekStart: 1, - dateFormat: FORM_DATE_FORMAT_DATE_DT, - timeFormat: FORM_DATE_FORMAT_TIME_DT, - - // prevent the instance from closing when selecting a date before selecting a time - stayOpen: true, - - // hide the close button (we handle closing the datepicker manually by clicking outside) - closeButton: false, - - // disable the decades view because nobody will ever need it (i.e. cap the switch to the more relevant year view) - viewDecades: false, - }, - 'datetime-local': {}, - 'date': { - // disable date picker - timeFormat: false, - }, - 'time': { - // disable time picker - dateFormat: false, - }, -}; @Utility({ selector: DATEPICKER_UTIL_SELECTOR, @@ -77,7 +34,6 @@ export class Datepicker { // singleton Map that maps a formID to a Map of Datepicker objects static datepickerCollections; - datepickerInstance; _element; elementType; initialValue; @@ -113,48 +69,10 @@ export class Datepicker { // store initial value prior to changing type this.initialValue = this._element.value || this._element.getAttribute('value'); - // manually set the type attribute to text because datepicker handles displaying the date - this._element.setAttribute('type', 'text'); - - // get all relevant config options for this datepicker type - const datepickerGlobalConfig = DATEPICKER_CONFIG['global']; - const datepickerConfig = DATEPICKER_CONFIG[this.elementType]; - - // additional position config (optional data-datepicker-position attribute in html) that can specialize the global config - const datepickerPosition = this._element.dataset.datepickerPosition; - if (datepickerPosition) { - datepickerGlobalConfig.position = datepickerPosition; - } - - if (!datepickerConfig || !FORM_DATE_FORMAT[this.elementType]) { + if (!FORM_DATE_FORMAT[this.elementType]) { throw new Error('Datepicker utility called on unsupported element!'); } - // FIXME dirty hack below; fix tail.datetime instead - - // get date object from internal format before datetime does nasty things with it - let parsedMomentDate = moment(this.initialValue, [ FORM_DATE_FORMAT[this.elementType], FORM_DATE_FORMAT_MOMENT[this.elementType] ], true); - if (parsedMomentDate && parsedMomentDate.isValid()) { - parsedMomentDate = parsedMomentDate.toDate(); - } else { - parsedMomentDate = undefined; - } - - // initialize tail.datetime (datepicker) instance and let it do weird stuff with the element value - this.datepickerInstance = datetime(this._element, { ...datepickerGlobalConfig, ...datepickerConfig, locale: this._locale }); - - // reset date to something sane - if (parsedMomentDate) - this.datepickerInstance.selectDate(parsedMomentDate); - - // insert the datepicker element (dt) after the form - this._element.form.parentNode.insertBefore(this.datepickerInstance.dt, this._element.form.nextSibling); - - // if the input element is in any open modal, increase the z-index of the datepicker - if (this._element.closest('.modal--open')) { - this.datepickerInstance.dt.style.zIndex = Z_INDEX_MODAL; - } - // register this datepicker instance with the formID of the given element in the datepicker collection const formID = this._element.form.id; const elemID = this._element.id; @@ -171,98 +89,17 @@ export class Datepicker { } start() { - const setDatepickerDate = () => { - // try to parse the current input element value with fancy and internal format string - const parsedMomentDate = moment(this._element.value, FORM_DATE_FORMAT_MOMENT[this.elementType]); - const parsedMomentDateInternal = moment(this._element.value, FORM_DATE_FORMAT[this.elementType]); - - // only set the datepicker date if the input is either in valid fancy format or in valid internal format - if (parsedMomentDate.isValid()) { - this.datepickerInstance.selectDate(parsedMomentDate.toDate()); - } else if (parsedMomentDateInternal.isValid()) { - this.datepickerInstance.selectDate(parsedMomentDateInternal.toDate()); - } - - // reregister change event to prevent event loop - }; - // change the selected date in the tail.datetime instance if the value of the input element is changed - const changeSelectedDateEvent = new EventWrapper(EVENT_TYPE.CHANGE, setDatepickerDate.bind(this), this._element, { once: true }); - this._eventManager.registerNewListener(changeSelectedDateEvent); - - // create a mutation observer that observes the datepicker instance class and sets - // the datepicker-open DOM attribute of the input element if the datepicker has been opened - let callback = (mutations) => { - for (const mutation of mutations) { - if (!mutation.oldValue.includes(DATEPICKER_OPEN_CLASS) && this.datepickerInstance.dt.getAttribute('class').includes(DATEPICKER_OPEN_CLASS)) { - this._element.setAttribute(ATTR_DATEPICKER_OPEN, true); - break; - } - } - }; - this._eventManager.registerNewMutationObserver(callback.bind(this), this.datepickerInstance.dt, { - attributes: true, - attributeFilter: ['class'], - attributeOldValue: true, - }); - - - // close the instance on focusout of any element if another input is focussed that is neither the timepicker nor _element - const focusOutEvent = new EventWrapper(EVENT_TYPE.FOCUS_OUT,(event => { - const hasFocus = event.relatedTarget !== null; - const focussedIsNotTimepicker = !this.datepickerInstance.dt.contains(event.relatedTarget); - const focussedIsNotElement = event.relatedTarget !== this._element; - const focussedIsInDocument = window.document.contains(event.relatedTarget); - if (hasFocus && focussedIsNotTimepicker && focussedIsNotElement && focussedIsInDocument) - this.closeDatepickerInstance(); - }).bind(this), window ); - this._eventManager.registerNewListener(focusOutEvent); - - // close the instance on click on any element outside of the datepicker (except the input element itself) - const clickOutsideEvent = new EventWrapper(EVENT_TYPE.CLICK, (event => { - const targetIsOutside = !this.datepickerInstance.dt.contains(event.target) - && event.target !== this.datepickerInstance.dt; - const targetIsInDocument = window.document.contains(event.target); - const targetIsNotElement = event.target !== this._element; - if (targetIsOutside && targetIsInDocument && targetIsNotElement) - this.closeDatepickerInstance(); - }).bind(this), window); - this._eventManager.registerNewListener(clickOutsideEvent); - - // close the instance on escape keydown events - const escapeCloseEvent = new EventWrapper(EVENT_TYPE.KEYDOWN, (event => { - if (event.keyCode === KEYCODE_ESCAPE) { - this.closeDatepickerInstance(); - } - }).bind(this), this._element); - this._eventManager.registerNewListener(escapeCloseEvent); - // format the date value of the form input element of this datepicker before form submission - const submitEvent = new EventWrapper(EVENT_TYPE.SUBMIT, this._submitHandler.bind(this), this._element.form); + const submitEvent = new EventWrapper(EVENT_TYPE.SUBMIT, this._submitHandler.bind(this), this._element.form); this._eventManager.registerNewListener(submitEvent); } destroy() { - this.datepickerInstance.remove(); this._eventManager.cleanUp(); this._element.classList.remove(DATEPICKER_INITIALIZED_CLASS); } - // DATEPICKER INSTANCE CONTROL - - /** - * Closes the datepicker instance, releasing the lock on the input element. - */ - closeDatepickerInstance() { - if (!this._element.datepicker-open) { - throw new Error('Cannot close already closed datepicker instance!'); - } - - this._element.setAttribute(ATTR_DATEPICKER_OPEN, false); - this.datepickerInstance.close(); - } - - // FORMAT METHODS /** @@ -277,11 +114,13 @@ export class Datepicker { _submitHandler() { this._unloadIsDueToSubmit = true; + this._element.setAttribute('type', 'text'); this.formatElementValue(false); defer(() => { // Restore state after event loop is settled this._unloadIsDueToSubmit = false; this.formatElementValue(true); + this._element.setAttribute('type', this.elementType); }); } diff --git a/package.json b/package.json index 37f9017ff..a807fb311 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,6 @@ "moment": "^2.27.0", "npm": "^6.14.8", "sodium-javascript": "^0.5.6", - "tail.datetime": "git+ssh://git@gitlab2.rz.ifi.lmu.de/uni2work/tail.DateTime.git#master", "toposort": "^2.0.2", "whatwg-fetch": "^3.4.0" }