355 lines
9.6 KiB
Vue
355 lines
9.6 KiB
Vue
<script setup>
|
|
import CloseIcon from '../assets/icons/close.svg'
|
|
import FolderIcon from '../assets/icons/folder.svg'
|
|
import FileIcon from '../assets/icons/file.svg'
|
|
import ReloadIcon from '../assets/icons/reload.svg'
|
|
import AboutIcon from '../assets/icons/about.svg'
|
|
import BackIcon from '../assets/icons/back.svg'
|
|
import { loadPeopleData } from '@/data/peopleData.js'
|
|
</script>
|
|
|
|
<template>
|
|
<div id="artistPannel" class="windowStyle" ref="artistPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
|
|
<Moveable
|
|
className="moveable"
|
|
:target="target"
|
|
:draggable="true"
|
|
@drag="onDrag"
|
|
/>
|
|
<div class="windowTitle">
|
|
<p>
|
|
<b class="windowTitleLower">À PROPOS DE NOUS</b>
|
|
<br>
|
|
{{fileName}}
|
|
</p>
|
|
<!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
|
|
<div class="dblBtnContainer">
|
|
<button type="button" class="iconBtnStyle" id="rootBtn" v-show="isNotRoot" @mousedown.stop @touchstart="backToRoot" @click="backToRoot" data-tooltip="retour">
|
|
<BackIcon name="backwoods" class="icon"/>
|
|
</button>
|
|
<button type="button" class="iconBtnStyle" @mousedown.stop @touchstart="$emit('close')" @click="closeClicked" data-tooltip="fermer">
|
|
<CloseIcon name="close" class="icon"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="windowContent" id="artistContent">
|
|
<p id="emptyFolderText" v-show="emptyFolder">Oops! There is nothing to display here...</p>
|
|
<div v-show="displayedItems" class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad">
|
|
<div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click="itemIsClicked(item)">
|
|
<component :is="item.type==='folder'? FolderIcon : item.type === 'text'? FileIcon : item.type === 'link'? AboutIcon : CloseIcon" class="icon"/>
|
|
<p class="itemCaption">{{item.caption}}</p>
|
|
</div>
|
|
</div>
|
|
<div v-show="displayedItems" class="itemDesc" @touchstart.stop>
|
|
<p>{{displayedDescription}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/*================= Mise en page:
|
|
=> Mobile First : par défaut, moins de 500px
|
|
=> Tablette et PC format haut : de 500 à 1000px
|
|
=> PC large : à partir de 1000px
|
|
*/
|
|
|
|
/*+++++++++++++++++ COPYBOX
|
|
================ PC HAUT/IPAD
|
|
@media(min-width:650px){}
|
|
================ PC LARGE
|
|
@media(min-width:1300px){}
|
|
*/
|
|
|
|
#artistPannel{
|
|
position: fixed;
|
|
width: 333px;
|
|
height: 500px;
|
|
top: 16.1px;
|
|
left: 16.1px;
|
|
}
|
|
|
|
#artistContent{
|
|
width:100%;
|
|
height:87%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.dblBtnContainer{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
height: 100%;
|
|
width: 100px;
|
|
align-items: center;
|
|
}
|
|
|
|
.dblBtnContainer .iconBtnStyle{
|
|
height: 33px;
|
|
width: 50px;
|
|
margin-left: 7.77px;
|
|
background-color: var(--main-color);
|
|
color: var(--back-color);
|
|
border-color: var(--back-color);
|
|
}
|
|
|
|
.dblBtnContainer .iconBtnStyle:hover{
|
|
background-color: var(--back-color);
|
|
color: var(--main-color);
|
|
}
|
|
|
|
#emptyFolderText{
|
|
align-self:center;
|
|
margin-top: 33px;
|
|
pointer-events: none;
|
|
color: var(--accent-color);
|
|
font-family: 'lineal';
|
|
font-weight: lighter;
|
|
font-size: 16.1px;
|
|
}
|
|
|
|
.theMatrix{
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
grid-auto-rows: 133px;
|
|
gap: 10px;
|
|
width: 97%;
|
|
height: 66%;
|
|
overflow-y: auto;
|
|
align-items: center;
|
|
margin-left: 5px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.itemDesc{
|
|
width: 90%;
|
|
height: 23%;
|
|
border-radius: 16.1px;
|
|
border-color: var(--main-color);
|
|
border-style: solid;
|
|
border-width: thin;
|
|
margin-top: 2%;
|
|
|
|
color: var(--main-color);
|
|
font-family: 'velvelyne';
|
|
font-weight: bold;
|
|
font-size: 16.1px;
|
|
pointer-events: all;
|
|
cursor:inherit;
|
|
|
|
align-self: center;
|
|
padding-left: 2%;
|
|
padding-right: 3.33%;
|
|
overflow-y: scroll;
|
|
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.itemStyle{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 13.12px;
|
|
border-radius: 8px;
|
|
width:90%;
|
|
height: auto;
|
|
border-style: solid;
|
|
border-width: thin;
|
|
border-color: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.itemStyle:hover{
|
|
border-color: var(--main-color);
|
|
}
|
|
/*===============Not selected Item*/
|
|
.displayStyle{
|
|
color: var(--main-color);
|
|
border-style: solid;
|
|
border-width: thin;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.displayStyle .icon{
|
|
height:auto;
|
|
width:50%;
|
|
fill: currentColor;
|
|
}
|
|
|
|
/*===============Seleted Item*/
|
|
.selectedItemStyle{
|
|
color: var(--accent-color);
|
|
border-style: solid;
|
|
border-width: thin;
|
|
border-color: transparent;
|
|
}
|
|
.selectedItemStyle .icon{
|
|
height:auto;
|
|
width:50%;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.itemCaption{
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 16.1px;
|
|
pointer-events: all;
|
|
cursor:inherit;
|
|
}
|
|
.itemCaption:hover{
|
|
color: var(--accent-color);
|
|
}
|
|
.displayStyle .itemCaption{
|
|
color: var(--main-color);
|
|
font-family: 'velvelyne';
|
|
}
|
|
.selectedItemStyle .itemCaption{
|
|
color: var(--accent-color);
|
|
font-family: 'lineal';
|
|
font-weight: normal;
|
|
}
|
|
|
|
/*================ PC LARGE*/
|
|
@media(min-width:1300px){
|
|
#artistPannel{
|
|
height: 777px;
|
|
width: 666px;
|
|
}
|
|
.theMatrix{
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
grid-auto-rows: 180px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import Moveable from 'vue3-moveable';
|
|
import { dataStorage } from '../dataExchange.js'
|
|
|
|
export default {
|
|
name : 'ArtistPannel',
|
|
components:{
|
|
Moveable
|
|
},
|
|
data(){
|
|
return{
|
|
target: null,
|
|
linksData: [],
|
|
lastClickedItem: null,
|
|
dblClickTimer: null,
|
|
displayedItems: null,
|
|
rootFolderContent: [],
|
|
emptyFolder: false,
|
|
displayedDescription: "",
|
|
fileName: "",
|
|
isNotRoot : false
|
|
}
|
|
},
|
|
emits: ['close','focus','openImg','openLink'],
|
|
methods:{
|
|
onDrag({ target, transform }) {
|
|
target.style.transform = transform;
|
|
},
|
|
dataFirstLoad(){
|
|
this.displayedItems = [...this.linksData];
|
|
console.log(this.displayedItems);
|
|
this.isNotRoot = false;
|
|
this.checkEmptyFolder();
|
|
this.displayedItems.forEach(it => {
|
|
it.isSelected = false;
|
|
});
|
|
this.displayedDescription = "1x click pour plus d'infos \n 2x click pour accéder au contenu";
|
|
this.fileName = "./";
|
|
},
|
|
openFile(e){
|
|
this.$emit('focus');
|
|
if(e.type === 'folder'){
|
|
this.rootFolderContent.push({content:[...this.displayedItems], directory:this.fileName, description: this.displayedDescription});
|
|
this.displayedItems = [...e.children];
|
|
this.checkEmptyFolder();
|
|
this.isNotRoot = true;
|
|
this.displayedDescription = e.description
|
|
this.fileName += e.caption + '/';
|
|
}
|
|
if(e.type === 'image'){
|
|
this.$emit('openImg');
|
|
dataStorage.selectedImg = {
|
|
src: e.src,
|
|
caption: e.caption
|
|
}
|
|
this.displayedDescription = e.description;
|
|
}
|
|
if (e.type === 'link'){
|
|
this.$emit('openLink');
|
|
dataStorage.selectedLink = {
|
|
linksData: e.links,
|
|
caption: e.caption,
|
|
description: e.description
|
|
}
|
|
console.log(dataStorage.selectedLink);
|
|
}
|
|
if (e.type === 'text'){
|
|
this.selectFile(e);
|
|
}
|
|
|
|
},
|
|
selectFile(e){
|
|
this.$emit('focus');
|
|
this.displayedItems.forEach(it => {
|
|
it.isSelected = false;
|
|
})
|
|
e.isSelected = true;
|
|
this.displayedDescription = e.description;
|
|
},
|
|
itemIsClicked(e){
|
|
if (!this.dblClickTimer || this.lastClickedItem !== e){
|
|
clearTimeout(this.dblClickTimer);
|
|
this.lastClickedItem = e;
|
|
this.dblClickTimer = setTimeout(() => {
|
|
this.selectFile(e);
|
|
this.dblClickTimer = null;
|
|
this.lastClickedItem = null;
|
|
}, 200);
|
|
}else{
|
|
clearTimeout(this.dblClickTimer);
|
|
this.dblClickTimer = null;
|
|
this.lastClickedItem = null;
|
|
this.openFile(e);
|
|
}
|
|
},
|
|
checkEmptyFolder(){
|
|
if (this.displayedItems.length === 0){
|
|
this.emptyFolder = true;
|
|
this.displayedItems = null;
|
|
}else{
|
|
this.emptyFolder = false;
|
|
}
|
|
},
|
|
backToRoot(){
|
|
let rootDepth = this.rootFolderContent.length-1;
|
|
this.displayedItems = this.rootFolderContent[rootDepth].content;
|
|
this.fileName = this.rootFolderContent[rootDepth].directory;
|
|
this.displayedDescription = this.rootFolderContent[rootDepth].description;
|
|
this.rootFolderContent.splice(rootDepth,1);
|
|
rootDepth = this.rootFolderContent.length
|
|
if (rootDepth === 0){
|
|
this.isNotRoot = false;
|
|
}
|
|
this.checkEmptyFolder();
|
|
},
|
|
closeClicked(){
|
|
this.dataFirstLoad();
|
|
this.$emit('close');
|
|
}
|
|
},
|
|
async mounted(){
|
|
this.linksData = await loadPeopleData();
|
|
this.target = this.$refs.artistPannel;
|
|
this.dataFirstLoad();
|
|
console.log("Artist pannel is loaded!");
|
|
}
|
|
};
|
|
</script>
|