decidim-core 0.28.3 → 0.29.0.rc1

data/app/packs/src/decidim/datepicker/datepicker_listeners.js

@@ -0,0 +1,78 @@
+// Utility helper functions for the date and time picker functionality
+
+export const timeKeyDownListener = (time) => {
+  time.addEventListener("keydown", (event) => {
+    switch (event.key) {
+    case "ArrowUp":
+      break;
+    case "ArrowDown":
+      break;
+    case "ArrowLeft":
+      break;
+    case "ArrowRight":
+      break;
+    case "Backspace":
+      break;
+    case "Tab":
+      break;
+    case ":":
+      break;
+    default:
+      if ((/[0-9]/).test(event.key)) {
+        break;
+      } else if (event.ctrlKey === true || event.altKey === true) {
+        break;
+      } else {
+        event.preventDefault();
+      };
+    };
+  });
+};
+export const timeBeforeInputListener = (time) => {
+  time.addEventListener("beforeinput", (event) => {
+    if (time.value.length >= 5 && event.inputType === "insertText" && event.target.selectionStart === event.target.selectionEnd) {
+      event.preventDefault();
+    };
+  });
+};
+
+export const dateKeyDownListener = (date) => {
+  date.addEventListener("keydown", (event) => {
+    switch (event.key) {
+    case "ArrowUp":
+      break;
+    case "ArrowDown":
+      break;
+    case "ArrowLeft":
+      break;
+    case "ArrowRight":
+      break;
+    case "Backspace":
+      break;
+    case "Tab":
+      break;
+    case "Delete":
+      break;
+    case ".":
+      break;
+    case "/":
+      break;
+    default:
+      if ((/[0-9]/).test(event.key)) {
+        break;
+      } else if (event.ctrlKey === true || event.altKey === true) {
+        break;
+      } else {
+        event.preventDefault();
+      };
+    };
+  });
+};
+
+export const dateBeforeInputListener = (date) => {
+  date.addEventListener("beforeinput", (event) => {
+    if (date.value.length >= 10 && event.inputType === "insertText" && event.target.selectionStart === event.target.selectionEnd) {
+      event.preventDefault();
+    };
+  });
+};

data/app/packs/src/decidim/datepicker/form_datepicker.js

@@ -0,0 +1,91 @@
+/* eslint-disable require-jsdoc */
+import { defineCustomElements } from "wc-datepicker/dist/loader";
+import generateDatePicker from "src/decidim/datepicker/generate_datepicker";
+import generateTimePicker from "src/decidim/datepicker/generate_timepicker";
+import { formatInputDate, formatInputTime } from "src/decidim/datepicker/datepicker_functions";
+import { getDictionary } from "src/decidim/i18n";
+
+export default function formDatePicker(input) {
+
+  const i18nDate = getDictionary("date.formats");
+  const i18nDateHelp = getDictionary("date.formats.help");
+  const i18nTime = getDictionary("time");
+  const i18nTimeHelp = getDictionary("time.formats.help");
+  const formats = { order: i18nDate.order, separator: i18nDate.separator, time: i18nTime.clock_format || 24 }
+
+  if (!customElements.get("wc-datepicker")) {
+    defineCustomElements();
+  };
+
+  if (!input.id) {
+    input.id = "demo-datepicker"
+  };
+
+  input.style.display = "none";
+  const label = input.closest("label");
+
+  const row = document.createElement("div");
+  row.setAttribute("id", `${input.id}_datepicker_row`);
+  row.setAttribute("class", "datepicker__datepicker-row");
+
+  const helpTextContainer = document.createElement("div");
+  helpTextContainer.setAttribute("class", "datepicker__help-text-container");
+
+  const helpTextDate = document.createElement("span");
+  helpTextDate.setAttribute("class", "help-text datepicker__help-date");
+  helpTextDate.innerText = i18nDateHelp.date_format;
+
+  const helpTextTime = document.createElement("span");
+  helpTextTime.setAttribute("class", "help-text datepicker__help-time");
+  helpTextTime.innerText = i18nTimeHelp.time_format;
+
+  helpTextContainer.appendChild(helpTextDate);
+
+  if (label) {
+    label.after(row);
+  } else {
+    input.after(row);
+  };
+
+  generateDatePicker(input, row, formats);
+
+  if (input.type === "datetime-local") {
+    generateTimePicker(input, row, formats);
+    helpTextContainer.appendChild(helpTextTime);
+  };
+
+  if (!input.getAttribute("hide_help")) {
+    row.before(helpTextContainer);
+  };
+
+  if (formats.time === 12) {
+    document.getElementById(`period_am_${input.id}`).checked = true;
+  };
+
+  const inputFieldValue = document.getElementById(`${input.id}`).value;
+
+  if (inputFieldValue !== "") {
+    if (input.type === "datetime-local") {
+      const dateTimeValue = inputFieldValue.split("T");
+      const date = dateTimeValue[0];
+      const time = dateTimeValue[1];
+
+      document.getElementById(`${input.id}_date`).value = formatInputDate(date, formats, input);
+      document.getElementById(`${input.id}_time`).value = formatInputTime(time, formats.time, input);
+    } else if (input.type === "date") {
+      document.getElementById(`${input.id}_date`).value = formatInputDate(inputFieldValue, formats, input);
+    };
+  };
+
+  if (document.querySelector('button[name="commit"]')) {
+    document.querySelector('button[name="commit"]').addEventListener("click", () => {
+      if (input.classList.contains("is-invalid-input")) {
+        document.getElementById(`${input.id}_date`).classList.add("is-invalid-input");
+        document.getElementById(`${input.id}_time`).classList.add("is-invalid-input");
+        input.parentElement.querySelectorAll(".form-error").forEach((error) => {
+          document.getElementById(`${input.id}_datepicker_row`).after(error);
+        });
+      };
+    });
+  };
+};

data/app/packs/src/decidim/datepicker/generate_datepicker.js

@@ -0,0 +1,148 @@
+/* eslint-disable require-jsdoc */
+import icon from "src/decidim/icon"
+import { dateToPicker, formatDate, displayDate, formatTime, calculateDatepickerPos } from "src/decidim/datepicker/datepicker_functions"
+import { dateKeyDownListener, dateBeforeInputListener } from "src/decidim/datepicker/datepicker_listeners"
+import { getDictionary } from "src/decidim/i18n"
+
+export default function generateDatePicker(input, row, formats) {
+  const i18n = getDictionary("date.buttons");
+
+  const dateColumn = document.createElement("div");
+  dateColumn.setAttribute("class", "datepicker__date-column");
+
+  const date = document.createElement("input");
+  date.setAttribute("id", `${input.id}_date`);
+  date.setAttribute("type", "text");
+
+  const calendar = document.createElement("button");
+  calendar.innerHTML = icon("calendar-line");
+  calendar.setAttribute("class", "datepicker__calendar-button");
+  calendar.setAttribute("type", "button");
+
+  dateColumn.appendChild(date);
+  dateColumn.appendChild(calendar);
+  row.append(dateColumn);
+
+  const datePickerContainer = document.createElement("div");
+  datePickerContainer.setAttribute("class", "datepicker__container");
+  datePickerContainer.style.display = "none";
+
+  const datePicker = document.createElement("wc-datepicker");
+  datePicker.setAttribute("id", `${date.id}_datepicker`);
+  datePicker.setAttribute("locale", `${document.documentElement.getAttribute("lang") || "en"}`);
+
+  datePickerContainer.appendChild(datePicker);
+
+  const closeCalendar = document.createElement("button");
+  closeCalendar.innerText = i18n.close;
+  closeCalendar.setAttribute("class", "datepicker__close-calendar button button__transparent-secondary button__xs");
+  closeCalendar.setAttribute("type", "button");
+
+  const pickCalendar = document.createElement("button");
+  pickCalendar.innerText = i18n.select;
+  pickCalendar.setAttribute("class", "datepicker__pick-calendar button button__secondary button__xs");
+  pickCalendar.setAttribute("disabled", true);
+  pickCalendar.setAttribute("type", "button");
+
+  datePickerContainer.appendChild(pickCalendar);
+  datePickerContainer.appendChild(closeCalendar);
+
+  dateColumn.appendChild(datePickerContainer);
+
+  let prevDate = null;
+  let defaultTime = input.getAttribute("default_time") || "00:00"
+
+  const datePickerDisplay = (event) => {
+    if (!dateColumn.contains(event.target)) {
+      datePickerContainer.style.display = "none";
+      document.removeEventListener("click", datePickerDisplay)
+    };
+  };
+
+  dateKeyDownListener(date);
+  dateBeforeInputListener(date);
+
+  date.addEventListener("paste", (event) => {
+    event.preventDefault();
+    const value = event.clipboardData.getData("text/plain");
+    if ((/^[0-9/.-]+$/).test(value)) {
+      date.value = value.replaceAll(/[/.-]/g, formats.separator);
+
+      if (input.type === "date") {
+        input.value = `${formatDate(date.value, formats)}`;
+      } else if (input.type === "datetime-local") {
+        input.value = `${formatDate(date.value, formats)}T${formatTime(document.querySelector(`#${input.id}_time`).value, formats.time, input.id) || defaultTime}`;
+      };
+    };
+  });
+
+  date.addEventListener("focus", () => {
+    datePickerContainer.style.display = "none";
+  });
+
+  date.addEventListener("keyup", () => {
+    if (date.value.length === 10) {
+      date.value = date.value.replaceAll(/[/.-]/g, formats.separator);
+      prevDate = dateToPicker(date.value, formats);
+      if (input.type === "date") {
+        input.value = `${formatDate(date.value, formats)}`;
+      } else if (input.type === "datetime-local") {
+        input.value = `${formatDate(date.value, formats)}T${formatTime(document.querySelector(`#${input.id}_time`).value, formats.time, input.id) || defaultTime}`;
+      };
+    };
+  });
+
+  let pickedDate = null;
+
+  datePicker.addEventListener("selectDate", (event) => {
+    pickCalendar.removeAttribute("disabled");
+    pickedDate = event.detail;
+  });
+
+  pickCalendar.addEventListener("click", (event) => {
+    event.preventDefault();
+
+    date.value = displayDate(datePicker.value, formats);
+    prevDate = pickedDate;
+    if (input.type === "date") {
+      input.value = `${pickedDate}`;
+    } else if (input.type === "datetime-local") {
+      input.value = `${pickedDate}T${formatTime(document.querySelector(`#${input.id}_time`).value, formats.time, input.id) || defaultTime}`;
+    };
+    datePickerContainer.style.display = "none";
+  });
+
+  calendar.addEventListener("click", (event) => {
+    event.preventDefault();
+
+    if (input.value !== "") {
+      if (input.type === "date") {
+        prevDate = input.value;
+      } else if (input.type === "datetime-local") {
+        prevDate = input.value.split("T")[0];
+      };
+    };
+
+    if (prevDate !== null && new Date(prevDate).toString() !== "Invalid Date") {
+      datePicker.value = new Date(prevDate);
+    };
+    pickedDate = null;
+    datePickerContainer.style.display = "block";
+
+    document.addEventListener("click", datePickerDisplay);
+
+    if (document.querySelector(".item__edit-sticky")) {
+      const datePickerPos = calculateDatepickerPos(datePicker)
+      if (datePickerPos < 0) {
+        const layoutWrapper = document.querySelector(".layout-wrapper");
+
+        layoutWrapper.style.height = `${layoutWrapper.clientHeight - datePickerPos}px`
+      };
+    };
+  });
+
+  closeCalendar.addEventListener("click", (event) => {
+    event.preventDefault();
+    datePickerContainer.style.display = "none";
+  });
+};

data/app/packs/src/decidim/datepicker/generate_timepicker.js

@@ -0,0 +1,298 @@
+/* eslint-disable require-jsdoc */
+import icon from "src/decidim/icon"
+import { changeHourDisplay, changeMinuteDisplay, formatDate, hourDisplay, minuteDisplay, formatTime, setHour, setMinute, updateTimeValue, updateInputValue } from "src/decidim/datepicker/datepicker_functions"
+import { timeKeyDownListener, timeBeforeInputListener } from "src/decidim/datepicker/datepicker_listeners";
+import { getDictionary } from "src/decidim/i18n";
+
+export default function generateTimePicker(input, row, formats) {
+  const i18n = getDictionary("time.buttons");
+
+  const timeColumn = document.createElement("div");
+  timeColumn.setAttribute("class", "datepicker__time-column");
+
+  const time = document.createElement("input");
+  time.setAttribute("id", `${input.id}_time`);
+  time.setAttribute("type", "text");
+
+  const clock = document.createElement("button");
+  clock.innerHTML = icon("time-line")
+  clock.setAttribute("class", "datepicker__clock-button");
+  clock.setAttribute("type", "button");
+
+  timeColumn.appendChild(time);
+  timeColumn.appendChild(clock);
+
+  row.append(timeColumn);
+
+  const hourColumn = document.createElement("div");
+  hourColumn.setAttribute("class", "datepicker__hour-column");
+
+  const hours = document.createElement("input");
+  hours.setAttribute("class", "datepicker__hour-picker");
+  hours.setAttribute("readonly", "true");
+  hours.setAttribute("disabled", "true");
+
+  const hourUp = document.createElement("button");
+  hourUp.setAttribute("class", "datepicker__hour-up");
+  hourUp.innerHTML = icon("arrow-drop-up-line", {class: "w-10 h-6 pr-1"});
+  hourUp.setAttribute("type", "button");
+
+  const hourDown = document.createElement("button");
+  hourDown.setAttribute("class", "datepicker__hour-down");
+  hourDown.innerHTML = icon("arrow-drop-down-line", {class: "w-10 h-6 pr-1"});
+  hourDown.setAttribute("type", "button");
+
+  hourColumn.appendChild(hours);
+  hourColumn.appendChild(hourUp);
+  hourColumn.appendChild(hourDown);
+
+  const minuteColumn = document.createElement("div");
+  minuteColumn.setAttribute("class", "datepicker__minute-column");
+
+  const minutes = document.createElement("input");
+  minutes.setAttribute("class", "datepicker__minute-picker");
+  minutes.setAttribute("readonly", "true");
+  minutes.setAttribute("disabled", "true");
+
+  const minuteUp = document.createElement("button");
+  minuteUp.setAttribute("class", "datepicker__minute-up");
+  minuteUp.innerHTML = icon("arrow-drop-up-line", {class: "w-10 h-6 pr-1"});
+  minuteUp.setAttribute("type", "button");
+
+  const minuteDown = document.createElement("button");
+  minuteDown.setAttribute("class", "datepicker__minute-down");
+  minuteDown.innerHTML = icon("arrow-drop-down-line", {class: "w-10 h-6 pr-1"});
+  minuteDown.setAttribute("type", "button");
+
+  minuteColumn.appendChild(minutes);
+  minuteColumn.appendChild(minuteUp);
+  minuteColumn.appendChild(minuteDown);
+
+  const timeRow = document.createElement("div");
+  timeRow.setAttribute("class", "datepicker__time-row");
+
+  timeRow.appendChild(hourColumn);
+  timeRow.appendChild(minuteColumn);
+
+
+  // US FORMAT
+
+  if (formats.time === 12) {
+    const periodColumn = document.createElement("div");
+    periodColumn.setAttribute("class", "datepicker__period-column");
+
+    const periodAm = document.createElement("input");
+    periodAm.setAttribute("type", "radio");
+    periodAm.setAttribute("name", `period_${input.id}`);
+    periodAm.setAttribute("id", `period_am_${input.id}`);
+    periodAm.setAttribute("class", "datepicker__period-am");
+    const periodAmLabel = document.createElement("span");
+    periodAmLabel.innerText = "AM"
+
+    const periodPm = document.createElement("input");
+    periodPm.setAttribute("type", "radio");
+    periodPm.setAttribute("name", `period_${input.id}`);
+    periodPm.setAttribute("id", `period_pm_${input.id}`);
+    periodPm.setAttribute("class", "datepicker__period-pm");
+    const periodPmLabel = document.createElement("span");
+    periodPmLabel.innerText = "PM"
+
+    periodColumn.appendChild(periodAm);
+    periodColumn.appendChild(periodAmLabel);
+    periodColumn.appendChild(periodPm);
+    periodColumn.appendChild(periodPmLabel);
+    timeColumn.appendChild(periodColumn);
+
+    periodAm.addEventListener("click", () => {
+      input.value = `${formatDate(document.querySelector(`#${input.id}_date`).value, formats)}T${formatTime(time.value, formats.time, input.id)}`;
+    });
+
+    periodPm.addEventListener("click", () => {
+      input.value = `${formatDate(document.querySelector(`#${input.id}_date`).value, formats)}T${formatTime(time.value, formats.time, input.id)}`;
+    });
+  };
+
+  const hourLabel = document.createElement("span");
+  hourLabel.innerText = "Hour";
+
+  const hourLabelContainer = document.createElement("div");
+  hourLabelContainer.setAttribute("class", "datepicker__hour-label-container");
+
+  hourLabelContainer.appendChild(hourLabel);
+
+  const minuteLabel = document.createElement("span");
+  minuteLabel.innerText = "Minute";
+
+  const minuteLabelContainer = document.createElement("div");
+  minuteLabelContainer.setAttribute("class", "datepicker__minute-label-container");
+
+  minuteLabelContainer.appendChild(minuteLabel);
+
+  const labels = document.createElement("div");
+  labels.setAttribute("class", "datepicker__label-row");
+
+  labels.appendChild(hourLabelContainer);
+  labels.appendChild(minuteLabelContainer);
+
+  const timePicker = document.createElement("div");
+  timePicker.setAttribute("id", `${time.id}_timepicker`);
+  timePicker.setAttribute("class", "datepicker__time-frame");
+  timePicker.style.display = "none";
+
+  timePicker.appendChild(timeRow);
+  timePicker.appendChild(labels);
+
+  const closeClock = document.createElement("button");
+  closeClock.innerText = i18n.close;
+  closeClock.setAttribute("class", "datepicker__close-clock button button__transparent-secondary button__xs");
+  closeClock.setAttribute("type", "button");
+
+  const resetClock = document.createElement("button");
+  resetClock.innerText = i18n.reset;
+  resetClock.setAttribute("class", "datepicker__reset-clock button button__xs button__text-secondary");
+  resetClock.setAttribute("type", "button");
+
+  const selectClock = document.createElement("button");
+  selectClock.innerText = i18n.select;
+  selectClock.setAttribute("class", "datepicker__select-clock button button__secondary button__xs");
+  selectClock.setAttribute("type", "button");
+
+  timePicker.appendChild(resetClock);
+  timePicker.appendChild(selectClock);
+  timePicker.appendChild(closeClock);
+
+  clock.after(timePicker);
+
+  const timePickerDisplay = (event) => {
+    if (!timeColumn.contains(event.target)) {
+      timePicker.style.display = "none";
+      document.removeEventListener("click", timePickerDisplay)
+    }
+  };
+
+  let hour = 0;
+
+  if (formats.time === 12) {
+    hour = 1;
+  };
+
+  let minute = 0;
+
+  if (input.value !== "") {
+    hour = setHour(input.value.split("T")[1], formats.time);
+    minute = setMinute(input.value.split("T")[1]);
+  };
+
+  time.addEventListener("focus", () => {
+    timePicker.style.display = "none";
+  })
+
+  time.addEventListener("paste", (event) => {
+    event.preventDefault();
+    const value = event.clipboardData.getData("text/plain");
+
+    let formatGuard = (/^([0-9]|0[0-9]|1[0-9]|2[0-3])(.|:)[0-5][0-9]/).test(value);
+
+    if (formats.time === 12) {
+      formatGuard = (/^([0-9]|0[0-9]|1[0-2])(.|:)[0-5][0-9]/).test(value);
+    };
+
+    if (formatGuard) {
+      if ((/(^[0-9])(.|:)[0-5][0-9]/).test(value)) {
+        hour = Number(value[0]);
+        minute = Number(`${value[2]}${value[3]}`);
+      } else if ((/(^0[0-9])(.|:)[0-5][0-9]/).test(value)) {
+        hour = Number(value[1]);
+        minute = Number(`${value[3]}${value[4]}`);
+      } else {
+        hour = Number(`${value[0]}${value[1]}`);
+        minute = Number(`${value[3]}${value[4]}`);
+      }
+      hours.value = hourDisplay(hour);
+      minutes.value = minuteDisplay(minute);
+      time.value = `${hourDisplay(hour)}:${minuteDisplay(minute)}`;
+      input.value = `${formatDate(document.querySelector(`#${input.id}_date`).value, formats)}T${formatTime(time.value, formats.time, input.id)}`;
+    }
+  });
+
+  timeKeyDownListener(time);
+  timeBeforeInputListener(time);
+
+  time.addEventListener("keyup", () => {
+    if (time.value.length === 5) {
+      const inputHour = time.value.split(":")[0];
+      const inputMinute = time.value.split(":")[1];
+
+      if (formats.time === 12 && Number(inputHour) <= 12 && Number(inputMinute) <= 59 ||
+          formats.time === 24 && Number(inputHour) <= 23 && Number(inputMinute) <= 59) {
+        hour = Number(inputHour);
+        minute = Number(inputMinute);
+
+        hours.value = hourDisplay(hour);
+        minutes.value = minuteDisplay(minute);
+        input.value = `${formatDate(document.querySelector(`#${input.id}_date`).value, formats)}T${formatTime(time.value, formats.time, input.id)}`;
+      };
+    } else if (time.value.length === 0) {
+      hours.value = "";
+      minutes.value = "";
+    };
+  });
+
+  resetClock.addEventListener("click", (event) => {
+    event.preventDefault();
+    if (formats.time === 24) {
+      hour = 0;
+    } else {
+      hour = 1;
+    }
+    minute = 0;
+
+    hours.value = hourDisplay(hour);
+    minutes.value = minuteDisplay(minute);
+    time.value = "";
+  });
+
+  closeClock.addEventListener("click", (event) => {
+    event.preventDefault();
+    timePicker.style.display = "none";
+  });
+
+  selectClock.addEventListener("click", (event) => {
+    event.preventDefault();
+    updateTimeValue(time, hour, minute);
+    updateInputValue(input, formats, time);
+    timePicker.style.display = "none";
+  });
+
+  clock.addEventListener("click", (event) => {
+    event.preventDefault();
+    timePicker.style.display = "block";
+    document.addEventListener("click", timePickerDisplay);
+    hours.value = hourDisplay(hour);
+    minutes.value = minuteDisplay(minute);
+  });
+
+  hourUp.addEventListener("click", (event) => {
+    event.preventDefault();
+    hour = changeHourDisplay("increase", hour, formats.time);
+    hours.value = hourDisplay(hour);
+  });
+
+  hourDown.addEventListener("click", (event) => {
+    event.preventDefault();
+    hour = changeHourDisplay("decrease", hour, formats.time);
+    hours.value = hourDisplay(hour);
+  });
+
+  minuteUp.addEventListener("click", (event) => {
+    event.preventDefault();
+    minute = changeMinuteDisplay("increase", minute);
+    minutes.value = minuteDisplay(minute);
+  });
+
+  minuteDown.addEventListener("click", (event) => {
+    event.preventDefault();
+    minute = changeMinuteDisplay("decrease", minute);
+    minutes.value = minuteDisplay(minute);
+  });
+};