Compare commits

..

2 commits

Author SHA1 Message Date
Damien Broqua
68414e3e71 Added link to artists for extra info 2024-02-04 15:40:01 +01:00
Damien Broqua
d692090022 Added Escape keydown gesture 2024-02-04 15:37:42 +01:00
4 changed files with 180 additions and 136 deletions

View file

@ -78,6 +78,12 @@ Vue.createApp({
], ],
}; };
}, },
created() {
window.addEventListener("keydown", this.keyDown);
},
destroyed() {
window.removeEventListener("keydown", this.keyDown);
},
methods: { methods: {
search(event) { search(event) {
event.preventDefault(); event.preventDefault();
@ -189,5 +195,13 @@ Vue.createApp({
orderedItems(items) { orderedItems(items) {
return items.sort(); return items.sort();
}, },
keyDown(event) {
const keycode = event.code;
if (this.modalIsVisible && keycode === "Escape") {
event.preventDefault();
this.modalIsVisible = false;
}
},
}, },
}).mount("#ajouter-album"); }).mount("#ajouter-album");

View file

@ -34,6 +34,11 @@ Vue.createApp({
}, },
created() { created() {
this.fetch(); this.fetch();
window.addEventListener("keydown", this.keyDown);
},
destroyed() {
window.removeEventListener("keydown", this.keyDown);
}, },
methods: { methods: {
formatParams(param) { formatParams(param) {
@ -241,5 +246,16 @@ Vue.createApp({
return render; return render;
}, },
keyDown(event) {
const keycode = event.code;
if (this.showModalDelete && keycode === "Escape") {
event.preventDefault();
this.showModalDelete = false;
}
if (this.showModalShare && keycode === "Escape") {
event.preventDefault();
this.showModalShare = false;
}
},
}, },
}).mount("#collection"); }).mount("#collection");

View file

@ -25,10 +25,10 @@ if (typeof item !== "undefined") {
this.setTrackList(); this.setTrackList();
this.setIdentifiers(); this.setIdentifiers();
window.addEventListener("keydown", this.changeImage); window.addEventListener("keydown", this.keyDown);
}, },
destroyed() { destroyed() {
window.removeEventListener("keydown", this.changeImage); window.removeEventListener("keydown", this.keyDown);
}, },
watch: { watch: {
shareMessage(message) { shareMessage(message) {
@ -139,12 +139,12 @@ if (typeof item !== "undefined") {
this.setImage(); this.setImage();
}, },
changeImage(event) { changeImage(event) {
event.preventDefault();
const direction = event.code; const direction = event.code;
if ( if (
this.modalIsVisible &&
["ArrowRight", "ArrowLeft", "Escape"].indexOf(direction) !== ["ArrowRight", "ArrowLeft", "Escape"].indexOf(direction) !==
-1 -1
) { ) {
switch (direction) { switch (direction) {
case "ArrowRight": case "ArrowRight":
@ -159,6 +159,20 @@ if (typeof item !== "undefined") {
return true; return true;
}, },
keyDown(event) {
const keycode = event.code;
if (this.modalIsVisible) {
this.changeImage(event);
}
if (this.showModalDelete && keycode === "Escape") {
event.preventDefault();
this.showModalDelete = false;
}
if (this.showModalShare && keycode === "Escape") {
event.preventDefault();
this.showModalShare = false;
}
},
showAllIdentifiers() { showAllIdentifiers() {
this.identifiersMode = "all"; this.identifiersMode = "all";
this.setIdentifiers(); this.setIdentifiers();

View file

@ -1,133 +1,133 @@
<div class="grid md:grid-cols-3 gap-16"> <div class="grid md:grid-cols-3 gap-16">
<div> <div>
<template v-for="album in tracklist"> <template v-for="album in tracklist">
<strong v-if="album.title">{{album.title}}</strong> <strong v-if="album.title">{{album.title}}</strong>
<ul> <ul>
<li v-for="(track, index) in album.tracks" class="ml-4"> <li v-for="(track, index) in album.tracks" class="ml-4">
{{track.position || (index+1)}} - {{ track.title }} <template v-if="track.duration">({{track.duration}})</template> {{track.position || (index+1)}} - {{ track.title }} <template v-if="track.duration">({{track.duration}})</template>
<ul v-if="track.artists && track.artists.length > 0" class="sm-hidden"> <ul v-if="track.artists && track.artists.length > 0" class="sm-hidden">
<li v-for="extra in track.artists" class=" ml-4"> <li v-for="extra in track.artists" class=" ml-4">
<small>{{extra.name}}</small> <small>{{extra.name}}</small>
</li> </li>
</ul> </ul>
<ul v-if="track.extraartists && track.extraartists.length > 0" class="sm-hidden"> <ul v-if="track.extraartists && track.extraartists.length > 0" class="sm-hidden">
<li v-for="extra in track.extraartists" class=" ml-4"> <li v-for="extra in track.extraartists" class=" ml-4">
<small>{{extra.role}} : {{extra.name}}</small> <small>{{extra.role}} : <a :href="`/ma-collection?page=1&limit=16&sort=year&order=asc&artist=${extra.name}`">{{extra.name}}</a></small>
</li> </li>
</ul> </ul>
</li> </li>
</ul> </ul>
</template> </template>
</div> </div>
<div class="md:col-span-2"> <div class="md:col-span-2">
<div class="grid grid-cols-2 gap-10"> <div class="grid grid-cols-2 gap-10">
<div> <div>
<strong>Genres</strong> <strong>Genres</strong>
<br /> <br />
<template v-for="(genre, index) in item.genres"> <template v-for="(genre, index) in item.genres">
{{genre}}<template v-if="index < item.genres.length - 1">, </template> {{genre}}<template v-if="index < item.genres.length - 1">, </template>
</template> </template>
</div> </div>
<div> <div>
<strong>Styles</strong> <strong>Styles</strong>
<br /> <br />
<span v-for="(style, index) in item.styles"> <span v-for="(style, index) in item.styles">
{{style}}<template v-if="index < item.styles.length - 1">, </template> {{style}}<template v-if="index < item.styles.length - 1">, </template>
</span> </span>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="grid grid-cols-3 gap-10"> <div class="grid grid-cols-3 gap-10">
<div> <div>
<strong>Pays</strong> <strong>Pays</strong>
<br /> <br />
<span>{{item.country}}</span> <span>{{item.country}}</span>
</div> </div>
<div> <div>
<strong>Année</strong> <strong>Année</strong>
<br /> <br />
<span>{{item.year}}</span> <span>{{item.year}}</span>
</div> </div>
<div> <div>
<strong>Date de sortie</strong> <strong>Date de sortie</strong>
<br /> <br />
<span>{{item.released}}</span> <span>{{item.released}}</span>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="grid gap-10"> <div class="grid gap-10">
<div> <div>
<strong>Format<template v-if="item.formats.length > 1">s</template></strong> <strong>Format<template v-if="item.formats.length > 1">s</template></strong>
<ul class="ml-4"> <ul class="ml-4">
<li v-for="(format) in item.formats"> <li v-for="(format) in item.formats">
{{format.name}} {{format.name}}
<template v-if="format.text"> <template v-if="format.text">
- <i>{{format.text}}</i> - <i>{{format.text}}</i>
</template> </template>
<template v-if="format.descriptions && format.descriptions.length > 0"> <template v-if="format.descriptions && format.descriptions.length > 0">
(<span v-for="(description, index) in format.descriptions"> (<span v-for="(description, index) in format.descriptions">
{{description}}<template v-if="index < format.descriptions.length - 1">, </template> {{description}}<template v-if="index < format.descriptions.length - 1">, </template>
</span>) </span>)
</template> </template>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="grid grid-cols-1 md:grid-cols-2 gap-10"> <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<div> <div>
<strong id="identifiers">Code<template v-if="item.identifiers.length > 1">s</template> barre<template v-if="item.identifiers.length > 1">s</template></strong> <strong id="identifiers">Code<template v-if="item.identifiers.length > 1">s</template> barre<template v-if="item.identifiers.length > 1">s</template></strong>
<ol class="ml-4"> <ol class="ml-4">
<li v-for="identifier in identifiers"> <li v-for="identifier in identifiers">
{{identifier.value}} ({{identifier.type}}) {{identifier.value}} ({{identifier.type}})
</li> </li>
</ol> </ol>
<template v-if="item.identifiers.length > identifiersPreviewLength"> <template v-if="item.identifiers.length > identifiersPreviewLength">
<button type="button" class="button is-link" v-if="identifiersMode === 'preview'" @click="showAllIdentifiers"> <button type="button" class="button is-link" v-if="identifiersMode === 'preview'" @click="showAllIdentifiers">
Voir la suite Voir la suite
</button> </button>
<button type="button" class="button is-link" v-if="identifiersMode === 'all'" @click="showLessIdentifiers"> <button type="button" class="button is-link" v-if="identifiersMode === 'all'" @click="showLessIdentifiers">
Voir moins Voir moins
</button> </button>
</template> </template>
</div> </div>
<div> <div>
<strong>Label<template v-if="item.labels.length > 1">s</template></strong> <strong>Label<template v-if="item.labels.length > 1">s</template></strong>
<ol class="ml-4"> <ol class="ml-4">
<li v-for="label in item.labels"> <li v-for="label in item.labels">
{{label.name}} {{label.catno}} {{label.name}} {{label.catno}}
</li> </li>
</ol> </ol>
<strong>Société<template v-if="item.companies.length > 1">s</template></strong> <strong>Société<template v-if="item.companies.length > 1">s</template></strong>
<ol class="ml-4"> <ol class="ml-4">
<li v-for="company in item.companies"> <li v-for="company in item.companies">
<strong>{{company.entity_type_name}}</strong> {{company.name}} <strong>{{company.entity_type_name}}</strong> {{company.name}}
</li> </li>
</ol> </ol>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="grid gap-10"> <div class="grid gap-10">
<div> <div>
<strong>Note</strong> <strong>Note</strong>
<div v-html="(item.notes || '').replaceAll('\n', '<br />')"></div> <div v-html="(item.notes || '').replaceAll('\n', '<br />')"></div>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="grid gap-10"> <div class="grid gap-10">
<div> <div>
<strong>Vidéos</strong> <strong>Vidéos</strong>
<dl> <dl>
<template v-for="video in item.videos"> <template v-for="video in item.videos">
<dt> <dt>
<a :href="video.uri" target="_blank" rel="noopener noreferrer">{{video.title}}</a> <a :href="video.uri" target="_blank" rel="noopener noreferrer">{{video.title}}</a>
</dt> </dt>
<dd> <dd>
{{video.description}} {{video.description}}
</dd> </dd>
</template> </template>
</dl> </dl>
</div> </div>
</div> </div>
</div> </div>
</div> </div>