janishutz/MusicPlayer
1
0
Fork 0
mirror of https://github.com/janishutz/MusicPlayer.git synced 2026-09-10 14:25:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: basic auto-move in edge zones

Browse Source
This commit is contained in:
janishutz
2026-08-31 16:44:21 +02:00
parent 0e155831d7
commit 9bf88e033e
1 changed files with 50 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/SortableList.vue
+50 -28
View File
@@ -1,5 +1,6 @@
<script setup lang="ts" generic="T"> <script setup lang="ts" generic="T">
import { import {
computed,
ref, ref,
useTemplateRef useTemplateRef
} from 'vue'; } from 'vue';
@@ -39,25 +40,27 @@
offset.value = ev.y - ( movableSize.value / 2 ); offset.value = ev.y - ( movableSize.value / 2 );
const relToContainer = ev.y - scrollContainer.value!.offsetTop; const relToContainer = ev.y - scrollContainer.value!.offsetTop;
// const height = scrollContainer.value!.offsetHeight; const height = scrollContainer.value!.offsetHeight;
//
// // Scrolling up and down // Scrolling up and down
// if ( relToContainer < 50 ) { if ( relToContainer < 50 ) {
// moveSpeed = Math.ceil( Math.min( 10 / relToContainer, 10 ) ); moveSpeed = -Math.ceil( Math.max( 1, Math.min( 5 / relToContainer, 10 ) ) );
// startTracker(); startTracker();
// } else if ( relToContainer > height - 50 ) { } else if ( relToContainer > height - 50 ) {
// moveSpeed = Math.ceil( Math.min( 10 / ( height - relToContainer ), 10 ) ); moveSpeed = Math.ceil( Math.max( 1, Math.min( 5 / ( height - relToContainer ), 10 ) ) );
// startTracker(); startTracker();
// } else { } else {
// if ( mover >= 0 ) { if ( mover >= 0 ) {
// try { try {
// clearInterval( mover ); clearInterval( mover );
// } catch { /* empty */ } mover = -1;
// } } catch { /* empty */ }
// } }
}
// Determine current index to insert // Determine current index to insert
const percentage = ( relToContainer - scrollContainer.value!.scrollTop ) / scrollContainer.value!.scrollHeight; const percentage = ( relToContainer + scrollContainer.value!.scrollTop ) / scrollContainer.value!.scrollHeight;
const newIdx = Math.min( Math.max( Math.floor( percentage * queue.value.length ), 0 ), queue.value.length - 1 ); const newIdx = Math.min( Math.max( Math.round( percentage * queue.value.length ), 0 ), queue.value.length - 1 );
if ( newIdx !== movingIdx.value ) if ( newIdx !== movingIdx.value )
movingCurrentIdx.value = newIdx; movingCurrentIdx.value = newIdx;
@@ -80,10 +83,38 @@
// TODO: Actually do the move // TODO: Actually do the move
try { try {
clearInterval( mover ); clearInterval( mover );
mover = -1;
} catch { /* empty */ } } catch { /* empty */ }
emit( 'dropped' ); emit( 'dropped' );
}; };
const style = computed( () => {
return ( index: number ) => {
if ( movingIdx.value === queue.value.length - 1 && movingIdx.value === index + 1
&& movingCurrentIdx.value === movingIdx.value )
return `margin-bottom: ${ movableSize.value }px;`;
if ( movingIdx.value >= 0 ) {
if ( movingIdx.value === index ) {
// Current item is moved
return `top: ${ offset.value }px;`;
} else {
// Current item is not moved
if ( movingCurrentIdx.value === queue.value.length - 1 && index === movingCurrentIdx.value ) {
// Create gap below
return `margin-bottom: ${ movableSize.value }px;`;
} else if ( movingCurrentIdx.value === index
|| ( movingCurrentIdx.value === index - 1 && movingIdx.value == index - 1 ) ) {
// Create a gap above
return `margin-top: ${ movableSize.value }px;`;
}
}
}
return '';
};
} );
</script> </script>
<template> <template>
@@ -101,16 +132,7 @@
:id="'movable-' + index" :id="'movable-' + index"
:key="index" :key="index"
:class="[ 'movable', movingIdx === index ? 'moving' : undefined ]" :class="[ 'movable', movingIdx === index ? 'moving' : undefined ]"
:style=" :style="style(index)"
movingIdx >= 0
&& ((movingCurrentIdx === index && movingIdx !== index)
|| (movingCurrentIdx === index - 1 && index - 1 === movingIdx)
)
? `margin-top: ${ movableSize }px;`
: (movingIdx === index
? `top: ${offset}px;`
: ''
)"
> >
<slot :item="item" :index="index"></slot> <slot :item="item" :index="index"></slot>
<i class="fa-solid fa-grip-vertical" @mousedown="( e ) => start( e, index )"></i> <i class="fa-solid fa-grip-vertical" @mousedown="( e ) => start( e, index )"></i>