MapsSection.vue

<template>
  <section id="map">
    <div
      id="title"
      class="text-container title-text"
    >
      <h3 v-html="t('text.components.mapText.title')"></h3>
      <br>
      <div class="accordion-container">

        <!-- Accordion 1 -->
        <button class="accordion households-accordion active">
          <span v-html="t('text.components.mapText.p1Title')"></span><span class="symbol">-</span>
        </button>
        <div class="panel households-panel">
          <p v-html="t('text.components.mapText.paragraph1')"></p>
          <picture>
            <source
              type="image/webp"
              :srcset="getImageSrcSet('avg_household_size_2022', 'webp')"
              sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
            />
            <img
              :srcset="getImageSrcSet('avg_household_size_2022', 'jpg')"
              sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
              :src="getImageSrc('avg_household_size_2022', 'jpg', 1280)"
              :alt="t('text.components.mapText.p1Alt')"
            />
          </picture>
        </div>

<!-- Accordion 2 -->
<button class="accordion latino-accordion">
          <span v-html="t('text.components.mapText.p4Title')"></span><span class="symbol">+</span>
        </button>
        <div class="panel">
          <p v-html="t('text.components.mapText.paragraph4')"></p>
          <picture>
            <source
              type="image/webp"
              :srcset="getImageSrcSet('perc_hispanic_census_2022', 'webp')"
              sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
            />
            <img
              :srcset="getImageSrcSet('perc_hispanic_census_2022', 'jpg')"
              sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
              :src="getImageSrc('perc_hispanic_census_2022', 'jpg', 1280)"
              :alt="t('text.components.mapText.p4Alt')"
            />
          </picture>
        </div>

        <!-- Accordion 3 -->
        <button class="accordion disability-accordion">
          <span v-html="t('text.components.mapText.p5Title')"></span><span class="symbol">+</span>
        </button>
        <div class="panel">
          <p v-html="t('text.components.mapText.paragraph5')"></p>
          <picture>
            <source
              type="image/webp"
              :srcset="getImageSrcSet('perc_disabled_census_2022', 'webp')"
              sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
            />
            <img
              :srcset="getImageSrcSet('perc_disabled_census_2022', 'jpg')"
              sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
              :src="getImageSrc('perc_disabled_census_2022', 'jpg', 1280)"
              :alt="t('text.components.mapText.p5Alt')"
            />
          </picture>
        </div>

        <!-- Accordion 4 -->
        <button class="accordion income-accordion">
          <span v-html="t('text.components.mapText.p2Title')"></span><span class="symbol">+</span>
        </button>
        <div class="panel">
          <p v-html="t('text.components.mapText.paragraph2')"></p>
          <picture>
            <source
              type="image/webp"
              :srcset="getImageSrcSet('med_income_census_2022', 'webp')"
              sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
            />
            <img
              :srcset="getImageSrcSet('med_income_census_2022', 'jpg')"
              sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
              :src="getImageSrc('med_income_census_2022', 'jpg', 1280)"
              :alt="t('text.components.mapText.p2Alt')"
            />
          </picture>
        </div>

        <!-- Accordion 5 -->
        <button class="accordion renters-accordion">
          <span v-html="t('text.components.mapText.p3Title')"></span><span class="symbol">+</span>
        </button>
        <div class="panel">
          <p v-html="t('text.components.mapText.paragraph3')"></p>
          <picture>
            <source
              type="image/webp"
              :srcset="getImageSrcSet('median_rent_2022', 'webp')"
              sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
            />
            <img
              :srcset="getImageSrcSet('median_rent_2022', 'jpg')"
              sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
              :src="getImageSrc('median_rent_2022', 'jpg', 1280)"
              :alt="t('text.components.mapText.p3Alt')"
            />
          </picture>
        </div>

      </div>   
    </div>
  </section>
</template>


<script setup>
import { onMounted } from 'vue';
import { useI18n } from 'vue-i18n';

const { t, locale } = useI18n();

const getImageSrc = (baseName, format, size) => {
  const lang = locale.value === 'es' ? 'es' : 'en';  // Get language
  return new URL(`../assets/images/responsive_images/${baseName}_${lang}-${size}.${format}`, import.meta.url).href;
};

const getImageSrcSet = (baseName, format) => {
  const lang = locale.value === 'es' ? 'es' : 'en';  // Get language
  return `
    ${new URL(`../assets/images/responsive_images/${baseName}_${lang}-320.${format}`, import.meta.url).href} 320w,
    ${new URL(`../assets/images/responsive_images/${baseName}_${lang}-640.${format}`, import.meta.url).href} 640w,
    ${new URL(`../assets/images/responsive_images/${baseName}_${lang}-1280.${format}`, import.meta.url).href} 1280w,
    ${new URL(`../assets/images/responsive_images/${baseName}_${lang}-1800.${format}`, import.meta.url).href} 1920w
  `;
};

// Accordion click handler
onMounted(() => {
  const acc = document.getElementsByClassName("accordion");
  for (let i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function () {
      this.classList.toggle("active");
      const panel = this.nextElementSibling;
      const symbol = this.querySelector('.symbol');
      if (panel.style.display === "block") {
        panel.style.display = "none";
        symbol.textContent = "+";
      } else {
        panel.style.display = "block";
        symbol.textContent = "-";
      }
    });
  }
});
</script>
<style lang="scss" scoped>

$Demographiccharacteristics: var(--color-Demographiccharacteristics);
$Landtenure: var(--color-Landtenure);
$Livingconditions: var(--color-Livingconditions);
$Socioeconomicstatus: var(--color-Socioeconomicstatus);
$Health: var(--color-Health);
$Riskperception: var(--color-Riskperception);
$Exposure: var(--color-Exposure);
$ThemeGrey: var(--color-themegrey);

.accordion {
  background-color: #eee;
  color: #fff;
  cursor: pointer;
  padding: 16px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  line-height: 1.2;
  transition: 0.4s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 2.15rem;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  position: relative;
  border: 2px solid transparent;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 8px
}

.accordion.households-accordion {
  background-color: $Demographiccharacteristics;
}

.accordion.income-accordion {
  background-color: $Socioeconomicstatus;
}

.accordion.renters-accordion {
  background-color: $Landtenure;
}

.accordion.latino-accordion {
  background-color: $Demographiccharacteristics;
}

.accordion.disability-accordion {
  background-color: $Demographiccharacteristics;
}

.accordion::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid transparent;
  z-index: -1;
  transition: border-color 0.3s;
}

.accordion:hover::before, .accordion.active::before {
  border-color: rgba(217, 217, 217, 0.95);
}

.active, .accordion:hover {
  background-color: black; 
}

.panel {
  display: none; 
  overflow: hidden;
  border: 3px solid #F0F0F0; 
  margin-bottom: 15px;
  margin-top: -15px;
  border-top-width: 0;
  border-radius: 0 0 10px 10px;
}

.panel p {
  margin: 20px;
}

.panel img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.households-accordion.active + .households-panel {
  display: block;
}

.symbol {
  font-size: 32px;
  font-weight: bold;
}


</style>

<style lang="scss">
  #choropleth-map-tooltip {
    margin-left: -120px;
  }
</style>