Skip to content

Commit

Permalink
Merge pull request #99 from RDjarbeng/sort
Browse files Browse the repository at this point in the history 
Add custom sort to listpage
  • Loading branch information
@RDjarbeng
RDjarbeng authored May 7, 2022
2 parents 49389d7 + 11c0ad7 commit 2d7c85f
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 16 deletions.
36 changes: 34 additions & 2 deletions css/countdown-list.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -385,7 +385,39 @@ hr{color:rgba(255, 255, 255, 0.2); width: 85%;}
right: 50%;
transform: translateX(50%);
}

.list-settings{
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
/* height: 2rem; */
}
.sort{
width: 80vmin;
display: grid;
justify-content: flex-end;
align-items: flex-end;
position: relative;
gap: .3rem;
grid-template-areas: "opt sort";
}
.sort-options{
width: 8rem;
display: none;
position: absolute;
right: 5.2rem;
bottom: -190%;
z-index: 2;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
}
.sort-opt{
padding: .2rem .3rem;
background: var(--bg-timer);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.sort-opt:hover{
background:var(--bg-cdListHover);
}
.list-container{
width: 100vw;
height: 100vh;
Expand Down Expand Up @@ -445,7 +477,7 @@ padding: 0 0 0 1rem;
}

.menu{
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2); ;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
position: absolute;
right: 0;
top: 60%;
Expand Down
4 changes: 1 addition & 3 deletions html/countdown-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,8 @@
<section class="list-container">
<div class="countdown-list" id="countdown-list">
Loading ...
</div>

</div>
</section>

</div>
</main>
<div class="new-item"><i class="fas fa-plus fa-xl"></i></div>
Expand Down
98 changes: 87 additions & 11 deletions js/displayCountdowns.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,17 +40,41 @@ async function displayCountdowns() {
let listItems = populateList(arrayOfCountdowns);
setInnerHtmlForNotNull(countdownList, listItems)
setInnerHtmlForNotNull(countdownTextDisplay, '')
// updateClockAndText(arrayOfCountdowns[arrayOfCountdowns.length-1].date, arrayOfCountdowns[arrayOfCountdowns.length-1].text)

const sortUI = async ()=> {
if (!document.querySelector(".list-settings")) {
const listContainer = document.querySelector(".list-container");
let sortHtml = `
<section class="list-settings">
<div class="sort">
<div class="sort-options">
<div class="sort-opt modified">Date modified</div>
<div class="sort-opt due">Due date</div>
</div>
<div class="sort-title"><i class="fas fas fa-sort-amount-up"></i> Sort By </div>
</div>
</section>`;
listContainer.insertAdjacentHTML("afterbegin", sortHtml);
}
// addSortEventListeners();
}


sortUI();

} else {
setInnerHtmlForNotNull(countdownList, 'Found no countdowns to display');
setInnerHtmlForNotNull(countdownTextDisplay, '')
}
}

/**
*
* @param {Array} arrayOfCountdowns
* @returns {String} listItems
*/
function populateList(arrayOfCountdowns) {
let listItems = '';
sortArrayOnSelection();
arrayOfCountdowns.forEach((countdown, index) => {
let date = new Date(countdown.date);
listItems += `
Expand All @@ -77,6 +101,15 @@ function populateList(arrayOfCountdowns) {
return listItems;
}

function sortArrayOnSelection(){
let sortType = localStorage.getItem('sort');
if(sortType =="due"){
// sort by due date if present
arrayOfCountdowns.sort((countItem1, countItem2)=> new Date(countItem2.date).getTime()-new Date(countItem1.date).getTime())
}else{
arrayOfCountdowns.sort((countItem1, countItem2)=> new Date(countItem1.dateModified).getTime()-new Date(countItem2.dateModified).getTime())
}
}
function updateClockAndText(date, text, animation = true) {
let clock = new Clock(new Date(date));
setInnerHtmlForNotNull(countdownTextDisplay, text);
Expand Down Expand Up @@ -117,16 +150,17 @@ function switchContextIconDown(element){
}
function hideContextMenus(event) {
//if function is not triggered by event listener, event is empty
if ((!(event != null))||!(event.target.className == 'countdown-list-options' || event.target.tagName == 'I')) {
if ((!(event != null))||!(event.target.className == 'countdown-list-options' || event.target.tagName == 'I'|| (event.target.className.search('sort-title') >-1))) {
document.querySelectorAll('.menu').forEach(contextMenu => contextMenu.style.display = "none");
document.querySelectorAll('.fa-chevron-circle-up').forEach(element => switchContextIconDown(element));
closeSortMenu();
// }
}


}
function addListEventListener() {
document.querySelector('.countdown-list').addEventListener('click', event => {
//hide all context menus

const targetElement = event.target;

// if event is fired on text or date
Expand Down Expand Up @@ -186,6 +220,42 @@ function addListEventListener() {
})
}

const closeSortMenu=()=>{
const sortOpts = document.querySelector(".sort-options");
if (sortOpts.style.display == "block") {
sortOpts.style.display = "none";
}
}

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";
}
});
// sort options menu events
sortOpts.addEventListener("click", (event)=> {
if(event.target.className.search('due') > -1){
localStorage.setItem('sort', 'due')
// console.log('due clicked', localStorage.getItem('sort'));
// displayCountdowns();

}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() {
// todo: update list with custom fired events
const countdownForm = document.getElementById('customUpDateForm');
Expand Down Expand Up @@ -227,7 +297,7 @@ function handleUpdate() {
closeFormPopUp();
removeClockAndText();
}else{
console.log("Unable to update Item in displayCountdown, HandleUpdate");
console.log("Unable to find Item to update in displayCountdown array of Countdowns, HandleUpdate", pos);
errorHandler('Unable to update Item');
}

Expand Down Expand Up @@ -279,15 +349,21 @@ function setCountDownList(arrayOfJSONCountdowns) {

function addListEventHandlers() {
addListEventListener();
addSortEventListeners();

// add context menu event listener
document.querySelector('.container').addEventListener("click", hideContextMenus);
}

async function displayAndAddListeners(){
await displayCountdowns().catch((err)=>{
console.log(err);
errorHandler('Unable to fetch your countdowns')
});
addListEventHandlers();
}
try{
displayCountdowns().catch((err)=>{
console.log(err);
errorHandler('Unable to fetch your countdowns')
});
addListEventHandlers();
displayAndAddListeners();
}catch (err) {
console.log(err, 'err in display countdown initialisation');
errorHandler("Unable to fetch your countdowns");
Expand Down

0 comments on commit 2d7c85f

Please sign in to comment.