From 7c120914e00e4385e6c37cde90d9339597db7abb Mon Sep 17 00:00:00 2001 From: Matthieu Bessat Date: Sun, 6 Sep 2020 12:25:25 +0200 Subject: [PATCH] feat(Home): better shuffle management --- assets/development/scripts/home.js | 63 ++++++++++++++++++++++-------- assets/development/styles/home.css | 13 ++++-- views/organization.twig | 2 +- 3 files changed, 58 insertions(+), 20 deletions(-) diff --git a/assets/development/scripts/home.js b/assets/development/scripts/home.js index 4a1a081..2e0b80f 100644 --- a/assets/development/scripts/home.js +++ b/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) { - randomIndex = Math.floor(Math.random() * currentIndex) - currentIndex -= 1 + if (seed[currentIndex] === undefined) { + randomIndex = Math.floor(Math.random() * currentIndex) + } 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) + // } + // } }) diff --git a/assets/development/styles/home.css b/assets/development/styles/home.css index 7c8fe0e..43808a3 100644 --- a/assets/development/styles/home.css +++ b/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; diff --git a/views/organization.twig b/views/organization.twig index aba69e4..ac5f2d5 100644 --- a/views/organization.twig +++ b/views/organization.twig @@ -14,7 +14,7 @@ {% block content %}
- +