bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better doleance transition #2233

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2024-01-09 22:27:39 +01:00
parent 510ca72d0a
commit 89889df66c
3 changed files with 102 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/contents/Doleancer.vue
View File

@@ -46,20 +46,41 @@ export default {
}
});
},
mounted() {
if (this.doleance_index > 0)
this.$refs.prevDoleanceBTN.classList.add('visible');
if (this.doleance_index < this.concernement.doleances.length-1)
this.$refs.nextDoleanceBTN.classList.add('visible');
},
methods: {
...mapActions(ConcernementsStore,['setOpenedDoleance']),
nextDoleance(){
this.doleance_index ++;
this.openDoleance()
this.$refs.prevDoleanceBTN.classList.add('animeleft');
this.$refs.nextDoleanceBTN.classList.add('animeleft');
this.openDoleance();
},
prevDoleance(){
this.doleance_index --;
this.$refs.prevDoleanceBTN.classList.add('animeright');
this.$refs.nextDoleanceBTN.classList.add('animeright');
this.openDoleance()
},
openDoleance(){
console.log('openDoleance');
this.doleance = this.concernement.doleances[this.doleance_index];
this.setOpenedDoleance(parseInt(this.cid), this.doleance.id);
setTimeout((function(that){
return function(){
console.log('doleance anime end', that);
that.$refs.prevDoleanceBTN.classList.remove('animeleft', 'animeright');
that.$refs.prevDoleanceBTN.classList.toggle('visible', that.doleance_index > 0);
that.$refs.nextDoleanceBTN.classList.remove('animeleft', 'animeright');
that.$refs.nextDoleanceBTN.classList.toggle('visible', that.doleance_index < that.concernement.doleances.length-1);
};
}(this)), 1000)
}
},
components: {
@@ -293,29 +314,13 @@ export default {
<nav v-if="map_mode === 'doleancer'" class="doleance-switch">
<div
v-if="doleance_index > 0"
@click="prevDoleance"
class="prev">
<!-- <svg class="prev-doleance-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
<mask id="arrowMaskprev">
<rect x="0" y="0" width="24" height="24" fill="white"/>
<path :d="arrowleft_path" fill="black"/>
</mask>
<circle cx="12" cy="12" r="12" mask="url(#arrowMaskprev)" fill="white" />
</svg> -->
</div>
class="prev"
ref="prevDoleanceBTN" />
<div
v-if="doleance_index < concernement.doleances.length-1"
@click="nextDoleance"
class="next">
<!-- <svg class="next-doleance-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
<mask id="arrowMasknext">
<rect x="0" y="0" width="24" height="24" fill="white"/>
<path :d="arrowright_path" fill="black"/>
</mask>
<circle cx="12" cy="12" r="12" mask="url(#arrowMasknext)" fill="white" />
</svg> -->
</div>
class="next"
ref="nextDoleanceBTN" />
</nav>
</template>