edit: panneau lien pour les réseaux des artistes
This commit is contained in:
@@ -50,8 +50,17 @@
|
||||
"type": "link",
|
||||
"isSelected": false,
|
||||
"caption": "Theo.web",
|
||||
"description": "Site internet de Theo",
|
||||
"url":"https://drags-nerds.net"
|
||||
"description": "Réseaux de Theo",
|
||||
"links":[
|
||||
{
|
||||
"caption":"site web",
|
||||
"url":"https://drags-nerds.net"
|
||||
},
|
||||
{
|
||||
"caption":"site web",
|
||||
"url":"https://drags-nerds.net"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
@@ -74,7 +83,12 @@
|
||||
"isSelected": false,
|
||||
"caption": "Background.web",
|
||||
"description": "Site internet du fond animé, en open source, allez checker ça l'équipe ! (et payer un café à son créateur si vous pouvez hihi)",
|
||||
"url":"https://collidingscopes.github.io/liquid-shape-distortions"
|
||||
"links":[
|
||||
{
|
||||
"caption":"site web",
|
||||
"url":"https://collidingscopes.github.io/liquid-shape-distortions"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
|
||||
@@ -16,5 +16,9 @@ export const dataStorage = reactive({
|
||||
selectedImg: {
|
||||
src: "",
|
||||
caption: ""
|
||||
},
|
||||
selectedLink:{
|
||||
linksData: [],
|
||||
description: ''
|
||||
}
|
||||
})
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
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>
|
||||
@@ -35,7 +36,7 @@
|
||||
<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 : FileIcon" class="icon"/>
|
||||
<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>
|
||||
@@ -245,7 +246,7 @@
|
||||
isNotRoot : false
|
||||
}
|
||||
},
|
||||
emits: ['close','focus','openImg'],
|
||||
emits: ['close','focus','openImg','openLink'],
|
||||
methods:{
|
||||
onDrag({ target, transform }) {
|
||||
target.style.transform = transform;
|
||||
@@ -277,6 +278,19 @@
|
||||
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);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
<script setup>
|
||||
import CloseIcon from '../assets/icons/close.svg'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="linkPannel" class="windowStyle" ref="linkPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
|
||||
<Moveable
|
||||
className="moveable"
|
||||
:target="target"
|
||||
:draggable="true"
|
||||
@drag="onDrag"
|
||||
/>
|
||||
<div class="windowTitle">
|
||||
<p>
|
||||
{{selectedLink.caption}}
|
||||
</p>
|
||||
<!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
|
||||
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')">
|
||||
<CloseIcon name="close" class="icon"/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="windowContent" id="linkContent">
|
||||
<p id="linkTextStyle">{{selectedLink.description}}</p>
|
||||
<a class="textBtnStyle" v-for="item in selectedLink.linksData" :href="item.url" target="_blank">{{item.caption}}</a>
|
||||
</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){}
|
||||
*/
|
||||
|
||||
#linkPannel{
|
||||
position: fixed;
|
||||
width: 333px;
|
||||
height: auto;
|
||||
top: 500px;
|
||||
left: 16.1px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#linkContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#linkContent .textBtnStyle{
|
||||
width: 267px;
|
||||
height: 77px;
|
||||
margin-top: 33px;
|
||||
margin-bottom: 33px;
|
||||
}
|
||||
|
||||
#linkTextStyle{
|
||||
font-size: 16.1px;
|
||||
font-family: 'velvelyne';
|
||||
color: var(--main-color);
|
||||
font-weight: bold;
|
||||
padding-right: 33px;
|
||||
padding-left: 33px;
|
||||
padding-top: 16.1px;
|
||||
}
|
||||
/*================ PC LARGE*/
|
||||
@media(min-width:1300px){
|
||||
#linkPannel{
|
||||
top: 333px;
|
||||
left: 161px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Moveable from 'vue3-moveable';
|
||||
import { dataStorage } from '../dataExchange.js'
|
||||
|
||||
export default {
|
||||
name : 'LinkPannel',
|
||||
components:{
|
||||
Moveable
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
target: null,
|
||||
}
|
||||
},
|
||||
emits: ['close','focus'],
|
||||
computed: {
|
||||
selectedLink(){
|
||||
return dataStorage.selectedLink
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onDrag({ target, transform }) {
|
||||
target.style.transform = transform;
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.target = this.$refs.linkPannel;
|
||||
console.log("Link pannel is loaded!");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -33,6 +33,7 @@
|
||||
<ArtistPan
|
||||
v-show="isActive.includes('artist')"
|
||||
@openImg = "openPannel('visual')"
|
||||
@openLink = "openPannel('link')"
|
||||
@close="closePannel('artist')"
|
||||
@focus="focusPannel('artist')"
|
||||
:class="{zBase: isFocused!=='artist', zFocus: isFocused==='artist'}">
|
||||
@@ -73,6 +74,12 @@
|
||||
@focus="focusPannel('visual')"
|
||||
:class="{zBase: isFocused!=='visual', zFocus: isFocused==='visual'}">
|
||||
</VisualizerPan>
|
||||
<LinkPan
|
||||
v-show="isActive.includes('link')"
|
||||
@close="closePannel('link')"
|
||||
@focus="focusPannel('link')"
|
||||
:class="{zBase: isFocused!=='link', zFocus: isFocused==='link'}">
|
||||
</LinkPan>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -21,6 +21,7 @@ import InstaPannel from './indieComponents/InstaPannel.vue'
|
||||
import MessagePannel from './indieComponents/MessagePannel.vue'
|
||||
import FollowPannel from './indieComponents/FollowPannel.vue'
|
||||
import VisualizerPannel from './indieComponents/VisualizerPannel.vue'
|
||||
import LinkPannel from './indieComponents/LinkPannel.vue'
|
||||
|
||||
|
||||
// création app racine
|
||||
@@ -44,6 +45,8 @@ app.component('InstaPan', InstaPannel);
|
||||
app.component('MessagePan', MessagePannel);
|
||||
app.component('FollowPan', FollowPannel);
|
||||
app.component('VisualizerPan', VisualizerPannel);
|
||||
app.component('LinkPan', LinkPannel);
|
||||
|
||||
|
||||
//Montage dans div#app de index.html
|
||||
app.mount('#app');
|
||||
|
||||
Reference in New Issue
Block a user