158 lines
5.4 KiB
JavaScript
158 lines
5.4 KiB
JavaScript
if ( typeof item !== 'undefined' ) {
|
|
Vue.createApp({
|
|
data() {
|
|
return {
|
|
item,
|
|
tracklist: [],
|
|
identifiers: [],
|
|
modalIsVisible: false,
|
|
identifiersMode: 'preview',
|
|
identifiersPreviewLength: 16,
|
|
preview: null,
|
|
index: null,
|
|
showModalDelete: false,
|
|
}
|
|
},
|
|
created() {
|
|
this.setTrackList();
|
|
this.setIdentifiers();
|
|
|
|
window.addEventListener("keydown", this.changeImage);
|
|
},
|
|
destroyed() {
|
|
window.removeEventListener('keydown', this.changeImage);
|
|
},
|
|
methods: {
|
|
setIdentifiers() {
|
|
this.identifiers = [];
|
|
|
|
let max = this.identifiersMode == 'preview' && this.item.identifiers.length > this.identifiersPreviewLength ? this.identifiersPreviewLength : this.item.identifiers.length;
|
|
|
|
for ( let i = 0 ; i < max ; i += 1 ) {
|
|
this.identifiers.push(this.item.identifiers[i]);
|
|
}
|
|
},
|
|
setTrackList() {
|
|
let subTrack = {
|
|
type: null,
|
|
title: null,
|
|
tracks: [],
|
|
};
|
|
for (let i = 0 ; i < this.item.tracklist.length ; i += 1 ) {
|
|
const {
|
|
type_,
|
|
title,
|
|
position,
|
|
duration,
|
|
extraartists,
|
|
} = this.item.tracklist[i];
|
|
|
|
if ( type_ === 'heading' ) {
|
|
if ( subTrack.type ) {
|
|
this.tracklist.push(subTrack);
|
|
subTrack = {
|
|
type: null,
|
|
title: null,
|
|
tracks: [],
|
|
};
|
|
}
|
|
|
|
subTrack.type = type_;
|
|
subTrack.title = title;
|
|
} else {
|
|
subTrack.tracks.push({
|
|
title,
|
|
position,
|
|
duration,
|
|
extraartists
|
|
});
|
|
}
|
|
}
|
|
this.tracklist.push(subTrack);
|
|
},
|
|
setImage() {
|
|
this.preview = this.item.images[this.index].uri;
|
|
},
|
|
showGallery(event) {
|
|
const item = event.target.tagName === 'IMG' ? event.target.parentElement : event.target;
|
|
|
|
const {
|
|
index,
|
|
} = item.dataset;
|
|
|
|
this.index = Number(index);
|
|
this.modalIsVisible = true;
|
|
|
|
this.setImage();
|
|
},
|
|
toggleModal() {
|
|
this.modalIsVisible = !this.modalIsVisible;
|
|
},
|
|
previous() {
|
|
this.index = this.index > 0 ? this.index - 1 : this.item.images.length -1;
|
|
this.setImage();
|
|
},
|
|
next() {
|
|
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();
|
|
},
|
|
showLessIdentifiers() {
|
|
this.identifiersMode = 'preview';
|
|
this.setIdentifiers();
|
|
|
|
document.querySelector('#identifiers').scrollIntoView({ behavior: 'smooth' });
|
|
},
|
|
showConfirmDelete() {
|
|
this.toggleModal();
|
|
},
|
|
toggleModal() {
|
|
this.showModalDelete = !this.showModalDelete;
|
|
},
|
|
updateItem() {
|
|
showToastr("Mise à jour en cours…", true);
|
|
axios.patch(`/api/v1/albums/${this.item._id}`)
|
|
.then( (res) => {
|
|
showToastr("Mise à jour réalisée avec succès", true);
|
|
this.item = res.data;
|
|
})
|
|
.catch((err) => {
|
|
showToastr(err.response?.data?.message || "Impossible de mettre à jour cet album", false);
|
|
});
|
|
},
|
|
deleteItem() {
|
|
axios.delete(`/api/v1/albums/${this.item._id}`)
|
|
.then( () => {
|
|
window.location.href = "/ma-collection";
|
|
})
|
|
.catch((err) => {
|
|
showToastr(err.response?.data?.message || "Impossible de supprimer cet album");
|
|
})
|
|
.finally(() => {
|
|
this.toggleModal();
|
|
});
|
|
},
|
|
goToArtist() {
|
|
return "";
|
|
},
|
|
},
|
|
}).mount('#ma-collection-details');
|
|
} |