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) {
+ * Content rendering
-    el.className = className;
+ */
+
+/**
+ * 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,32 +220,33 @@ 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 (!sortOperation) {
+
     if (data === undefined || data === null || data.length <= 0) {
-    mosaicHeader.textContent = "Aucune association listée"
+      mosaicCount.textContent = "Aucune association listée"
     } else if (data.length === 1) {
-    mosaicHeader.textContent = "Une association listée"
+      mosaicCount.textContent = "Une association listée"
     } else {
-    mosaicHeader.textContent = data.length + " associations listées"
+      mosaicCount.textContent = data.length + " associations listées"
     }
 
     // close the menu if on mobile
@@ -199,6 +260,7 @@ function enableTag(node) {
       }
     }
   }
+}
 
 /***
  * Is a element in the view ?
@@ -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;
+  display: flex;
-  text-align: right;
+  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;

assets/production/styles/home.css

@@ -1 +1 @@
-.header{padding-bottom:1.5em;padding-top:1.5em;background-color:#d35400}.header-container{position:relative;display:flex;justify-content:space-between}.header-left{display:flex}.header-menu{position:absolute;right:0;bottom:0;display:flex;align-items:flex-end}.header-menu a{color:#fff;margin-right:1em}.header-menu a:last-of-type{margin-right:0}.header-image{margin-right:3em}.header-image img{width:7em}.header-content{display:flex;flex-direction:column;justify-content:space-between;padding-top:1em;padding-bottom:1em}.header-title{font-family:'Roboto Slab',serif;margin:0;color:#fff;font-weight:500;font-size:2.5em}.header-sub-title{margin:0;text-decoration:underline;font-weight:100;color:#ecf0f1;transition:opacity .2s}.header-sub-title:hover{opacity:.9;color:#ecf0f1}.header-description{color:#ecf0f1}.content{padding-top:1.5em;display:flex}.nav{margin-right:2em}.nav-item{width:15em;padding:1em;border-radius:4px;margin-bottom:.7em;border:3px solid rgba(255,111,10,.7);display:flex;cursor:pointer;transition:ease-in-out .1s;height:1.2em}.nav-item svg{width:.75em;height:.75em}.nav-icon{width:1em;display:flex;justify-content:center;align-items:center;color:#c28200;font-size:1.5em;margin-left:.25em;opacity:.7}.nav-item-content{margin-left:1em;display:flex;justify-content:space-between;width:100%}.nav-title{display:flex;align-items:center;opacity:.7}.nav-access{display:flex;align-items:center;color:#ff6f0a;opacity:.7}.nav-item.enabled{border-color:#ff6f0a}.nav-item.enabled .nav-access{opacity:1}.nav-item.enabled .nav-icon{opacity:1}.nav-item.enabled .nav-title{opacity:1}.nav-item:hover{transform:scale(1.05)}#nav-enabler{display:none}#nav-content{position:sticky;top:10px}.mosaic{background:#fff;width:100%;padding-bottom:.25em;flex-grow:1}.mosaic-header{width:100%;opacity:.8;text-align:right;margin-bottom:1.5em}.card-container{margin:0 auto;width:85%}.card{cursor:pointer;display:flex;border:1px solid #bdc3c7;border-radius:4px;margin-bottom:1em;box-shadow:0 0 8px 0 rgba(0,0,0,.1);overflow:hidden;text-decoration:none;transition:transform .2s ease-in-out}.card:hover{text-decoration:none}.card-image-container{border-right:1px solid #c4c4c4;display:flex;justify-content:center;align-items:center;padding:1em}.card-image{height:12em;width:12em;background-position:center;background-size:cover;transition:all .2s ease-in-out;border:0;outline:0;box-shadow:0}.card-image:hover{transform:scale(1.1)}.card-content{width:100%;padding:1.5em;display:flex;flex-direction:column;justify-content:space-between}.card-title-container{display:flex;justify-content:space-between}.card-icon{color:#c28200;opacity:.85;margin-top:-.5em;margin-right:-.5em;font-size:1.4em}.card-icon svg{width:1em;height:1em}.card-title{color:#b12008;margin:0;margin-bottom:.5em;padding-right:1em}.card-description{color:#34495e;margin:0;line-height:1.6em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-word;word-break:break-word}.card-description::first-letter{text-transform:capitalize}@media (max-width:1350px){.card-container{width:100%}.header-left{padding-bottom:1em}}@media (max-width:1000px){.header{padding-top:1em;padding-bottom:1em}.header-container{display:block}.header-left{display:block}.header-menu{justify-content:center;position:relative;margin-top:0}.header-content{padding:0}.header-image{margin:0;text-align:center}.header-image img{width:6em}.header-sub-title{margin-top:1em;text-align:center}.header-title{text-align:center;margin-bottom:.25em}.header-description{text-align:center}.content{display:block;padding-top:1em}.nav{margin-right:0;user-select:none}#nav-enabler{display:flex}#nav-enabler-icon{transform:rotate(-90deg)}#nav-content{overflow:hidden;max-height:0;transition:max-height .1s ease-out}.nav-item{width:auto}.nav-item:hover{transform:scale(1)}.nav-mobile-enabler #nav-enabler-icon{transition:all .1s ease}.mosaic{position:relative;border-top:1px solid #c4c4c4;padding-top:1em;margin-top:.3em}.mosaic-header{text-align:center;margin-bottom:1em}.card{display:block}.card-image-container{padding:0;margin:0;border-right:0;border-bottom:1px solid #c4c4c4;overflow:hidden}.card-content{width:auto}}
+.header{padding-bottom:1.5em;padding-top:1.5em;background-color:#d35400}.header-container{position:relative;display:flex;justify-content:space-between}.header-left{display:flex}.header-menu{position:absolute;right:0;bottom:0;display:flex;align-items:flex-end}.header-menu a{color:#fff;margin-right:1em}.header-menu a:last-of-type{margin-right:0}.header-image{margin-right:3em}.header-image img{width:7em}.header-home-link{display:flex;justify-content:center}.header-content{display:flex;flex-direction:column;justify-content:space-between;padding-top:1em;padding-bottom:1em}.header-title{font-family:'Roboto Slab',serif;margin:0;color:#fff;font-weight:500;font-size:2.5em}.header-sub-title{margin:0;text-decoration:underline;font-weight:100;color:#ecf0f1;transition:opacity .2s}.header-sub-title:hover{opacity:.9;color:#ecf0f1}.header-description{color:#ecf0f1}.content{padding-top:1.5em;display:flex;padding-bottom:1em}.nav{margin-right:2em}.nav-item{width:15em;padding:1em;border-radius:4px;margin-bottom:.7em;border:3px solid rgba(255,111,10,.7);display:flex;cursor:pointer;transition:ease-in-out .1s;height:1.2em}.nav-item svg{width:.75em;height:.75em}.nav-icon{width:1em;display:flex;justify-content:center;align-items:center;color:#c28200;font-size:1.5em;margin-left:.25em;opacity:.7}.nav-item-content{margin-left:1em;display:flex;justify-content:space-between;width:100%}.nav-title{display:flex;align-items:center;opacity:.7}.nav-access{display:flex;align-items:center;color:#ff6f0a;opacity:.7}.nav-item.enabled{border-color:#ff6f0a}.nav-item.enabled .nav-access{opacity:1}.nav-item.enabled .nav-icon{opacity:1}.nav-item.enabled .nav-title{opacity:1}.nav-item:hover{transform:scale(1.05)}#nav-enabler{display:none}#nav-content{position:sticky;top:10px}.mosaic{background:#fff;width:100%;padding-bottom:.25em;flex-grow:1}.mosaic-header{width:100%;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:.8}.mosaic-action .btn-icon{width:1em}.mosaic-action.enabled{background-color:#ecf0f1;color:#d35400}.mosaic-count{opacity:.8}.card-container{margin:0 auto;width:85%}.card{cursor:pointer;display:flex;border:1px solid #bdc3c7;border-radius:4px;margin-bottom:1em;box-shadow:0 0 8px 0 rgba(0,0,0,.1);overflow:hidden;text-decoration:none;transition:transform .2s ease-in-out}.card:hover{text-decoration:none}.card-image-container{border-right:1px solid #c4c4c4;display:flex;justify-content:center;align-items:center;padding:1em}.card-image{height:12em;width:12em;background-position:center;background-size:cover;transition:all .2s ease-in-out;border:0;outline:0;box-shadow:0}.card-image:hover{transform:scale(1.1)}.card-content{width:100%;padding:1.5em;display:flex;flex-direction:column;justify-content:space-between}.card-title-container{display:flex;justify-content:space-between}.card-icon{color:#c28200;opacity:.85;margin-top:-.5em;margin-right:-.5em;font-size:1.4em}.card-icon svg{width:1em;height:1em}.card-title{color:#b12008;margin:0;margin-bottom:.5em;padding-right:1em}.card-description{color:#34495e;margin:0;line-height:1.6em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-word;word-break:break-word}.card-description::first-letter{text-transform:capitalize}@media (max-width:1350px){.card-container{width:100%}.header-left{padding-bottom:1em}}@media (max-width:1000px){.header{padding-top:1em;padding-bottom:1em}.header-container{display:block}.header-left{display:block}.header-menu{justify-content:center;position:relative;margin-top:0}.header-content{padding:0}.header-home-link{margin-bottom:.25em}.header-image{margin:0;text-align:center}.header-image img{width:6em}.header-sub-title{margin-top:1em;text-align:center}.header-title{text-align:center;margin-bottom:.25em}.header-description{text-align:center}.content{display:block;padding-top:1em}.nav{margin-right:0;user-select:none}#nav-enabler{display:flex}#nav-enabler-icon{transform:rotate(-90deg)}#nav-content{overflow:hidden;max-height:0;transition:max-height .1s ease-out}.nav-item{width:auto}.nav-item:hover{transform:scale(1)}.nav-mobile-enabler #nav-enabler-icon{transition:all .1s ease}.mosaic{position:relative;border-top:1px solid #c4c4c4;padding-top:1em;margin-top:.3em}.mosaic-header{text-align:center;margin-bottom:1em}.card{display:block}.card-image-container{padding:0;margin:0;border-right:0;border-bottom:1px solid #c4c4c4;overflow:hidden}.card-content{width:auto}}

views/base.twig

@@ -29,7 +29,7 @@ Github: https://github.com/lefuturiste
         <div class="container header-container">
           <div class="header-left">
             <div class="header-image">
-              <a href="/">
+              <a class="header-home-link" href="/">
                 <img src="/static/imgs/espace_condorcet_logo.jpg" alt="Logo de l'Espace Condorcet Centre Social" />
               </a>
             </div>

views/home.twig

@@ -73,7 +73,23 @@
   </div>
 </div>
 <div class="mosaic" id="mosaic">
-  <div class="mosaic-header" id="mosaic-header"></div>
+  <div class="mosaic-header">
+    <div class="mosaic-actions">
+      <button
+        id="sort-btn"
+        title="Trier par ordre alphabétique"
+        class="mosaic-action sort-action">
+        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort-alpha-down" class="btn-icon svg-inline--fa fa-sort-alpha-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M176 352h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.36 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm240-64H288a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h56l-61.26 70.45A32 32 0 0 0 272 446.37V464a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-56l61.26-70.45A32 32 0 0 0 432 321.63V304a16 16 0 0 0-16-16zm31.06-85.38l-59.27-160A16 16 0 0 0 372.72 32h-41.44a16 16 0 0 0-15.07 10.62l-59.27 160A16 16 0 0 0 272 224h24.83a16 16 0 0 0 15.23-11.08l4.42-12.92h71l4.41 12.92A16 16 0 0 0 407.16 224H432a16 16 0 0 0 15.06-21.38zM335.61 144L352 96l16.39 48z"></path></svg>
+      </button>
+      <button
+        id="random-btn"
+        title="Trier aléatoirement"
+        class="mosaic-action random-action enabled">
+        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="random" class="btn-icon svg-inline--fa fa-random fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504.971 359.029c9.373 9.373 9.373 24.569 0 33.941l-80 79.984c-15.01 15.01-40.971 4.49-40.971-16.971V416h-58.785a12.004 12.004 0 0 1-8.773-3.812l-70.556-75.596 53.333-57.143L352 336h32v-39.981c0-21.438 25.943-31.998 40.971-16.971l80 79.981zM12 176h84l52.781 56.551 53.333-57.143-70.556-75.596A11.999 11.999 0 0 0 122.785 96H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12zm372 0v39.984c0 21.46 25.961 31.98 40.971 16.971l80-79.984c9.373-9.373 9.373-24.569 0-33.941l-80-79.981C409.943 24.021 384 34.582 384 56.019V96h-58.785a12.004 12.004 0 0 0-8.773 3.812L96 336H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h110.785c3.326 0 6.503-1.381 8.773-3.812L352 176h32z"></path></svg>
+      </button>
+    </div>
+    <div class="mosaic-count" id="mosaic-count"></div>
+  </div>
   <div class="card-container"></div>
 </div>
 {% endblock %}