Dirty code but better UI

photoCalendar.js

@@ -13,15 +13,33 @@ class PhotoCalendar {
     img: null,
     photoOffsetX: 0,
     photoOffsetY: 0,
-    year: 2024,
+    year: null,
     centerMonths: false,
   };
 
   constructor() {
+    this.initDarkModeSwitch();
     this.initControls();
     this.onYearChange();
   }
 
+  initDarkModeSwitch() {
+    function setDarkMode(darkModeSelected) {
+      if (darkModeSelected) {
+        document.documentElement.classList.add("darkMode");
+      } else {
+        document.documentElement.classList.remove("darkMode");
+      }
+    }
+    const darkModekCheckbox = document.getElementById("darkModeSwitch_checkbox");
+    darkModekCheckbox.checked = localStorage.getItem("darkMode") || false;
+    setDarkMode(darkModekCheckbox.checked);
+    darkModekCheckbox.addEventListener("change", (e) => {
+      localStorage.setItem("darkMode", e.target.checked);
+      setDarkMode(e.target.checked);
+    });
+  }
+
   overPhotoImg(x, y) {
     return y >= 0 && y <= this.options.calendarStartY;
   }
@@ -34,7 +52,7 @@ class PhotoCalendar {
     }
   }
 
-  getMousePositionInCanvas(x,y) {
+  getMousePositionInCanvas(x, y) {
     const canvas = this.getCanvas();
     const rect = canvas.getBoundingClientRect();
     const scaleX = canvas.width / rect.width;
@@ -48,7 +66,7 @@ class PhotoCalendar {
     let x = this.getEventLocation(e).x;
     let y = this.getEventLocation(e).y;
 
-    const mousePosition = this.getMousePositionInCanvas(x,y);
+    const mousePosition = this.getMousePositionInCanvas(x, y);
     if (this.overPhotoImg(mousePosition.x, mousePosition.y)) {
       this.dragOptions.isDragging = true;
       this.dragOptions.x = x - this.options.photoOffsetX;
@@ -101,6 +119,8 @@ class PhotoCalendar {
 
   initControls() {
     const self = this;
+    this.options.year = new Date().getFullYear() + 1;
+    document.getElementById("year").value = this.options.year;
     document.getElementById("year").addEventListener("change", (e) => {
       self.options.year = e.target.value;
       self.onYearChange();
@@ -252,10 +272,18 @@ class PhotoCalendar {
     ctx.fillText(text, centerX, y);
   }
 
+  getMonthNames() {
+    return Array.from(document.querySelectorAll("[data-months] span")).map((x) => x.innerHTML);
+  }
+
+  getWeekdayNames() {
+    return Array.from(document.querySelectorAll("[data-weekdays] span")).map((x) => x.innerHTML);
+  }
+
   renderMonth(calendar, month, canvas, x, y, w) {
     const ctx = canvas.getContext("2d");
-    const monthNames = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
-    const dayInitials = ["L", "M", "X", "J", "V", "S", "D"];
+    const monthNames = this.getMonthNames(); //["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
+    const dayInitials = this.getWeekdayNames(); //["L", "M", "X", "J", "V", "S", "D"];
     const cellWidth = w / 8;
     const cellHeight = 30;
     const headerHeight = 30;
@@ -311,6 +339,63 @@ class PhotoCalendar {
   }
 }
 
+function translate(lang, firstTime = false) {
+  const en = {
+    "Año:": "Year:",
+    "Dividir meses": "Split months",
+    "Centrar meses": "Center months",
+    "Seleccionar Foto": "Select image",
+    "Descargar foto-calendario": "Download photo-calendar",
+    "Buy me a coffe": "Buy me a coffe",
+    "Support my work": "Support my work",
+    L: "M",
+    M: "T",
+    X: "W",
+    J: "T",
+    V: "F",
+    S: "S",
+    D: "S",
+    Enero: "January",
+    Febrero: "February",
+    Marzo: "March",
+    Abril: "April",
+    Mayo: "May",
+    June: "June",
+    Julio: "July",
+    Agosto: "August",
+    Septiembre: "September",
+    Octubre: "October",
+    Noviembre: "November",
+    Diciembre: "December",
+  };
+  Array.from(document.querySelectorAll("[data-translate]")).forEach((x) => {
+    if (firstTime) {
+      x.dataset.translate = x.innerHTML;
+    }
+    if (en.hasOwnProperty(x.dataset.translate)) {
+      if (lang == "es") {
+        x.innerHTML = x.dataset.translate;
+      } else {
+        x.innerHTML = en[x.dataset.translate];
+      }
+    }
+  });
+  const languageSelector = document.getElementById("language");
+  languageSelector.value = lang;
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   const app = new PhotoCalendar();
+
+  const userLanguage = navigator.language || navigator.userLanguage;
+  const languageCode = userLanguage.split("-")[0];
+  if (languageCode != "es") {
+    console.log("Language Code", languageCode);
+    translate(languageCode, true);
+    app.onYearChange();
+  }
+  document.getElementById("language").addEventListener("change", (e) => {
+    translate(e.target.value);
+    app.onYearChange();
+  });
 });