Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-10 06:34:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

Allow dragging and dropping artists/albums (fix #229)

Browse source
This commit is contained in:
An Phan 2016-02-14 16:34:14 +08:00
parent 661041cb10
commit b9d25ccad6
2 changed files with 38 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
resources/assets/js/components/shared/album-item.vue
View file

@ -1,5 +1,5 @@
<template>
<article class="item" v-if="album.songs.length">
<article class="item" v-if="album.songs.length" draggable="true" @dragstart="dragStart">
<span class="cover" :style="{ backgroundImage: 'url(' + album.cover + ')' }">
<a class="control" @click.prevent="play">
<i class="fa fa-play"></i>
@ -20,6 +20,9 @@
</template>
<script>
import _ from 'lodash';
import $ from 'jquery';
import playback from '../../services/playback';
import queueStore from '../../stores/queue';
@ -30,8 +33,8 @@
/**
* Play all songs in the current album, or queue them up if Ctrl/Cmd key is pressed.
*/
play($e) {
if ($e.metaKey || $e.ctrlKey) {
play(e) {
if (e.metaKey || e.ctrlKey) {
queueStore.queue(this.album.songs);
} else {
playback.playAllInAlbum(this.album);
@ -51,6 +54,19 @@
viewArtistDetails() {
this.$root.loadArtist(this.album.artist);
},
/**
* Allow dragging the album (actually, its songs).
*/
dragStart(e) {
var songIds = _.pluck(this.album.songs, 'id');
e.dataTransfer.setData('text/plain', songIds);
e.dataTransfer.effectAllowed = 'move';
// Set a fancy drop image using our ghost element.
var $ghost = $('#dragGhost').text(`All ${songIds.length} song${songIds.length === 1 ? '' : 's'} in ${this.album.name}`);
e.dataTransfer.setDragImage($ghost[0], 0, 0);
},
},
};
</script>

22
resources/assets/js/components/shared/artist-item.vue
View file

@ -1,5 +1,5 @@
<template>
<article class="item" v-if="artist.songCount">
<article class="item" v-if="artist.songCount" draggable="true" @dragstart="dragStart">
<span class="cover" :style="{ backgroundImage: 'url(' + artist.image + ')' }">
<a class="control" @click.prevent="play">
<i class="fa fa-play"></i>
@ -19,6 +19,9 @@
</template>
<script>
import _ from 'lodash';
import $ from 'jquery';
import playback from '../../services/playback';
import artistStore from '../../stores/artist';
import queueStore from '../../stores/queue';
@ -30,8 +33,8 @@
/**
* Play all songs by the current artist, or queue them up if Ctrl/Cmd key is pressed.
*/
play($e) {
if ($e.metaKey || $e.ctrlKey) {
play(e) {
if (e.metaKey || e.ctrlKey) {
queueStore.queue(artistStore.getSongsByArtist(this.artist));
} else {
playback.playAllByArtist(this.artist);
@ -41,6 +44,19 @@
viewDetails() {
this.$root.loadArtist(this.artist);
},
/**
* Allow dragging the artist (actually, their songs).
*/
dragStart(e) {
var songIds = _.pluck(artistStore.getSongsByArtist(this.artist), 'id');
e.dataTransfer.setData('text/plain', songIds);
e.dataTransfer.effectAllowed = 'move';
// Set a fancy drop image using our ghost element.
var $ghost = $('#dragGhost').text(`All ${songIds.length} song${songIds.length === 1 ? '' : 's'} by ${this.artist.name}`);
e.dataTransfer.setDragImage($ghost[0], 0, 0);
},
},
};
</script>