484 lines
13 KiB
Vue
484 lines
13 KiB
Vue
<script setup>
|
|
import CloseIcon from '../assets/icons/close.svg'
|
|
import FolderIcon from '../assets/icons/folder.svg'
|
|
import TextIcon from '../assets/icons/text.svg'
|
|
import ImgIcon from '../assets/icons/img.svg'
|
|
import LinkIcon from '../assets/icons/link.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">Oopsi! Il n'y a rien à afficher ici<br>(pour l'instant...)</p>
|
|
<div v-show="gridDisplay" class="theMatrix" @mousedown.stop @reload="dataFirstLoad" @click="deselectAll" touchstart="deselectAll">
|
|
<div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.id" @click.stop="openFile(item)" @touchstart="openFile(item)">
|
|
<component :is="item.type==='folder'? FolderIcon : item.type === 'text'? TextIcon : item.type === 'link'? LinkIcon : ImgIcon" class="icon"/>
|
|
<p class="itemCaption">{{item.caption}}</p>
|
|
</div>
|
|
</div>
|
|
<div v-show="listDisplay" class="nevrEndingList" @mousedown.stop @reload="dataFirstLoad" @click="deselectAll" touchstart="deselectAll">
|
|
<div class="listItemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.id" @click.stop="openFile(item)" @touchstart="openFile(item)">
|
|
<component :is="item.type==='folder'? FolderIcon : item.type === 'text'? TextIcon : item.type === 'link'? LinkIcon : ImgIcon" class="icon"/>
|
|
<p class="itemCaption" id="listTitle">{{item.caption}}</p>
|
|
<p class="itemCaption" id="listAuthor">{{item.author}}</p>
|
|
<p class="itemCaption" id="listDate"><time :timedate="item.dateInfo">{{item.date}}</time></p>
|
|
</div>
|
|
</div>
|
|
<div v-show="displayedItems" class="itemDesc" @touchstart.stop @click.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: 420px;
|
|
height: 600px;
|
|
top: 16.1px;
|
|
left: 16.1px;
|
|
z-index: 33;
|
|
}
|
|
|
|
#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;
|
|
margin-left: 0;
|
|
pointer-events: none;
|
|
color: var(--accent-color);
|
|
font-family: 'lineal';
|
|
font-weight: lighter;
|
|
font-size: 16.1px;
|
|
}
|
|
|
|
/*=================GRID DISPLAY*/
|
|
.theMatrix{
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
grid-auto-rows: 150px;
|
|
gap: 16.1px;
|
|
width: 97%;
|
|
height: 66%;
|
|
overflow-y: auto;
|
|
align-items: center;
|
|
margin-left: 5px;
|
|
margin-top: 5px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.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: cell;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
.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: 666px;
|
|
width: 666px;
|
|
}
|
|
.theMatrix{
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
grid-auto-rows: 180px;
|
|
}
|
|
}
|
|
|
|
/*======================LIST DISPLAY*/
|
|
.nevrEndingList{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: 95%;
|
|
height: 66%;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
padding-right: 7.77px;
|
|
}
|
|
|
|
.listItemStyle{
|
|
width:100%;
|
|
height: 33px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin-top: 7.77px;
|
|
margin-left: 1.61px;
|
|
cursor: cell;
|
|
border-style: solid;
|
|
border-width: thin;
|
|
border-color: transparent;
|
|
border-radius: 16.1px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.listItemStyle:hover{
|
|
border-color: var(--main-color);
|
|
}
|
|
|
|
.listItemStyle .icon{
|
|
height: 16.1px;
|
|
width: 33px;
|
|
margin-left: 3.33px;
|
|
margin-right: 16.1px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.listItemStyle .itemCaption{
|
|
font-family: 'velvelyne';
|
|
font-weight: bold;
|
|
font-size: 13.12px;
|
|
pointer-events: none;
|
|
cursor:inherit;
|
|
width: 20%;
|
|
height: 100%;
|
|
text-align: left;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-top: 1.61px;
|
|
user-select: none;
|
|
}
|
|
|
|
#listTitle{
|
|
width: 50%;
|
|
}
|
|
|
|
#listAuthor{
|
|
width: 33%;
|
|
}
|
|
|
|
#listDate{
|
|
width: 33px;
|
|
}
|
|
|
|
</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,
|
|
gridDisplay: true,
|
|
listDisplay: false,
|
|
displayedDescription: "",
|
|
fileName: "",
|
|
isNotRoot : false,
|
|
rootDepth: 0
|
|
}
|
|
},
|
|
emits: ['close','focus','openImg','openLink','openVideo'],
|
|
methods:{
|
|
onDrag({ target, transform }) {
|
|
target.style.transform = transform;
|
|
},
|
|
dataFirstLoad(){
|
|
this.displayedItems = [...this.linksData];
|
|
//console.log(this.displayedItems);
|
|
this.isNotRoot = false;
|
|
this.checkEmptyFolder();
|
|
this.deselectAll();
|
|
this.fileName = "./";
|
|
if(!this.emptyFolder){
|
|
this.gridDisplay = true;
|
|
this.listDisplay = false;
|
|
};
|
|
},
|
|
deselectAll(){
|
|
this.displayedItems.forEach(it => {
|
|
it.isSelected = false;
|
|
});
|
|
if(!this.isNotRoot){
|
|
this.displayedDescription = "Clique sur un dossier pour accéder au contenu !";
|
|
}else{
|
|
this.displayedDescription = this.rootFolderContent.at(-1).description;
|
|
}
|
|
},
|
|
openFile(e){
|
|
this.$emit('focus');
|
|
if(e.type === 'folder'){
|
|
this.rootFolderContent.push({content:[...this.displayedItems], directory:this.fileName, description: this.displayedDescription});
|
|
this.rootDepth = this.rootFolderContent.length;
|
|
this.displayedItems = [...e.children];
|
|
this.checkEmptyFolder();
|
|
this.isNotRoot = true;
|
|
this.displayedDescription = e.description
|
|
this.fileName += e.caption + '/';
|
|
if (e.caption === 'Autres contenus'){
|
|
this.gridDisplay = false;
|
|
this.listDisplay = true;
|
|
this.organizeItems();
|
|
}
|
|
}
|
|
if(e.type === 'image'){
|
|
this.$emit('openImg');
|
|
dataStorage.selectedImg = {
|
|
src: e.src,
|
|
caption: e.caption,
|
|
like: e.like,
|
|
alt: e.alt,
|
|
isLiked: e.isLiked
|
|
}
|
|
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 === 'video'){
|
|
this.$emit('openVideo');
|
|
dataStorage.selectedVideo = {
|
|
src: e.src,
|
|
caption: e.caption,
|
|
like: e.like,
|
|
alt: e.alt,
|
|
format: e.format,
|
|
isLiked: e.isLiked
|
|
}
|
|
this.displayedDescription = e.description;
|
|
}
|
|
|
|
this.selectFile(e);
|
|
|
|
},
|
|
selectFile(e){
|
|
//console.log(e);
|
|
if(!this.emptyFolder){
|
|
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;
|
|
}, 161);
|
|
}else{
|
|
clearTimeout(this.dblClickTimer);
|
|
this.dblClickTimer = null;
|
|
this.lastClickedItem = null;
|
|
this.openFile(e);
|
|
}
|
|
},
|
|
checkEmptyFolder(){
|
|
if (this.displayedItems.length === 0){
|
|
this.emptyFolder = true;
|
|
this.gridDisplay = false;
|
|
this.listDisplay = false;
|
|
this.displayedItems = null;
|
|
}else{
|
|
this.emptyFolder = false;
|
|
}
|
|
},
|
|
organizeItems(){
|
|
this.displayedItems.sort((a,b) => b.dateInfo.localeCompare(a.dateInfo));
|
|
},
|
|
backToRoot(){
|
|
this.displayedItems = this.rootFolderContent.at(-1).content;
|
|
this.fileName = this.rootFolderContent.at(-1).directory;
|
|
if(this.emptyFolder){
|
|
this.emptyFolder = false;
|
|
this.gridDisplay = true;
|
|
}
|
|
if(this.listDisplay){
|
|
this.listDisplay = false;
|
|
this.gridDisplay = true;
|
|
}
|
|
this.deselectAll();
|
|
this.rootFolderContent.splice(this.rootFolderContent.length-1,1);
|
|
this.rootDepth = this.rootFolderContent.length
|
|
if (this.rootDepth === 0){
|
|
this.isNotRoot = false;
|
|
}
|
|
//console.log(this.rootDepth);
|
|
},
|
|
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>
|