VizTitle.vue

<template>
  <header id="grid-container">
    <div id="image-container">
      <img
        ref="heroImage"
        id="title-image"
        :class="{ mobile: mobileView }"
        src="@/assets/images/full-color_no-circle_strong-fade.png"
        alt="Social vulnerability and water insecurity"
        @load="onImageLoad"
      />
      <img
        ref="bwHeroImage"
        id="bw-title-image"
        :class="{ mobile: mobileView }"
        src="@/assets/images/full-color_no-circle_strong-fade.png"
        alt="Social vulnerability and water insecurity (grayscale)"
      />
      <!-- Using svg masks with a circle shape to reveal color image where circles are on top of bw -->
      <svg ref="overlay" id="overlay" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <mask id="circleMask">
            <rect width="100%" height="100%" fill="white" />
          </mask>
        </defs>
        <rect width="100%" height="100%" fill="transparent" mask="url(#circleMask)" />
      </svg>
    </div>
    <div id="text-container">
      <h1>Unequal access to water</h1>
      <h3>How societal factors shape vulnerability to water insecurity</h3>
    </div>
  </header>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue';
import { isMobile } from 'mobile-device-detect';

const mobileView = ref(isMobile);
const heroImage = ref(null);
const bwHeroImage = ref(null);
const overlay = ref(null);

const updateSvgDimensions = () => {
  if (heroImage.value && bwHeroImage.value && overlay.value) {
    const { width, height } = heroImage.value.getBoundingClientRect();
    overlay.value.setAttribute('width', width);
    overlay.value.setAttribute('height', height);
    bwHeroImage.value.style.width = `${width}px`;
    bwHeroImage.value.style.height = `${height}px`;
    bwHeroImage.value.style.top = '0';
    bwHeroImage.value.style.left = '0';
  }
};

const addRandomCircles = () => {
  nextTick(() => {
    const mask = overlay.value.querySelector('#circleMask');
    const svgWidth = overlay.value.clientWidth;
    const svgHeight = overlay.value.clientHeight;

    // Debugging output to check the dimensions
    console.log('SVG Width:', svgWidth, 'SVG Height:', svgHeight);

    if (svgWidth === 0 || svgHeight === 0) {
      console.error('SVG dimensions are not set correctly.');
      return;
    }

    // Clear existing circles
    while (mask.lastChild) {
      mask.removeChild(mask.lastChild);
    }

    // Re-add the white rectangle
    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect.setAttribute('width', '100%');
    rect.setAttribute('height', '100%');
    rect.setAttribute('fill', 'white');
    mask.appendChild(rect);

    const numberOfCircles = 30; // Number of random circles to add

    for (let i = 0; i < numberOfCircles; i++) {
      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      const cx = Math.random() * svgWidth;
      const cy = Math.random() * svgHeight;
      const r = Math.random() * (svgWidth / 10); // Adjust the maximum radius relative to the SVG width

      circle.setAttribute('cx', cx);
      circle.setAttribute('cy', cy);
      circle.setAttribute('r', r);
      circle.setAttribute('fill', 'black');

      mask.appendChild(circle);
    }
  });
};

const onImageLoad = () => {
  updateSvgDimensions();
  addRandomCircles();
};

onMounted(() => {
  updateSvgDimensions();
  addRandomCircles();
  window.addEventListener('resize', () => {
    updateSvgDimensions();
    addRandomCircles();
  });
});

watch(mobileView, () => {
  updateSvgDimensions();
});
</script>

<style lang="scss" scoped>
#grid-container {
  display: grid;
  grid-template-rows: auto auto;
  width: 100vw;
  margin: auto;
}

#image-container {
  position: relative;
  width: 100%;
}

#title-image,
#bw-title-image {
  width: 100%;
}

#title-image {
  display: block;
}

#bw-title-image {
  filter: grayscale(100%);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none; /* Ensure the grayscale image doesn't interfere with other interactions */
  mask: url(#circleMask); /* Apply the SVG mask */
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none; /* Ensure the SVG overlay doesn't interfere with other interactions */
}

#text-container {
  width: 100%;
  background: rgba(0, 0, 0, 0.95);
  color: #1b1b1b;
  padding: 20px;
  box-sizing: border-box;
}

#image-container {
  color: #1b1b1b;
  background: #1b1b1b;
}

h1 {
  margin: -20px 20px;
  color: white;
  text-align: left; /* Optional: Align text to the left */
}

h3 {
  margin: 20px 20px 0px 20px;
  color: white;
  text-align: left; /* Optional: Align text to the left */
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
</style>