112 lines
4.0 KiB
Svelte
112 lines
4.0 KiB
Svelte
<script>
|
|
import { flip } from 'svelte/animate';
|
|
import { CollapsibleCard } from 'svelte-collapsible'
|
|
import { onMount } from 'svelte';
|
|
let baskets = [];
|
|
let isLoading = true;
|
|
let error = "";
|
|
export let data;
|
|
|
|
const hs = "https://" + data.homeserver;
|
|
const token = data.token;
|
|
|
|
async function updateSet() {
|
|
baskets.forEach(async basket => {
|
|
const response = await fetch(hs + "/_matrix/client/v3/rooms/" + data.slug + "/state/im.ponies.room_emotes/" + basket.state_key, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Authorization": "Bearer " + token,
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify(basket.content)
|
|
});
|
|
const res = await response.json();
|
|
if(response.status != 200) error = "There was an error updating the emote set!";
|
|
});
|
|
}
|
|
|
|
onMount(async () => {
|
|
const response = await fetch(hs + "/_matrix/client/v3/rooms/" + data.slug + "/state", {
|
|
method: "GET",
|
|
headers: {
|
|
"Authorization": "Bearer " + token
|
|
}
|
|
});
|
|
const res = await response.json();
|
|
if(response.status != 200) error = "There was an error getting an emote set!";
|
|
|
|
res.forEach(e => {
|
|
if(e.type === "im.ponies.room_emotes" && e.content.pack != undefined) {
|
|
baskets.push(e);
|
|
}
|
|
});
|
|
if(baskets.length == 0) error = "Either there are no emotes on this room, or you have insufficent rights. (You need atleast Mod)"
|
|
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);
|
|
let insert = {};
|
|
const emoteName = Object.entries(baskets[data.basketIndex].content.images)[data.itemIndex][0];
|
|
const emoteUrl = Object.entries(baskets[data.basketIndex].content.images)[data.itemIndex][1];
|
|
|
|
// Remove the item from one basket.
|
|
// Splice returns an array of the deleted elements, just one in this case.
|
|
delete baskets[data.basketIndex].content.images[emoteName];
|
|
|
|
// Add the item to the drop target basket.
|
|
insert[emoteName] = emoteUrl;
|
|
baskets[basketIndex].content.images = {...baskets[basketIndex].content.images, ...insert}
|
|
baskets = baskets;
|
|
|
|
hoveringOverBasket = null;
|
|
}
|
|
</script>
|
|
{#if error}
|
|
<err>{error}</err>
|
|
<br>
|
|
{:else}
|
|
{#if isLoading}
|
|
<p>Loading the Emotes...</p>
|
|
{:else}
|
|
<button on:click={updateSet}>Update</button>
|
|
{#each baskets as basket, basketIndex (basket)}
|
|
<div>
|
|
<CollapsibleCard>
|
|
<h2 slot="header" class="header">{basket.content.pack.display_name}</h2>
|
|
<ul
|
|
class:hovering={hoveringOverBasket === basket.content.pack.display_name}
|
|
on:dragenter={() => hoveringOverBasket = basket.content.pack.display_name}
|
|
on:dragleave={() => hoveringOverBasket = null}
|
|
on:drop={event => drop(event, basketIndex)}
|
|
ondragover="return false"
|
|
slot='body' class='body' >
|
|
{#each Object.entries(basket.content.images) as [key, value], itemIndex (key)}
|
|
<div class="item">
|
|
<li
|
|
draggable={true}
|
|
on:dragstart={event => dragStart(event, basketIndex, itemIndex)} >
|
|
<img src={hs + "/_matrix/media/r0/thumbnail/" + value.url.split("/")[2] + "/" + value.url.split("/")[3] + "?width=256&height=256&method=crop"} alt="{key}"/>
|
|
</li>
|
|
</div>
|
|
{/each}
|
|
</ul>
|
|
</CollapsibleCard>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
{/if}
|