Commit fe080b66 authored by ransome1's avatar ransome1
Browse files

GUI refresh

parent abf8c0c4
...@@ -12,14 +12,12 @@ snap/local/ ...@@ -12,14 +12,12 @@ snap/local/
*.db:encryptable *.db:encryptable
*.db *.db
System Volume Information/ System Volume Information/
build/
Thumbs.db Thumbs.db
flatpak/generated-sources.json flatpak/generated-sources.json
flatpak/com.github.ransome1.sleek.yml flatpak/com.github.ransome1.sleek.yml
assets/icons/bak assets/icons/bak
squashfs-root/ squashfs-root/
.eslintrc.json .eslintrc.json
build/
package-lock.json package-lock.json
.vs/ .vs/
.vscode/ .vscode/
......
{ {
"name": "sleek", "name": "sleek",
"productName": "sleek", "productName": "sleek",
"version": "1.0.7", "version": "1.0.8",
"description": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source", "description": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source",
"synopsis": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source", "synopsis": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source",
"category": "ProjectManagement", "category": "ProjectManagement",
...@@ -92,17 +92,16 @@ ...@@ -92,17 +92,16 @@
"artifactName": "${productName}-${version}-${arch}.${ext}" "artifactName": "${productName}-${version}-${arch}.${ext}"
}, },
"scripts": { "scripts": {
"pack": "yarn build:css && electron-builder --dir",
"build:windows": "yarn build:css && electron-builder -w --publish never", "build:windows": "yarn build:css && electron-builder -w --publish never",
"build:macos": "yarn build:css && electron-builder -m --publish never", "build:macos": "yarn build:css && electron-builder -m --publish never",
"build:linux": "yarn build:css && electron-builder -l --publish never", "build:linux": "yarn build:css && electron-builder -l --publish never",
"build:appx": "electron-builder -w appx --publish never", "build:appx": "yarn build:css && electron-builder -w appx --publish never",
"build:pacman": "electron-builder -l pacman --publish never",
"build:appimage": "yarn build:css && yarn build:pegjs && electron-builder -l AppImage --publish never", "build:appimage": "yarn build:css && yarn build:pegjs && electron-builder -l AppImage --publish never",
"pack": "electron-builder --dir", "build:css": "sass src/scss/style.scss:src/css/style.css",
"lint": "eslint --ext .js, src --ext .mjs, src", "lint": "eslint --ext .js, src --ext .mjs, src",
"test": "mocha --timeout 10000", "test": "mocha --timeout 10000",
"test1": "mocha ./test/onboarding.js --timeout 10000", "test1": "mocha ./test/onboarding.js --timeout 10000",
"build:css": "sass src/scss/style.scss:src/css/style.css",
"sass": "sass -w src/scss/style.scss:src/css/style.css", "sass": "sass -w src/scss/style.scss:src/css/style.css",
"start": "yarn sass & electron ." "start": "yarn sass & electron ."
}, },
......
export function createModalJail(modal) { export function createModalJail(modal) {
// add all the elements inside modal which you want to make focusable // add all the elements inside modal which you want to make focusable
const focusableElements = 'a.button, [tabindex]:not([tabindex="-1"])'; const focusableElements = '[tabindex]:not([tabindex="-1"])';
const firstFocusableElement = modal.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal const firstFocusableElement = modal.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal
const focusableContent = modal.querySelectorAll(focusableElements); const focusableContent = modal.querySelectorAll(focusableElements);
const lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal const lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal
......
This diff is collapsed.
This diff is collapsed.
...@@ -24,15 +24,15 @@ ...@@ -24,15 +24,15 @@
<nav> <nav>
<ul> <ul>
<li class="logo">sleek</li> <li class="logo">sleek</li>
<li id="navBtnAddTodo" tabindex="0"><i class="fas fa-plus"></i></li> <li><a href="#" id="navBtnAddTodo" tabindex="0"><i class="fas fa-plus"></i></a></li>
<li id="navBtnFilter" class="drawerTrigger" data-drawer="filterDrawer" tabindex="0"><i class="fas fa-filter"></i></li> <li><a href="#" id="navBtnFilter" class="drawerTrigger" data-drawer="filterDrawer" tabindex="0"><i class="fas fa-filter"></i></a></li>
<li id="navBtnView" class="drawerTrigger" data-drawer="viewDrawer"tabindex="0"><i class="fas fa-sliders-h"></i></li> <li><a href="#" id="navBtnView" class="drawerTrigger" data-drawer="viewDrawer"tabindex="0"><i class="fas fa-sliders-h"></i></a></li>
<li id="btnOpenTodoFile" tabindex="-1"><i class="fas fa-folder-open"></i></li> <li><a href="#" id="btnOpenTodoFile" tabindex="-1"><i class="fas fa-folder-open"></i></a></li>
<li id="btnTheme" tabindex="-1"><i class="fas fa-adjust"></i></li> <li><a href="#" id="btnTheme" tabindex="-1"><i class="fas fa-adjust"></i></a></li>
</ul> </ul>
<ul> <ul>
<li id="navBtnSettings" tabindex="-1"><i class="fas fa-cog"></i></li> <li><a href="#" id="navBtnSettings" tabindex="-1"><i class="fas fa-cog"></i></a></li>
<li id="navBtnHelp" tabindex="-1"><i class="fas fa-question-circle"></i></li> <li><a href="#" id="navBtnHelp" tabindex="-1"><i class="fas fa-question-circle"></i></a></li>
</ul> </ul>
<div id="drawerContainer"> <div id="drawerContainer">
<section id="filterDrawer" class="drawer dropdown" tabindex="0"> <section id="filterDrawer" class="drawer dropdown" tabindex="0">
...@@ -187,25 +187,19 @@ ...@@ -187,25 +187,19 @@
<div id="todoTableWrapper" class="column content"> <div id="todoTableWrapper" class="column content">
<section id="todoTableSearchContainer" class="control has-icons-left"> <section id="todoTableSearchContainer" class="inputWrapper">
<div class="column"> <i class="fas fa-search"></i>
<input id="todoTableSearch" class="input is-medium" type="text" placeholder="Search" tabindex="10"> <label id="todoTableSearchLabel" for="todoTableSearch">Search by todo.txt syntax</label>
<span class="icon is-left"> <input id="todoTableSearch" class="input is-medium" type="search" tabindex="1" placeholder="(A) Todo text +project @context due:2020-12-12 rec:d">
<i class="fas fa-search"></i> <a href="#" id="todoTableSearchAddTodo" class="tag" tabindex="5"><i class="fas fa-plus"></i>&nbsp;Add as new todo</a>
</span>
</div>
</section> </section>
<div id="resultStats"> <section id="resultStats">
<span class="tag"></span> <span class="tag"></span>
</div>
<section id="todoTable" tabindex="-1">
<div id="todoTableContainer"></div>
</section> </section>
<section id="todoTable" tabindex="-1"></section>
<section id="onboardingContainer" class="contentContainer"> <section id="onboardingContainer" class="contentContainer">
<h1 id="welcomeToSleek" class="title is-1"></h1> <h1 id="welcomeToSleek" class="title is-1"></h1>
<p id="onboardingContainerSubtitle" class="subtitle"></p> <p id="onboardingContainerSubtitle" class="subtitle"></p>
...@@ -241,20 +235,19 @@ ...@@ -241,20 +235,19 @@
</div> </div>
</div> </div>
<form id="modalForm" class="modal modalFormSubmit"> <form id="modalForm" class="modal">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-content"> <div class="modal-content">
<div class="card"> <div class="card">
<header id="modalTitle" class="card-header-title"></header> <header id="modalTitle" class="card-header-title"></header>
<div class="card-content"> <div class="card-content">
<div class="content"> <div class="inputWrapper">
<div class="control has-icons-right"> <label id="modalFormInputLabel" for="modalFormInput">Search by todo.txt syntax</label>
<input id="modalFormInput" class="input is-medium" type="text" tabindex="0"> <input id="modalFormInput" class="input is-medium" type="text" tabindex="0" placeholder="(A) Todo text +project @context due:2020-12-12 rec:d">
<div id="autoCompleteContainer" class="card"></div> <a href="#" id="modalFormInputResize" class="icon is-right" tabindex="-1" data-input-type="input"><i class="fas fa-expand-alt"></i></a>
<a href="#" id="modalFormInputResize" class="icon is-right" tabindex="-1" data-input-type="input">
<i class="fas fa-expand-alt"></i>
</a>
</div> </div>
<div id="autoCompleteContainer" class="card"></div>
<article class="message"> <article class="message">
<div id="modalFormAlert" class="message-body"></div> <div id="modalFormAlert" class="message-body"></div>
</article> </article>
...@@ -342,12 +335,11 @@ ...@@ -342,12 +335,11 @@
</div> </div>
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a href="#" class="card-footer-item selection" value="" id="recurrencePickerNoRecurrence" tabindex="0"></a> <a href="#" class="card-footer-item selection" id="recurrencePickerNoRecurrence" tabindex="0"></a>
</footer> </footer>
</div> </div>
</div> </div>
<br />
</div>
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<button id="btnSave" type="submit" class="card-footer-item" tabindex="0"></button> <button id="btnSave" type="submit" class="card-footer-item" tabindex="0"></button>
...@@ -657,11 +649,13 @@ ...@@ -657,11 +649,13 @@
</div> </div>
</div> </div>
<div id="todoContext" class="dropdown-menu" role="menu" tabindex="0"> <div id="todoContext" role="menu" tabindex="0">
<div class="dropdown-content"> <div class="card">
<a id="todoContextUseAsTemplate" class="dropdown-item" tabindex="0"></a> <div class="card-content">
<a id="todoContextEdit" href="#" class="dropdown-item" tabindex="0"></a> <a id="todoContextUseAsTemplate" class="dropdown-item" tabindex="0"></a>
<a id="todoContextDelete" class="dropdown-item" tabindex="0"></a> <a id="todoContextEdit" href="#" class="dropdown-item" tabindex="0"></a>
<a id="todoContextDelete" class="dropdown-item" tabindex="0"></a>
</div>
</div> </div>
</div> </div>
......
...@@ -6,7 +6,7 @@ import { getHandleElement, startDragging } from "./drawer_handle.mjs"; ...@@ -6,7 +6,7 @@ import { getHandleElement, startDragging } from "./drawer_handle.mjs";
const drawerContainer = document.getElementById("drawerContainer"); const drawerContainer = document.getElementById("drawerContainer");
const navBtnFilter = document.getElementById("navBtnFilter"); const navBtnFilter = document.getElementById("navBtnFilter");
const navBtnView = document.getElementById("navBtnView"); const navBtnView = document.getElementById("navBtnView");
const drawers = document.querySelectorAll("nav ul li.drawerTrigger"); const drawers = document.querySelectorAll("nav ul li a.drawerTrigger");
if(userData.filterDrawer) { if(userData.filterDrawer) {
show(document.getElementById("navBtnFilter"), document.getElementById("navBtnFilter").getAttribute("data-drawer")).then(function(result) { show(document.getElementById("navBtnFilter"), document.getElementById("navBtnFilter").getAttribute("data-drawer")).then(function(result) {
......
...@@ -14,17 +14,17 @@ const recurrencePickerInput = document.getElementById("recurrencePickerInput"); ...@@ -14,17 +14,17 @@ const recurrencePickerInput = document.getElementById("recurrencePickerInput");
const modalTitle = document.getElementById("modalTitle"); const modalTitle = document.getElementById("modalTitle");
const modalFormAlert = document.getElementById("modalFormAlert"); const modalFormAlert = document.getElementById("modalFormAlert");
const modalForm = document.getElementById("modalForm"); const modalForm = document.getElementById("modalForm");
const modalFormInputLabel = document.getElementById("modalFormInputLabel");
const modalFormInputResize = document.getElementById("modalFormInputResize"); const modalFormInputResize = document.getElementById("modalFormInputResize");
const modalBackground = document.querySelectorAll('.modal-background'); const modalBackground = document.querySelectorAll('.modal-background');
const modalClose = document.querySelectorAll('.close'); const modalClose = document.querySelectorAll('.close');
const priorityPicker = document.getElementById("priorityPicker"); const priorityPicker = document.getElementById("priorityPicker");
const btnItemStatus = document.getElementById("btnItemStatus"); const btnItemStatus = document.getElementById("btnItemStatus");
document.getElementById("modalFormInput").placeholder = translations.formTodoInputPlaceholder; modalFormInputLabel.innerHTML = translations.todoTxtSyntax;
btnItemStatus.onclick = function() { btnItemStatus.onclick = function() {
setTodoComplete(modalForm.getAttribute("data-item")).then(response => { setTodoComplete(modalForm.getAttribute("data-item")).then(response => {
//modalForm.classList.remove("is-active");
resetModal().then(function(result) { resetModal().then(function(result) {
console.log(result); console.log(result);
}).catch(function(error) { }).catch(function(error) {
...@@ -44,9 +44,18 @@ modalFormInputResize.onclick = function() { ...@@ -44,9 +44,18 @@ modalFormInputResize.onclick = function() {
} }
document.getElementById("modalFormInput").addEventListener("keyup", event => { document.getElementById("modalFormInput").addEventListener("keyup", event => {
// do not show suggestion container if Escape has been pressed // do not show suggestion container if Escape has been pressed
if(event.key==="Escape") return false; if(event.key==="Escape") {
autoCompleteContainer.classList.remove("is-active");
return false;
}
modalFormInputEvent(); modalFormInputEvent();
}); });
document.getElementById("modalFormInput").onfocus = function() {
modalForm.classList.add("is-focused");
}
document.getElementById("modalFormInput").onblur = function() {
modalForm.classList.remove("is-focused");
}
modalForm.addEventListener("submit", function(event) { modalForm.addEventListener("submit", function(event) {
// intercept submit // intercept submit
event.preventDefault(); event.preventDefault();
...@@ -115,7 +124,7 @@ function positionAutoCompleteContainer() { ...@@ -115,7 +124,7 @@ function positionAutoCompleteContainer() {
// Adjust position of suggestion box to input field // Adjust position of suggestion box to input field
let modalFormInputPosition = document.getElementById("modalFormInput").getBoundingClientRect(); let modalFormInputPosition = document.getElementById("modalFormInput").getBoundingClientRect();
autoCompleteContainer.style.width = document.getElementById("modalFormInput").offsetWidth + "px"; autoCompleteContainer.style.width = document.getElementById("modalFormInput").offsetWidth + "px";
autoCompleteContainer.style.top = modalFormInputPosition.top + document.getElementById("modalFormInput").offsetHeight+2 + "px"; autoCompleteContainer.style.top = modalFormInputPosition.top + document.getElementById("modalFormInput").offsetHeight - 40 + "px";
autoCompleteContainer.style.left = modalFormInputPosition.left + "px"; autoCompleteContainer.style.left = modalFormInputPosition.left + "px";
} }
function modalFormInputEvent() { function modalFormInputEvent() {
...@@ -404,6 +413,7 @@ function submitForm() { ...@@ -404,6 +413,7 @@ function submitForm() {
return Promise.reject(error); return Promise.reject(error);
} }
} }
function toggleInputSize(type) { function toggleInputSize(type) {
let newInputElement; let newInputElement;
switch (type) { switch (type) {
...@@ -424,7 +434,7 @@ function toggleInputSize(type) { ...@@ -424,7 +434,7 @@ function toggleInputSize(type) {
newInputElement.id = "modalFormInput"; newInputElement.id = "modalFormInput";
newInputElement.setAttribute("tabindex", 0); newInputElement.setAttribute("tabindex", 0);
newInputElement.setAttribute("class", "input is-medium"); newInputElement.setAttribute("class", "input is-medium");
newInputElement.setAttribute("placeholder", translations.formTodoInputPlaceholder); //newInputElement.setAttribute("placeholder", translations.formTodoInputPlaceholder);
// replace old element with the new one // replace old element with the new one
document.getElementById("modalFormInput").replaceWith(newInputElement); document.getElementById("modalFormInput").replaceWith(newInputElement);
// replace special char with line break before passing it to textarea // replace special char with line break before passing it to textarea
...@@ -437,6 +447,12 @@ function toggleInputSize(type) { ...@@ -437,6 +447,12 @@ function toggleInputSize(type) {
document.getElementById("modalFormInput").addEventListener("keyup", () => { document.getElementById("modalFormInput").addEventListener("keyup", () => {
modalFormInputEvent(); modalFormInputEvent();
}); });
document.getElementById("modalFormInput").onfocus = function() {
modalForm.classList.add("is-focused");
}
document.getElementById("modalFormInput").onblur = function() {
modalForm.classList.remove("is-focused");
}
document.getElementById("modalFormInput").focus(); document.getElementById("modalFormInput").focus();
createModalJail(modalForm); createModalJail(modalForm);
} }
......
...@@ -49,7 +49,7 @@ function configureMatomo() { ...@@ -49,7 +49,7 @@ function configureMatomo() {
if(typeof userData.showDueIsToday === "boolean")_paq.push(['setCustomDimension', 13, userData.showDueIsToday]); if(typeof userData.showDueIsToday === "boolean")_paq.push(['setCustomDimension', 13, userData.showDueIsToday]);
if(typeof userData.showDueIsFuture === "boolean")_paq.push(['setCustomDimension', 14, userData.showDueIsFuture]); if(typeof userData.showDueIsFuture === "boolean")_paq.push(['setCustomDimension', 14, userData.showDueIsFuture]);
if(typeof userData.showDueIsPast === "boolean")_paq.push(['setCustomDimension', 15, userData.showDueIsPast]); if(typeof userData.showDueIsPast === "boolean")_paq.push(['setCustomDimension', 15, userData.showDueIsPast]);
if(userData.sortBy)_paq.push(['setCustomDimension', 16, userData.sortBy]); if(userData.sortBy)_paq.push(['setCustomDimension', 16, userData.sortBy.join(", ")]);
if(userData.zoom)_paq.push(['setCustomDimension', 17, userData.zoom]); if(userData.zoom)_paq.push(['setCustomDimension', 17, userData.zoom]);
if(appData.channel)_paq.push(['setCustomDimension', 18, appData.channel]); if(appData.channel)_paq.push(['setCustomDimension', 18, appData.channel]);
if(typeof userData.tray === "boolean")_paq.push(['setCustomDimension', 19, userData.tray]); if(typeof userData.tray === "boolean")_paq.push(['setCustomDimension', 19, userData.tray]);
......
...@@ -39,7 +39,7 @@ recurrencePickerContainer.addEventListener("keyup", function(event) { ...@@ -39,7 +39,7 @@ recurrencePickerContainer.addEventListener("keyup", function(event) {
export function setInput(recurrence) { export function setInput(recurrence) {
try { try {
let recSplit = recurrences.splitRecurrence(recurrence); let recSplit = recurrences.splitRecurrence(recurrence);
let label = translations.noRecurrence; let label;
if(recSplit.period !== undefined) { if(recSplit.period !== undefined) {
if(recSplit.mul > 1) { if(recSplit.mul > 1) {
switch (recSplit.period) { switch (recSplit.period) {
...@@ -79,8 +79,10 @@ export function setInput(recurrence) { ...@@ -79,8 +79,10 @@ export function setInput(recurrence) {
break; break;
} }
} }
recurrencePickerInput.value = label;
} else {
recurrencePickerInput.value = null;
} }
recurrencePickerInput.value = label;
resizeInput(recurrencePickerInput); resizeInput(recurrencePickerInput);
// trigger matomo event // trigger matomo event
if(userData.matomoEvents) _paq.push(["trackEvent", "Form", "Recurrence selected: " + label]); if(userData.matomoEvents) _paq.push(["trackEvent", "Form", "Recurrence selected: " + label]);
......
"use strict"; "use strict";
import { translations, startBuilding } from "../render.js"; import { translations, startBuilding, handleError, userData } from "../render.js";
import { addTodo } from "./todos.mjs";
const todoTableSearch = document.getElementById("todoTableSearch"); const todoTableSearch = document.getElementById("todoTableSearch");
const todoTableSearchAddTodo = document.getElementById("todoTableSearchAddTodo");
const todoTableSearchContainer = document.getElementById("todoTableSearchContainer");
todoTableSearch.placeholder = translations.search; todoTableSearchLabel.innerHTML = translations.todoTxtSyntax;
todoTableSearch.addEventListener("input", debounce(function() { todoTableSearch.addEventListener("input", debounce(function() {
startBuilding() if(this.value) {
todoTableSearchAddTodo.classList.add("is-active");
} else {
todoTableSearchAddTodo.classList.remove("is-active");
}
startBuilding();
}, 250)); }, 250));
todoTableSearch.onfocus = function() {
if(this.value) {
todoTableSearchAddTodo.classList.add("is-active");
} else {
todoTableSearchAddTodo.classList.remove("is-active");
}
todoTableSearchContainer.classList.add("is-focused");
}
todoTableSearch.onblur = function() {
todoTableSearchContainer.classList.remove("is-focused");
}
// shortcuts for search input field // shortcuts for search input field
todoTableSearch.addEventListener("keyup", function () { todoTableSearch.addEventListener("keyup", function () {
if(event.key === "Escape") todoTableSearch.blur(); if(event.key === "Escape") todoTableSearch.blur();
...@@ -21,6 +42,18 @@ window.addEventListener("keyup", function () { ...@@ -21,6 +42,18 @@ window.addEventListener("keyup", function () {
} }
}); });
todoTableSearchAddTodo.onclick = function() {
addTodo(todoTableSearch.value).then(response => {
console.log(response);
document.getElementById("todoTableSearch").value = null;
document.getElementById("todoTableSearch").focus();
// trigger matomo event
if(userData.matomoEvents) _paq.push(["trackEvent", "Search", "Click on Add as new todo"]);
}).catch(error => {
handleError(error);
});
}
// https://davidwalsh.name/javascript-debounce-function // https://davidwalsh.name/javascript-debounce-function
function debounce(func, wait, immediate) { function debounce(func, wait, immediate) {
let timeout; let timeout;
......
"use strict"; "use strict";
import "../../node_modules/jstodotxt/jsTodoExtensions.js"; import "../../node_modules/jstodotxt/jsTodoExtensions.js";
import { userData, appData, handleError, translations, setUserData, startBuilding, getConfirmation } from "../render.js"; import { userData, appData, handleError, translations, setUserData, startBuilding, getConfirmation, resetModal } from "../render.js";
import { _paq } from "./matomo.mjs"; import { _paq } from "./matomo.mjs";
import { categories } from "./filters.mjs"; import { categories } from "./filters.mjs";
import { generateRecurrence } from "./recurrences.mjs"; import { generateRecurrence } from "./recurrences.mjs";
import { convertDate, isToday, isTomorrow, isPast } from "./date.mjs"; import { convertDate, isToday, isTomorrow, isPast } from "./date.mjs";
import { show } from "./form.mjs"; import { show } from "./form.mjs";
import { RecExtension } from "./todotxtExtensions.mjs"; import { SugarDueExtension, RecExtension } from "./todotxtExtensions.mjs";
const modalForm = document.getElementById("modalForm"); const modalForm = document.getElementById("modalForm");
const todoContext = document.getElementById("todoContext"); const todoContext = document.getElementById("todoContext");
const todoContextDelete = document.getElementById("todoContextDelete"); const todoContextDelete = document.getElementById("todoContextDelete");
const todoContextEdit = document.getElementById("todoContextEdit"); const todoContextEdit = document.getElementById("todoContextEdit");
const todoContextUseAsTemplate = document.getElementById("todoContextUseAsTemplate"); const todoContextUseAsTemplate = document.getElementById("todoContextUseAsTemplate");
const todoTableContainer = document.getElementById("todoTableContainer");
const todoTableWrapper = document.getElementById("todoTableWrapper"); const todoTableWrapper = document.getElementById("todoTableWrapper");
todoContextUseAsTemplate.innerHTML = translations.useAsTemplate; todoContextUseAsTemplate.innerHTML = translations.useAsTemplate;
...@@ -78,7 +77,7 @@ function configureTodoTableTemplate(append) { ...@@ -78,7 +77,7 @@ function configureTodoTableTemplate(append) {
try { try {
// setting up for the first cluster // setting up for the first cluster
if(!append) { if(!append) {
todoTableContainer.innerHTML = ""; todoTable.innerHTML = "";
visibleRows = 0; visibleRows = 0;
clusterThreshold = 0; clusterThreshold = 0;
stopBuilding = false; stopBuilding = false;
...@@ -115,7 +114,7 @@ function generateItems(content) { ...@@ -115,7 +114,7 @@ function generateItems(content) {
} }
} }
function generateGroups(items) { function generateGroups(items) {
const sortBy = userData.sortByLevel[0]; const sortBy = userData.sortBy[0];
// build object according to sorting method // build object according to sorting method
items = items.reduce((object, a) => { items = items.reduce((object, a) => {
if(userData.sortCompletedLast && a.complete) { if(userData.sortCompletedLast && a.complete) {
...@@ -167,27 +166,27 @@ async function generateTable(groups, append) { ...@@ -167,27 +166,27 @@ async function generateTable(groups, append) {
let dividerRow; let dividerRow;
// completed todos // completed todos
if(userData.sortCompletedLast && groups[group][0]==="completed") { if(userData.sortCompletedLast && groups[group][0]==="completed") {
dividerRow = document.createRange().createContextualFragment("<div id=\"" + userData.sortByLevel[0] + groups[group][0] + "\" class=\"group " + userData.sortByLevel[0] + " " + groups[group][0] + "\"><div class=\"cell\"></div></div>") dividerRow = document.createRange().createContextualFragment("<div id=\"" + userData.sortBy[0] + groups[group][0] + "\" class=\"group " + userData.sortBy[0] + " " + groups[group][0] + "\"><div class=\"cell\"></div></div>")
// for priority, context and project // for priority, context and project
} else if(groups[group][0]!="null" && userData.sortByLevel[0]!="dueString") { } else if(groups[group][0]!="null" && userData.sortBy[0]!="dueString") {
dividerRow = document.createRange().createContextualFragment("<div id=\"" + userData.sortByLevel[0] + groups[group][0] + "\" class=\"group " + userData.sortByLevel[0] + " " + groups[group][0] + "\"><div class=\"cell\"><span class=\"button " + groups[group][0] + "\">" + groups[group][0].replace(/,/g, ', ') + "</span></div></div>") dividerRow = document.createRange().createContextualFragment("<div id=\"" + userData.sortBy[0] + groups[group][0] + "\" class=\"group " + userData.sortBy[0] + " " + groups[group][0] + "\"><div class=\"cell\"><span class=\"button " + groups[group][0] + "\">" + groups[group][0].replace(/,/g, ', ') + "</span></div></div>")
// if sorting is by due date // if sorting is by due date
} else if(userData.sortByLevel[0]==="dueString" && groups[group][1][0].due) { } else if(userData.sortBy[0]==="dueString" && groups[group][1][0].due) {
if(isToday(groups[group][1][0].due)) { if(isToday(groups[group][1][0].due)) {
dividerRow= document.createRange().createContextualFragment("<div id=\"" + userData.sortByLevel[0] + groups[group][0] + "\" class=\"group due\"><div class=\"cell isToday\"><span class=\"button\">" + translations.today + "</span></div></div>") dividerRow= document.createRange().createContextualFragment("<div id=\"" + userData.sortBy[0] + groups[group][0] + "\" class=\"group due\"><div class=\"cell isToday\"><span class=\"button\">" + translations.today + "</span></div></div>")
} else if(isTomorrow(groups[group][1][0].due)) { } else if(isTomorrow(groups[group][1][0].due)) {
dividerRow = document.createRange().createContextualFragment("<div id=\"" + userData.sortByLevel[0] + groups[group][0] + "\" class=\"group due\"><div class=\"cell isTomorrow\"><span class=\"button\">" + translations.tomorrow + "</span></div></div>") dividerRow = document.createRange().createContextualFragment("<div id=\"" + userData.sortBy[0] + groups[group][0] + "\" class=\"group due\"><div class=\"cell isTomorrow\"><span class=\"button\">" + translations.tomorrow + "</span></div></div>")
} else if(isPast(groups[group][1][0].due)) { } else if(isPast(groups[group][1][0].due)) {
dividerRow = document.createRange().createContextualFragment("<div id=\"" + userData.sortByLevel[0] + groups[group][0] + "\" class=\"group due\"><div class=\"cell isPast\"><span class=\"button\">" + groups[group][0] + "</span></div></div>") dividerRow = document.createRange().createContextualFragment("<div id=\"" + userData.sortBy[0] + groups[group][0] + "\" class=\"group due\"><div class=\"cell isPast\"><span class=\"button\">" + groups[group][0] + "</span></div></div>")