123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- <script>
- import { mapActions, mapState } from 'pinia'
- import { ConcernementsStore } from '@stores/concernements'
- import SvgIcon from '@jamescoyle/vue-icon';
- import { mdiHeadphones } from '@mdi/js';
- import ContentEditable from '@components/editable/ContentEditable.vue';
- 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];
- console.log('can_update', this.concernement.can_update);
- },
- 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];
- console.log('can_update', this.concernement.can_update);
- }
- },
- deep: true
- }
- },
- methods: {
- ...mapActions(ConcernementsStore,['setMapMode']),
- },
- components: {
- SvgIcon,
- ContentEditable
- }
- }
- </script>
- <template>
- <header ref="cartouche_header">
- <div class="concernement-cartouche-icons">
- <label :class="{ hidden: headerreduced }">{{ ct_concernement.title.description }}</label>
-
- <ContentEditable
- tag="h2"
- :value="concernement.title"
- :class="{ ellipsed: headerreduced }"
- :contenteditable="concernement.can_update"
- :data="{
- entitytype: 'node',
- bundle: 'concernement',
- nid: this.concernement.id,
- field: {field_name: 'title', value:'value'}
- }" />
- <!-- <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>
|