gulp and a lot of others updates
This commit is contained in:
root
parent
4a97c240eb
commit
2e6e64a6d3
57 changed files with 6411 additions and 2629 deletions
186
assets/development/scripts/home.js
Normal file
186
assets/development/scripts/home.js
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
let navOpened = false;
|
||||
let oldNavText = "";
|
||||
let oldNavIcon = "";
|
||||
|
||||
let navEnabler = document.getElementById('nav-enabler');
|
||||
let navEnablerText = document.getElementById('nav-enabler-text');
|
||||
let navEnablerIcon = document.getElementById('nav-enabler-icon');
|
||||
let navContent = document.getElementById('nav-content');
|
||||
|
||||
let mosaic = document.getElementById('mosaic');
|
||||
let mosaicHeader = document.getElementById('mosaic-header');
|
||||
|
||||
navEnabler.onclick = async () => {
|
||||
if (!navOpened) {
|
||||
// open the menu
|
||||
oldNavText = navEnablerText.textContent;
|
||||
navEnablerText.textContent = "Minimiser le menu";
|
||||
navEnablerIcon.style.transform = "rotate(90eg)";
|
||||
navContent.style.maxHeight = navContent.scrollHeight + "px";
|
||||
} else {
|
||||
// close the menu
|
||||
navEnablerText.textContent = oldNavText;
|
||||
navEnablerIcon.style.transform = "rotate(0deg)";
|
||||
navContent.style.maxHeight = null;
|
||||
}
|
||||
navOpened = !navOpened;
|
||||
}
|
||||
|
||||
function createEl(className = false, elName = "div") {
|
||||
let el = document.createElement(elName);
|
||||
if (className != false) {
|
||||
el.className = className;
|
||||
}
|
||||
return el;
|
||||
}
|
||||
|
||||
function renderNavItem(tag) {
|
||||
/*
|
||||
<div class="nav-item">
|
||||
<div class="nav-icon">
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
<div class="nav-item-content">
|
||||
<div class="nav-title">
|
||||
Danse et musique
|
||||
</div>
|
||||
<div class="nav-access">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
let navItem = createEl('nav-item');
|
||||
let navIcon = createEl('nav-icon');
|
||||
let icon = createEl(tag.icon, 'i');
|
||||
|
||||
navIcon.appendChild(icon);
|
||||
navItem.appendChild(navIcon);
|
||||
|
||||
let navItemContent = createEl('nav-item-content');
|
||||
let navTitle = createEl('nav-title');
|
||||
navTitle.textContent = tag.name;
|
||||
navItemContent.appendChild(navTitle);
|
||||
|
||||
let navAccess = createEl('nav-access');
|
||||
let chevronIcon = createEl('fas fa-chevron-right', 'i');
|
||||
navAccess.appendChild(chevronIcon);
|
||||
navItemContent.appendChild(navTitle);
|
||||
navItemContent.appendChild(navAccess);
|
||||
navItem.appendChild(navItemContent);
|
||||
|
||||
return navItem;
|
||||
}
|
||||
|
||||
function setAttributes(node, attrs) {
|
||||
for (var key in attrs) {
|
||||
attr = document.createAttribute(key)
|
||||
attr.value = attrs[key]
|
||||
node.attributes.setNamedItem(attr)
|
||||
}
|
||||
}
|
||||
|
||||
function renderCard(organization) {
|
||||
let card = createEl('card', 'a')
|
||||
|
||||
// image
|
||||
let image = createEl('card-image-container')
|
||||
let imageTag = createEl('card-image')
|
||||
imageTag.style = `background-image: url('${organization.thumbnail}')`
|
||||
image.appendChild(imageTag)
|
||||
card.appendChild(image)
|
||||
|
||||
let content = createEl('card-content')
|
||||
let upperContent = createEl()
|
||||
|
||||
let titleContainer = createEl('card-title-container')
|
||||
let title = createEl('card-title', 'h2')
|
||||
title.textContent = organization.name
|
||||
titleContainer.appendChild(title)
|
||||
|
||||
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 = `<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 ${tag.icon.width} ${tag.icon.height}">
|
||||
<path fill="currentColor" d="${tag.icon.path}"></path>
|
||||
</svg>`
|
||||
}
|
||||
titleContainer.appendChild(icon)
|
||||
upperContent.appendChild(titleContainer)
|
||||
|
||||
let description = createEl('card-description')
|
||||
description.textContent = organization.description
|
||||
|
||||
let goTo = "/association/" + organization.slugs[organization.slugs.length - 1]
|
||||
if (organization.isProposed) {
|
||||
goTo += "?version=proposed"
|
||||
}
|
||||
// let link = createEl('card-link')
|
||||
// let aTag = createEl('card-link', 'a')
|
||||
// aTag.href =
|
||||
// aTag.textContent = "En savoir plus"
|
||||
// description.appendChild(aTag)
|
||||
|
||||
upperContent.appendChild(description)
|
||||
//link.appendChild(aTag)
|
||||
content.appendChild(upperContent)
|
||||
//content.appendChild(link)
|
||||
card.appendChild(content)
|
||||
|
||||
card.href = goTo
|
||||
|
||||
// card.onclick = () => {
|
||||
// window.location = goTo
|
||||
// }
|
||||
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
|
||||
|
||||
function enableTag(node) {
|
||||
let all = node.id === 'nav-all'
|
||||
let tagId = ""
|
||||
if (!all) {
|
||||
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)
|
||||
node.className += ' enabled'
|
||||
if (currentTag !== null) {
|
||||
currentTag.className = currentTag.className.replace('enabled', '')
|
||||
}
|
||||
currentTag = node
|
||||
if (data === undefined || data === null || data.length <= 0) {
|
||||
mosaicHeader.textContent = "Aucune associations listées"
|
||||
} else if (data.length === 1) {
|
||||
mosaicHeader.textContent = "Une association listée"
|
||||
} else {
|
||||
mosaicHeader.textContent = data.length + " associations listées"
|
||||
}
|
||||
}
|
||||
|
||||
navContent.childNodes.forEach(node => {
|
||||
node.onclick = () => enableTag(node)
|
||||
})
|
||||
|
||||
enableTag(document.getElementById('nav-all'))
|
||||
124
assets/development/scripts/organization.js
Normal file
124
assets/development/scripts/organization.js
Normal file
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue