add countdown and some bug fixes like csv
This commit is contained in:
parent
2b1e35e55f
commit
d41551c806
18 changed files with 263 additions and 205 deletions
1
assets/production/scripts/countdown.js
Normal file
1
assets/production/scripts/countdown.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
const countdown=document.getElementById("countdown"),counter=document.getElementById("counter"),daysContainer=document.getElementById("days"),hoursContainer=document.getElementById("hours"),minutesContainer=document.getElementById("minutes"),secondsContainer=document.getElementById("seconds");let target=new Date("2020-09-04 15:00:00"),shown=!1;function render(){let e=new Date,t=target-e;var n=Math.floor(t/864e5),o=Math.floor(t%864e5/36e5),r=Math.floor(t%36e5/6e4),d=Math.floor(t%6e4/1e3);n=String(n).length>=2?n:"0"+n,o=String(o).length>=2?o:"0"+o,r=String(r).length>=2?r:"0"+r,d=String(d).length>=2?d:"0"+d,daysContainer.textContent=n,hoursContainer.textContent=o,minutesContainer.textContent=r,secondsContainer.textContent=d,shown||setTimeout(()=>{countdown.style.opacity=1,shown=!0},300)}render(),setInterval(render,1e3);
|
||||
|
|
@ -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"),tags=[];function createEl(e=!1,n="div"){let t=document.createElement(n);return 0!=e&&(t.className=e),t}function renderNavItem(e){let n=createEl("nav-item"),t=createEl("nav-icon"),a=createEl(e.icon,"i");t.appendChild(a),n.appendChild(t);let r=createEl("nav-item-content"),l=createEl("nav-title");l.textContent=e.name,r.appendChild(l);let o=createEl("nav-access"),i=createEl("fas fa-chevron-right","i");return o.appendChild(i),r.appendChild(l),r.appendChild(o),n.appendChild(r),n}function setAttributes(e,n){for(var t in n)attr=document.createAttribute(t),attr.value=n[t],e.attributes.setNamedItem(attr)}function renderCard(e){let n=createEl("card","a"),t=createEl("card-image-container"),a=createEl("card-image");a.style=`background-image: url('${e.thumbnail}')`,t.appendChild(a),n.appendChild(t);let r=createEl("card-content"),l=createEl(),o=createEl("card-title-container"),i=createEl("card-title","h2");i.textContent=e.name,o.appendChild(i);let c=createEl("card-icon");if(Array.isArray(e.tags)&&e.tags.length>0){let n=tags.filter(n=>e.tags[0]===n._id)[0];c.innerHTML=n.iconHTML}o.appendChild(c),l.appendChild(o);let d=createEl("card-description");d.textContent=e.description;let s="/association/"+e.slug;return isProposed&&(s+="?version=proposed"),l.appendChild(d),r.appendChild(l),n.appendChild(r),n.href=s,n}navEnabler.onclick=async()=>{navOpened?(navEnablerText.textContent=oldNavText,navEnablerIcon.style.transform="rotate(0deg)",navContent.style.maxHeight=null):(oldNavText=navEnablerText.textContent,navEnablerText.textContent="Minimiser le menu",navEnablerIcon.style.transform="rotate(90eg)",navContent.style.maxHeight=navContent.scrollHeight+"px"),navOpened=!navOpened};let currentTag=null,currentCardContainer=null;function enableTag(e){let n="nav-all"===e.id,t="";n||(t=e.attributes["data-tag-id"].value);let a=organizations.filter(e=>e.tags.filter(e=>e===t).length>0||n);renderMosaic(a),e.className+=" enabled",null!==currentTag&&(currentTag.className=currentTag.className.replace("enabled","")),currentTag=e,null==a||a.length<=0?mosaicHeader.textContent="Aucune associations listées":1===a.length?mosaicHeader.textContent="Une association listée":mosaicHeader.textContent=a.length+" associations listées"}function posY(e){for(var n=e,t=0;n&&"body"!==n.tagName.toLowerCase();)t+=n.offsetTop,n=n.offsetParent;return t}function viewPortHeight(){var e=document.documentElement;return window.innerWidth?window.innerHeight:e&&!isNaN(e.clientHeight)?e.clientHeight:0}function scrollY(){return window.pageYOffset?window.pageYOffset:Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function isVisible(e){var n=viewPortHeight(),t=scrollY();return!(posY(e)>n+t)}let rendering=!0,page=0,elementsPerPage=5,focusPoint=null,focusElementPos=2,cardContainer=null,currentOrganizations=[],pageCount=0;function renderPage(){rendering=!0;let e=currentOrganizations.slice(page*elementsPerPage,(page+1)*elementsPerPage);e.forEach((n,t)=>{let a=renderCard(n);cardContainer.appendChild(a),t===e.length-focusElementPos&&(focusPoint=a)}),rendering=!1}function renderMosaic(e){cardContainer=createEl("card-container"),currentOrganizations=e,pageCount=Math.floor(e.length/elementsPerPage),renderPage(),null!==currentCardContainer&&mosaic.removeChild(currentCardContainer),currentCardContainer=cardContainer,mosaic.appendChild(cardContainer)}window.onscroll=()=>{null!=focusPoint&&isVisible(focusPoint)&&!rendering&&page+1<pageCount&&(page++,renderPage())},window.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll("#nav-content .nav-item").forEach(e=>{e.onclick=()=>enableTag(e),"nav-all"!==e.id&&tags.push({_id:e.attributes["data-tag-id"].value,iconHTML:e.querySelector(".nav-icon").innerHTML})}),enableTag(document.getElementById("nav-all"))});
|
||||
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"),tags=[];function createEl(e=!1,n="div"){let t=document.createElement(n);return 0!=e&&(t.className=e),t}function renderNavItem(e){let n=createEl("nav-item"),t=createEl("nav-icon"),a=createEl(e.icon,"i");t.appendChild(a),n.appendChild(t);let r=createEl("nav-item-content"),l=createEl("nav-title");l.textContent=e.name,r.appendChild(l);let i=createEl("nav-access"),o=createEl("fas fa-chevron-right","i");return i.appendChild(o),r.appendChild(l),r.appendChild(i),n.appendChild(r),n}function setAttributes(e,n){for(var t in n)attr=document.createAttribute(t),attr.value=n[t],e.attributes.setNamedItem(attr)}function renderCard(e){let n=createEl("card","a"),t=createEl("card-image-container"),a=createEl("card-image");a.style=`background-image: url('${mediaBaseUrl+"/"+e.thumbnail}')`,t.appendChild(a),n.appendChild(t);let r=createEl("card-content"),l=createEl(),i=createEl("card-title-container"),o=createEl("card-title","h2");o.textContent=e.name,i.appendChild(o);let c=createEl("card-icon");if(Array.isArray(e.tags)&&e.tags.length>0){let n=tags.filter(n=>e.tags[0]===n._id)[0];c.innerHTML=n.iconHTML}i.appendChild(c),l.appendChild(i);let d=createEl("card-description");d.textContent=e.description;let s="/association/"+e.slug;return isProposed&&(s+="?version=proposed"),l.appendChild(d),r.appendChild(l),n.appendChild(r),n.href=s,n}navEnabler.onclick=async()=>{navOpened?(navEnablerText.textContent=oldNavText,navEnablerIcon.style.transform="rotate(0deg)",navContent.style.maxHeight=null):(oldNavText=navEnablerText.textContent,navEnablerText.textContent="Minimiser le menu",navEnablerIcon.style.transform="rotate(90eg)",navContent.style.maxHeight=navContent.scrollHeight+"px"),navOpened=!navOpened};let currentTag=null,currentCardContainer=null;function enableTag(e){let n="nav-all"===e.id,t="";n||(t=e.attributes["data-tag-id"].value);let a=organizations.filter(e=>e.tags.filter(e=>e===t).length>0||n);renderMosaic(a),e.className+=" enabled",null!==currentTag&&(currentTag.className=currentTag.className.replace("enabled","")),currentTag=e,null==a||a.length<=0?mosaicHeader.textContent="Aucune associations listées":1===a.length?mosaicHeader.textContent="Une association listée":mosaicHeader.textContent=a.length+" associations listées"}function posY(e){for(var n=e,t=0;n&&"body"!==n.tagName.toLowerCase();)t+=n.offsetTop,n=n.offsetParent;return t}function viewPortHeight(){var e=document.documentElement;return window.innerWidth?window.innerHeight:e&&!isNaN(e.clientHeight)?e.clientHeight:0}function scrollY(){return window.pageYOffset?window.pageYOffset:Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function isVisible(e){var n=viewPortHeight(),t=scrollY();return!(posY(e)>n+t)}let rendering=!0,page=0,elementsPerPage=5,focusPoint=null,focusElementPos=2,cardContainer=null,currentOrganizations=[],pageCount=0;function renderPage(){rendering=!0;let e=currentOrganizations.slice(page*elementsPerPage,(page+1)*elementsPerPage);e.forEach((n,t)=>{let a=renderCard(n);cardContainer.appendChild(a),t===e.length-focusElementPos&&(focusPoint=a)}),rendering=!1}function renderMosaic(e){cardContainer=createEl("card-container"),currentOrganizations=e,pageCount=Math.floor(e.length/elementsPerPage),renderPage(),null!==currentCardContainer&&mosaic.removeChild(currentCardContainer),currentCardContainer=cardContainer,mosaic.appendChild(cardContainer)}window.onscroll=()=>{null!=focusPoint&&isVisible(focusPoint)&&!rendering&&page+1<pageCount&&(page++,renderPage())},window.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll("#nav-content .nav-item").forEach(e=>{e.onclick=()=>enableTag(e),"nav-all"!==e.id&&tags.push({_id:e.attributes["data-tag-id"].value,iconHTML:e.querySelector(".nav-icon").innerHTML})}),enableTag(document.getElementById("nav-all"))});
|
||||
|
|
@ -1,124 +1 @@
|
|||
/**
|
||||
* Schedule collapsable section animation
|
||||
*/
|
||||
document.querySelectorAll('.schedule-category').forEach(node => {
|
||||
let opened = false
|
||||
let icon = node.querySelector('.schedule-category-collapse-icon')
|
||||
let content = node.querySelector('.schedule-category-table')
|
||||
let header = node.querySelector('.schedule-category-header')
|
||||
header.onclick = () => {
|
||||
if (!opened) {
|
||||
// open the table
|
||||
icon.style.transform = "rotate(0deg)"
|
||||
content.style.maxHeight = content.scrollHeight + "px"
|
||||
} else {
|
||||
// close the table
|
||||
icon.style.transform = "rotate(180deg)"
|
||||
content.style.maxHeight = null
|
||||
}
|
||||
opened = !opened
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Description
|
||||
*/
|
||||
let description = document.querySelector('.description-cutted')
|
||||
let descriptionActions = document.querySelector('.description-actions-container')
|
||||
let descriptionOpened = false
|
||||
let defaultMaxHeight = ""
|
||||
if (description !== null) {
|
||||
let btn = document.querySelector('.description-btn')
|
||||
btn.onclick = () => {
|
||||
if (!descriptionOpened) {
|
||||
// open the full description
|
||||
descriptionActions.className = descriptionActions.className.replace(' closed', '')
|
||||
defaultMaxHeight = description.style.maxHeight
|
||||
description.style.maxHeight = description.scrollHeight + "px"
|
||||
btn.textContent = "Fermer la description"
|
||||
} else {
|
||||
// initial max Height
|
||||
descriptionActions.className += ' closed'
|
||||
description.style.maxHeight = defaultMaxHeight
|
||||
btn.textContent = "Ouvrir la description"
|
||||
}
|
||||
descriptionOpened = !descriptionOpened
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gallery modal to view media in large
|
||||
*/
|
||||
let mediaModal = document.querySelector('#media-modal')
|
||||
let mediaModalContent = document.querySelector('#media-modal-content')
|
||||
// let mediaModalImage = document.querySelector('#media-modal img')
|
||||
// let mediaModalVideo = document.querySelector('#media-modal video')
|
||||
// let mediaModalSource = document.querySelector('#media-modal video source')
|
||||
|
||||
// function disableScroll() {
|
||||
// // Get the current page scroll position
|
||||
// scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
// scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
|
||||
|
||||
// // if any scroll is attempted, set this to the previous value
|
||||
// window.onscroll = function() {
|
||||
// window.scrollTo(scrollLeft, scrollTop);
|
||||
// };
|
||||
// }
|
||||
|
||||
// function enableScroll() {
|
||||
// window.onscroll = function() {};
|
||||
// }
|
||||
|
||||
|
||||
let openModal = (url, isVideo) => {
|
||||
mediaModal.style.visibility = 'visible'
|
||||
mediaModal.style.opacity = 1
|
||||
mediaModalContent.innerHTML = ""
|
||||
|
||||
let attr = document.createAttribute('src')
|
||||
attr.value = url
|
||||
let el = null
|
||||
if (isVideo) {
|
||||
el = document.createElement('video')
|
||||
el.setAttribute('controls', '')
|
||||
el.setAttribute('autoplay', '')
|
||||
el.setAttribute('name', 'media')
|
||||
let source = document.createElement('source')
|
||||
source.setAttribute('src', url)
|
||||
source.setAttribute('type', 'video/mp4')
|
||||
el.appendChild(source)
|
||||
} else {
|
||||
el = document.createElement('img')
|
||||
el.attributes.setNamedItem(attr)
|
||||
}
|
||||
mediaModalContent.appendChild(el)
|
||||
//document.body.style.height = '100vh'
|
||||
document.body.style.overflow = 'hidden'
|
||||
document.body.style.touchAction = 'none'
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
const outsideClickListener = event => {
|
||||
if (!mediaModalContent.contains(event.target) && isVisible(mediaModalContent)) {
|
||||
closeModal()
|
||||
document.removeEventListener('click', outsideClickListener)
|
||||
}
|
||||
}
|
||||
document.addEventListener('click', outsideClickListener)
|
||||
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length )
|
||||
|
||||
let closeModal = () => {
|
||||
mediaModal.style.visibility = 'hidden'
|
||||
mediaModal.style.opacity = 0
|
||||
document.body.style.overflow = 'initial'
|
||||
document.body.style.height = 'initial'
|
||||
let video = document.querySelector('#media-modal video')
|
||||
if (video !== null) {
|
||||
video.pause()
|
||||
}
|
||||
}
|
||||
document.querySelectorAll(".schedule-category").forEach(e=>{let t=!1,i=e.querySelector(".schedule-category-collapse-icon"),o=e.querySelector(".schedule-category-table");e.querySelector(".schedule-category-header").onclick=()=>{t?(i.style.transform="rotate(180deg)",o.style.maxHeight=null):(i.style.transform="rotate(0deg)",o.style.maxHeight=o.scrollHeight+"px"),t=!t}});let description=document.querySelector(".description-cutted"),descriptionActions=document.querySelector(".description-actions-container"),descriptionOpened=!1,defaultMaxHeight="";if(null!==description){let e=document.querySelector(".description-btn");e.onclick=()=>{descriptionOpened?(descriptionActions.className+=" closed",description.style.maxHeight=defaultMaxHeight,e.textContent="Ouvrir la description"):(descriptionActions.className=descriptionActions.className.replace(" closed",""),defaultMaxHeight=description.style.maxHeight,description.style.maxHeight=description.scrollHeight+"px",e.textContent="Fermer la description"),descriptionOpened=!descriptionOpened}}let mediaModal=document.querySelector("#media-modal"),mediaModalContent=document.querySelector("#media-modal-content"),openModal=(e,t)=>{mediaModal.style.visibility="visible",mediaModal.style.opacity=1,mediaModalContent.innerHTML="";let i=document.createAttribute("src");i.value=e;let o=null;if(t){o=document.createElement("video"),o.setAttribute("controls",""),o.setAttribute("autoplay",""),o.setAttribute("name","media");let t=document.createElement("source");t.setAttribute("src",e),t.setAttribute("type","video/mp4"),o.appendChild(t)}else o=document.createElement("img"),o.attributes.setNamedItem(i);mediaModalContent.appendChild(o),document.body.style.overflow="hidden",document.body.style.touchAction="none",setTimeout(()=>{const e=t=>{!mediaModalContent.contains(t.target)&&isVisible(mediaModalContent)&&(closeModal(),document.removeEventListener("click",e))};document.addEventListener("click",e)},100)};const isVisible=e=>!!e&&!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length);let closeModal=()=>{mediaModal.style.visibility="hidden",mediaModal.style.opacity=0,document.body.style.overflow="initial",document.body.style.height="initial";let e=document.querySelector("#media-modal video");null!==e&&e.pause()};
|
||||
Loading…
Add table
Add a link
Reference in a new issue