datePicker.mjs 2.99 KB
Newer Older
ransome1's avatar
ransome1 committed
1
"use strict";
2
3
import { translations, userData } from "../render.js";
import { _paq } from "./matomo.mjs";
ransome1's avatar
ransome1 committed
4
5
import { resizeInput } from "./form.mjs";
import { RecExtension } from "./todotxtExtensions.mjs";
6
7
import "../../node_modules/jstodotxt/jsTodoExtensions.js";
import "../../node_modules/jstodotxt/jsTodoTxt.js";
ransome1's avatar
ransome1 committed
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import Datepicker from "../../node_modules/vanillajs-datepicker/js/Datepicker.js";
import de from "../../node_modules/vanillajs-datepicker/js/i18n/locales/de.js";
import it from "../../node_modules/vanillajs-datepicker/js/i18n/locales/it.js";
import es from "../../node_modules/vanillajs-datepicker/js/i18n/locales/es.js";
import fr from "../../node_modules/vanillajs-datepicker/js/i18n/locales/fr.js";
const autoCompleteContainer = document.getElementById("autoCompleteContainer");
const modalFormInput = document.getElementById("modalFormInput");
const datePickerInput = document.getElementById("datePickerInput");
datePickerInput.onfocus = function () {
  datePicker.update();
  autoCompleteContainer.classList.remove("is-active");
  resizeInput(datePickerInput);
};
datePickerInput.addEventListener("changeDate", function (e) {
  // we only update the object if there is a date selected. In case of a refresh it would throw an error otherwise
  if(e.detail.date) {
    // generate the object on what is written into input, so we don't overwrite previous inputs of user
25
    let todo = new TodoTxtItem(modalFormInput.value, [ new DueExtension(), new HiddenExtension(), new RecExtension() ]);
ransome1's avatar
ransome1 committed
26
27
28
29
30
31
    todo.due = new Date(e.detail.date);
    todo.dueString = new Date(e.detail.date.getTime() - (e.detail.date.getTimezoneOffset() * 60000 )).toISOString().split("T")[0];
    // if suggestion box was open, it needs to be closed
    autoCompleteContainer.classList.remove("is-active");
    autoCompleteContainer.blur();
    // if a due date is set, the recurrence picker will be shown);
32
33
    modalFormInput.value = todo.toString();
    modalFormInput.focus();
ransome1's avatar
ransome1 committed
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
    resizeInput(datePickerInput);
    datePicker.hide();
    // trigger matomo event
    if(userData.matomoEvents) _paq.push(["trackEvent", "Form", "Datepicker used to add date to input"]);
  }
});
datePickerInput.placeholder = translations.formSelectDueDate;
Object.assign(Datepicker.locales, de, it, es, fr);
const datePicker = new Datepicker(datePickerInput, {
  autohide: true,
  language: userData.language,
  format: "yyyy-mm-dd",
  clearBtn: true,
  beforeShowDay: function(date) {
    let today = new Date();
    if (date.getDate() == today.getDate() &&
        date.getMonth() == today.getMonth() &&
        date.getFullYear() == today.getFullYear()) {
      return { classes: 'today'};
    }
  }
});
document.querySelector(".datepicker .clear-btn").onclick = function() {
57
  let todo = new TodoTxtItem(modalFormInput.value, [ new DueExtension(), new HiddenExtension(), new RecExtension() ]);
ransome1's avatar
ransome1 committed
58
59
  todo.due = undefined;
  todo.dueString = undefined;
60
  modalFormInput.value = todo.toString();
ransome1's avatar
ransome1 committed
61
62
63
64
  resizeInput(datePickerInput);
  datePicker.hide();
}
export { datePickerInput, datePicker};