server/static/assets/js/home.js

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')

organizations = organizations.map(org => {
  org.tag = tags.filter(t => t._id === org.tag)[0]
  return org
})

navEnabler.onclick = async () => {
  if (!navOpened) {
    // open the menu
    oldNavText = navEnablerText.textContent
    navEnablerText.textContent = "Minimiser le menu"
    navEnablerIcon.style.transform = "rotate(0deg)"
    navContent.style.maxHeight = navContent.scrollHeight + "px"
  } else {
    // close the menu
    navEnablerText.textContent = oldNavText
    navEnablerIcon.style.transform = "rotate(-90deg)"
    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')

  // image
  let image = createEl('card-image')
  let imageTag = createEl(0, 'img')
  imageTag.src = 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')
  icon.innerHTML = `<svg
    aria-hidden="true"
    focusable="false"
    role="img"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 ${organization.tag.icon.width} ${organization.tag.icon.height}">
    <path fill="currentColor" d="${organization.tag.icon.path}"></path>
  </svg>`
  titleContainer.appendChild(icon)
  upperContent.appendChild(titleContainer)

  let description = createEl('card-description')
  description.textContent = organization.description
  upperContent.appendChild(description)

  let link = createEl('card-link')
  let aTag = createEl(0, 'a')
  aTag.href = "/association/" + organization.slug
  aTag.textContent = "En savoir plus"
  link.appendChild(aTag)
  content.appendChild(upperContent)
  content.appendChild(link)
  card.appendChild(content)

  card.onclick = () => {
    window.location = aTag.href 
  }
  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.tag._id === tagId || 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'))