server/assets/development/scripts/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');

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