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:
Martin Renvoize 2024-03-26 13:38:34 +00:00 committed by Katrin Fischer
parent 7174d05774
commit 46ef8b1594
Signed by: kfischer
GPG key ID: 0EF6E2C03357A834
8 changed files with 74 additions and 86 deletions

View file

@ -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>

View file

@ -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 %]

View file

@ -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 %]

View file

@ -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 %]

View file

@ -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 %]

View file

@ -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 %]

View file

@ -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' %]

View file

@ -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)
);
});
}
}