feat: home and organization page css integration

static/assets/js/home.js

@@ -0,0 +1,157 @@
+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(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 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')
+  let iconTag = createEl(organization.tag.icon, 'i')
+  icon.appendChild(iconTag)
+  titleContainer.appendChild(icon)
+  upperContent.appendChild(titleContainer)
+
+  let description = createEl('card-description')
+  description.textContent = organization.descriptionShort
+  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)
+  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'))