MiniMap.vue

<template>
  <div class="relative">
    <Regions id="regionSVG" ref="regionSVG" class="text-gray-500" />
    <span
      v-show="hovered"
      id="tooltip-mini-map"
      class="
        absolute
        whitespace-nowrap
        pointer-events-none
        p-1
        shadow-lg
        rounded
        text-xs
        bg-opacity-90 bg-white
        dark:bg-gray-700
      "
    >
      {{ hovered && hovered.name }}
    </span>
  </div>
</template>

<script>
import Regions from '~/static/img/regions.svg?inline'

const regions = {
  Alsace: {
    id: 77,
    name: 'Alsace',
    color: '#F7941D',
  },
  Aquitaine: {
    id: 66,
    name: 'Aquitaine',
    color: '#B3B5B4',
  },
  Auvergne: {
    id: 59,
    name: 'Auvergne',
    color: '#652D90',
  },
  'Basse-normandie': {
    id: 78,
    name: 'Basse-Normandie',
    color: '#12A89D',
  },
  Bourgogne: {
    id: 50,
    name: 'Bourgogne',
    color: '#0088CC',
  },
  Bretagne: {
    id: 29,
    name: 'Bretagne',
    color: '#BF1E2E',
  },
  Centre: {
    id: 61,
    name: 'Centre',
    color: '#9EB83B',
  },
  'Champagne-ardenne': {
    id: 79,
    name: 'Champagne-Ardenne',
    color: '#ff9999',
  },
  Corse: {
    id: 62,
    name: 'Corse',
    color: '#00cc00',
  },
  'Franche-comte': {
    id: 80,
    name: 'Franche-Comté',
    color: '#0099cc',
  },
  Guadeloupe: {
    id: 55,
    name: 'Guadeloupe',
    color: '#cc6600',
  },
  Guyane: {
    id: 70,
    name: 'Guyane',
    color: '#558000',
  },
  'Haute-normandie': {
    id: 81,
    name: 'Haute-Normandie',
    color: '#e6e600',
  },
  'Ile-de-france': {
    id: 82,
    name: 'Ile-de-France',
    color: '#b300b3',
  },
  'La-reunion': {
    id: 72,
    name: 'La Réunion',
    color: '#0088cc',
  },
  'Languedoc-roussillon': {
    id: 83,
    name: 'Languedoc-Roussillon',
    color: '#8cd98c',
  },
  Limousin: {
    id: 84,
    name: 'Limousin',
    color: '#ffccdd',
  },
  Lorraine: {
    id: 85,
    name: 'Lorraine',
    color: '#3399ff',
  },
  Martinique: {
    id: 71,
    name: 'Martinique',
    color: '#2a8000',
  },
  Mayotte: {
    id: 86,
    name: 'Mayotte',
    color: '#FF9999',
  },
  'Midi-pyrenees': {
    id: 87,
    name: 'Midi-Pyrénées',
    color: '#808281',
  },
  'Nord-pas-de-calais': {
    id: 88,
    name: 'Nord-Pas-de-Calais',
    color: '#00CC00',
  },
  'Pays-de-la-loire': {
    id: 68,
    name: 'Pays de la Loire',
    color: '#0088CC',
  },
  Picardie: {
    id: 54,
    name: 'Picardie',
    color: '#F1592A',
  },
  'Poitou-charentes': {
    id: 89,
    name: 'Poitou-Charentes',
    color: '#652D90',
  },
  'Provence-alpes-cote-dazur': {
    id: 69,
    name: "Provence-Alpes-Côte d'Azur",
    color: '#BF1E2E',
  },
  'Rhone-alpes': {
    id: 76,
    name: 'Rhône-Alpes',
    color: '#E6E600',
  },
  Afrique: {
    id: 38,
    name: 'Afrique',
    color: '#3AB54A',
  },
  Belgique: {
    id: 40,
    name: 'Belgique',
    color: '#FFCCDD',
  },
  Canada: {
    id: 90,
    name: 'Canada',
    color: '#12A89D',
  },
  Espagne: {
    id: 91,
    name: 'Espagne',
    color: '#3399FF',
  },
  Suisse: {
    id: 46,
    name: 'Suisse',
    color: '#ED207B',
  },
  Allemagne: {
    id: 92,
    name: 'Allemagne',
    color: '#3AB54A',
  },
  'Catalunya-andorra': {
    id: 93,
    name: 'Catalunya-Andorra',
    color: '#0088CC',
  },
  Asie: {
    id: 102,
    name: 'Asie',
    color: '#E6E600',
  },
}

export default {
  name: 'MiniMap',
  components: {
    Regions,
  },
  data() {
    return {
      hovered: null,
    }
  },
  mounted() {
    const regionsPath = this.$refs.regionSVG.querySelectorAll('path')
    const tooltip = this.$el.querySelector('#tooltip-mini-map')

    this.$refs.regionSVG.addEventListener('mousemove', (evt) => {
      tooltip.style.left = evt.offsetX + 15 + 'px'
      tooltip.style.top = evt.offsetY - 20 + 'px'
    })

    regionsPath.forEach((region) => {
      if (regions[region.id]) region.style.fill = regions[region.id].color

      region.addEventListener('mouseenter', (evt) => {
        this.hovered = regions[evt.target.id]
      })
      region.addEventListener('mouseleave', (evt) => {
        this.hovered = null
      })

      region.addEventListener('click', (evt) => {
        window.open(
          `${this.$config.forum_url}/c/${regions[evt.target.id].id}`,
          '_blank'
        )
      })
    })
  },
}

/*
fetch(`https://forum.monnaie-libre.fr/categories.json`)
    .then(response => response.json())
    .then(data => console.log(data))

ID des groupes locaux du forum :
[77,66,59,78,50,29,61,79,62,80,55,70,81,82,72,83,84,85,71,86,87,88,68,54,89,69,76,38,40,90,91,46,92,93,102]

const capitalize = (s) => {
  if (typeof s !== 'string') return ''
  return s.charAt(0).toUpperCase() + s.slice(1)
}
let regions = {}
let timer = ms => new Promise(res => setTimeout(res, ms))

async function load () {
  for (var i = 0; i < temp1.length; i++) {
    await fetch(`https://forum.monnaie-libre.fr/c/${temp1[i]}/show.json`)
    .then(response => response.json())
    .then(data => regions[capitalize(data.category.slug)] = {id: data.category.id, name:data.category.name, color: '#'+data.category.color})
    await timer(3000);
  }
}
await load();
copy(regions)

Alsace: '#F7941D',
Aquitaine: '#B3B5B4',
Basse-Normandie: '#12A89D',
Bretagne: '#BF1E2E',
Bourgogne: '#0088CC',
Auvergne: '#652D90',
Centre: '#9EB83B',
Champagne-Ardenne: '#ff9999',
Corse: '#00cc00',
Guyane: '#558000',
Guadeloupe: '#cc6600',
Franche-Comté: '#0099cc',
Haute-Normandie: '#e6e600',
Ile-de-France: '#b300b3',
La Réunion: '#0088cc',
Picardie: '#F1592A',
Allemagne: '#3AB54A',
*/
</script>

<style lang="postcss" scoped>
#regionSVG >>> path {
  opacity: 0.7;
  /* // removed cause glitch effect
   transition: opacity ease 150ms; */
  cursor: pointer;
}
#regionSVG >>> path:hover {
  opacity: 1;
}
</style>