feat(Home): add sort by name or random button

fix(Header): fix href div box for home link

assets/development/scripts/home.js

@@ -1,3 +1,14 @@
+/**
+ * Utils
+ */
+function createEl(className = false, elName = "div") {
+  let el = document.createElement(elName);
+  if (className != false) {
+    el.className = className;
+  }
+  return el;
+}
+
 /**
  * Nav management
  */
@@ -9,9 +20,10 @@ let navEnabler = document.getElementById('nav-enabler');
 let navEnablerText = document.getElementById('nav-enabler-text');
 let navEnablerIcon = document.getElementById('nav-enabler-icon');
 let navContent = document.getElementById('nav-content');
+let navAll = document.getElementById('nav-all')
 
 let mosaic = document.getElementById('mosaic');
-let mosaicHeader = document.getElementById('mosaic-header');
+let mosaicCount = document.getElementById('mosaic-count');
 let tags = []
 
 let navEnablerExists = false
@@ -36,17 +48,65 @@ navEnabler.onclick = async () => {
   navOpened = !navOpened
 }
 
-function createEl(className = false, elName = "div") {
-  let el = document.createElement(elName);
-  if (className != false) {
-    el.className = className;
+
+/**
+ * Content rendering
+ */
+
+/**
+ * Shuffle organization
+ */
+function shuffle(array) {
+  var currentIndex = array.length, temporaryValue, randomIndex
+  while (0 !== currentIndex) {
+    randomIndex = Math.floor(Math.random() * currentIndex)
+    currentIndex -= 1
+
+    temporaryValue = array[currentIndex]
+    array[currentIndex] = array[randomIndex]
+    array[randomIndex] = temporaryValue
   }
-  return el;
+
+  return array
 }
 
 /**
- * Render
+ * Filter & Sort actions
  */
+const randomBtn = document.getElementById('random-btn')
+const sortBtn = document.getElementById('sort-btn')
+
+// by default we render the cards with the random behaviour
+let sort = false
+organizations = shuffle(organizations)
+
+// the user want to sort randomly
+randomBtn.onclick = () => {
+  if (sort) {
+    organizations = shuffle(organizations)
+    enableTag(currentTag)
+    sort = false
+    randomBtn.classList.add('enabled')
+    sortBtn.classList.remove('enabled')
+  }
+}
+
+// the user want to sort by name
+sortBtn.onclick = () => {
+  if (!sort) {
+    // sort by name
+    organizations = organizations.sort((a, b) => {
+      var textA = a.name.toUpperCase()
+      var textB = b.name.toUpperCase()
+      return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
+    })
+    enableTag(currentTag)
+    sort = true
+    sortBtn.classList.add('enabled')
+    randomBtn.classList.remove('enabled')
+  }
+}
+
 function renderNavItem(tag) {
   /*
   <div class="nav-item">
@@ -160,42 +220,44 @@ function renderCard(organization) {
 let currentTag = null
 let currentCardContainer = null
 
-function enableTag(node) {
+function enableTag(node, sortOperation = false) {
 
   let all = node.id === 'nav-all'
-  let tagId = ""
+  let tagId = ''
+
   if (!all) {
     tagId = node.attributes['data-tag-id'].value
   }
   let data = organizations
     .filter(orga => orga.tags.filter(id => id === tagId).length > 0 || all)
-    .sort((a, b) => {
-      var textA = a.name.toUpperCase()
-      var textB = b.name.toUpperCase()
-      return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
-    })
+
   renderMosaic(data)
+
   node.className += ' enabled'
   if (currentTag !== null) {
     currentTag.className = currentTag.className.replace('enabled', '')
   }
   currentTag = node
-  if (data === undefined || data === null || data.length <= 0) {
-    mosaicHeader.textContent = "Aucune association listée"
-  } else if (data.length === 1) {
-    mosaicHeader.textContent = "Une association listée"
-  } else {
-    mosaicHeader.textContent = data.length + " associations listées"
-  }
 
-  // close the menu if on mobile
-  if (navEnablerExists) {
-    navOpened = !navOpened
-    closeMenu()
-    document.getElementsByClassName('content')[0].scrollIntoView(true)
-  } else {
-    if (window.scrollY() > 300) {
+  if (!sortOperation) {
+
+    if (data === undefined || data === null || data.length <= 0) {
+      mosaicCount.textContent = "Aucune association listée"
+    } else if (data.length === 1) {
+      mosaicCount.textContent = "Une association listée"
+    } else {
+      mosaicCount.textContent = data.length + " associations listées"
+    }
+
+    // close the menu if on mobile
+    if (navEnablerExists) {
+      navOpened = !navOpened
+      closeMenu()
       document.getElementsByClassName('content')[0].scrollIntoView(true)
+    } else {
+      if (window.scrollY() > 300) {
+        document.getElementsByClassName('content')[0].scrollIntoView(true)
+      }
     }
   }
 }
@@ -306,5 +368,5 @@ window.addEventListener('DOMContentLoaded', () => {
       iconHTML: node.querySelector('.nav-icon').innerHTML
     })
   })
-  enableTag(document.getElementById('nav-all'))
+  enableTag(navAll)
 })

assets/development/styles/home.css

@@ -40,6 +40,11 @@
   width: 7em;
 }
 
+.header-home-link {
+  display: flex;
+  justify-content: center;
+}
+
 .header-content {
   display: flex;
   flex-direction: column;
@@ -174,11 +179,48 @@ Nav
 
 .mosaic-header {
   width: 100%;
-  opacity: 0.8;
-  text-align: right;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 1.5em;
 }
 
+.mosaic-actions {
+  display: flex;
+}
+
+.mosaic-action {
+  cursor: pointer;
+  border: 0;
+  background-color: transparent;
+  padding: .75em .75em;
+  color: #2c3e50;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 2px;
+  margin-right: .5em;
+  border: 1px solid #7f8c8d;
+  transition: all .2s;
+}
+
+.mosaic-action:hover {
+  opacity: 0.8;
+}
+
+.mosaic-action .btn-icon {
+  width: 1em;
+}
+
+.mosaic-action.enabled {
+  background-color: #ecf0f1;
+  color:#d35400;
+}
+
+.mosaic-count {
+  opacity: 0.8;
+}
+
 .card-container {
   margin: 0 auto;
   width: 85%;
@@ -316,6 +358,9 @@ Nav
   .header-content {
     padding: 0;
   }
+  .header-home-link {
+    margin-bottom: .25em;
+  }
   .header-image {
     margin: 0;
     text-align: center;