From ecf9a0720e7d422c75854bd4b60e992b019066df Mon Sep 17 00:00:00 2001 From: lefuturiste Date: Sun, 26 Jul 2020 13:35:03 +0000 Subject: [PATCH] feat: add lazy loading of card on home page feat: add universal organization store fix: optimization for JSON data loaded in home page HTML --- assets/development/scripts/home.js | 158 ++++++++++++++---- assets/production/scripts/home.js | 2 +- assets/production/styles/organization.css | 2 +- src/MediaService.ts | 8 +- src/app.ts | 1 - .../AdminOrganizationController.ts | 96 ++++++----- src/controllers/PublicController.ts | 34 ++-- views/home.twig | 10 +- 8 files changed, 224 insertions(+), 87 deletions(-) diff --git a/assets/development/scripts/home.js b/assets/development/scripts/home.js index 5eaacd8..40252ad 100644 --- a/assets/development/scripts/home.js +++ b/assets/development/scripts/home.js @@ -1,3 +1,6 @@ +/** + * Nav management + */ let navOpened = false; let oldNavText = ""; let oldNavIcon = ""; @@ -9,6 +12,7 @@ let navContent = document.getElementById('nav-content'); let mosaic = document.getElementById('mosaic'); let mosaicHeader = document.getElementById('mosaic-header'); +let tags = [] navEnabler.onclick = async () => { if (!navOpened) { @@ -34,6 +38,9 @@ function createEl(className = false, elName = "div") { return el; } +/** + * Render + */ function renderNavItem(tag) { /*
@@ -87,6 +94,7 @@ function renderCard(organization) { // image let image = createEl('card-image-container') let imageTag = createEl('card-image') + //mediaBaseUrl + '/' + imageTag.style = `background-image: url('${organization.thumbnail}')` image.appendChild(imageTag) card.appendChild(image) @@ -102,14 +110,15 @@ function renderCard(organization) { let icon = createEl('card-icon') if (Array.isArray(organization.tags) && organization.tags.length > 0) { let tag = tags.filter(tag => organization.tags[0] === tag._id)[0] - icon.innerHTML = `` + // icon.innerHTML = `` + icon.innerHTML = tag.iconHTML } titleContainer.appendChild(icon) upperContent.appendChild(titleContainer) @@ -117,8 +126,8 @@ function renderCard(organization) { let description = createEl('card-description') description.textContent = organization.description - let goTo = "/association/" + organization.slugs[organization.slugs.length - 1] - if (organization.isProposed) { + let goTo = "/association/" + organization.slug + if (isProposed) { goTo += "?version=proposed" } // let link = createEl('card-link') @@ -141,13 +150,6 @@ function renderCard(organization) { return card } -function renderMosaic(data) { - let cardContainer = createEl('card-container') - data.forEach(orga => { - cardContainer.appendChild(renderCard(orga)) - }) - return cardContainer -} let currentTag = null let currentCardContainer = null @@ -159,12 +161,7 @@ function enableTag(node) { tagId = node.attributes['data-tag-id'].value } let data = organizations.filter(orga => orga.tags.filter(id => id === tagId).length > 0 || all) - let cards = renderMosaic(data) - if (currentCardContainer !== null) { - mosaic.removeChild(currentCardContainer) - } - currentCardContainer = cards - mosaic.appendChild(cards) + renderMosaic(data) node.className += ' enabled' if (currentTag !== null) { currentTag.className = currentTag.className.replace('enabled', '') @@ -177,10 +174,115 @@ function enableTag(node) { } else { mosaicHeader.textContent = data.length + " associations listées" } -} +} -navContent.childNodes.forEach(node => { - node.onclick = () => enableTag(node) +/*** + * Is a element in the view ? + */ +function posY(elm) { + var test = elm, top = 0; + + while(!!test && test.tagName.toLowerCase() !== "body") { + top += test.offsetTop; + test = test.offsetParent; + } + + return top; +} + +function viewPortHeight() { + var de = document.documentElement; + + if(!!window.innerWidth) + { return window.innerHeight; } + else if( de && !isNaN(de.clientHeight) ) + { return de.clientHeight; } + + return 0; +} + +function scrollY() { + if( window.pageYOffset ) { return window.pageYOffset; } + return Math.max(document.documentElement.scrollTop, document.body.scrollTop); +} + +function isVisible(elm) { + var vpH = viewPortHeight(), // Viewport Height + st = scrollY(), // Scroll Top + y = posY(elm); + + return !(y > (vpH + st)); +} + +/** + * RenderMosaic + * (take all the organizations we want to render) + * Render only the first 5 elements + * Set the focus point on the last - 1 of theses elements + * When the focus point is on screen we load the next 5 elements + */ +let rendering = true +let page = 0 +let elementsPerPage = 5 +let focusPoint = null +let focusElementPos = 2 +let cardContainer = null +let currentOrganizations = [] +let pageCount = 0 + +function renderPage() { + rendering = true + let data = currentOrganizations.slice(page * elementsPerPage, (page + 1) * elementsPerPage) + data.forEach((orga, index) => { + let card = renderCard(orga) + cardContainer.appendChild(card) + if (index === data.length - focusElementPos) { + focusPoint = card + } + }) + rendering = false +} + +function renderMosaic(data) { + cardContainer = createEl('card-container') + // 1 - parse all the data + // 2 - for each + currentOrganizations = data + pageCount = Math.floor(data.length / elementsPerPage) + renderPage() + if (currentCardContainer !== null) { + mosaic.removeChild(currentCardContainer) + } + currentCardContainer = cardContainer + mosaic.appendChild(cardContainer) +} + +window.onscroll = () => { + if (focusPoint != null) { + //console.log(isVisible(focusPoint)) + if (isVisible(focusPoint) && !rendering) { + if ((page + 1) < pageCount) { + page++ + renderPage() + } + } + } +} + +/** + * Fetch tags and register click handler + */ +window.addEventListener('DOMContentLoaded', () => { + document.querySelectorAll('#nav-content .nav-item').forEach(node => { + node.onclick = () => enableTag(node) + + if (node.id === 'nav-all') { + return + } + tags.push({ + _id: node.attributes['data-tag-id'].value, + iconHTML: node.querySelector('.nav-icon').innerHTML + }) + }) + enableTag(document.getElementById('nav-all')) }) - -enableTag(document.getElementById('nav-all')) \ No newline at end of file diff --git a/assets/production/scripts/home.js b/assets/production/scripts/home.js index 0286181..9c072d8 100644 --- a/assets/production/scripts/home.js +++ b/assets/production/scripts/home.js @@ -1 +1 @@ -let navOpened=!1,oldNavText="",oldNavIcon="",navEnabler=document.getElementById("nav-enabler"),navEnablerText=document.getElementById("nav-enabler-text"),navEnablerIcon=document.getElementById("nav-enabler-icon"),navContent=document.getElementById("nav-content"),mosaic=document.getElementById("mosaic"),mosaicHeader=document.getElementById("mosaic-header");function createEl(e=!1,t="div"){let n=document.createElement(t);return 0!=e&&(n.className=e),n}function renderNavItem(e){let t=createEl("nav-item"),n=createEl("nav-icon"),a=createEl(e.icon,"i");n.appendChild(a),t.appendChild(n);let r=createEl("nav-item-content"),l=createEl("nav-title");l.textContent=e.name,r.appendChild(l);let i=createEl("nav-access"),c=createEl("fas fa-chevron-right","i");return i.appendChild(c),r.appendChild(l),r.appendChild(i),t.appendChild(r),t}function setAttributes(e,t){for(var n in t)attr=document.createAttribute(n),attr.value=t[n],e.attributes.setNamedItem(attr)}function renderCard(e){let t=createEl("card","a"),n=createEl("card-image-container"),a=createEl("card-image");a.style=`background-image: url('${e.thumbnail}')`,n.appendChild(a),t.appendChild(n);let r=createEl("card-content"),l=createEl(),i=createEl("card-title-container"),c=createEl("card-title","h2");c.textContent=e.name,i.appendChild(c);let d=createEl("card-icon");if(Array.isArray(e.tags)&&e.tags.length>0){let t=tags.filter(t=>e.tags[0]===t._id)[0];d.innerHTML=`
- +
@@ -72,7 +77,8 @@ {% block scripts %}