public/js/main.js

@@ -114,16 +114,22 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     const switchAriaThemeBtn = document.querySelector("#switchAriaTheme");
-    switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
+    if ( switchAriaThemeBtn ) {
+        switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
+    }
     setAriaTheme(getCookie('ariatheme'));
 
     const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
-    toggleSwitch.addEventListener('change', switchTheme, false);
+    if ( toggleSwitch ) {
+        toggleSwitch.addEventListener('change', switchTheme, false);
+    }
 
     let currentThemeIsDark = getCookie('theme');
     if ( currentThemeIsDark === 'false' && window.matchMedia ) {
         currentThemeIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
     switchTheme({target: {checked: currentThemeIsDark === 'dark'}});
-    toggleSwitch.checked = currentThemeIsDark === 'dark';
+    if ( toggleSwitch) {
+        toggleSwitch.checked = currentThemeIsDark === 'dark';
+    }
 });

views/pages/mon-compte/ma-collection/details.ejs

@@ -1,11 +1,11 @@
-<main class="layout-maxed ma-collection-details" id="app">
+<main class="layout-maxed ma-collection-details" id="app" v-cloak @keyup="changeImage">
 
     <h1>{{item.artists_sort}} - {{item.title}}</h1>
-    <div class="grid md:grid-cols-3 gap-16">
+    <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="md:col-span-2 text-center galerie">
+        <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>
@@ -18,7 +18,7 @@
                 <strong v-if="album.title">{{album.title}}</strong>
                 <ol class="ml-4">
                     <li v-for="track in album.tracks">
-                        {{ track.title }} ({{track.duration}})
+                        {{ track.title }} <template v-if="track.duration">({{track.duration}})</template>
                         <ul v-if="track.extraartists && track.extraartists.length > 0" class="sm-hidden ml-4">
                             <li v-for="extra in track.extraartists">
                                 <small>{{extra.role}} : {{extra.name}}</small>
@@ -70,9 +70,11 @@
                     <ul class="ml-4">
                         <li v-for="(format) in item.formats">
                             {{format.name}}
+                            <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>
@@ -126,7 +128,7 @@
                     <dl>
                         <template v-for="video in item.videos">
                             <dt>
-                                <a :href="video.uri" target="_blank" rel="noopener noreferrer">{{video.title}} ({{video.duration}})</a>
+                                <a :href="video.uri" target="_blank" rel="noopener noreferrer">{{video.title}}</a>
                             </dt>
                             <dd>
                                 {{video.description}}
@@ -141,10 +143,10 @@
     <div class="modal" :class="{'is-visible': modalIsVisible}">
         <div class="modal-background"></div>
         <button type="button" aria-label="Fermer" class="close" @click="toggleModal"></button>
-        <button type="button" aria-label="Image précédente" class="navigation previous" @click="previous">
+        <button type="button" aria-label="Image précédente" class="navigation previous" @click="previous" v-if="index > 0">
             <i class="icon-left-open"></i>
         </button>
-        <button type="button" aria-label="Image suivante" class="navigation next" @click="next">
+        <button type="button" aria-label="Image suivante" class="navigation next" @click="next" v-if="index + 1 < item.images.length">
             <i class="icon-right-open"></i>
         </button>
         <div class="modal-card">
@@ -170,6 +172,11 @@
         created() {
             this.setTrackList();            
             this.setIdentifiers();
+
+            window.addEventListener("keydown", this.changeImage);
+        },
+        destroyed() {
+            window.removeEventListener('keydown', this.changeImage);
         },
         methods: {
             setIdentifiers() {
@@ -245,6 +252,21 @@
                 this.index = (this.index +1) === this.item.images.length ? 0 : this.index + 1;
                 this.setImage();
             },
+            changeImage(event) {
+                const direction = event.code;
+
+                if ( this.modalIsVisible && ['ArrowRight', 'ArrowLeft', 'Escape'].indexOf(direction) !== -1 ) {
+                    switch (direction) {
+                        case 'ArrowRight':
+                            return this.next();
+                        case 'ArrowLeft':
+                            return this.previous();
+                        default:
+                            this.modalIsVisible = false;
+                            return true;
+                    }
+                }
+            },
             showAllIdentifiers() {
                 this.identifiersMode = 'all';
                 this.setIdentifiers();
@@ -254,7 +276,7 @@
                 this.setIdentifiers();
 
                 document.querySelector('#identifiers').scrollIntoView({ behavior: 'smooth' });
-            }
+            },
         },
     }).mount('#app');
 </script>