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
47
assets/development/scripts/countdown.js
Normal file
47
assets/development/scripts/countdown.js
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
const countdown = document.getElementById('countdown')
|
||||
const counter = document.getElementById('counter')
|
||||
|
||||
const daysContainer = document.getElementById('days')
|
||||
const hoursContainer = document.getElementById('hours')
|
||||
const minutesContainer = document.getElementById('minutes')
|
||||
const secondsContainer = document.getElementById('seconds')
|
||||
|
||||
let target = new Date("2020-09-04 15:00:00")
|
||||
|
||||
let shown = false
|
||||
|
||||
function render() {
|
||||
let current = new Date()
|
||||
let difference = target - current
|
||||
|
||||
var _second = 1000,
|
||||
_minute = _second * 60,
|
||||
_hour = _minute * 60,
|
||||
_day = _hour * 24;
|
||||
|
||||
var days = Math.floor(difference / _day),
|
||||
hours = Math.floor((difference % _day) / _hour),
|
||||
minutes = Math.floor((difference % _hour) / _minute),
|
||||
seconds = Math.floor((difference % _minute) / _second);
|
||||
|
||||
days = (String(days).length >= 2) ? days : '0' + days;
|
||||
hours = (String(hours).length >= 2) ? hours : '0' + hours;
|
||||
minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
|
||||
seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;
|
||||
|
||||
daysContainer.textContent = days
|
||||
hoursContainer.textContent = hours
|
||||
minutesContainer.textContent = minutes
|
||||
secondsContainer.textContent = seconds
|
||||
|
||||
if (!shown) {
|
||||
setTimeout(() => {
|
||||
countdown.style.opacity = 1
|
||||
shown = true
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
render()
|
||||
setInterval(render, 1000)
|
||||
72
assets/development/styles/countdown.css
Normal file
72
assets/development/styles/countdown.css
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
.countdown {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
|
||||
opacity: 0;
|
||||
transition: 0.2s all ease-in-out;
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.counter-component {
|
||||
border: 2px solid #e74c3c;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 6em;
|
||||
height: 6em;
|
||||
margin-right: 1em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.counter-component:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.counter-component:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.counter-component span {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: .75em;
|
||||
color: #34495e;
|
||||
font-weight: lighter;
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.counter {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-column-gap: 1em;
|
||||
grid-row-gap: 1em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.counter-component {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.counter-component:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.separator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -43,7 +43,7 @@ body {
|
|||
position: fixed;
|
||||
z-index: 9999999;
|
||||
left: 1em;
|
||||
bottom: 2em;
|
||||
bottom: 1em;
|
||||
padding: 1em;
|
||||
font-weight: bold;
|
||||
border-radius: 3px;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
.return-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: .5em;
|
||||
margin-right: .75em;
|
||||
}
|
||||
|
||||
.return-icon svg {
|
||||
|
|
@ -47,25 +47,34 @@
|
|||
|
||||
********************************************************************************/
|
||||
|
||||
.cover-background {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
height: 13em;
|
||||
width: 100%;
|
||||
.cover-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cover {
|
||||
height: 13em;
|
||||
margin-top: -13em;
|
||||
background-color: rgba(230, 126, 34, 0.4);
|
||||
.cover-background {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cover-content {
|
||||
background-color: rgba(230, 126, 34, 0.75);
|
||||
background-size: cover;
|
||||
|
||||
color: white;
|
||||
padding-top: 1.5em;
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.cover-content .container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 13em;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
|
|
@ -76,16 +85,14 @@
|
|||
background-position: center;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
min-width: 10em;
|
||||
min-height: 10em;
|
||||
margin-right: 3em;
|
||||
}
|
||||
|
||||
.cover-title-container {
|
||||
|
||||
}
|
||||
|
||||
.cover-title {
|
||||
font-family: 'Roboto Slab', serif;
|
||||
font-size: 3.5em;
|
||||
font-size: 3em;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -497,6 +504,14 @@ section {
|
|||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.contact-item.address .contact-content div {
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
.contact-item.address .contact-content div:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
color: #B15808;
|
||||
background-color: #C4C4C4;
|
||||
|
|
@ -573,6 +588,7 @@ People cards
|
|||
|
||||
.people-card {
|
||||
width: 100%;
|
||||
max-width: 50%;
|
||||
margin-right: 1em;
|
||||
border-radius: 3px;
|
||||
padding: 1.2em 1.5em;
|
||||
|
|
@ -674,20 +690,8 @@ RESPONSIVE
|
|||
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
||||
.cover-background {
|
||||
height: 23em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cover {
|
||||
height: 23em;
|
||||
margin-top: -23em;
|
||||
}
|
||||
|
||||
.cover-content {
|
||||
height: 23em;
|
||||
|
||||
.cover-content .container {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
|
@ -699,6 +703,7 @@ RESPONSIVE
|
|||
}
|
||||
|
||||
.cover-title {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
|
|
@ -804,6 +809,7 @@ RESPONSIVE
|
|||
}
|
||||
|
||||
.people-card {
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
margin-bottom: 1em;
|
||||
|
|
|
|||
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()};
|
||||
1
assets/production/styles/countdown.css
Normal file
1
assets/production/styles/countdown.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
.countdown{width:100%;display:flex;justify-content:center;align-items:center;text-align:center;flex-direction:column;opacity:0;transition:.2s all ease-in-out}.counter{display:flex;align-items:center}.counter-component{border:2px solid #e74c3c;border-radius:50%;display:flex;justify-content:center;align-items:center;flex-direction:column;width:6em;height:6em;margin-right:1em;margin-left:1em}.counter-component:first-of-type{margin-left:0}.counter-component:last-of-type{margin-right:0}.counter-component span{font-size:1.5em}.label{font-size:.75em;color:#34495e;font-weight:lighter;margin-top:.5em}@media (max-width:600px){.counter{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;grid-column-gap:1em;grid-row-gap:1em;margin-bottom:2em}.counter-component{margin-right:0;margin-left:0}.counter-component:last-of-type{margin-bottom:0}.separator{display:none}}
|
||||
|
|
@ -1 +1 @@
|
|||
html{overflow-y:scroll}body{font-family:Roboto,sans-serif;margin:0}.container{width:60%;margin:0 auto}a{color:#3498db}a:hover{text-decoration:underline;transition:color .2s;color:#2980b9}body,html{height:100%}body{display:flex;flex-direction:column}.up-footer{flex:1 0 auto}.sticky-footer{flex-shrink:0}.proposed-alert{position:fixed;z-index:9999999;left:1em;bottom:2em;padding:1em;font-weight:700;border-radius:3px;text-transform:uppercase;border:1px solid #c0392b;background-color:#e74c3c;color:#fff}.btn{padding:.5em 1em;color:#fff;border-radius:7px;background:#2c3e50;border:0;cursor:pointer}.btn:focus{outline:0;opacity:.8}@media (max-width:1600px){.container{width:70%}}@media (max-width:1500px){.container{width:80%}}@media (max-width:900px){.container{width:92%}}
|
||||
html{overflow-y:scroll}body{font-family:Roboto,sans-serif;margin:0}.container{width:60%;margin:0 auto}a{color:#3498db}a:hover{text-decoration:underline;transition:color .2s;color:#2980b9}body,html{height:100%}body{display:flex;flex-direction:column}.up-footer{flex:1 0 auto}.sticky-footer{flex-shrink:0}.proposed-alert{position:fixed;z-index:9999999;left:1em;bottom:1em;padding:1em;font-weight:700;border-radius:3px;text-transform:uppercase;border:1px solid #c0392b;background-color:#e74c3c;color:#fff}.btn{padding:.5em 1em;color:#fff;border-radius:7px;background:#2c3e50;border:0;cursor:pointer}.btn:focus{outline:0;opacity:.8}@media (max-width:1600px){.container{width:70%}}@media (max-width:1500px){.container{width:80%}}@media (max-width:900px){.container{width:92%}}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -12,7 +12,7 @@ function minifyStyles() {
|
|||
}
|
||||
|
||||
function minifyScripts() {
|
||||
return gulp.src(developmentPath + '/scripts/home.js')
|
||||
return gulp.src(developmentPath + '/scripts/*.js')
|
||||
.pipe(terser())
|
||||
.pipe(gulp.dest(productionPath + '/scripts'))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ let main = async () => {
|
|||
app.use(bodyParser.json())
|
||||
|
||||
app.get('/', PublicController.home)
|
||||
app.get('/countdown', PublicController.countdown)
|
||||
app.get('/association/:slug', PublicController.organization)
|
||||
app.get('/a-propos', PublicController.about)
|
||||
app.get('/mentions-legales', PublicController.legals)
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ export default class AdminOrganizationController {
|
|||
// second column is always email
|
||||
const input = req.body.data
|
||||
const parsed = Papa.parse(input)
|
||||
console.log(parsed)
|
||||
if (parsed.errors.length > 0) {
|
||||
return res
|
||||
.status(400)
|
||||
|
|
@ -51,7 +52,9 @@ export default class AdminOrganizationController {
|
|||
console.log(errors)
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
errors
|
||||
errors,
|
||||
parsed,
|
||||
input
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
@ -64,11 +67,12 @@ export default class AdminOrganizationController {
|
|||
).then(({ data, body }) => {
|
||||
res.json({ success: true, data, body })
|
||||
}).catch((err: any) => {
|
||||
res.status(400).json({ success: false, errors: err.errors })
|
||||
res.status(400).json({ success: false, errors: [err] })
|
||||
})
|
||||
}
|
||||
|
||||
static storeUniversal(adminName: string, email: string, validationState: string): Promise<any> {
|
||||
console.log(adminName, email, validationState)
|
||||
return new Promise((resolve, reject) => {
|
||||
if (validationState == null) {
|
||||
validationState = 'unaware'
|
||||
|
|
|
|||
|
|
@ -196,6 +196,7 @@ export default class DelegateController {
|
|||
// before starting the upload process, we want to make sure that this organization is not exeeding the size limit for all the file
|
||||
let currentSize = MediaService.computeSize(res.locals.organization.proposedVersion)
|
||||
if (currentSize >= MediaService.getSizeLimit()) {
|
||||
console.log('> An upload was refused because of a storage size exceed event')
|
||||
return res
|
||||
.status(413)
|
||||
.json({
|
||||
|
|
@ -274,9 +275,15 @@ export default class DelegateController {
|
|||
|
||||
// @ts-ignore
|
||||
req.files.forEach((file: any) => {
|
||||
proposedVersion.gallery.push(MediaService.buildMedia(file, 'media'))
|
||||
file = MediaService.buildMedia(file, 'media')
|
||||
proposedVersion.gallery.push(file)
|
||||
|
||||
// if the media is a video, we generate a thumbnail
|
||||
if (file.contentType.indexOf('video') !== -1) {
|
||||
console.log('generating a thumbnail')
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Organization.updateOne({ _id: res.locals.organization._id }, {
|
||||
proposedVersion,
|
||||
updatedAt: new Date()
|
||||
|
|
|
|||
|
|
@ -15,6 +15,10 @@ import MediaService from '../MediaService'
|
|||
|
||||
export default class PublicController {
|
||||
|
||||
static async countdown(req: express.Request, res: express.Response) {
|
||||
res.render('countdown.twig', {})
|
||||
}
|
||||
|
||||
static async home(req: express.Request, res: express.Response) {
|
||||
// let client: IORedis.Redis = RedisService.getClient()
|
||||
// await client.set('hello', 'world')
|
||||
|
|
|
|||
|
|
@ -28,16 +28,13 @@ class AllowedString extends mongoose.SchemaType {
|
|||
|
||||
const email = {
|
||||
type: String,
|
||||
trim: true,
|
||||
lowercase: true,
|
||||
unique: true,
|
||||
validate: {
|
||||
validator: function(v: string) {
|
||||
console.log(v)
|
||||
return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v);
|
||||
},
|
||||
message: "Invalid email"
|
||||
},
|
||||
required: [true, "Email required"]
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
|
|
@ -71,7 +68,7 @@ const OrganizationVersion = {
|
|||
website: { type: String },
|
||||
address: { type: String },
|
||||
person: { type: String },
|
||||
email: { type: String },
|
||||
email,
|
||||
phone: { type: String },
|
||||
peoples: [{
|
||||
name: { type: String },
|
||||
|
|
|
|||
37
views/countdown.twig
Normal file
37
views/countdown.twig
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
{% extends "./base.twig" %}
|
||||
{% block title %}Le site va ouvrir prochainement{% endblock %}
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="/styles/countdown.css" />
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="countdown" id="countdown">
|
||||
<div class="countdown-title-container">
|
||||
<h2 class="countdown-title">Soyez patient...</h2>
|
||||
<h5 class="countdown-subtitle">Le site ouvre le 4 septembre, c'est à dire dans :</h5>
|
||||
</div>
|
||||
<div id="counter" class="counter">
|
||||
<div class="counter-component days">
|
||||
<span id="days"></span>
|
||||
<div class="label">Jours</div>
|
||||
</div>
|
||||
<span class="separator">:</span>
|
||||
<div class="counter-component hours">
|
||||
<span id="hours"></span>
|
||||
<div class="label">Heures</div>
|
||||
</div>
|
||||
<span class="separator">:</span>
|
||||
<div class="counter-component minutes">
|
||||
<span id="minutes"></span>
|
||||
<div class="label">Minutes</div>
|
||||
</div>
|
||||
<span class="separator">:</span>
|
||||
<div class="counter-component seconds">
|
||||
<span id="seconds"></span>
|
||||
<div class="label">Secondes</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block scripts %}
|
||||
<script src="/scripts/countdown.js"></script>
|
||||
{% endblock %}
|
||||
|
|
@ -20,18 +20,20 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cover-background" style="background-image: url({{ data.cover.location }})"></div>
|
||||
<div class="cover">
|
||||
<div class="cover-content container">
|
||||
<div class="cover-image" style="background-image: url({{ data.thumbnail.location }});">
|
||||
</div>
|
||||
<div class="cover-title-container">
|
||||
<h1 class="cover-title">
|
||||
{{ data.name }}
|
||||
</h1>
|
||||
{# <h4 class="cover-sub-title">
|
||||
Sous titre
|
||||
</h4> #}
|
||||
<div class="cover-container">
|
||||
<div class="cover-background" style="background-image: url({{ data.cover.location }})"></div>
|
||||
<div class="cover-content">
|
||||
<div class="container">
|
||||
<div class="cover-image" style="background-image: url({{ data.thumbnail.location }});">
|
||||
</div>
|
||||
<div class="cover-title-container">
|
||||
<h1 class="cover-title">
|
||||
{{ data.name }}
|
||||
</h1>
|
||||
{# <h4 class="cover-sub-title">
|
||||
Sous titre
|
||||
</h4> #}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -163,7 +165,6 @@
|
|||
<div class="section-divider"></div>
|
||||
</div>
|
||||
<div class="org-container contact">
|
||||
{% if data.contacts.peoples|length > 0 %}
|
||||
<div class="peoples">
|
||||
<div class="people-card">
|
||||
<div class="people-header">
|
||||
|
|
@ -183,6 +184,7 @@
|
|||
{{ data.contacts.email }}
|
||||
</a>
|
||||
</div>
|
||||
{% if data.contacts.phoneInt is not empty %}
|
||||
<div class="people-contact phone">
|
||||
<svg class="people-contact-icon" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path fill="currentColor" d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path>
|
||||
|
|
@ -191,6 +193,7 @@
|
|||
{{ data.contacts.phoneSplit }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% for people in data.contacts.peoples %}
|
||||
|
|
@ -224,31 +227,32 @@
|
|||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if data.contacts.peoples|length == 0 and data.contacts.person|length > 0 %}
|
||||
<div class="contact-item person">
|
||||
<div class="contact-icon">
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path>
|
||||
</svg>
|
||||
{#
|
||||
{% if data.contacts.peoples|length == 0 and data.contacts.person|length > 0 %}
|
||||
<div class="contact-item person">
|
||||
<div class="contact-icon">
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="contact-content">
|
||||
{{ data.contacts.person }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-content">
|
||||
{{ data.contacts.person }}
|
||||
{% endif %}
|
||||
{% if data.contacts.peoples|length == 0 and data.contacts.email|length > 0 %}
|
||||
<div class="contact-item email">
|
||||
<div class="contact-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 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="contact-content">
|
||||
<a href="mailto:{{ data.contacts.email }}">{{ data.contacts.email }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if data.contacts.peoples|length == 0 and data.contacts.email|length > 0 %}
|
||||
<div class="contact-item email">
|
||||
<div class="contact-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 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="contact-content">
|
||||
<a href="mailto:{{ data.contacts.email }}">{{ data.contacts.email }}</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
#}
|
||||
{% if data.contacts.peoples|length == 0 and data.contacts.phone|length > 0 %}
|
||||
<div class="contact-item phone">
|
||||
<div class="contact-icon">
|
||||
|
|
@ -270,7 +274,7 @@
|
|||
</div>
|
||||
<div class="contact-content">
|
||||
{% for line in data.contacts.address %}
|
||||
<span>{{ line }}</span><br>
|
||||
<div>{{ line }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue