edit: interface pour le player et le panneau liens + fix z-index
This commit is contained in:
+77
-1
@@ -1,3 +1,8 @@
|
||||
<script setup>
|
||||
import PlayerIcon from './assets/icons/play.svg'
|
||||
import LinkIcon from './assets/icons/folder.svg'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="#topBar .left" defer>
|
||||
<lolStatusDiv></lolStatusDiv>
|
||||
@@ -6,15 +11,86 @@
|
||||
<lolStatusDiv></lolStatusDiv>
|
||||
</Teleport>
|
||||
<eventDiv></eventDiv>
|
||||
<eventPannel class="zFocus"></eventPannel>
|
||||
<eventPannel
|
||||
v-show="pannelStatus.activePannels.includes('event')"
|
||||
@focus="focusPannel('event')"
|
||||
@close="closePannel('event')"
|
||||
:class="{zBase: pannelStatus.focus !== 'event', zFocus: pannelStatus.focus === 'event'}"
|
||||
></eventPannel>
|
||||
<playerPannel
|
||||
v-show="pannelStatus.activePannels.includes('player')"
|
||||
@focus="focusPannel('player')"
|
||||
@close="closePannel('player')"
|
||||
:class="{zBase: pannelStatus.focus !== 'player', zFocus: pannelStatus.focus === 'player'}"
|
||||
></playerPannel>
|
||||
<linkPannel
|
||||
v-show="pannelStatus.activePannels.includes('link')"
|
||||
@focus="focusPannel('link')"
|
||||
@close="closePannel('link')"
|
||||
:class="{zBase: pannelStatus.focus !== 'link', zFocus: pannelStatus.focus === 'link'}"
|
||||
></linkPannel>
|
||||
<Teleport to="#openingHours" defer>
|
||||
<div id="btnContainer">
|
||||
<button type="button" name="link" class="iconBtnStyle" @click="openPannel('link')">
|
||||
<LinkIcon name="close" class="icon"/>
|
||||
</button>
|
||||
<button type="button" name="player" class="iconBtnStyle" @click="openPannel('player')">
|
||||
<PlayerIcon name="close" class="icon"/>
|
||||
</button>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#btnContainer{
|
||||
position: absolute;
|
||||
left: 7.77px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7.77px;
|
||||
margin-top: -88px;
|
||||
|
||||
.iconBtnStyle{
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
border-radius: 16.1px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { dataStorage } from './dataExchange.js'
|
||||
export default {
|
||||
name : 'App',
|
||||
computed: {
|
||||
pannelStatus(){
|
||||
return dataStorage
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
focusPannel(str){
|
||||
if(this.pannelStatus.activePannels.includes(str)){
|
||||
this.pannelStatus.focus = str
|
||||
}
|
||||
},
|
||||
closePannel(str){
|
||||
console.log('closing...')
|
||||
const index = this.pannelStatus.activePannels.indexOf(str)
|
||||
if( index !== -1){
|
||||
this.pannelStatus.activePannels.splice(index, 1)
|
||||
if(this.pannelStatus.focus === str){
|
||||
this.pannelStatus.focus = null
|
||||
}
|
||||
}
|
||||
},
|
||||
openPannel(str){
|
||||
if(!(this.pannelStatus.activePannels.includes(str))){
|
||||
this.pannelStatus.activePannels.push(str)
|
||||
} else {
|
||||
this.focusPannel(str)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log("Vue root app is fully loaded!");
|
||||
}
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.67 16.63">
|
||||
<path d="M5.28,0v16.63H0V0h5.28Z"/>
|
||||
<path d="M13.67,0v16.63h-5.28V0h5.28Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 228 B |
@@ -1,4 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.5 73.4">
|
||||
<path d="M18.1,68.55c-5.6-3.23-10.02-7.63-13.25-13.2C1.62,49.78,0,43.57,0,36.7s1.62-13.08,4.85-18.65c3.23-5.57,7.65-9.97,13.25-13.2C23.7,1.62,29.93,0,36.8,0s13,1.62,18.6,4.85c5.6,3.23,10.02,7.65,13.25,13.25,3.23,5.6,4.85,11.8,4.85,18.6s-1.62,13-4.85,18.6c-3.23,5.6-7.65,10.02-13.25,13.25-5.6,3.23-11.8,4.85-18.6,4.85s-13.1-1.62-18.7-4.85ZM47.2,54.5c3.13-1.8,5.6-4.27,7.4-7.4,1.8-3.13,2.7-6.6,2.7-10.4s-.9-7.27-2.7-10.4c-1.8-3.13-4.27-5.6-7.4-7.4-3.13-1.8-6.6-2.7-10.4-2.7s-7.37.9-10.5,2.7c-3.13,1.8-5.6,4.27-7.4,7.4-1.8,3.13-2.7,6.6-2.7,10.4s.9,7.27,2.7,10.4c1.8,3.13,4.27,5.6,7.4,7.4,3.13,1.8,6.63,2.7,10.5,2.7s7.27-.9,10.4-2.7Z"/>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.25 17.52">
|
||||
<path d="M0,17.52v-5.94l6.37-2.84L0,5.94V0l18.25,8.71v.07L0,17.52Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 780 B After Width: | Height: | Size: 219 B |
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.6 133.47">
|
||||
<g id="Calque_1-2" data-name="Calque 1">
|
||||
<path d="M78.6,113.9V0H0v113.9h0l.07,19.57,39.15-38.87,39.16,38.73.21-19.43h0ZM39.08,78.6l-23.08,20.85V16h46.6v83.5l-23.23-20.9h-.3Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 337 B |
@@ -122,7 +122,12 @@
|
||||
openEvent(obj){
|
||||
console.log('updating...')
|
||||
dataStorage.selectedEvent = obj;
|
||||
dataStorage.eventInfoActive = true;
|
||||
if (dataStorage.activePannels.includes('event')){
|
||||
dataStorage.focus = 'event'
|
||||
} else {
|
||||
dataStorage.activePannels.push('event')
|
||||
dataStorage.focus = 'event'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="eventPannel" class="windowStyle" ref="eventPannel" v-show="isActive">
|
||||
<div id="eventPannel" class="windowStyle" ref="eventPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
|
||||
<Moveable
|
||||
className="moveable"
|
||||
:target="target"
|
||||
@@ -100,7 +100,7 @@
|
||||
target.style.transform = transform;
|
||||
},
|
||||
closePannel(){
|
||||
dataStorage.eventInfoActive = false;
|
||||
this.$emit('close')
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
@@ -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>
|
||||
Liens utiles
|
||||
</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')" data-tooltip="fermer">
|
||||
<CloseIcon name="close" class="icon"/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="windowContent" id="linkContent">
|
||||
<a id="linkItem" v-for="item of displayedLinks" :href="item.href" class="textBtnStyle">
|
||||
<p><strong>{{item.title}}</strong><br>{{item.desc}}</p>
|
||||
</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: 222px;
|
||||
height: 333px;
|
||||
top: 222px;
|
||||
left: 117px;
|
||||
}
|
||||
|
||||
#linkContent{
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#linkItem{
|
||||
width: 100%;
|
||||
padding-right: 13.12px;
|
||||
padding-left: 13.12px;
|
||||
font-family: 'velvelyne';
|
||||
font-size: 13.12px;
|
||||
border-radius: 0;
|
||||
border-width: 0 0 1.61px 0;
|
||||
text-align: left;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
|
||||
strong{
|
||||
text-transform: uppercase;
|
||||
font-family: 'karrik';
|
||||
font-weight: normal;
|
||||
font-size: 16.1px;
|
||||
}
|
||||
}
|
||||
|
||||
/*================ PC LARGE*/
|
||||
@media(min-width:650px){
|
||||
#linkPannel{
|
||||
left: 477px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Moveable from 'vue3-moveable';
|
||||
import { lolLinkList } from '../lolLinks.js'
|
||||
|
||||
export default {
|
||||
name : 'LinkPannel',
|
||||
components:{
|
||||
Moveable
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
target: null
|
||||
}
|
||||
},
|
||||
emits: ['close','focus'],
|
||||
computed: {
|
||||
displayedLinks(){
|
||||
return lolLinkList
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onDrag({ target, transform }) {
|
||||
target.style.transform = transform;
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.target = this.$refs.linkPannel;
|
||||
console.log("Link pannel is loaded!");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,198 @@
|
||||
<script setup>
|
||||
import CloseIcon from '../assets/icons/close.svg'
|
||||
|
||||
import PlayIcon from '../assets/icons/play.svg'
|
||||
import PauseIcon from '../assets/icons/pause.svg'
|
||||
import NextIcon from '../assets/icons/next.svg'
|
||||
import PrevIcon from '../assets/icons/prev.svg'
|
||||
import { loadAudioData } from '@/data/audioData.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="playerPannel" class="windowStyle" ref="playerPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
|
||||
<Moveable
|
||||
className="moveable"
|
||||
:target="target"
|
||||
:draggable="true"
|
||||
@drag="onDrag"
|
||||
/>
|
||||
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
|
||||
<CloseIcon name="close" class="icon"/>
|
||||
</button>
|
||||
<div class="windowContent" id="playerContent">
|
||||
<div id="credits">
|
||||
<marquee direction="left" behavior="scroll" scrollamount="7" width="100%">{{selectedSong.track}} — {{selectedSong.artist}}</marquee>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button type="button" class="iconBtnStyle" @click="prevTrack" data-tooltip="précédente">
|
||||
<PrevIcon name="prev" class="icon"/>
|
||||
</button>
|
||||
<button type="button" class="iconBtnStyle" @click="toggleAudio" data-tooltip="lancer">
|
||||
<component :is="isPlaying? PauseIcon : PlayIcon" class="icon"/>
|
||||
</button>
|
||||
<button type="button" class="iconBtnStyle" @click="nextTrack" data-tooltip="suivante">
|
||||
<NextIcon name="next" class="icon"/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<audio ref="selectedAudio" @ended="nextTrack">
|
||||
<source :src="audioFile" type="audio/mpeg">
|
||||
</audio>
|
||||
|
||||
</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){}
|
||||
*/
|
||||
|
||||
#playerPannel{
|
||||
position: fixed;
|
||||
width: 222px;
|
||||
height: auto;
|
||||
top: 222px;
|
||||
left: 117px;
|
||||
box-sizing: border-box;
|
||||
cursor: move;
|
||||
|
||||
.closeBtn{
|
||||
position: absolute;
|
||||
align-self: flex-end;
|
||||
margin-right: 3.33px;
|
||||
margin-top: 3.33px;
|
||||
}
|
||||
}
|
||||
|
||||
#playerContent{
|
||||
margin-top: 40px;
|
||||
|
||||
#credits{
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background-color: var(--main-color);
|
||||
padding-left: 7.77px;
|
||||
padding-right: 7.77px;
|
||||
padding-top: 13.12px;
|
||||
margin-bottom: 13.12px;
|
||||
|
||||
marquee{
|
||||
color: var(--back-color);
|
||||
font-family: 'pressStart2P';
|
||||
font-size: 22px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
#controls{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 13.12px;
|
||||
|
||||
.iconBtnStyle{
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/*================ PC LARGE*/
|
||||
@media(min-width:650px){
|
||||
#playerPannel{
|
||||
left: 477px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Moveable from 'vue3-moveable';
|
||||
|
||||
export default {
|
||||
name : 'PlayerPannel',
|
||||
components:{
|
||||
Moveable
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
target: null,
|
||||
audioTarget: null,
|
||||
audioData: [],
|
||||
selectedSong:{
|
||||
track: "",
|
||||
artist: "",
|
||||
src: ""
|
||||
},
|
||||
audioFile:"",
|
||||
audioCredits:"",
|
||||
trackCount: 0,
|
||||
isPlaying: false
|
||||
}
|
||||
},
|
||||
emits: ['close','focus'],
|
||||
methods:{
|
||||
onDrag({ target, transform }) {
|
||||
target.style.transform = transform;
|
||||
},
|
||||
loadAudio(){
|
||||
//console.log(this.target);
|
||||
this.audioTarget.pause();
|
||||
this.selectedSong = this.audioData[this.trackCount];
|
||||
this.audioFile = this.selectedSong.src;
|
||||
this.audioCredits = ' ' + this.selectedSong.track +' - '+ this.selectedSong.artist;
|
||||
this.audioTarget.volume = 1;
|
||||
this.audioTarget.load();
|
||||
if(this.isPlaying){
|
||||
this.audioTarget.play();
|
||||
}
|
||||
},
|
||||
toggleAudio(){
|
||||
if(this.isPlaying){
|
||||
this.audioTarget.pause();
|
||||
}else{
|
||||
this.audioTarget.play();
|
||||
}
|
||||
this.isPlaying = !this.isPlaying;
|
||||
},
|
||||
prevTrack(){
|
||||
this.trackCount -= 1;
|
||||
if (this.trackCount<0){
|
||||
this.trackCount = this.audioData.length - 1;
|
||||
}
|
||||
//console.log('prev:', this.trackCount);
|
||||
this.loadAudio();
|
||||
},
|
||||
nextTrack(){
|
||||
this.trackCount += 1;
|
||||
if (this.trackCount>=this.audioData.length){
|
||||
this.trackCount = 0;
|
||||
}
|
||||
//console.log('next:', this.trackCount);
|
||||
this.loadAudio();
|
||||
}
|
||||
},
|
||||
async mounted(){
|
||||
this.target = this.$refs.playerPannel;
|
||||
|
||||
this.audioData = await loadAudioData();
|
||||
this.audioTarget = this.$refs.selectedAudio;
|
||||
//console.log('AUDIO/', this.audioData);
|
||||
this.loadAudio();
|
||||
|
||||
console.log("Player pannel is loaded!");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,25 @@
|
||||
import audio01 from './juste-tek.mp3'
|
||||
import audio02 from './sinking-into-.mp3'
|
||||
import audio03 from './technoloooogia.mp3'
|
||||
|
||||
export async function loadAudioData() {
|
||||
let audioFiles = [
|
||||
{
|
||||
track: 'the sink',
|
||||
artist: '333',
|
||||
src: audio02
|
||||
},
|
||||
{
|
||||
track: 'just tek',
|
||||
artist: '333',
|
||||
src: audio01
|
||||
},
|
||||
{
|
||||
track: 'Technolooooogia',
|
||||
artist: '333',
|
||||
src: audio03
|
||||
}
|
||||
]
|
||||
//console.log(audioFiles);
|
||||
return audioFiles
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
+2
-1
@@ -8,5 +8,6 @@ export const dataStorage = reactive({
|
||||
subtitle: '',
|
||||
desc: ''
|
||||
},
|
||||
eventInfoActive: false
|
||||
activePannels: [],
|
||||
focus: ''
|
||||
})
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
import { reactive } from 'vue'
|
||||
|
||||
export const lolLinkList = reactive(
|
||||
[
|
||||
{
|
||||
title: 'test',
|
||||
desc: 'blah blah description du truc test',
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
title: 'test 0002',
|
||||
desc: 'blah blah description du truc test',
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
title: 'test 333',
|
||||
desc: 'encore une autre description du truc test',
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
title: 'test 0002',
|
||||
desc: 'blah blah description du truc test',
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
title: 'test 333',
|
||||
desc: 'encore une autre description du truc test',
|
||||
href: '#'
|
||||
}
|
||||
]
|
||||
)
|
||||
@@ -8,6 +8,8 @@ import lolStatus from './components/lolStatus.vue'
|
||||
import EventContent from './components/EventContent.vue'
|
||||
|
||||
import EventInfoPannel from './components/EventInfoPannel.vue'
|
||||
import PlayerPannel from './components/PlayerPannel.vue'
|
||||
import LinkPannel from './components/LinkPannel.vue'
|
||||
// création app racine
|
||||
const app = createApp(App);
|
||||
|
||||
@@ -16,6 +18,8 @@ app.component('lolStatusDiv', lolStatus);
|
||||
app.component('eventDiv', EventContent);
|
||||
|
||||
app.component('eventPannel', EventInfoPannel);
|
||||
app.component('playerPannel', PlayerPannel);
|
||||
app.component('linkPannel', LinkPannel);
|
||||
|
||||
//Démarrage dans div#app de index.html
|
||||
app.mount('#app');
|
||||
|
||||
+2
-2
@@ -204,7 +204,7 @@ html, body{
|
||||
}
|
||||
|
||||
.zBase{
|
||||
z-index: 33;
|
||||
z-index: 333;
|
||||
}
|
||||
|
||||
.zFocus{
|
||||
@@ -329,7 +329,7 @@ html, body{
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
right: 7.77px;
|
||||
right: 3.33px;
|
||||
z-index: 3;
|
||||
|
||||
.textBtnStyle{
|
||||
|
||||
Reference in New Issue
Block a user