raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-06 22:36:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean up event handlers on disconnect in Flatpickr controller

Browse Source
This commit is contained in:
Matt-Yorkley
2023-05-11 12:47:01 +01:00
parent d64a9afece
commit 2ba2a826db
1 changed files with 25 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
app/webpacker/controllers/flatpickr_controller.js
View File

@@ -39,8 +39,8 @@ export default class extends Flatpickr {
};
initialize() {
const datetimepicker = this.enableTimeValue == true;
const mode = this.modeValue == "range" ? "range" : "single";
const datetimepicker = this.enableTimeValue === true;
const mode = this.modeValue === "range" ? "range" : "single";
// sets your language (you can also set some global setting for all time pickers)
this.config = {
altInput: true,
@@ -54,23 +54,34 @@ export default class extends Flatpickr {
plugins: this.plugins(mode, datetimepicker),
mode,
};
window.addEventListener("flatpickr:change", this.onChangeEvent.bind(this));
window.addEventListener("flatpickr:clear", this.clear.bind(this));
}
clear(e) {
this.fp.setDate(null);
connect() {
super.connect();
window.addEventListener("flatpickr:change", this.onChangeEvent);
window.addEventListener("flatpickr:clear", this.clear);
}
disconnect() {
super.disconnect();
window.removeEventListener("flatpickr:change", this.onChangeEvent);
window.removeEventListener("flatpickr:clear", this.clear);
}
clear = (e) => {
this.fp.setDate(null);
};
open() {
this.fp.element.dispatchEvent(new Event("focus"));
if (!this.fp.selectedDates.length) {
this.setDefaultDateValue();
}
}
onChangeEvent(e) {
onChangeEvent = (e) => {
if (
this.modeValue == "range" &&
this.modeValue === "range" &&
this.hasStartTarget &&
this.hasEndTarget &&
e.detail.startDate &&
@@ -84,10 +95,10 @@ export default class extends Flatpickr {
// single date mode
this.fp.setDate(e.detail.date);
}
}
};
change(selectedDates, dateStr, instance) {
if (this.hasStartTarget && this.hasEndTarget && this.modeValue == "range") {
if (this.hasStartTarget && this.hasEndTarget && this.modeValue === "range") {
this.startTarget.value = selectedDates[0]
? this.fp.formatDate(selectedDates[0], this.config.dateFormat)
: "";
@@ -112,11 +123,9 @@ export default class extends Flatpickr {
plugins = (mode, datetimepicker) => {
const buttons = [{ label: Spree.translations.close }];
if (mode == "single") {
if (mode === "single") {
buttons.unshift({
label: datetimepicker
? Spree.translations.now
: Spree.translations.today,
label: datetimepicker ? Spree.translations.now : Spree.translations.today,
});
}
return [
@@ -132,8 +141,8 @@ export default class extends Flatpickr {
// Memorize index used for the 'Close' and 'Today|Now' buttons
// it has index of 1 in case of single mode (ie. can set Today or Now date)
// it has index of 0 in case of range mode (no Today or Now button)
const closeButtonIndex = this.modeValue == "range" ? 0 : 1;
const todayButtonIndex = this.modeValue == "range" ? null : 0;
const closeButtonIndex = this.modeValue === "range" ? 0 : 1;
const todayButtonIndex = this.modeValue === "range" ? null : 0;
switch (index) {
case todayButtonIndex:
fp.setDate(new Date(), true);