playlist folders can now be opened

added sidebar-playlist component
This commit is contained in:
booploops 2022-01-03 00:35:06 -08:00
parent 9a75e9899a
commit 1b5474a81e
4 changed files with 101 additions and 8 deletions

View file

@ -0,0 +1,52 @@
<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'"
@contextmenu="$root.playlistContextMenu($event, item.id)"
@dragover="()=>{}"
: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
:class="{'folder-button-active': folderOpened}"
@contextmenu="$root.playlistContextMenu($event, item.id)"
@dragover="()=>{}"
:href="item.href"
@click='toggleFolder'>
<span v-if="!folderOpened">📁</span>
<span v-else>📂</span>
{{ item.attributes.name }}
</button>
<div class="folder-body" v-if="item.type === 'library-playlist-folders' && folderOpened">
<button class="app-sidebar-item" v-for="child in item.children" :key="child.id" v-if="child.type != 'library-playlist-folders'"
@contextmenu="$root.playlistContextMenu($event, child.id)"
@dragover="()=>{}"
:href="child.href"
@click='$root.appRoute(`playlist_` + child.id); $root.showingPlaylist = [];$root.getPlaylistFromID($root.page.substring(9))'>
{{ child.attributes.name }}
</button>
</div>
</div>
</script>
<script>
Vue.component('sidebar-playlist', {
template: '#sidebar-playlist',
props: {
item: {
type: Object,
required: true
}
},
data: function () {
return {
folderOpened: false
}
},
methods: {
toggleFolder() {
this.folderOpened = !this.folderOpened;
}
}
});
</script>

View file

@ -183,14 +183,7 @@
<div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
Playlists
</div>
<button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id"
v-if="item.attributes.name"
@contextmenu="playlistContextMenu($event, item.id)"
@dragover="()=>{}"
:href="item.href"
@click='appRoute(`playlist_` + item.id); showingPlaylist = [];getPlaylistFromID(page.substring(9))'>
{{ item.attributes.name }}
</button>
<sidebar-playlist v-for="item in playlists.listing" :item="item"></sidebar-playlist>
</div>
<transition name="wpfade">
<div class="usermenu-container" v-if="chrome.menuOpened">
@ -557,6 +550,8 @@
</button>
</script>
<!-- Playlist Listing -->
<%- include('components/sidebar-playlist') %>
<!-- Spatial Properties -->
<%- include('components/spatial-properties') %>
<!-- Add to playlist -->