From 25ec5a9e576d4511f78cddf02916a2dffb9b082c Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Tue, 24 May 2022 12:39:44 +0000 Subject: [PATCH 01/10] comment service worker --- app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app.js b/app.js index 7497227a..c218bed8 100644 --- a/app.js +++ b/app.js @@ -297,7 +297,7 @@ addWhatappEventHandler(); } // service worker - +/* if('serviceWorker' in navigator){ window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') @@ -307,4 +307,4 @@ if('serviceWorker' in navigator){ .catch((err)=> console.log('Service worker not registered', err)); }); -} +}*/ From b3466a15241ec0033b1f5e7582d5ef828d01f755 Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Tue, 24 May 2022 12:50:08 +0000 Subject: [PATCH 02/10] move sortUI() to global scope --- js/displayCountdowns.js | 83 +++++++++++++++++++++++------------------ 1 file changed, 46 insertions(+), 37 deletions(-) diff --git a/js/displayCountdowns.js b/js/displayCountdowns.js index db9897c1..70e384b5 100644 --- a/js/displayCountdowns.js +++ b/js/displayCountdowns.js @@ -40,23 +40,7 @@ async function displayCountdowns() { setInnerHtmlForNotNull(countdownList, listItems) setInnerHtmlForNotNull(countdownTextDisplay, '') - const sortUI = async () => { - if (!document.querySelector(".list-settings")) { - const listContainer = document.querySelector(".list-container"); - let sortHtml = ` -
-
-
-
Date modified
-
Due date
-
-
Sort By
-
-
`; - listContainer.insertAdjacentHTML("afterbegin", sortHtml); - } - // addSortEventListeners(); - } + sortUI(); @@ -66,6 +50,26 @@ async function displayCountdowns() { setInnerHtmlForNotNull(countdownTextDisplay, '') } } +/** + * Adds sort menu to the page + */ +const sortUI = async () => { + if (!document.querySelector(".list-settings")) { + const listContainer = document.querySelector(".list-container"); + let sortHtml = ` +
+
+
+
Date modified
+
Due date
+
+
Sort By
+
+
`; + listContainer.insertAdjacentHTML("afterbegin", sortHtml); + } + // addSortEventListeners(); +} /** * Returns html string with a list of countdowns * @param {Array.<{text: String, date: String, dateModified: String}>} arrayOfCountdowns | contains array of countdown objects @@ -359,27 +363,32 @@ const closeSortMenu = () => { const addSortEventListeners = () => { const sortOpts = document.querySelector(".sort-options"); const sortTitle = document.querySelector(".sort-title"); - sortTitle.addEventListener("click", () => { - if (sortOpts.style.display == "block") { - sortOpts.style.display = "none"; - } - else { - sortOpts.style.display = "block"; - } - }); + console.log('sort title', sortTitle); + if(sortTitle){ + sortTitle.addEventListener("click", () => { + if (sortOpts.style.display == "block") { + sortOpts.style.display = "none"; + } + else { + sortOpts.style.display = "block"; + } + }); + } // sort options menu events - sortOpts.addEventListener("click", (event) => { - if (event.target.className.search('due') > -1) { - localStorage.setItem('sort', 'due') - } else if (event.target.className.search('modified') > -1) { - localStorage.setItem('sort', 'modified') - // console.log('modified clicked', localStorage.getItem('sort')); - // displayCountdowns(); - } - // close sortOptions menu on selection and refresh list - closeSortMenu(); - displayCountdowns(); - }) + if(sortOpts){ + sortOpts.addEventListener("click", (event) => { + if (event.target.className.search('due') > -1) { + localStorage.setItem('sort', 'due') + } else if (event.target.className.search('modified') > -1) { + localStorage.setItem('sort', 'modified') + // console.log('modified clicked', localStorage.getItem('sort')); + // displayCountdowns(); + } + // close sortOptions menu on selection and refresh list + closeSortMenu(); + displayCountdowns(); + }) + } } function handleUpdate() { From 8d6344ee41e4b514aee98d2f4e85a83cd56b7c42 Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Tue, 24 May 2022 13:01:05 +0000 Subject: [PATCH 03/10] Move display outside if for countdown creation --- js/formupdate.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/js/formupdate.js b/js/formupdate.js index 05fa55bd..f99217d0 100644 --- a/js/formupdate.js +++ b/js/formupdate.js @@ -106,22 +106,22 @@ function handleFormSubmission() { // console.log(countdown); setCountDownList(countdown); // external function - try{ - displayAndStartcount(); - console.log('we did it', countItemExists); - } catch (err) { - console.log(err, 'err in updating countdown initialisation'); - errorHandler("Unable to finish update your countdowns"); -} + closeFormPopUp(); }else{ // create first countdown setCountDownList([countItem]); - displayCountdowns(); + // displayAndAddListeners(); closeFormPopUp(); } - + try{ + displayAndStartcount(); + console.log('we did it', countItemExists); + } catch (err) { + console.log(err, 'err in updating countdown initialisation'); + errorHandler("Unable to finish update your countdowns"); +} // testing // closeFormPopUp(); }) From 788ff27d4248a2cb2d7d132262e1c106cc467dd8 Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Tue, 24 May 2022 13:02:25 +0000 Subject: [PATCH 04/10] fix sort menu not opening, use correct function --- js/formupdate.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/formupdate.js b/js/formupdate.js index f99217d0..5ed479e4 100644 --- a/js/formupdate.js +++ b/js/formupdate.js @@ -116,7 +116,7 @@ function handleFormSubmission() { closeFormPopUp(); } try{ - displayAndStartcount(); + displayAndAddListeners(); console.log('we did it', countItemExists); } catch (err) { console.log(err, 'err in updating countdown initialisation'); From 8ce6c416a6bda0cbf4b09a70c2b33a592488d8f3 Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Tue, 24 May 2022 13:56:20 +0000 Subject: [PATCH 05/10] progress in context menu fix --- js/displayCountdowns.js | 10 +++++---- js/formupdate.js | 50 ++++++++++++++++++++--------------------- 2 files changed, 31 insertions(+), 29 deletions(-) diff --git a/js/displayCountdowns.js b/js/displayCountdowns.js index 70e384b5..1b5ebcd1 100644 --- a/js/displayCountdowns.js +++ b/js/displayCountdowns.js @@ -40,9 +40,6 @@ async function displayCountdowns() { setInnerHtmlForNotNull(countdownList, listItems) setInnerHtmlForNotNull(countdownTextDisplay, '') - - - sortUI(); } else { @@ -54,6 +51,7 @@ async function displayCountdowns() { * Adds sort menu to the page */ const sortUI = async () => { + console.log('sort ui firing'); if (!document.querySelector(".list-settings")) { const listContainer = document.querySelector(".list-container"); let sortHtml = ` @@ -307,6 +305,7 @@ function addListEventListener() { else if (targetElement.className == 'countdown-list-options' || targetElement.tagName == 'I') { //get the countdown list item and pass to function, search for list class .menu //in case of directly clicking on icon, parent element is .countdown-list-options div + console.log('trigger context'); triggerContextMenu(targetElement.parentElement); } else if (targetElement.className.search('menu-opts') > -1) { @@ -500,6 +499,7 @@ function setCountDownList(arrayOfJSONCountdowns) { } function addListEventHandlers() { + console.log('listEvent handler firing'); addListEventListener(); addSortEventListeners(); @@ -508,8 +508,10 @@ function addListEventHandlers() { } async function displayAndAddListeners(){ + console.log('calling display and add listeners'); await displayAndStartcount() - addListEventHandlers(); + // sortUI(); + addListEventHandlers(); } try { displayAndAddListeners(); diff --git a/js/formupdate.js b/js/formupdate.js index 5ed479e4..26b09486 100644 --- a/js/formupdate.js +++ b/js/formupdate.js @@ -43,7 +43,7 @@ function addZeros(time) { function setDateAttributes() { const dateInput = document.getElementById("dateInput"); const today = new Date(); - let dd = today.getDate() ;//add 1 to the date so date starts from tomorrow + let dd = today.getDate();//add 1 to the date so date starts from tomorrow let mm = today.getMonth() + 1; //January is 0 so need to add 1 to make it 1! let yyyy = today.getFullYear(); let hr = addZeros(today.getHours()); @@ -51,10 +51,10 @@ function setDateAttributes() { dd = addZeros(dd); mm = addZeros(mm) - let todayString = yyyy + '-' + mm + '-' + dd+'T'+ hr+':'+min; + let todayString = yyyy + '-' + mm + '-' + dd + 'T' + hr + ':' + min; console.log(todayString); dateInput.setAttribute("min", todayString); - dateInput.value= todayString; + dateInput.value = todayString; } function closeFormPopUp() { @@ -72,17 +72,17 @@ function sanitize(string) { "/": '/', }; const reg = /[&<>"'/]/ig; - return string.replace(reg, (match)=>(map[match])); - } + return string.replace(reg, (match) => (map[match])); +} function handleFormSubmission() { const countdownForm = document.getElementById('customDateForm'); const submitbutton = document.getElementById('countdown-submit'); - + // const event = document.createEvent('Event'); // console.log(event); countdownForm.addEventListener('submit', (e) => { - + e.preventDefault(); submitbutton.disabled = true; // get text field values, with auto values @@ -100,35 +100,35 @@ function handleFormSubmission() { userDate = new Date(userDate); let countItem = { text: userText, date: userDate, dateModified: new Date() }; let countdown = localStorage.getItem('countdown'); - if(countdown !== null){ //countdowns already exist - countdown = JSON.parse(countdown);//array - countdown.push(countItem); - // console.log(countdown); - setCountDownList(countdown); - // external function - - closeFormPopUp(); - - }else{ + if (countdown !== null) { //countdowns already exist + countdown = JSON.parse(countdown);//array + countdown.push(countItem); + // console.log(countdown); + setCountDownList(countdown); + // external function + + closeFormPopUp(); + + } else { // create first countdown - setCountDownList([countItem]); + setCountDownList([countItem]); // displayAndAddListeners(); - closeFormPopUp(); + closeFormPopUp(); } - try{ + try { displayAndAddListeners(); console.log('we did it', countItemExists); } catch (err) { - console.log(err, 'err in updating countdown initialisation'); - errorHandler("Unable to finish update your countdowns"); -} + console.log(err, 'err in updating countdown initialisation'); + errorHandler("Unable to finish update your countdowns"); + } // testing // closeFormPopUp(); }) } -function setCountDownList(jsArray){ - localStorage.setItem('countdown', JSON.stringify(jsArray)) +function setCountDownList(jsArray) { + localStorage.setItem('countdown', JSON.stringify(jsArray)) } // DOM Elements From 0b9f97676a974cff1aa031d073ad78f98c06c1a9 Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Tue, 24 May 2022 14:35:29 +0000 Subject: [PATCH 06/10] fix context menu duplication --- js/displayCountdowns.js | 120 +++++++++++++++++++++------------------- 1 file changed, 62 insertions(+), 58 deletions(-) diff --git a/js/displayCountdowns.js b/js/displayCountdowns.js index 1b5ebcd1..a61cefd2 100644 --- a/js/displayCountdowns.js +++ b/js/displayCountdowns.js @@ -286,70 +286,74 @@ function hideContextMenus(event) { } -function addListEventListener() { - document.querySelector('.countdown-list').addEventListener('click', event => { - const targetElement = event.target; - - // if event is fired on text or date - if (targetElement.className == 'countdown-list-text' || targetElement.className == 'countdown-list-date') { - // hideContextMenus() - // todo: find a better way of accessing element in countdown array - updateClockAndText(arrayOfCountdowns[targetElement.parentElement.getAttribute('data-index')].date, arrayOfCountdowns[targetElement.parentElement.getAttribute('data-index')].text) - - if ([null, "", undefined].includes(document.querySelector(".clock-row").style.display)) { - document.querySelector(".clock-row").style.display = "flex"; - document.querySelector(".clock-row").style.animationPlayState = "running"; - } + +const listEventListener = event => { + const targetElement = event.target; + + // if event is fired on text or date + if (targetElement.className == 'countdown-list-text' || targetElement.className == 'countdown-list-date') { + // hideContextMenus() + // todo: find a better way of accessing element in countdown array + updateClockAndText(arrayOfCountdowns[targetElement.parentElement.getAttribute('data-index')].date, arrayOfCountdowns[targetElement.parentElement.getAttribute('data-index')].text) + + if ([null, "", undefined].includes(document.querySelector(".clock-row").style.display)) { + document.querySelector(".clock-row").style.display = "flex"; + document.querySelector(".clock-row").style.animationPlayState = "running"; } - //if the area for context menu is clicked - else if (targetElement.className == 'countdown-list-options' || targetElement.tagName == 'I') { - //get the countdown list item and pass to function, search for list class .menu - //in case of directly clicking on icon, parent element is .countdown-list-options div - console.log('trigger context'); - triggerContextMenu(targetElement.parentElement); - - } else if (targetElement.className.search('menu-opts') > -1) { - let count_modified = targetElement.parentElement.getAttribute('data-id'); - if (targetElement.className.search('main') > -1) { - // set as main clicked - // find the element convert to JSON and place it as the main clock - const countdown = arrayOfCountdowns.find((countdown) => countdown.dateModified == count_modified); - const mainCount = JSON.stringify(countdown); - localStorage.setItem('mainClock', mainCount); - let date = new Date(countdown.date); - notifyUser(`Homepage clock set to ${date.getDate()} ${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`); - } else if (targetElement.className.search('del') > -1) { - // delete item clicked - arrayOfCountdowns = arrayOfCountdowns.filter((countdown, index) => countdown.dateModified != count_modified); - setCountDownList(arrayOfCountdowns); - setInnerHtmlForNotNull(countdownList, populateList(arrayOfCountdowns)); - // console.log('delete clicked', targetElement.parentElement, arrayOfCountdowns[targetElement.parentElement.getAttribute('data-index')]); - } else if (targetElement.className.search('edit') > -1) { - let editItem = arrayOfCountdowns.find((countdown, index) => countdown.dateModified == count_modified); - // todo: custom error messages for components on fail - try { - if (editItem) { - console.log('Edit clicked', editItem); - repeat = false; - if (editItem.hasOwnProperty('repeat')) { - repeat = editItem.repeat; - } - displayFormPopUp(editItem.text, /\d+-\d+-\d+T\d+:\d+/.exec(editItem.date), count_modified, repeat); - handleUpdate(); - } else { - // something went wrong with the editing - errorHandler('Unable to edit countdown'); - // console.log(editItem); + } + //if the area for context menu is clicked + else if (targetElement.className == 'countdown-list-options' || targetElement.tagName == 'I') { + //get the countdown list item and pass to function, search for list class .menu + //in case of directly clicking on icon, parent element is .countdown-list-options div + console.log('trigger context'); + triggerContextMenu(targetElement.parentElement); + + } else if (targetElement.className.search('menu-opts') > -1) { + let count_modified = targetElement.parentElement.getAttribute('data-id'); + if (targetElement.className.search('main') > -1) { + // set as main clicked + // find the element convert to JSON and place it as the main clock + const countdown = arrayOfCountdowns.find((countdown) => countdown.dateModified == count_modified); + const mainCount = JSON.stringify(countdown); + localStorage.setItem('mainClock', mainCount); + let date = new Date(countdown.date); + notifyUser(`Homepage clock set to ${date.getDate()} ${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`); + } else if (targetElement.className.search('del') > -1) { + // delete item clicked + arrayOfCountdowns = arrayOfCountdowns.filter((countdown, index) => countdown.dateModified != count_modified); + setCountDownList(arrayOfCountdowns); + setInnerHtmlForNotNull(countdownList, populateList(arrayOfCountdowns)); + // console.log('delete clicked', targetElement.parentElement, arrayOfCountdowns[targetElement.parentElement.getAttribute('data-index')]); + } else if (targetElement.className.search('edit') > -1) { + let editItem = arrayOfCountdowns.find((countdown, index) => countdown.dateModified == count_modified); + // todo: custom error messages for components on fail + try { + if (editItem) { + console.log('Edit clicked', editItem); + repeat = false; + if (editItem.hasOwnProperty('repeat')) { + repeat = editItem.repeat; } - } catch (err) { - console.log(err, 'Error in form display'); - errorHandler('Error in form display'); + displayFormPopUp(editItem.text, /\d+-\d+-\d+T\d+:\d+/.exec(editItem.date), count_modified, repeat); + handleUpdate(); + } else { + // something went wrong with the editing + errorHandler('Unable to edit countdown'); + // console.log(editItem); } + } catch (err) { + console.log(err, 'Error in form display'); + errorHandler('Error in form display'); + } - } } - }) + } +} +function addListEventListener() { + const countList =document.querySelector('.countdown-list') + countList.removeEventListener('click', listEventListener) + countList.addEventListener('click', listEventListener) } const closeSortMenu = () => { From ce5a51074e9349e83b76b5d148d30836902ec96e Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Tue, 24 May 2022 14:36:37 +0000 Subject: [PATCH 07/10] add description for function --- js/displayCountdowns.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/js/displayCountdowns.js b/js/displayCountdowns.js index a61cefd2..aec1df7b 100644 --- a/js/displayCountdowns.js +++ b/js/displayCountdowns.js @@ -287,6 +287,10 @@ function hideContextMenus(event) { } +/** + * List Click event listener for the countdowns, context menu and items + * @param {Event} event + */ const listEventListener = event => { const targetElement = event.target; From 7c692bcddfe933f8dbc76ab20e5c21f59dfcfa7f Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Tue, 24 May 2022 15:38:29 +0000 Subject: [PATCH 08/10] move sort arrow functions to named global scope, prevent listener from registering twice --- js/displayCountdowns.js | 49 +++++++++++++++++++++++------------------ 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/js/displayCountdowns.js b/js/displayCountdowns.js index a0575608..af0e5ab2 100644 --- a/js/displayCountdowns.js +++ b/js/displayCountdowns.js @@ -309,7 +309,6 @@ const listEventListener = event => { else if (targetElement.className == 'countdown-list-options' || targetElement.tagName == 'I') { //get the countdown list item and pass to function, search for list class .menu //in case of directly clicking on icon, parent element is .countdown-list-options div - console.log('trigger context'); triggerContextMenu(targetElement.parentElement); } else if (targetElement.className.search('menu-opts') > -1) { @@ -367,34 +366,42 @@ const closeSortMenu = () => { } } +const sortTitleEventHandler= () => { + const sortOpts = document.querySelector(".sort-options"); + console.log('clicking in sort'); + if (sortOpts.style.display == "block") { + sortOpts.style.display = "none"; + } + else { + sortOpts.style.display = "block"; + } +} + +const sortOptionsEventHandler = (event) => { + if (event.target.className.search('due') > -1) { + localStorage.setItem('sort', 'due') + } else if (event.target.className.search('modified') > -1) { + localStorage.setItem('sort', 'modified') + // console.log('modified clicked', localStorage.getItem('sort')); + // displayCountdowns(); + } + // close sortOptions menu on selection and refresh list + closeSortMenu(); + displayCountdowns(); + } + const addSortEventListeners = () => { const sortOpts = document.querySelector(".sort-options"); const sortTitle = document.querySelector(".sort-title"); console.log('sort title', sortTitle); if(sortTitle){ - sortTitle.addEventListener("click", () => { - if (sortOpts.style.display == "block") { - sortOpts.style.display = "none"; - } - else { - sortOpts.style.display = "block"; - } - }); + sortTitle.removeEventListener("click", sortTitleEventHandler); + sortTitle.addEventListener("click", sortTitleEventHandler); } // sort options menu events if(sortOpts){ - sortOpts.addEventListener("click", (event) => { - if (event.target.className.search('due') > -1) { - localStorage.setItem('sort', 'due') - } else if (event.target.className.search('modified') > -1) { - localStorage.setItem('sort', 'modified') - // console.log('modified clicked', localStorage.getItem('sort')); - // displayCountdowns(); - } - // close sortOptions menu on selection and refresh list - closeSortMenu(); - displayCountdowns(); - }) + sortOpts.removeEventListener("click", sortOptionsEventHandler) + sortOpts.addEventListener("click", sortOptionsEventHandler) } } From 13a6282c012d62ca0dbd3657a8476f614d26149a Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Tue, 24 May 2022 15:40:09 +0000 Subject: [PATCH 09/10] remove unused logs --- js/displayCountdowns.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/js/displayCountdowns.js b/js/displayCountdowns.js index af0e5ab2..3d84f903 100644 --- a/js/displayCountdowns.js +++ b/js/displayCountdowns.js @@ -51,7 +51,6 @@ async function displayCountdowns() { * Adds sort menu to the page */ const sortUI = async () => { - console.log('sort ui firing'); if (!document.querySelector(".list-settings")) { const listContainer = document.querySelector(".list-container"); let sortHtml = ` @@ -382,8 +381,6 @@ const sortOptionsEventHandler = (event) => { localStorage.setItem('sort', 'due') } else if (event.target.className.search('modified') > -1) { localStorage.setItem('sort', 'modified') - // console.log('modified clicked', localStorage.getItem('sort')); - // displayCountdowns(); } // close sortOptions menu on selection and refresh list closeSortMenu(); @@ -393,7 +390,6 @@ const sortOptionsEventHandler = (event) => { const addSortEventListeners = () => { const sortOpts = document.querySelector(".sort-options"); const sortTitle = document.querySelector(".sort-title"); - console.log('sort title', sortTitle); if(sortTitle){ sortTitle.removeEventListener("click", sortTitleEventHandler); sortTitle.addEventListener("click", sortTitleEventHandler); @@ -513,7 +509,6 @@ function setCountDownList(arrayOfJSONCountdowns) { } function addListEventHandlers() { - console.log('listEvent handler firing'); addListEventListener(); addSortEventListeners(); @@ -522,7 +517,6 @@ function addListEventHandlers() { } async function displayAndAddListeners(){ - console.log('calling display and add listeners'); await displayAndStartcount() // sortUI(); addListEventHandlers(); From 059b966b09f4650824f8af61c7bf3f5696171830 Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Tue, 24 May 2022 16:51:05 +0000 Subject: [PATCH 10/10] Activate service worker, cache names --- app.js | 4 ++-- sw.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app.js b/app.js index c218bed8..7497227a 100644 --- a/app.js +++ b/app.js @@ -297,7 +297,7 @@ addWhatappEventHandler(); } // service worker -/* + if('serviceWorker' in navigator){ window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') @@ -307,4 +307,4 @@ if('serviceWorker' in navigator){ .catch((err)=> console.log('Service worker not registered', err)); }); -}*/ +} diff --git a/sw.js b/sw.js index 694e2935..e1140aae 100644 --- a/sw.js +++ b/sw.js @@ -1,7 +1,7 @@ // #5 -const staticCacheName = 'site-static-v52'; -const dynamicCache = 'site-dynamic-v52'; +const staticCacheName = 'site-static-v53'; +const dynamicCache = 'site-dynamic-v53'; const dynamicCacheSize = 30;