84 lines
2.8 KiB
Svelte
84 lines
2.8 KiB
Svelte
<script>
|
|
import { flip } from 'svelte/animate';
|
|
import { onMount } from 'svelte';
|
|
let baskets = [];
|
|
let isLoading = true;
|
|
export let data;
|
|
|
|
const hs = "https://" + data.homeserver;
|
|
const token = data.token;
|
|
|
|
onMount(async () => {
|
|
const response = await fetch(hs + "/_matrix/client/v3/rooms/!WesIJpYbWDvdAYThkW:matrix.org/state", {
|
|
method: "GET",
|
|
headers: {
|
|
"Authorization": "Bearer " + token
|
|
}
|
|
})
|
|
const res = await response.json();
|
|
|
|
res.forEach(e => {
|
|
if(e.type === "im.ponies.room_emotes" && e.content.pack != undefined) {
|
|
let prepareArr = [];
|
|
for(const [key, value] of Object.entries(e.content.images)) {
|
|
let image_id = value.url.split("/")[3];
|
|
let emote_hs = value.url.split("/")[2];
|
|
prepareArr.push(hs + "/_matrix/media/r0/thumbnail/" + emote_hs + "/" + image_id + "?width=256&height=256&method=crop")
|
|
}
|
|
baskets.push({"name": e.content.pack.display_name, "items": prepareArr})
|
|
}
|
|
});
|
|
isLoading = false;
|
|
});
|
|
|
|
let hoveringOverBasket;
|
|
|
|
function dragStart(event, basketIndex, itemIndex) {
|
|
// The data we want to make available when the element is dropped
|
|
// is the index of the item being dragged and
|
|
// the index of the basket from which it is leaving.
|
|
const data = {basketIndex, itemIndex};
|
|
event.dataTransfer.setData('text/plain', JSON.stringify(data));
|
|
}
|
|
|
|
function drop(event, basketIndex) {
|
|
event.preventDefault();
|
|
const json = event.dataTransfer.getData("text/plain");
|
|
const data = JSON.parse(json);
|
|
|
|
// Remove the item from one basket.
|
|
// Splice returns an array of the deleted elements, just one in this case.
|
|
const [item] = baskets[data.basketIndex].items.splice(data.itemIndex, 1);
|
|
|
|
// Add the item to the drop target basket.
|
|
baskets[basketIndex].items.push(item);
|
|
baskets = baskets;
|
|
|
|
hoveringOverBasket = null;
|
|
}
|
|
</script>
|
|
{#if isLoading}
|
|
<p>Loading the Emotes...</p>
|
|
{:else}
|
|
{#each baskets as basket, basketIndex (basket)}
|
|
<div animate:flip>
|
|
<p>{basket.name}</p>
|
|
<ul
|
|
class:hovering={hoveringOverBasket === basket.name}
|
|
on:dragenter={() => hoveringOverBasket = basket.name}
|
|
on:dragleave={() => hoveringOverBasket = null}
|
|
on:drop={event => drop(event, basketIndex)}
|
|
ondragover="return false" >
|
|
{#each basket.items as item, itemIndex (item)}
|
|
<div class="item" animate:flip>
|
|
<li
|
|
draggable={true}
|
|
on:dragstart={event => dragStart(event, basketIndex, itemIndex)} >
|
|
<img src={item} alt="Emote"/>
|
|
</li>
|
|
</div>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
{/each}
|
|
{/if} |