recurrencePicker.mjs 6.59 KB
Newer Older
ransome1's avatar
ransome1 committed
1
"use strict";
2
3
import { userData, translations, handleError } from "../render.js";
import { _paq } from "./matomo.mjs";
ransome1's avatar
ransome1 committed
4
import { resizeInput } from "./form.mjs";
5
import { RecExtension } from "./todotxtExtensions.mjs";
ransome1's avatar
ransome1 committed
6
import * as recurrences from "./recurrences.mjs";
7

ransome1's avatar
ransome1 committed
8
9
10
11
12
const radioRecurrence = document.querySelectorAll("#recurrencePicker .selection");
const recurrencePickerContainer = document.getElementById("recurrencePickerContainer");
const recurrencePickerInput = document.getElementById("recurrencePickerInput");
const recurrencePickerSpinner = document.getElementById("recurrencePickerSpinner");
const recurrencePickerDay = document.getElementById("recurrencePickerDay");
13
const recurrencePickerBusinessDay = document.getElementById("recurrencePickerBusinessDay");
ransome1's avatar
ransome1 committed
14
15
16
17
18
19
const recurrencePickerWeek = document.getElementById("recurrencePickerWeek");
const recurrencePickerMonth = document.getElementById("recurrencePickerMonth");
const recurrencePickerYear = document.getElementById("recurrencePickerYear");
const recurrencePickerEvery = document.getElementById("recurrencePickerEvery");
const recurrencePickerNoRecurrence = document.getElementById("recurrencePickerNoRecurrence");

20
21
22
23
24
25
26
recurrencePickerBusinessDay.innerHTML = translations.bday;
recurrencePickerWeek.innerHTML = translations.week;
recurrencePickerMonth.innerHTML = translations.month;
recurrencePickerDay.innerHTML = translations.day;
recurrencePickerYear.innerHTML = translations.year;
recurrencePickerNoRecurrence.innerHTML = translations.noRecurrence;
recurrencePickerEvery.innerHTML = translations.every;
ransome1's avatar
ransome1 committed
27

28
recurrencePickerInput.onfocus = function(element) { showRecurrences(element) };
ransome1's avatar
ransome1 committed
29
recurrencePickerInput.placeholder = translations.noRecurrence;
30
31
32
33
34
35
recurrencePickerContainer.addEventListener("keyup", function(event) {
  if(event.key === "Escape") {
    this.classList.remove("is-active");
    document.getElementById("modalFormInput").focus();
  }
});
36
37
38

//resizeInput(recurrencePickerInput);

ransome1's avatar
ransome1 committed
39
40
41
export function setInput(recurrence) {
  try {
    let recSplit = recurrences.splitRecurrence(recurrence);
ransome1's avatar
ransome1 committed
42
    let label;
ransome1's avatar
ransome1 committed
43
44
45
46
    if(recSplit.period !== undefined) {
      if(recSplit.mul > 1) {
        switch (recSplit.period) {
          case "d":
47
48
49
50
            label = translations.day_plural;
            break;
          case "b":
            label = translations.bday_plural;
ransome1's avatar
ransome1 committed
51
52
            break;
          case "w":
53
            label = translations.week_plural;
ransome1's avatar
ransome1 committed
54
55
            break;
          case "m":
56
            label = translations.month_plural;
ransome1's avatar
ransome1 committed
57
58
            break;
          case "y":
59
            label = translations.year_plural;
ransome1's avatar
ransome1 committed
60
61
            break;
        }
62
        label = translations.every + " " + recSplit.mul + " " + label;
ransome1's avatar
ransome1 committed
63
64
65
66
67
      } else {
        switch (recSplit.period) {
          case "d":
            label = translations.daily;
            break;
68
69
          case "b":
            label = translations.bdaily;
70
            break;
ransome1's avatar
ransome1 committed
71
72
73
74
75
76
77
78
79
80
81
          case "w":
            label = translations.weekly;
            break;
          case "m":
            label = translations.monthly;
            break;
          case "y":
            label = translations.yearly;
            break;
        }
      }
ransome1's avatar
ransome1 committed
82
83
84
      recurrencePickerInput.value = label;
    } else {
      recurrencePickerInput.value = null;
ransome1's avatar
ransome1 committed
85
86
87
88
89
90
91
92
93
94
95
96
    }
    resizeInput(recurrencePickerInput);
    // trigger matomo event
    if(userData.matomoEvents) _paq.push(["trackEvent", "Form", "Recurrence selected: " + label]);
    return Promise.resolve("Success: Recurrence added");
  } catch(error) {
    error.functionName = setInput.name;
    return Promise.reject(error);
  }
}
function showRecurrences() {
  recurrencePickerContainer.classList.toggle("is-active");
ransome1's avatar
ransome1 committed
97
  document.getElementById("recurrencePickerIncrease").focus();
ransome1's avatar
ransome1 committed
98
  // get object from current input
99
  let todo = new TodoTxtItem(document.getElementById("modalFormInput").value, [ new RecExtension() ]);
ransome1's avatar
ransome1 committed
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
  let recSplit = recurrences.splitRecurrence(todo.rec);
  setRecurrenceOptionLabels(recSplit.mul);
  recurrencePickerSpinner.value = recSplit.mul;
  // function to apply recurrence's value on changes
  const applyRecurrenceValue = function() {
    let value = recSplit.toString();
    if(value !== undefined) {
      todo.rec = value;
      todo.recString = value;
    } else {
      // clear RecExtension
      todo.rec = undefined;
      todo.recString = undefined;
    }
    setInput(value).then(function(result) {
      console.log(result);
    }).catch(function(error) {
      handleError(error);
    });
119
    document.getElementById("modalFormInput").value = todo.toString();
ransome1's avatar
ransome1 committed
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
  }
  recurrencePickerSpinner.onchange = function() {
    recSplit.mul = Number(recurrencePickerSpinner.value);
    setRecurrenceOptionLabels(recSplit.mul);
    applyRecurrenceValue();
  }
  document.getElementById("recurrencePickerIncrease").onclick = function(el) {
    el.preventDefault();
    recurrencePickerSpinner.value = parseInt(recurrencePickerSpinner.value) + 1;
    recSplit.mul = Number(recurrencePickerSpinner.value);
    setRecurrenceOptionLabels(recSplit.mul);
    applyRecurrenceValue();
  }
  document.getElementById("recurrencePickerDecrease").onclick = function(el) {
    el.preventDefault();
    if(parseInt(recurrencePickerSpinner.value)>1) {
      recurrencePickerSpinner.value = parseInt(recurrencePickerSpinner.value)-1;
      recSplit.mul = Number(recurrencePickerSpinner.value);
      setRecurrenceOptionLabels(recSplit.mul);
      applyRecurrenceValue();
    }
  }
  radioRecurrence.forEach(function(radioButton) {
    // remove old selection
    radioButton.checked = false;
    // set pre selection
    if(recSplit.period === radioButton.value) radioButton.checked = true;
    radioButton.onclick = function() {
      recSplit.period = radioButton.value;
      applyRecurrenceValue();
      // hide the picker
      recurrencePickerContainer.classList.remove("is-active");
152
      document.getElementById("modalFormInput").focus();
ransome1's avatar
ransome1 committed
153
154
155
156
157
158
159
      // trigger matomo event
      if(userData.matomoEvents) _paq.push(["trackEvent", "Form", "Recurrence selected: " + recSplit.period]);
    }
  });
}
function setRecurrenceOptionLabels(mul) {
  if(mul>1) {
160
    recurrencePickerBusinessDay.innerHTML = translations.bday_plural;
ransome1's avatar
ransome1 committed
161
162
163
164
165
    recurrencePickerDay.innerHTML = translations.day_plural;
    recurrencePickerWeek.innerHTML = translations.week_plural;
    recurrencePickerMonth.innerHTML = translations.month_plural;
    recurrencePickerYear.innerHTML = translations.year_plural;
  } else {
166
    recurrencePickerBusinessDay.innerHTML = translations.bday;
ransome1's avatar
ransome1 committed
167
168
169
170
171
172
    recurrencePickerDay.innerHTML = translations.day;
    recurrencePickerWeek.innerHTML = translations.week;
    recurrencePickerMonth.innerHTML = translations.month;
    recurrencePickerYear.innerHTML = translations.year;
  }
}