ouatterrir-app/src/components/layout/CartoucheLayout.vue

<script>

import { mapActions, mapState } from 'pinia'
import { ConcernementsStore } from '@stores/concernements'

import SvgIcon from '@jamescoyle/vue-icon';
import { mdiHeadphones } from '@mdi/js';

export default {
  props: ['cid'],
  emits: ['main_scrolled'],
  data(){
    return {
      headphones_path: mdiHeadphones,
      mainscrolled: false,
      headerreduced: false,
    }
  },
  created () {
    console.log('Cartouch layout created', this.cid);
    this.concernement = this.concernementsByID[this.cid];
  },
  mounted () {
    // console.log('cartouche layout mounted', this);
    this.$refs.cartouche_main.addEventListener('scroll', (event) => {
      console.log('main is scrolling', event);
      let $main = event.target;
      let scrolled = $main.scrollTop > 0;
      this.$emit('main_scrolled', scrolled);
      // TODO how to make this failsafe limit responsive ? 
      if(scrolled && $main.scrollHeight > 700){
        this.headerreduced = true;
      } else {
        this.headerreduced = false;
      }
    })
  },
  computed: {
    ...mapState(ConcernementsStore,['concernementsByID', 'opened_concernement', 'ct_concernement']),
  },
  watch: {
    cid: {
      handler (n,o) {
        console.log(`TerrainDeVie watch cid o:${o}, n:${n}`);
        if (n) {
          this.concernement = this.concernementsByID[n];
        }
      },
      deep: true
    }
  },
  methods: {
    ...mapActions(ConcernementsStore,['setMapMode'])
  },
  components: {
    SvgIcon
  }
}
</script>

<template>
  <header ref="cartouche_header">
    <div class="concernement-cartouche-icons">
      <label :class="{ hidden: headerreduced }">{{ ct_concernement.title.description }}</label>
      <h2 :class="{ ellipsed: headerreduced }">{{ concernement.title }}</h2>
      <!-- <nav class="icons">
        <ul>
          <li v-if="concernement.has_recit" >
            <svg-icon type="mdi" :path="headphones_path"></svg-icon>
          </li>
          <li>
            <a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span></a>
          </li>
          <li v-if="concernement.has_puissancedagir" >
            <a href="#puissanceagir" @click="setMapMode('puissancedagir')"><span class="icon puissancedagir"></span></a>
          </li>
          <li v-if="concernement.has_proximite" >
            <a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span></a>
          </li>
          <li v-if="concernement.has_superposition" >
            <a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span></a>
          </li>
          <li v-if="concernement.has_agissantes" >
            <a href="#action" @click="setMapMode('action')"><span class="icon action"></span></a>
          </li>
          <li v-if="concernement.has_doleance" >
            <a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span></a>
          </li>
        </ul>
      </nav> -->

    </div>
    <slot name="header"></slot>
  </header>
  <main ref="cartouche_main">
    <slot name="main"></slot>
  </main>
  <footer ref="cartouche_footer">
    <slot name="footer"></slot>
  </footer>
</template>