119 lines
3.7 KiB
Vue
119 lines
3.7 KiB
Vue
<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 > 900){
|
|
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',
|
|
id: 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> |