matomo item count, confirmation on bg clicks, CSS enhancements

src/css/style.css

@@ -520,11 +520,14 @@ body::-webkit-scrollbar {
   display: none;
 }
 
-a,
+a {
+  color: #3273dc;
+}
+
 a:hover,
 a:active,
 a:focus {
-  color: #3273dc !important;
+  color: #5a5a5a;
 }
 
 .is-active {
@@ -1053,7 +1056,11 @@ nav ul li.logo {
   }
   #autoCompleteContainer .priority button,
 #drawerContainer .drawer .priority button {
-    font-size: 1em;
+    font-size: 1.2em;
+  }
+  #autoCompleteContainer .priority button .tag,
+#drawerContainer .drawer .priority button .tag {
+    font-size: 0.65em;
   }
   #autoCompleteContainer button,
 #drawerContainer .drawer button {
@@ -1161,7 +1168,11 @@ body.compact #drawerContainer .drawer .is-4 {
 }
 body.compact #autoCompleteContainer .priority button,
 body.compact #drawerContainer .drawer .priority button {
-  font-size: 1em;
+  font-size: 1.2em;
+}
+body.compact #autoCompleteContainer .priority button .tag,
+body.compact #drawerContainer .drawer .priority button .tag {
+  font-size: 0.65em;
 }
 body.compact #autoCompleteContainer button,
 body.compact #drawerContainer .drawer button {
@@ -1517,9 +1528,6 @@ body.compact #autoCompleteContainer h4 {
   max-height: calc(100vh - 5em);
   border-radius: 0.65em;
 }
-.modal.content .modal-background {
-  z-index: 55;
-}
 .modal.content .modal-card-body {
   background: none;
   display: none;

src/index.html

@@ -235,7 +235,7 @@
       </div>
     </div>
 
-    <section id="modalForm" class="modal">
+    <section id="modalForm" class="modal" data-item="">
       <div class="modal-background"></div>
       <div class="modal-content">
         <div class="card">

src/js/content.mjs

@@ -50,11 +50,7 @@ const settingsTabAboutHeadline = document.getElementById("settingsTabAboutHeadli
 const settingsTabAboutPrivacy = document.getElementById("settingsTabAboutPrivacy");
 const settingsTabAboutPrivacyBody = document.getElementById("settingsTabAboutPrivacyBody");
 const settingsTabSettings = document.getElementById("settingsTabSettings");
-//const settingsTabSettingsArchive = document.getElementById("settingsTabSettingsArchive");
-//const settingsTabSettingsArchiveBody = document.getElementById("settingsTabSettingsArchiveBody");
-//const settingsTabSettingsArchiveButton = document.getElementById("settingsTabSettingsArchiveButton");
 const settingsTabSettingsDarkmode = document.getElementById("settingsTabSettingsDarkmode");
-//const settingsTabSettingsDarkmodeBody = document.getElementById("settingsTabSettingsDarkmodeBody");
 const settingsTabSettingsHeadline = document.getElementById("settingsTabSettingsHeadline");
 const settingsTabSettingsLanguage = document.getElementById("settingsTabSettingsLanguage");
 const settingsTabSettingsLanguageBody = document.getElementById("settingsTabSettingsLanguageBody");
@@ -118,8 +114,6 @@ settingsTabAboutHeadline.innerHTML = translations.about;
 settingsTabAboutPrivacy.innerHTML = translations.settingsTabAboutPrivacy;
 settingsTabAboutPrivacyBody.innerHTML = translations.settingsTabAboutPrivacyBody;
 settingsTabSettings.innerHTML = translations.settings;
-//settingsTabSettingsArchive.innerHTML = translations.settingsTabSettingsArchive;
-//settingsTabSettingsArchiveButton.innerHTML = translations.archive;
 settingsTabSettingsDarkmode.innerHTML = translations.darkmode;
 settingsTabSettingsHeadline.innerHTML = translations.settings;
 settingsTabSettingsLanguage.innerHTML = translations.language;

src/js/drawer_handle.mjs

@@ -21,7 +21,6 @@ const getPaneWidth = () => {
 };
 export const startDragging = (event) => {
   event.preventDefault();
-  //const host = getResizeableElement();
   const startingPaneWidth = getPaneWidth();
   const xOffset = event.pageX;
   const mouseDragHandler = (moveEvent) => {

src/js/filters.mjs

@@ -192,6 +192,7 @@ function generateFilterData(autoCompleteCategory, autoCompleteValue, autoComplet
       categories = ["priority", "contexts", "projects"];
     }
     categories.forEach((category) => {
+      console.log(category);
       // array to collect all the available filters in the data
       let filters = new Array();
       let filterArray;

src/js/form.mjs

 "use strict";
 import "../../node_modules/jstodotxt/jsTodoExtensions.js";
-import { resetModal, handleError, userData, setUserData, translations } from "../render.js";
+import { resetModal, handleError, userData, setUserData, translations, getConfirmation } from "../render.js";
 import { _paq } from "./matomo.mjs";
 import { RecExtension, SugarDueExtension } from "./todotxtExtensions.mjs";
 import { generateFilterData } from "./filters.mjs";
@@ -51,38 +51,6 @@ btnSave.onclick = function() {
   // trigger matomo event
   if(userData.matomoEvents) _paq.push(["trackEvent", "Form", "Click on Submit"]);
 }
-function keyUp() {
-  // do not show suggestion container if Escape has been pressed
-  if(event.key==="Escape") {
-    autoCompleteContainer.classList.remove("is-active");
-    return false;
-  }
-  modalFormInputEvent();
-}
-
-function keyDown() {
-  // regular submit
-  if(document.getElementById("modalFormInput").type !=="textarea" && event.key === "Enter") {
-    submitForm().then(response => {
-      console.log(response);
-    }).catch(error => {
-      handleError(error);
-    });
-    // trigger matomo event
-    if(userData.matomoEvents) _paq.push(["trackEvent", "Form", "Pressed Enter for Submit"]);
-  }
-
-  // submit form with Ctrl/CMD and Enter
-  if(event.key==="Enter" && (event.ctrlKey || event.metaKey)) {
-    submitForm().then(response => {
-      console.log(response);
-    }).catch(error => {
-      handleError(error);
-    });
-    // trigger matomo event
-    if(userData.matomoEvents) _paq.push(["trackEvent", "Form", "Pressed Ctrl/CMD and Enter for Submit"]);
-  }
-}
 
 document.getElementById("modalFormInput").addEventListener("keyup", event => {
   keyUp();
@@ -119,18 +87,22 @@ priorityPicker.onfocus = function() {
 
 modalBackground.forEach(function(el) {
   el.onclick = function() {
-    resetModal().then(function(result) {
-      console.log(result);
-    }).catch(function(error) {
-      handleError(error);
-    });
-    el.parentElement.classList.remove("is-active");
-    autoCompleteContainer.classList.remove("is-active");
-    autoCompleteContainer.blur();
+    const modalObject = document.getElementById(el.parentElement.id);
+    // if modal is modalForm and input is equal the data item
+    if(modalObject.id === "modalForm" && modalForm.getAttribute("data-item") !== modalFormInput.value) {
+      getConfirmation(resetModal, translations.modalBackgroundAttention, modalObject);
+    } else {
+      resetModal(modalObject).then(function(result) {
+        console.log(result);
+      }).catch(function(error) {
+        handleError(error);
+      });
+    }
     // trigger matomo event
     if(userData.matomoEvents) _paq.push(["trackEvent", "Modal", "Click on Background"]);
   }
 });
+
 modalClose.forEach(function(el) {
   el.onclick = function() {
     if(el.getAttribute("data-message")) {
@@ -147,6 +119,40 @@ modalClose.forEach(function(el) {
   }
 });
 
+// TODO add try catch
+function keyUp() {
+  // do not show suggestion container if Escape has been pressed
+  if(event.key==="Escape") {
+    autoCompleteContainer.classList.remove("is-active");
+    return false;
+  }
+  modalFormInputEvent();
+}
+
+// TODO add try and catch
+function keyDown() {
+  // regular submit
+  if(document.getElementById("modalFormInput").type !=="textarea" && event.key === "Enter") {
+    submitForm().then(response => {
+      console.log(response);
+    }).catch(error => {
+      handleError(error);
+    });
+    // trigger matomo event
+    if(userData.matomoEvents) _paq.push(["trackEvent", "Form", "Pressed Enter for Submit"]);
+  }
+
+  // submit form with Ctrl/CMD and Enter
+  if(event.key==="Enter" && (event.ctrlKey || event.metaKey)) {
+    submitForm().then(response => {
+      console.log(response);
+    }).catch(error => {
+      handleError(error);
+    });
+    // trigger matomo event
+    if(userData.matomoEvents) _paq.push(["trackEvent", "Form", "Pressed Ctrl/CMD and Enter for Submit"]);
+  }
+}
 function getCaretPosition(inputId) {
   var content = inputId;
   if((content.selectionStart!=null)&&(content.selectionStart!=undefined)){
@@ -286,7 +292,8 @@ function show(todo, templated) {
     // switch to textarea if needed
     if(userData.useTextarea) toggleInputSize("input");
     // remove any previously set data-item attributes
-    modalForm.removeAttribute("data-item");
+    //modalForm.removeAttribute("data-item");
+    modalForm.setAttribute("data-item", "");
     // adjust size of recurrence picker input field
     datePickerInput.value = null;
     recurrencePickerInput.value = null;

src/js/matomo.mjs

@@ -54,7 +54,7 @@ function configureMatomo() {
     if(appData.channel)_paq.push(['setCustomDimension', 18, appData.channel]);
     if(typeof userData.tray === "boolean")_paq.push(['setCustomDimension', 19, userData.tray]);
     if(typeof userData.showEmptyFilters === "boolean")_paq.push(['setCustomDimension', 20, userData.showEmptyFilters]);
-    if(items) _paq.push(['setCustomDimension', 21, todoRange(items)]);
+    if(items) _paq.push(['setCustomDimension', 21, todoRange(items.objects.length)]);
     _paq.push(['requireConsent']);
     _paq.push(['setConsentGiven']);
     _paq.push(['trackPageView']);

src/js/view.mjs

 "use strict";
-import { userData, setUserData, handleError, startBuilding, translations, resetModal } from "../render.js";
+import { userData, setUserData, handleError, startBuilding, translations } from "../render.js";
 import { _paq } from "./matomo.mjs";
 
 const html = document.getElementById("html");
@@ -10,16 +10,11 @@ const showDueIsPast = document.getElementById("showDueIsPast");
 const showDueIsToday = document.getElementById("showDueIsToday");
 const showHidden = document.getElementById("showHidden");
 const sortBy = document.getElementById("sortBy");
-const sortByContexts = document.getElementById("sortByContexts");
-const sortByDueDate = document.getElementById("sortByDueDate");
-const sortByPriority = document.getElementById("sortByPriority");
-const sortByProjects = document.getElementById("sortByProjects");
 const sortCompletedLast = document.getElementById("sortCompletedLast");
 const toggleTray = document.getElementById("toggleTray");
 const viewHeadlineAppView = document.getElementById("viewHeadlineAppView");
 const viewHeadlineTodoList = document.getElementById("viewHeadlineTodoList");
 const viewHeadlineFilterList = document.getElementById("viewHeadlineFilterList");
-const viewSelectSortBy = document.getElementById("viewSelectSortBy");
 const viewToggleCompactView = document.getElementById("viewToggleCompactView");
 const viewToggleDueIsFuture = document.getElementById("viewToggleDueIsFuture");
 const viewToggleDueIsPast = document.getElementById("viewToggleDueIsPast");
@@ -51,21 +46,17 @@ zoomRangePicker.innerHTML = translations.zoomRangePicker;
 viewToggleZoom.innerHTML = translations.viewToggleZoom;
 viewToggleShowEmptyFilters.innerHTML = translations.viewToggleShowEmptyFilters;
 
-// build the sort by list
-for(let i=0; i < userData.sortBy.length; i++) {
-  let sortBy = userData.sortBy[i];
+// build the sortBy list
+userData.sortBy.forEach((sortBy) => {
   const sortByContainerElement = document.createElement("li");
   sortByContainerElement.setAttribute("data-id", sortBy);
-
   if(sortBy==="dueString") sortBy = "dueDate";
   sortByContainerElement.innerHTML = "<i class=\"fas fa-grip-vertical\"></i>";
   sortByContainerElement.innerHTML += translations[sortBy];
   sortByContainer.appendChild(sortByContainerElement);
-  if(i === userData.sortBy.length) resolve();
-}
+});
 
 import { enableDragSort } from "../configs/dragndrop.mjs";
-
 enableDragSort("drag-sort-enable");
 
 zoomRangePicker.onchange = function() {

src/locales/de/translation.json

@@ -150,5 +150,6 @@
   "archivingCompletedTitle": "Archivierung abgeschlossen",
   "archivingCompletedBody": "Erledigte Todos erfolgreich verschoben nach ",
   "restartPrompt": "Für diese Änderung muss sich sleek selbst neustarten. Wenn das nicht passiert, starte das Programm bitte händisch neu.",
-  "deleteCategoryPrompt": "Dieser Filter wird unwiderruflich aus allen Todos entfernt."
+  "deleteCategoryPrompt": "Dieser Filter wird unwiderruflich aus allen Todos entfernt.",
+  "modalBackgroundAttention": "Dieses Fenster wird geschlossen, dabei gehen vorgenommene Änderungen verloren."
 }

src/locales/en/translation.json

@@ -149,5 +149,6 @@
   "archivingCompletedTitle": "Archiving completed",
   "archivingCompletedBody": "Completed todos successfully moved to ",
   "restartPrompt": "For this change sleek needs to restart itself. If this doesn't happen, please start the application again manually.",
-  "deleteCategoryPrompt": "This filter will be irrevocably removed from all todos."
+  "deleteCategoryPrompt": "This filter will be irrevocably removed from all todos.",
+  "modalBackgroundAttention": "This window will be closed and its contents cleared."
 }

src/locales/es/translation.json

@@ -148,5 +148,6 @@
   "archivingCompletedTitle": "Archivado completado",
   "archivingCompletedBody": "Todos completados movidos con éxito a ",
   "restartPrompt": "Para este cambio, sleek necesita reiniciarse. Si esto no sucede, vuelva a iniciar la aplicación manualmente.",
-  "deleteCategoryPrompt": "Este filtro se eliminará irrevocablemente de todas las tareas."
+  "deleteCategoryPrompt": "Este filtro se eliminará irrevocablemente de todas las tareas.",
+  "modalBackgroundAttention": "Esta ventana se cerrará y se borrará su contenido."
 }

src/locales/fr/translation.json

@@ -149,5 +149,6 @@
   "archivingCompletedTitle": "Archivage terminé",
   "archivingCompletedBody": "Les tâches terminées ont été déplacées avec succès vers ",
   "restartPrompt": "Pour ce changement, sleek doit redémarrer. Si cela ne se produit pas, veuillez redémarrer l'application manuellement.",
-  "deleteCategoryPrompt": "Ce filtre sera irrévocablement supprimé de toutes les tâches."
+  "deleteCategoryPrompt": "Ce filtre sera irrévocablement supprimé de toutes les tâches.",
+  "modalBackgroundAttention": "Cette fenêtre sera fermée et son contenu effacé."
 }

src/locales/it/translation.json

@@ -148,5 +148,6 @@
   "archivingCompletedTitle": "Archiviazione completata",
   "archivingCompletedBody": "Le cose da fare completate sono state spostate con successo in ",
   "restartPrompt": "Per questo cambiamento, sleek deve riavviarsi. Se ciò non accade, riavvia l'applicazione manualmente.",
-  "deleteCategoryPrompt": "Questo filtro verrà irrevocabilmente rimosso da tutte le attività."
+  "deleteCategoryPrompt": "Questo filtro verrà irrevocabilmente rimosso da tutte le attività.",
+  "modalBackgroundAttention": "Questa finestra verrà chiusa e il suo contenuto cancellato."
 }

src/locales/jp/translation.json

@@ -149,5 +149,6 @@
   "archivingCompletedTitle": "完了タスクをアーカイブへ保存中",
   "archivingCompletedBody": "完了タスク保存完了した, アーカイブファイル: ",
   "restartPrompt": "設定を適用するため, sleekを再起動する必要がある. もし再起動しなければ, 手動でアプリ再起動をお願いいたします.",
-  "deleteCategoryPrompt": "このフィルターは、すべてのタスクから取り消せないほど削除されます。."
+  "deleteCategoryPrompt": "このフィルターは、すべてのタスクから取り消せないほど削除されます。.",
+  "modalBackgroundAttention": "このウィンドウは閉じられ、その内容はクリアされます。"
 }

src/locales/pt/translation.json

@@ -149,5 +149,6 @@
   "archivingCompletedTitle": "Arquivamento concluído",
   "archivingCompletedBody": "Todos concluídos movidos com sucesso para ",
   "restartPrompt": "Para essa mudança, o sleek precisa ser reiniciado. Se isso não acontecer, reinicie o aplicativo manualmente.",
-  "deleteCategoryPrompt": "Este filtro será removido irrevogavelmente de todas as tarefas."
+  "deleteCategoryPrompt": "Este filtro será removido irrevogavelmente de todas as tarefas.",
+  "modalBackgroundAttention": "Esta janela será fechada e seu conteúdo apagado."
 }

src/locales/zh/translation.json

@@ -149,5 +149,6 @@
   "archivingCompletedTitle": "归档完成",
   "archivingCompletedBody": "已完成的待办事项成功移至 ",
   "restartPrompt": "对于这种变化，sleek 需要重新启动。 如果这没有发生，请手动重新启动应用程序。",
-  "deleteCategoryPrompt": "此过滤器将从所有任务中不可撤销地删除。."
+  "deleteCategoryPrompt": "此过滤器将从所有任务中不可撤销地删除。.",
+  "modalBackgroundAttention": "此窗口将关闭并清除其内容。"
 }

src/render.js

@@ -570,6 +570,7 @@ function resetFilters() {
     return Promise.reject(error);
   }
 }
+// TODO refactor
 function resetModal(modal) {
   try {
     if(modal) {
@@ -593,7 +594,8 @@ function resetModal(modal) {
     // close
     modalForm.classList.remove("is-active");
     // remove the data item as we don't need it anymore
-    modalForm.removeAttribute("data-item");
+    //modalForm.removeAttribute("data-item");
+    modalForm.setAttribute("data-item", "");
     // clean up the modal
     modalFormAlert.parentElement.classList.remove("is-active", 'is-warning', 'is-danger');
     // clear the content in the input field as it's not needed anymore

src/scss/compact.scss

@@ -96,7 +96,10 @@
     }
     .priority {
       button {
-        font-size: 1em;
+        font-size: 1.2em;
+        .tag {
+          font-size: 0.65em;
+        }
       }
     }
     button {

src/scss/modal.scss

@@ -54,9 +54,9 @@
     max-height: calc(100vh - 5em);
     border-radius: $radius;
   }
-  .modal-background {
-    z-index: 55;
-  }
+  // .modal-background {
+  //   z-index: 55;
+  // }
   .modal-card-body {
     background: none;
     display: none;