feat(Home): better shuffle management

assets/development/scripts/home.js

@@ -56,18 +56,26 @@ navEnabler.onclick = async () => {
 /**
  * Shuffle organization
  */
-function shuffle(array) {
-  var currentIndex = array.length, temporaryValue, randomIndex
+function shuffle(array, seed = {}) {
+  let newSeed = {}
+  let currentIndex = array.length, temporaryValue, randomIndex
   while (0 !== currentIndex) {
+    if (seed[currentIndex] === undefined) {
       randomIndex = Math.floor(Math.random() * currentIndex)
-    currentIndex -= 1
+    } else {
+      randomIndex = seed[currentIndex.toString()]
+    }
+    newSeed[currentIndex.toString()] = randomIndex
 
+    currentIndex -= 1
     temporaryValue = array[currentIndex]
     array[currentIndex] = array[randomIndex]
     array[randomIndex] = temporaryValue
   }
-
-  return array
+  if (newSeed.length == 0) {
+    newSeed = null
+  }
+  return [array, newSeed]
 }
 
 /**
@@ -75,15 +83,16 @@ function shuffle(array) {
  */
 const randomBtn = document.getElementById('random-btn')
 const sortBtn = document.getElementById('sort-btn')
+const seedStorageKey = 'fva_shuffle_seed'
+let originalRandom = ''
 
-// by default we render the cards with the random behaviour
 let sort = false
-organizations = shuffle(organizations)
+let seed = {}
 
 // the user want to sort randomly
 randomBtn.onclick = () => {
   if (sort) {
-    organizations = shuffle(organizations)
+    organizations = JSON.parse(originalRandom)
     enableTag(currentTag, true)
     sort = false
     randomBtn.classList.add('enabled')
@@ -209,10 +218,17 @@ function renderCard(organization) {
   card.appendChild(content)
 
   card.href = goTo
+  card.setAttribute('data-organization-id', organization._id)
 
   // card.onclick = () => {
   //   window.location = goTo
   // }
+  card.onclick = (e) => {
+    e.preventDefault()
+    window.sessionStorage[scrollPointStorageKey] = organization._id
+    window.location.href = goTo
+  } 
+
   return card
 }
 
@@ -221,7 +237,6 @@ let currentTag = null
 let currentCardContainer = null
 
 function enableTag(node, sortOperation = false, initialOperation = false) {
-
   let all = node.id === 'nav-all'
   let tagId = ''
 
@@ -347,7 +362,7 @@ function renderMosaic(data) {
 const scrollPointStorageKey = 'fva_scroll_point'
 
 window.onscroll = () => {
-  window.sessionStorage[scrollPointStorageKey] = window.scrollY()
+  //window.sessionStorage[scrollPointStorageKey] = window.scrollY()
   if (focusPoint != null && isVisible(focusPoint) && !rendering) {
     if (page + 1 < pageCount + 1) {
       page++
@@ -356,11 +371,6 @@ window.onscroll = () => {
   }
 }
 
-if (window.sessionStorage[scrollPointStorageKey] != null) {
-  let s = parseInt(window.sessionStorage[scrollPointStorageKey])
-  console.log(s)
-  window.scrollTo(0, s)
-}
 
 /**
  * Fetch tags and register click handler
@@ -377,5 +387,26 @@ window.addEventListener('DOMContentLoaded', () => {
       iconHTML: node.querySelector('.nav-icon').innerHTML
     })
   })
+
+  // by default we render the cards with the random behaviour
+  seed = window.sessionStorage[seedStorageKey] == null ? {} : JSON.parse(window.sessionStorage[seedStorageKey])
+  let res = shuffle(organizations, seed)
+  organizations = res[0]
+  originalRandom = JSON.stringify(organizations)
+  seed = res[1]
+
   enableTag(navAll, false, true)
+  
+  window.sessionStorage.setItem(seedStorageKey, JSON.stringify(seed))
+
+  // if (window.sessionStorage[scrollPointStorageKey] != null) {
+  //   let organizationFocus = document
+  //     .querySelectorAll('.card-container .card')
+  //   console.log(organizationFocus)
+  //   organizationFocus = organizationFocus
+  //     .filter(e => e.getAttribute('data-organization-id') === window.sessionStorage[scrollPointStorageKey])
+  //   if (organizationFocus.length > 0) {
+  //     organizationFocus.scrollIntoView(true)
+  //   }
+  // }
 })

assets/development/styles/home.css

@@ -121,6 +121,12 @@ Nav
   color: initial;
 }
 
+.nav-item:focus {
+  outline: 0;
+  transform: scale(1.05);
+  color: initial;
+}
+
 .nav-item svg {
   width: .75em;
   height: .75em;
@@ -161,15 +167,15 @@ Nav
   border-color: rgba(255, 111, 10, 1);
 }
 
-.nav-item.enabled .nav-access {
+.nav-item.enabled .nav-access, .nav-item:focus .nav-access  {
   opacity: 1;
 }
 
-.nav-item.enabled .nav-icon {
+.nav-item.enabled .nav-icon, .nav-item:focus .nav-icon {
   opacity: 1;
 }
 
-.nav-item.enabled .nav-title {
+.nav-item.enabled .nav-title, .nav-item:focus .nav-title {
   opacity: 1;
 }
 
@@ -408,6 +414,7 @@ Nav
   }
   .header-left {
     display: block;
+    padding-bottom: 1em;
   }
   .header-menu {
     justify-content: center;

views/organization.twig

@@ -14,7 +14,7 @@
 {% block content %}
 <div class="header">
   <div class="container header-container">
-    <a href="{% if isProposed is defined and isProposed == true %}/?only={{ id }}{% else %}/?bypass{% endif %}" class="return">
+    <a href="{% if isProposed is defined and isProposed == true %}/?only={{ id }}{% else %}/{% endif %}" class="return">
       <div class="return-icon">
         <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
           <path fill="currentColor" d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zM142.1 273l135.5 135.5c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L226.9 256l101.6-101.6c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L142.1 239c-9.4 9.4-9.4 24.6 0 34z"></path>