Add types to components and remove unused components
This commit is contained in:
parent
a093df0db6
commit
ce9fa22a30
7 changed files with 270 additions and 423 deletions
|
|
@ -1,23 +1,23 @@
|
|||
<script>
|
||||
|
||||
import {quintOut} from "svelte/easing";
|
||||
import {crossfade} from "svelte/transition";
|
||||
import {flip} from "svelte/animate";
|
||||
<script lang="ts">
|
||||
//@ts-nocheck
|
||||
import { quintOut } from "svelte/easing";
|
||||
import { crossfade } from "svelte/transition";
|
||||
import { flip } from "svelte/animate";
|
||||
// FLIP ANIMATION
|
||||
const [send, receive] = crossfade({
|
||||
duration: d => Math.sqrt(d * 200),
|
||||
duration: (d) => Math.sqrt(d * 200),
|
||||
fallback(node, params) {
|
||||
const style = getComputedStyle(node);
|
||||
const transform = style.transform === "none" ? "" : style.transform;
|
||||
return {
|
||||
duration: 600,
|
||||
easing: quintOut,
|
||||
css: t => `
|
||||
css: (t) => `
|
||||
transform: ${transform} scale(${t});
|
||||
opacity: ${t}
|
||||
`
|
||||
`,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
// DRAG AND DROP
|
||||
let isOver = false;
|
||||
|
|
@ -25,56 +25,68 @@
|
|||
const getDraggedParent = (node) => {
|
||||
return node.dataset && node.dataset.index
|
||||
? node.dataset
|
||||
: getDraggedParent(node.parentNode)
|
||||
: getDraggedParent(node.parentNode);
|
||||
};
|
||||
const click = ev => {
|
||||
const click = (ev) => {
|
||||
dispatch("slotclick", {
|
||||
source: ev.target.parentElement.dataset.index,
|
||||
sourceItem: list[ev.target.parentElement.dataset.index]
|
||||
sourceItem: list[ev.target.parentElement.dataset.index],
|
||||
});
|
||||
};
|
||||
const start = ev => {
|
||||
const start = (ev) => {
|
||||
isDragging = true;
|
||||
ev.dataTransfer.setData("source", ev.target.dataset.index);
|
||||
};
|
||||
const over = ev => {
|
||||
const over = (ev) => {
|
||||
ev.preventDefault();
|
||||
let dragged = getDraggedParent(ev.target);
|
||||
if (isOver !== dragged.id) isOver = JSON.parse(dragged.id);
|
||||
};
|
||||
const leave = ev => {
|
||||
const leave = (ev) => {
|
||||
let dragged = getDraggedParent(ev.target);
|
||||
if (isOver === dragged.id) isOver = false;
|
||||
};
|
||||
const drop = ev => {
|
||||
const drop = (ev) => {
|
||||
isOver = false;
|
||||
ev.preventDefault();
|
||||
let dragged = getDraggedParent(ev.target);
|
||||
let from = ev.dataTransfer.getData("source");
|
||||
let to = dragged.index;
|
||||
reorder({from, to});
|
||||
reorder({ from, to });
|
||||
isDragging = false;
|
||||
};
|
||||
// DISPATCH REORDER
|
||||
import {createEventDispatcher, onMount, afterUpdate, beforeUpdate, tick} from "svelte";
|
||||
import {
|
||||
createEventDispatcher,
|
||||
onMount,
|
||||
afterUpdate,
|
||||
beforeUpdate,
|
||||
tick,
|
||||
} from "svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const reorder = ({from, to}) => {
|
||||
const reorder = ({ from, to }) => {
|
||||
let newList = [...list];
|
||||
let temp = newList[from];
|
||||
newList[from] = newList[to];
|
||||
newList[to] = temp;
|
||||
//newList[from] = [newList[to], (newList[to] = newList[from])][0];
|
||||
dispatch("sort", {data: newList, from: from, to: to});
|
||||
dispatch("sort", { data: newList, from: from, to: to });
|
||||
};
|
||||
// UTILS
|
||||
const getKey = item => (key ? item[key] : item);
|
||||
const getKey = (item) => (key ? item[key] : item);
|
||||
|
||||
type ListItem = {
|
||||
displayTileSize: number;
|
||||
endsGroup: boolean;
|
||||
startsNewGroup: boolean;
|
||||
};
|
||||
// PROPS
|
||||
export let list;
|
||||
export let list: ListItem[][];
|
||||
export let key;
|
||||
export let ulclass;
|
||||
|
||||
export let breakon;
|
||||
export let breakon: string | null = null;
|
||||
|
||||
export let breakComponent;
|
||||
// return `<><li class='${breakClass}' style='height:100%; grid-column: span 5;'><div style='width:100%;height:inherit;'></li>`;
|
||||
|
|
@ -113,16 +125,16 @@
|
|||
let carry = 0;
|
||||
let elements = Elements();
|
||||
|
||||
|
||||
for (let x = 0; x < list.length; x++) {
|
||||
|
||||
if (last != null) {
|
||||
if (list[x][breakon] > last) {
|
||||
|
||||
if (elements.length) {
|
||||
let targetIndex = x + breaks;
|
||||
|
||||
if (list.length !== elements[0].children.length - breaks) {
|
||||
if (
|
||||
list.length !==
|
||||
elements[0].children.length - breaks
|
||||
) {
|
||||
if (lastCollection)
|
||||
if (lastCollection.length)
|
||||
targetIndex += lastCollection.length;
|
||||
|
|
@ -159,23 +171,49 @@
|
|||
updateBreak();
|
||||
|
||||
updating = false;
|
||||
|
||||
});
|
||||
|
||||
const getClass = () => {
|
||||
let ret = "";
|
||||
if (key)
|
||||
ret += ` ${key}`;
|
||||
if (ulclass)
|
||||
ret += ` ${ulclass}`;
|
||||
if (key) ret += ` ${key}`;
|
||||
if (ulclass) ret += ` ${ulclass}`;
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
{#if list && list.length}
|
||||
<ul class={getClass()}>
|
||||
{#each list as item, index (getKey(item))}
|
||||
<li
|
||||
class:small={item.displayTileSize === 2}
|
||||
class:medium={item.displayTileSize === 3}
|
||||
class:large={item.displayTileSize === 4}
|
||||
class:startsNewGroup={item.startsNewGroup}
|
||||
class:endsGroup={item.endsGroup}
|
||||
data-index={index}
|
||||
data-item={JSON.stringify(item)}
|
||||
data-id={JSON.stringify(getKey(item))}
|
||||
draggable="true"
|
||||
on:dragstart={start}
|
||||
on:dragover={over}
|
||||
on:dragleave={leave}
|
||||
on:drop={drop}
|
||||
on:click={click}
|
||||
in:receive={{ key: getKey(item) }}
|
||||
out:send={{ key: getKey(item) }}
|
||||
animate:flip={{ duration: 300 }}
|
||||
class:over={getKey(item) === isOver}
|
||||
>
|
||||
<slot {item} {index}>
|
||||
<p>{getKey(item)}</p>
|
||||
</slot>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
ul {
|
||||
display: inline-grid;
|
||||
list-style: none;
|
||||
|
|
@ -189,7 +227,7 @@
|
|||
transition: border 0.1s linear;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: .5%;
|
||||
margin: 0.5%;
|
||||
}
|
||||
|
||||
.startsNewGroup {
|
||||
|
|
@ -215,35 +253,3 @@
|
|||
border-color: rgba(48, 12, 200, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if list && list.length}
|
||||
<ul class={getClass()}>
|
||||
{#each list as item, index (getKey(item))}
|
||||
<li
|
||||
class:small={item.displayTileSize === 2}
|
||||
class:medium={item.displayTileSize === 3}
|
||||
class:large={item.displayTileSize === 4}
|
||||
class:startsNewGroup={item.startsNewGroup}
|
||||
class:endsGroup={item.endsGroup}
|
||||
data-index={index}
|
||||
data-item={JSON.stringify(item)}
|
||||
data-id={JSON.stringify(getKey(item))}
|
||||
draggable="true"
|
||||
on:dragstart={start}
|
||||
on:dragover={over}
|
||||
on:dragleave={leave}
|
||||
on:drop={drop}
|
||||
on:click={click}
|
||||
in:receive={{ key: getKey(item) }}
|
||||
out:send={{ key: getKey(item) }}
|
||||
animate:flip={{ duration: 300 }}
|
||||
class:over={getKey(item) === isOver}>
|
||||
|
||||
<slot {item} {index}>
|
||||
<p>{getKey(item)}</p>
|
||||
</slot>
|
||||
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
Loading…
Reference in a new issue