Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2025-02-17 22:08:28 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: mark playlists not accepting song drops

Browse source
This commit is contained in:
Phan An 2022-04-30 15:20:47 +02:00
parent 223cfd42e5
commit 099ab12a15
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
2 changed files with 10 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/assets/js/components/playlist/PlaylistSidebarItem.vue
View file

@ -6,7 +6,7 @@
:class="{ active }" :class="{ active }"
:href="url" :href="url"
@contextmenu.prevent="openContextMenu" @contextmenu.prevent="openContextMenu"
v-koel-droppable="handleDrop" v-koel-droppable:[contentEditable]="handleDrop"
>{{ playlist.name }}</a> >{{ playlist.name }}</a>
<NameEditor <NameEditor
@ -29,8 +29,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, defineAsyncComponent, nextTick, ref, toRefs } from 'vue' import { computed, defineAsyncComponent, nextTick, ref, toRefs } from 'vue'
import { alerts, eventBus, pluralize } from '@/utils' import { alerts, eventBus, pluralize } from '@/utils'
import router from '@/router'
import { favoriteStore, playlistStore, songStore } from '@/stores' import { favoriteStore, playlistStore, songStore } from '@/stores'
import router from '@/router'
type PlaylistType = 'playlist' | 'favorites' | 'recently-played' type PlaylistType = 'playlist' | 'favorites' | 'recently-played'

15
resources/assets/js/directives/droppable.ts
View file

@ -1,10 +1,12 @@
import { $ } from '@/utils'
import { Directive } from 'vue' import { Directive } from 'vue'
import { $ } from '@/utils'
export const droppable: Directive = { export const droppable: Directive = {
created: (el: HTMLElement, { value }: { value: TAnyFunction | never }) => { created: (el: HTMLElement, binding) => {
if (!(value instanceof Function)) { const acceptsDrops = binding.arg === undefined || Boolean(binding.arg)
throw new Error(`Expect a function, received ${typeof value}`)
if (!acceptsDrops) {
return
} }
el.addEventListener('dragenter', (event: DragEvent) => { el.addEventListener('dragenter', (event: DragEvent) => {
@ -15,15 +17,14 @@ export const droppable: Directive = {
return false return false
}) })
el.addEventListener('dragover', (event: DragEvent): void => event.preventDefault()) el.addEventListener('dragover', (event: DragEvent) => event.preventDefault())
el.addEventListener('dragleave', () => $.removeClass(el, 'droppable')) el.addEventListener('dragleave', () => $.removeClass(el, 'droppable'))
el.addEventListener('drop', (event: DragEvent) => { el.addEventListener('drop', (event: DragEvent) => {
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
$.removeClass(el, 'droppable') $.removeClass(el, 'droppable')
value(event) binding.value(event)
}) })
} }
} }