Compare commits
2 commits
061e72c459
...
68414e3e71
| Author | SHA1 | Date | |
|---|---|---|---|
|
68414e3e71 | ||
|
|
d692090022 |
4 changed files with 180 additions and 136 deletions
|
|
@ -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");
|
||||||
|
|
|
||||||
|
|
@ -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");
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
|
|
||||||
|
|
@ -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 class="md:col-span-2">
|
||||||
|
<div class="grid grid-cols-2 gap-10">
|
||||||
|
<div>
|
||||||
|
<strong>Genres</strong>
|
||||||
|
<br />
|
||||||
|
<template v-for="(genre, index) in item.genres">
|
||||||
|
{{genre}}<template v-if="index < item.genres.length - 1">, </template>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>Styles</strong>
|
||||||
|
<br />
|
||||||
|
<span v-for="(style, index) in item.styles">
|
||||||
|
{{style}}<template v-if="index < item.styles.length - 1">, </template>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="grid grid-cols-3 gap-10">
|
||||||
|
<div>
|
||||||
|
<strong>Pays</strong>
|
||||||
|
<br />
|
||||||
|
<span>{{item.country}}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>Année</strong>
|
||||||
|
<br />
|
||||||
|
<span>{{item.year}}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>Date de sortie</strong>
|
||||||
|
<br />
|
||||||
|
<span>{{item.released}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="grid gap-10">
|
||||||
|
<div>
|
||||||
|
<strong>Format<template v-if="item.formats.length > 1">s</template></strong>
|
||||||
|
<ul class="ml-4">
|
||||||
|
<li v-for="(format) in item.formats">
|
||||||
|
{{format.name}}
|
||||||
|
<template v-if="format.text">
|
||||||
|
- <i>{{format.text}}</i>
|
||||||
|
</template>
|
||||||
|
<template v-if="format.descriptions && format.descriptions.length > 0">
|
||||||
|
(<span v-for="(description, index) in format.descriptions">
|
||||||
|
{{description}}<template v-if="index < format.descriptions.length - 1">, </template>
|
||||||
|
</span>)
|
||||||
|
</template>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||||
|
<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>
|
||||||
|
<ol class="ml-4">
|
||||||
|
<li v-for="identifier in identifiers">
|
||||||
|
{{identifier.value}} ({{identifier.type}})
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
<template v-if="item.identifiers.length > identifiersPreviewLength">
|
||||||
|
<button type="button" class="button is-link" v-if="identifiersMode === 'preview'" @click="showAllIdentifiers">
|
||||||
|
Voir la suite
|
||||||
|
</button>
|
||||||
|
<button type="button" class="button is-link" v-if="identifiersMode === 'all'" @click="showLessIdentifiers">
|
||||||
|
Voir moins
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>Label<template v-if="item.labels.length > 1">s</template></strong>
|
||||||
|
<ol class="ml-4">
|
||||||
|
<li v-for="label in item.labels">
|
||||||
|
{{label.name}} {{label.catno}}
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
<strong>Société<template v-if="item.companies.length > 1">s</template></strong>
|
||||||
|
<ol class="ml-4">
|
||||||
|
<li v-for="company in item.companies">
|
||||||
|
<strong>{{company.entity_type_name}}</strong> {{company.name}}
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="grid gap-10">
|
||||||
|
<div>
|
||||||
|
<strong>Note</strong>
|
||||||
|
<div v-html="(item.notes || '').replaceAll('\n', '<br />')"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="grid gap-10">
|
||||||
|
<div>
|
||||||
|
<strong>Vidéos</strong>
|
||||||
|
<dl>
|
||||||
|
<template v-for="video in item.videos">
|
||||||
|
<dt>
|
||||||
|
<a :href="video.uri" target="_blank" rel="noopener noreferrer">{{video.title}}</a>
|
||||||
|
</dt>
|
||||||
|
<dd>
|
||||||
|
{{video.description}}
|
||||||
|
</dd>
|
||||||
|
</template>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="md:col-span-2">
|
|
||||||
<div class="grid grid-cols-2 gap-10">
|
|
||||||
<div>
|
|
||||||
<strong>Genres</strong>
|
|
||||||
<br />
|
|
||||||
<template v-for="(genre, index) in item.genres">
|
|
||||||
{{genre}}<template v-if="index < item.genres.length - 1">, </template>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>Styles</strong>
|
|
||||||
<br />
|
|
||||||
<span v-for="(style, index) in item.styles">
|
|
||||||
{{style}}<template v-if="index < item.styles.length - 1">, </template>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="grid grid-cols-3 gap-10">
|
|
||||||
<div>
|
|
||||||
<strong>Pays</strong>
|
|
||||||
<br />
|
|
||||||
<span>{{item.country}}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>Année</strong>
|
|
||||||
<br />
|
|
||||||
<span>{{item.year}}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>Date de sortie</strong>
|
|
||||||
<br />
|
|
||||||
<span>{{item.released}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="grid gap-10">
|
|
||||||
<div>
|
|
||||||
<strong>Format<template v-if="item.formats.length > 1">s</template></strong>
|
|
||||||
<ul class="ml-4">
|
|
||||||
<li v-for="(format) in item.formats">
|
|
||||||
{{format.name}}
|
|
||||||
<template v-if="format.text">
|
|
||||||
- <i>{{format.text}}</i>
|
|
||||||
</template>
|
|
||||||
<template v-if="format.descriptions && format.descriptions.length > 0">
|
|
||||||
(<span v-for="(description, index) in format.descriptions">
|
|
||||||
{{description}}<template v-if="index < format.descriptions.length - 1">, </template>
|
|
||||||
</span>)
|
|
||||||
</template>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
|
||||||
<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>
|
|
||||||
<ol class="ml-4">
|
|
||||||
<li v-for="identifier in identifiers">
|
|
||||||
{{identifier.value}} ({{identifier.type}})
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
<template v-if="item.identifiers.length > identifiersPreviewLength">
|
|
||||||
<button type="button" class="button is-link" v-if="identifiersMode === 'preview'" @click="showAllIdentifiers">
|
|
||||||
Voir la suite
|
|
||||||
</button>
|
|
||||||
<button type="button" class="button is-link" v-if="identifiersMode === 'all'" @click="showLessIdentifiers">
|
|
||||||
Voir moins
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>Label<template v-if="item.labels.length > 1">s</template></strong>
|
|
||||||
<ol class="ml-4">
|
|
||||||
<li v-for="label in item.labels">
|
|
||||||
{{label.name}} {{label.catno}}
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
<strong>Société<template v-if="item.companies.length > 1">s</template></strong>
|
|
||||||
<ol class="ml-4">
|
|
||||||
<li v-for="company in item.companies">
|
|
||||||
<strong>{{company.entity_type_name}}</strong> {{company.name}}
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="grid gap-10">
|
|
||||||
<div>
|
|
||||||
<strong>Note</strong>
|
|
||||||
<div v-html="(item.notes || '').replaceAll('\n', '<br />')"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div class="grid gap-10">
|
|
||||||
<div>
|
|
||||||
<strong>Vidéos</strong>
|
|
||||||
<dl>
|
|
||||||
<template v-for="video in item.videos">
|
|
||||||
<dt>
|
|
||||||
<a :href="video.uri" target="_blank" rel="noopener noreferrer">{{video.title}}</a>
|
|
||||||
</dt>
|
|
||||||
<dd>
|
|
||||||
{{video.description}}
|
|
||||||
</dd>
|
|
||||||
</template>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Loading…
Reference in a new issue