working on move playlist
This commit is contained in:
booploops
parent
b9d2c81fd2
commit
b1f36c6e48
3 changed files with 101 additions and 26 deletions
|
|
@ -37,10 +37,17 @@ var CiderContextMenu = {
|
|||
|
||||
document.body.appendChild(menuBackground);
|
||||
|
||||
if(typeof menudata.items == "object") {
|
||||
menudata.items = Object.values(menudata.items);
|
||||
}
|
||||
|
||||
// for each item in menudata create a menu item
|
||||
for (var i = 0; i < menudata.items.length; i++) {
|
||||
let item = document.createElement("button")
|
||||
|
||||
if(menudata.items[i]["disabled"]) {
|
||||
break
|
||||
}
|
||||
item.tabIndex = 0
|
||||
item.classList.add("context-menu-item")
|
||||
item.innerHTML = menudata.items[i].name
|
||||
|
|
@ -644,25 +651,6 @@ const app = new Vue({
|
|||
}
|
||||
CiderContextMenu.Create(event, menu)
|
||||
},
|
||||
playlistContextMenu(event, playlist_id) {
|
||||
let menu = {
|
||||
items: [
|
||||
{
|
||||
name: "Delete from library",
|
||||
action: () => {
|
||||
this.deletePlaylist(playlist_id)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Add to favorites",
|
||||
action: () => {
|
||||
this.addFavorite(playlist_id, "library-playlists")
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
CiderContextMenu.Create(event, menu)
|
||||
},
|
||||
async editPlaylist(id, name = "New Playlist") {
|
||||
let self = this
|
||||
await app.mk.api.library.editPlaylist(id, { name: name }).then(res => {
|
||||
|
|
|
|||
|
|
@ -574,6 +574,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
color: white;
|
||||
transition: transform .1s;
|
||||
text-align: left;
|
||||
|
||||
&.app-sidebar-item-playlist {
|
||||
-webkit-user-drag: element;
|
||||
}
|
||||
}
|
||||
|
||||
.app-sidebar-item:hover {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,21 @@
|
|||
<script type="text/x-template" id="sidebar-playlist">
|
||||
<div class="sidebar-playlist">
|
||||
<button class="app-sidebar-item" :key="item.id" v-if="item.type != 'library-playlist-folders'"
|
||||
<button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id" v-if="item.type != 'library-playlist-folders'"
|
||||
:class="{'active': $root.page.includes(item.id)}"
|
||||
@contextmenu="$root.playlistContextMenu($event, item.id)"
|
||||
@dragover="()=>{}"
|
||||
@contextmenu="playlistContextMenu($event, item.id)"
|
||||
@dragstart="startDrag($event, item)"
|
||||
@dragover="dragOver"
|
||||
@drop="onDrop"
|
||||
:href="item.href"
|
||||
@click='$root.appRoute(`playlist_` + item.id); $root.showingPlaylist = [];$root.getPlaylistFromID($root.page.substring(9))'>
|
||||
{{ item.attributes.name }}
|
||||
</button>
|
||||
<button class="app-sidebar-item" :key="item.id" v-else
|
||||
<button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id" v-else
|
||||
:class="[{'folder-button-active': folderOpened}, isPlaylistSelected]"
|
||||
@contextmenu="$root.playlistContextMenu($event, item.id)"
|
||||
@dragover="()=>{}"
|
||||
@contextmenu="playlistContextMenu($event, item.id)"
|
||||
@dragstart="startDrag($event, item)"
|
||||
@dragover="dragOver"
|
||||
@drop="onDrop"
|
||||
:href="item.href"
|
||||
@click='getPlaylistChildren(item)'>
|
||||
<span v-if="!folderOpened">📁</span>
|
||||
|
|
@ -41,10 +45,89 @@
|
|||
data: function () {
|
||||
return {
|
||||
folderOpened: false,
|
||||
children: []
|
||||
children: [],
|
||||
playlistRoot: "p.playlistsroot"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
move(item, sendTo) {
|
||||
let self = this
|
||||
console.log(item, sendTo)
|
||||
let type = item.type.replace("library-", "")
|
||||
let typeTo = sendTo.type
|
||||
this.$root.mk.api.v3.music(`/v1/me/library/${type}/${item.id}/parent`, {}, {
|
||||
fetchOptions: {
|
||||
method: "PUT",
|
||||
body: JSON.stringify({
|
||||
data: [{
|
||||
id: sendTo.id,
|
||||
type: typeTo
|
||||
}]
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
setTimeout(()=>{
|
||||
this.$root.refreshPlaylists()
|
||||
}, 3000)
|
||||
},
|
||||
playlistContextMenu(event, playlist_id) {
|
||||
let menu = {
|
||||
items: {
|
||||
"moveToParent": {
|
||||
name: "Move to top",
|
||||
action: () => {
|
||||
this.move(this.item, {
|
||||
id: this.playlistRoot,
|
||||
type: "library-playlist-folders"
|
||||
})
|
||||
}
|
||||
},
|
||||
"deleteFromPlaylist": {
|
||||
name: "Delete from library",
|
||||
action: () => {
|
||||
this.$root.deletePlaylist(playlist_id)
|
||||
}
|
||||
},
|
||||
"addToFavorites": {
|
||||
name: "Add to favorites",
|
||||
disabled: true,
|
||||
action: () => {
|
||||
this.addFavorite(playlist_id, "library-playlists")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if(this.item.type === "library-playlist-folders") {
|
||||
menu.items.addToFavorites.disabled = true
|
||||
}
|
||||
CiderContextMenu.Create(event, menu)
|
||||
},
|
||||
dragOver(evt) {
|
||||
evt.preventDefault();
|
||||
evt.dataTransfer.dropEffect = "move";
|
||||
},
|
||||
onDrop (evt) {
|
||||
let data = JSON.parse(evt.dataTransfer.getData("text/plain"))
|
||||
evt.preventDefault();
|
||||
if(data.id == this.item.id) {
|
||||
return;
|
||||
}
|
||||
if(data) {
|
||||
if(this.item.type == "library-playlists" || this.item.type == "library-playlist-folders") {
|
||||
if(data.type == "library-playlists" && this.item.type == "library-playlists") {
|
||||
return
|
||||
}
|
||||
this.move(data, this.item)
|
||||
}
|
||||
}
|
||||
},
|
||||
startDrag (evt) {
|
||||
evt.dataTransfer.dropEffect = 'move'
|
||||
evt.dataTransfer.effectAllowed = 'move'
|
||||
evt.dataTransfer.setData('text/plain', JSON.stringify(this.item))
|
||||
},
|
||||
getPlaylistChildren(item) {
|
||||
let self = this
|
||||
this.toggleFolder()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue