gulp and a lot of others updates

assets/production/scripts/home.js

@@ -0,0 +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=`<svg\n      aria-hidden="true"\n      focusable="false"\n      role="img"\n      xmlns="http://www.w3.org/2000/svg"\n      viewBox="0 0 ${t.icon.width} ${t.icon.height}">\n      <path fill="currentColor" d="${t.icon.path}"></path>\n    </svg>`}i.appendChild(d),l.appendChild(i);let o=createEl("card-description");o.textContent=e.description;let s="/association/"+e.slugs[e.slugs.length-1];return e.isProposed&&(s+="?version=proposed"),l.appendChild(o),r.appendChild(l),t.appendChild(r),t.href=s,t}function renderMosaic(e){let t=createEl("card-container");return e.forEach(e=>{t.appendChild(renderCard(e))}),t}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 t="nav-all"===e.id,n="";t||(n=e.attributes["data-tag-id"].value);let a=organizations.filter(e=>e.tags.filter(e=>e===n).length>0||t),r=renderMosaic(a);null!==currentCardContainer&&mosaic.removeChild(currentCardContainer),currentCardContainer=r,mosaic.appendChild(r),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"}navContent.childNodes.forEach(e=>{e.onclick=()=>enableTag(e)}),enableTag(document.getElementById("nav-all"));

assets/production/scripts/organization.js

@@ -0,0 +1,124 @@
+/**
+ * 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()
+  }
+}

assets/production/styles/error.css

@@ -0,0 +1 @@
+.error-container{width:100%;margin-top:4em}.error{width:60%;margin:0 auto;text-align:center;color:#2c3e50}.error-title{font-family:'Roboto Slab',serif}.error-icons{font-size:5em;margin-bottom:.25em}.expert{text-align:left;padding:1em;background-color:#000;color:rgba(0,255,0);border:2px solid gray;border-radius:3px}@media (max-width:1350px){.error{width:100%}}

assets/production/styles/home.css

@@ -0,0 +1 @@
+.header{padding-bottom:1.5em;padding-top:1.5em;background-color:#d35400}.header-container{position:relative;display:flex;justify-content:space-between}.header-left{display:flex}.header-menu{position:absolute;right:0;bottom:0;display:flex;align-items:flex-end}.header-menu a{color:#fff;margin-right:1em}.header-menu a:last-of-type{margin-right:0}.header-image{margin-right:3em}.header-image img{width:7em}.header-content{display:flex;flex-direction:column;justify-content:space-between;padding-top:1em;padding-bottom:1em}.header-title{font-family:'Roboto Slab',serif;margin:0;color:#fff;font-weight:500;font-size:2.5em}.header-sub-title{margin:0;text-decoration:underline;font-weight:100;color:#ecf0f1;transition:opacity .2s}.header-sub-title:hover{opacity:.9;color:#ecf0f1}.header-description{color:#ecf0f1}.content{margin-top:1.5em;display:flex}.nav{margin-right:2em}.nav-item{width:15em;padding:1em;border-radius:4px;margin-bottom:.7em;border:3px solid rgba(255,111,10,.7);display:flex;cursor:pointer;transition:ease-in-out .1s;height:1.2em}.nav-item svg{width:.75em;height:.75em}.nav-icon{width:3em;padding-left:.5em;display:flex;justify-content:start;align-items:center;color:#c28200;font-size:1.5em;opacity:.7}.nav-item-content{display:flex;justify-content:space-between;width:100%}.nav-title{display:flex;align-items:center;opacity:.7}.nav-access{display:flex;align-items:center;color:#ff6f0a;opacity:.7}.nav-item.enabled{border-color:#ff6f0a}.nav-item.enabled .nav-access{opacity:1}.nav-item.enabled .nav-icon{opacity:1}.nav-item.enabled .nav-title{opacity:1}.nav-item:hover{transform:scale(1.05)}#nav-enabler{display:none}.mosaic{background:#fff;width:100%}.mosaic-header{width:100%;opacity:.8;text-align:right;margin-bottom:1.5em}.card-container{margin:0 auto;width:85%}.card{cursor:pointer;display:flex;border:1px solid #bdc3c7;border-radius:4px;margin-bottom:1em;box-shadow:0 0 8px 0 rgba(0,0,0,.1);overflow:hidden;text-decoration:none;transition:transform .2s ease-in-out}.card:hover{text-decoration:none}.card-image-container{border-right:1px solid #c4c4c4;display:flex;justify-content:center;align-items:center;padding:1em}.card-image{height:12em;width:12em;background-position:center;background-size:cover;transition:all .2s ease-in-out;border:0;outline:0;box-shadow:0}.card-image:hover{transform:scale(1.1)}.card-content{width:100%;padding:1.5em;display:flex;flex-direction:column;justify-content:space-between}.card-title-container{display:flex;justify-content:space-between}.card-icon{color:#c28200;opacity:.85;margin-top:-.5em;margin-right:-.5em;font-size:1.4em}.card-icon svg{width:1em;height:1em}.card-title{color:#b12008;margin:0;margin-bottom:.5em}.card-description{color:#34495e;margin:0;line-height:1.6em;position:relative}.card-link{position:absolute;right:.5em;bottom:0;margin-bottom:-.5em}@media (max-width:1350px){.card-container{width:100%}.header-left{padding-bottom:1em}}@media (max-width:1000px){.header{padding-top:1em;padding-bottom:1em}.header-container{display:block}.header-left{display:block}.header-menu{justify-content:center;position:relative;margin-top:0}.header-content{padding:0}.header-image{margin:0;text-align:center}.header-image img{width:6em}.header-sub-title{margin-top:1em;text-align:center}.header-title{text-align:center;margin-bottom:.25em}.header-description{text-align:center}.content{display:block}.nav{margin-right:0;user-select:none}#nav-enabler{display:flex}#nav-enabler-icon{transform:rotate(-90deg)}#nav-content{max-height:0;transition:max-height .1s ease-out}.nav-item{width:auto}.nav-mobile-enabler #nav-enabler-icon{transition:all .1s ease}.mosaic{position:relative;border-top:1px solid #c4c4c4;padding-top:1em}.mosaic-header{text-align:center}.card{display:block}.card-image-container{padding:0;margin:0;border-right:0;border-bottom:1px solid #c4c4c4}.card-content{width:auto}}

assets/production/styles/main.css

@@ -0,0 +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%}}