103 lines
No EOL
4.7 KiB
Text
103 lines
No EOL
4.7 KiB
Text
<main class="layout-maxed ma-collection-details" id="ma-collection-details" v-cloak @keyup="changeImage">
|
|
|
|
<h1>
|
|
<template v-for="artist in item.artists">
|
|
<a :href="`/<%= page.action === 'albums' ? 'ma-collection' : 'ma-liste-de-souhaits' %>?page=1&limit=16&sort=year&order=asc&artist=${artist.name}`">{{artist.name}}</a>
|
|
<template v-if="artist.join"> {{artist.join}} </template>
|
|
</template>
|
|
- {{item.title}}
|
|
<i class="icon-trash" title="Supprimer cette fiche" @click="showConfirmDelete()"></i>
|
|
<i class="icon-refresh" title="Mettre à jour les données de cette fiche" @click="updateItem()"></i>
|
|
<i class="icon-share" title="Partager cet album sur le fédiverse" @click="showModalShare = true" v-if="canShareItem"></i>
|
|
</h1>
|
|
<div class="grid sm:grid-cols-3 gap-16">
|
|
<div class="text-center">
|
|
<img :src="item.thumb %>" :alt="`Miniature pour l'album ${item.title}`" />
|
|
</div>
|
|
<div class="sm:col-span-2 text-center galerie">
|
|
<div v-for="(image, index) in item.images" :data-index="index" @click.stop.prevent="showGallery">
|
|
<img :src="image.uri150" :alt="`Miniature de type ${image.type}`" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<%- include('../../../components/album.ejs') %>
|
|
|
|
<div class="modal" :class="{'is-visible': modalIsVisible}">
|
|
<div class="modal-background"></div>
|
|
<button type="button" aria-label="Fermer" class="close" @click="toggleModal"></button>
|
|
<div class="carousel">
|
|
<button type="button" aria-label="Image précédente" class="navigation previous" @click="previous">
|
|
<i class="icon-left-open"></i>
|
|
</button>
|
|
<div class="text-center">
|
|
<img :src="preview" />
|
|
</div>
|
|
<button type="button" aria-label="Image suivante" class="navigation next" @click="next">
|
|
<i class="icon-right-open"></i>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" :class="{'is-visible': showModalDelete}">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-card">
|
|
<header></header>
|
|
<section>
|
|
Êtes-vous sûr de vouloir supprimer cet album ?
|
|
</section>
|
|
<footer>
|
|
<button class="button is-primary" @click="deleteItem">Supprimer</button>
|
|
<button class="button" @click="toggleModalDelete">Annuler</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" :class="{'is-visible': showModalShare}">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-card">
|
|
<header>Partager un album sur le fédiverse</header>
|
|
<section>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
|
<div class="field">
|
|
<label for="shareMessage">Message</label>
|
|
<textarea
|
|
name="shareMessage"
|
|
id="shareMessage"
|
|
v-model="shareMessage"
|
|
rows="6"
|
|
></textarea>
|
|
Caractères utilisés : {{ shareMessageLength }}
|
|
</div>
|
|
<div>
|
|
<small>
|
|
Variables possibles :
|
|
<ul>
|
|
<li>{artist}, exemple : Iron Maiden</li>
|
|
<li>{album}, exemple : Powerslave</li>
|
|
<li>{format}, exemple : Cassette</li>
|
|
<li>{year}, exemple: 1984</li>
|
|
<li>{video}, exemple : https://www.youtube.com/watch?v=Qx0s8OqgBIw</li>
|
|
<li>{genres}, exemple : Rock</li>
|
|
<li>{#genres}, exemple : #rock</li>
|
|
<li>{styles}, exemple : Hard Rock, Heavy Metal</li>
|
|
<li>{#styles}, exemple : #hardRock, #heavyMetal</li>
|
|
</ul>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer>
|
|
<button :class="['button is-primary', shareSubmiting ? 'is-disabled' : '']" @click="shareAlbum">Partager</button>
|
|
<button class="button" @click="showModalShare=!showModalShare">Annuler</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
const item = <%- JSON.stringify(page.item) %>;
|
|
const action = "<%- page.action %>";
|
|
const canShareItem = <%= user.mastodon?.publish || false %>;
|
|
</script> |