Bug 34440: Simplify modal code using isSameOr* functions
Sponsored-by: Cuyahoga County Public Library <https://cuyahogalibrary.org/> Signed-off-by: Kristi Krueger <KKRUEGER@cuyahogalibrary.org> Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de> Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
This commit is contained in:
parent
7174d05774
commit
46ef8b1594
8 changed files with 74 additions and 86 deletions
|
@ -63,7 +63,6 @@
|
|||
[% INCLUDE modals/cancel_booking.inc %]
|
||||
|
||||
[% MACRO jsinclude BLOCK %]
|
||||
[% Asset.js("lib/dayjs/dayjs.min.js") | $raw %]
|
||||
[% Asset.js("lib/vis-timeline/vis-timeline-graph2d.min.js") | $raw %]
|
||||
[% INCLUDE 'datatables.inc' %]
|
||||
[% INCLUDE 'columns_settings.inc' %]
|
||||
|
@ -71,6 +70,10 @@
|
|||
[% INCLUDE 'select2.inc' %]
|
||||
[% INCLUDE 'js-patron-format.inc' %]
|
||||
[% INCLUDE 'js-date-format.inc' %]
|
||||
[% Asset.js("lib/dayjs/plugin/isSameOrAfter.js") | $raw %]
|
||||
[% Asset.js("lib/dayjs/plugin/isSameOrBefore.js") | $raw %]
|
||||
<script>dayjs.extend(window.dayjs_plugin_isSameOrAfter)</script>
|
||||
<script>dayjs.extend(window.dayjs_plugin_isSameOrBefore)</script>
|
||||
[% Asset.js("js/modals/place_booking.js") | $raw %]
|
||||
[% Asset.js("js/cancel_booking_modal.js") | $raw %]
|
||||
<script>
|
||||
|
|
|
@ -86,6 +86,11 @@
|
|||
|
||||
[% MACRO jsinclude BLOCK %]
|
||||
[% INCLUDE 'catalog-strings.inc' %]
|
||||
[% Asset.js("lib/dayjs/dayjs.min.js") | $raw %]
|
||||
[% Asset.js("lib/dayjs/plugin/isSameOrAfter.js") | $raw %]
|
||||
[% Asset.js("lib/dayjs/plugin/isSameOrBefore.js") | $raw %]
|
||||
<script>dayjs.extend(window.dayjs_plugin_isSameOrAfter)</script>
|
||||
<script>dayjs.extend(window.dayjs_plugin_isSameOrBefore)</script>
|
||||
[% INCLUDE 'calendar.inc' %]
|
||||
[% INCLUDE 'select2.inc' %]
|
||||
[% Asset.js("js/catalog.js") | $raw %]
|
||||
|
|
|
@ -212,6 +212,11 @@
|
|||
|
||||
[% MACRO jsinclude BLOCK %]
|
||||
[% INCLUDE 'catalog-strings.inc' %]
|
||||
[% Asset.js("lib/dayjs/dayjs.min.js") | $raw %]
|
||||
[% Asset.js("lib/dayjs/plugin/isSameOrAfter.js") | $raw %]
|
||||
[% Asset.js("lib/dayjs/plugin/isSameOrBefore.js") | $raw %]
|
||||
<script>dayjs.extend(window.dayjs_plugin_isSameOrAfter)</script>
|
||||
<script>dayjs.extend(window.dayjs_plugin_isSameOrBefore)</script>
|
||||
[% INCLUDE 'calendar.inc' %]
|
||||
[% INCLUDE 'select2.inc' %]
|
||||
[% Asset.js("js/catalog.js") | $raw %]
|
||||
|
|
|
@ -1207,8 +1207,8 @@
|
|||
[% END %]
|
||||
|
||||
[% MACRO jsinclude BLOCK %]
|
||||
[% INCLUDE 'catalog-strings.inc' %]
|
||||
[% INCLUDE 'calendar.inc' %]
|
||||
[% INCLUDE 'catalog-strings.inc' %]
|
||||
[% INCLUDE 'select2.inc' %]
|
||||
[% INCLUDE 'js-date-format.inc' %]
|
||||
[% Asset.js("js/catalog.js") | $raw %]
|
||||
|
@ -1639,6 +1639,10 @@
|
|||
[% Asset.js("lib/jquery/plugins/jquery.dataTables.columnFilter.js") | $raw %]
|
||||
[% INCLUDE 'columns_settings.inc' %]
|
||||
[% INCLUDE 'js-date-format.inc' %]
|
||||
[% Asset.js("lib/dayjs/plugin/isSameOrAfter.js") | $raw %]
|
||||
[% Asset.js("lib/dayjs/plugin/isSameOrBefore.js") | $raw %]
|
||||
<script>dayjs.extend(window.dayjs_plugin_isSameOrAfter)</script>
|
||||
<script>dayjs.extend(window.dayjs_plugin_isSameOrBefore)</script>
|
||||
[% INCLUDE 'js-patron-format.inc' %]
|
||||
[% INCLUDE 'js-biblio-format.inc' %]
|
||||
[% Asset.js("js/browser.js") | $raw %]
|
||||
|
|
|
@ -139,6 +139,11 @@
|
|||
|
||||
[% MACRO jsinclude BLOCK %]
|
||||
[% INCLUDE 'catalog-strings.inc' %]
|
||||
[% Asset.js("lib/dayjs/dayjs.min.js") | $raw %]
|
||||
[% Asset.js("lib/dayjs/plugin/isSameOrAfter.js") | $raw %]
|
||||
[% Asset.js("lib/dayjs/plugin/isSameOrBefore.js") | $raw %]
|
||||
<script>dayjs.extend(window.dayjs_plugin_isSameOrAfter)</script>
|
||||
<script>dayjs.extend(window.dayjs_plugin_isSameOrBefore)</script>
|
||||
[% INCLUDE 'calendar.inc' %]
|
||||
[% INCLUDE 'select2.inc' %]
|
||||
[% Asset.js("js/catalog.js") | $raw %]
|
||||
|
|
|
@ -100,6 +100,11 @@
|
|||
|
||||
[% MACRO jsinclude BLOCK %]
|
||||
[% INCLUDE 'catalog-strings.inc' %]
|
||||
[% Asset.js("lib/dayjs/dayjs.min.js") | $raw %]
|
||||
[% Asset.js("lib/dayjs/plugin/isSameOrAfter.js") | $raw %]
|
||||
[% Asset.js("lib/dayjs/plugin/isSameOrBefore.js") | $raw %]
|
||||
<script>dayjs.extend(window.dayjs_plugin_isSameOrAfter)</script>
|
||||
<script>dayjs.extend(window.dayjs_plugin_isSameOrBefore)</script>
|
||||
[% INCLUDE 'calendar.inc' %]
|
||||
[% INCLUDE 'select2.inc' %]
|
||||
[% Asset.js("js/catalog.js") | $raw %]
|
||||
|
|
|
@ -518,6 +518,10 @@
|
|||
[% INCLUDE 'catalog-strings.inc' %]
|
||||
[% INCLUDE 'modals/checkout_renewals.inc' %]
|
||||
[% INCLUDE 'js-date-format.inc' %]
|
||||
[% Asset.js("lib/dayjs/plugin/isSameOrAfter.js") | $raw %]
|
||||
[% Asset.js("lib/dayjs/plugin/isSameOrBefore.js") | $raw %]
|
||||
<script>dayjs.extend(window.dayjs_plugin_isSameOrAfter)</script>
|
||||
<script>dayjs.extend(window.dayjs_plugin_isSameOrBefore)</script>
|
||||
[% INCLUDE 'js-patron-format.inc' %]
|
||||
[% INCLUDE 'calendar.inc' %]
|
||||
[% INCLUDE 'select2.inc' %]
|
||||
|
|
|
@ -760,46 +760,28 @@ $("#placeBookingModal").on("show.bs.modal", function (e) {
|
|||
}
|
||||
|
||||
// Add hints for days before the start range and after the end range
|
||||
let leadDays = 2;
|
||||
let trailDays = 3;
|
||||
const leadDays = 2;
|
||||
const trailDays = 3;
|
||||
periodPicker.calendarContainer.addEventListener(
|
||||
"mouseover",
|
||||
function (e) {
|
||||
const target = e.target;
|
||||
const startDate = periodPicker.selectedDates[0]
|
||||
? dayjs(periodPicker.selectedDates[0]).startOf(
|
||||
"day"
|
||||
)
|
||||
: null;
|
||||
|
||||
function (event) {
|
||||
const target = event.target;
|
||||
if (target.classList.contains("flatpickr-day")) {
|
||||
const hoverDate = dayjs(target.dateObj).startOf(
|
||||
"day"
|
||||
);
|
||||
let leadStart;
|
||||
let leadEnd;
|
||||
const trailStart = hoverDate
|
||||
.add(0, "day")
|
||||
.startOf("day");
|
||||
const trailEnd = hoverDate
|
||||
.add(trailDays, "day")
|
||||
.startOf("day");
|
||||
const startDate = periodPicker.selectedDates[0]
|
||||
? dayjs(periodPicker.selectedDates[0]).startOf(
|
||||
"day"
|
||||
)
|
||||
: null;
|
||||
|
||||
if (!startDate) {
|
||||
leadStart = hoverDate
|
||||
.subtract(leadDays, "day")
|
||||
.startOf("day");
|
||||
leadEnd = hoverDate
|
||||
.subtract(0, "day")
|
||||
.startOf("day");
|
||||
} else {
|
||||
leadStart = startDate
|
||||
.subtract(leadDays, "day")
|
||||
.startOf("day");
|
||||
leadEnd = startDate
|
||||
.subtract(0, "day")
|
||||
.startOf("day");
|
||||
}
|
||||
const leadStart = startDate
|
||||
? startDate.subtract(leadDays, "day")
|
||||
: hoverDate.subtract(leadDays, "day");
|
||||
const leadEnd = startDate ? startDate : hoverDate;
|
||||
const trailStart = hoverDate;
|
||||
const trailEnd = hoverDate.add(trailDays, "day");
|
||||
|
||||
periodPicker.calendarContainer
|
||||
.querySelectorAll(".flatpickr-day")
|
||||
|
@ -808,57 +790,32 @@ $("#placeBookingModal").on("show.bs.modal", function (e) {
|
|||
dayElem.dateObj
|
||||
).startOf("day");
|
||||
|
||||
if (elemDate.isSame(leadStart)) {
|
||||
dayElem.classList.add("leadRangeStart");
|
||||
} else {
|
||||
dayElem.classList.remove(
|
||||
"leadRangeStart"
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
elemDate >= leadStart &&
|
||||
elemDate < leadEnd
|
||||
) {
|
||||
dayElem.classList.add("leadRange");
|
||||
} else {
|
||||
dayElem.classList.remove("leadRange");
|
||||
}
|
||||
|
||||
if (elemDate.isSame(leadEnd)) {
|
||||
dayElem.classList.add("leadRangeEnd");
|
||||
} else {
|
||||
dayElem.classList.remove(
|
||||
"leadRangeEnd"
|
||||
);
|
||||
}
|
||||
|
||||
if (elemDate.isSame(trailStart)) {
|
||||
dayElem.classList.add(
|
||||
"trailRangeStart"
|
||||
);
|
||||
} else {
|
||||
dayElem.classList.remove(
|
||||
"trailRangeStart"
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
elemDate > trailStart &&
|
||||
elemDate <= trailEnd
|
||||
) {
|
||||
dayElem.classList.add("trailRange");
|
||||
} else {
|
||||
dayElem.classList.remove("trailRange");
|
||||
}
|
||||
|
||||
if (elemDate.isSame(trailEnd)) {
|
||||
dayElem.classList.add("trailRangeEnd");
|
||||
} else {
|
||||
dayElem.classList.remove(
|
||||
"trailRangeEnd"
|
||||
);
|
||||
}
|
||||
dayElem.classList.toggle(
|
||||
"leadRangeStart",
|
||||
elemDate.isSame(leadStart)
|
||||
);
|
||||
dayElem.classList.toggle(
|
||||
"leadRange",
|
||||
elemDate.isSameOrAfter(leadStart) &&
|
||||
elemDate.isBefore(leadEnd)
|
||||
);
|
||||
dayElem.classList.toggle(
|
||||
"leadRangeEnd",
|
||||
elemDate.isSame(leadEnd)
|
||||
);
|
||||
dayElem.classList.toggle(
|
||||
"trailRangeStart",
|
||||
elemDate.isSame(trailStart)
|
||||
);
|
||||
dayElem.classList.toggle(
|
||||
"trailRange",
|
||||
elemDate.isAfter(trailStart) &&
|
||||
elemDate.isSameOrBefore(trailEnd)
|
||||
);
|
||||
dayElem.classList.toggle(
|
||||
"trailRangeEnd",
|
||||
elemDate.isSame(trailEnd)
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue