✨ Added basic quiztivity editor
This commit is contained in:
Mawoka
@@ -0,0 +1,167 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { Data } from './types';
|
||||
import { getLocalization } from '$lib/i18n';
|
||||
import BrownButton from '$lib/components/buttons/brown.svelte';
|
||||
import AddNewSlide from './add_new_slide.svelte';
|
||||
import { QuizTivityTypes } from './types';
|
||||
import PdfEdit from './components/pdf/edit.svelte';
|
||||
import MemoryEdit from './components/memory/edit.svelte';
|
||||
import MarkdownEdit from './components/markdown/edit.svelte';
|
||||
import { flip } from 'svelte/animate';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const { t } = getLocalization();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let data: Data;
|
||||
export let saving: boolean;
|
||||
|
||||
let selected_slide = null;
|
||||
let opened_slide = null;
|
||||
let selected_type = undefined;
|
||||
|
||||
for (let i = 0; i < data.pages.length; i++) {
|
||||
const id = (Math.random() + 1).toString(36).substring(7);
|
||||
const type: QuizTivityTypes = data.pages[i].type as QuizTivityTypes;
|
||||
data.pages[i] = { ...data.pages[i], id, type };
|
||||
}
|
||||
const handle_slide_add = (type: QuizTivityTypes | undefined | null) => {
|
||||
if (!type) {
|
||||
return;
|
||||
}
|
||||
const id = (Math.random() + 1).toString(36).substring(7);
|
||||
data.pages.push({ title: undefined, data: undefined, type, id });
|
||||
opened_slide = data.pages.length - 1;
|
||||
};
|
||||
$: handle_slide_add(selected_type);
|
||||
|
||||
const delete_slide = () => {
|
||||
data.pages.slice(selected_slide, 1);
|
||||
data.pages = data.pages;
|
||||
};
|
||||
|
||||
const arraymove = (arr: any[], fromI: number, toI: number) => {
|
||||
const el = arr[fromI];
|
||||
arr.splice(fromI, 1);
|
||||
arr.splice(toI, 0, el);
|
||||
};
|
||||
const move_slide_left = () => {
|
||||
arraymove(data.pages, selected_slide, selected_slide - 1);
|
||||
selected_slide -= 1;
|
||||
data.pages = data.pages;
|
||||
};
|
||||
|
||||
const move_slide_right = () => {
|
||||
arraymove(data.pages, selected_slide, selected_slide + 1);
|
||||
selected_slide += 1;
|
||||
data.pages = data.pages;
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if opened_slide === null}
|
||||
<div>
|
||||
<div class="grid grid-cols-3">
|
||||
<span />
|
||||
<input
|
||||
class="bg-transparent outline-none text-center mx-auto"
|
||||
placeholder={$t('quiztivity.editor.title_placeholder')}
|
||||
bind:value={data.title}
|
||||
/>
|
||||
<div class="self-end pr-2 w-full">
|
||||
<div class="ml-auto w-fit">
|
||||
<BrownButton
|
||||
on:click={() => {
|
||||
dispatch('save');
|
||||
}}
|
||||
disabled={!data.title}>{$t('words.save')}</BrownButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<BrownButton
|
||||
on:click={() => {
|
||||
selected_type = null;
|
||||
}}>{$t('quiztivity.editor.add_new')}</BrownButton
|
||||
>
|
||||
<BrownButton on:click={delete_slide} disabled={selected_slide === null}
|
||||
>{$t('quiztivity.editor.delete')}</BrownButton
|
||||
>
|
||||
<BrownButton
|
||||
on:click={move_slide_left}
|
||||
disabled={selected_slide === null || selected_slide === 0}
|
||||
>{$t('quiztivity.editor.move_left')}</BrownButton
|
||||
>
|
||||
<BrownButton
|
||||
on:click={move_slide_right}
|
||||
disabled={selected_slide === null ||
|
||||
selected_slide === data.pages.length - 1}
|
||||
>{$t('quiztivity.editor.move_right')}</BrownButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center mt-6">
|
||||
<div class="grid grid-cols-6 gap-6 w-11/12">
|
||||
{#each data.pages as page, i (page.id)}
|
||||
<div
|
||||
class="border-[#B07156] border-2 rounded aspect-square flex flex-col group"
|
||||
animate:flip={{ duration: 200 }}
|
||||
>
|
||||
<p class="m-auto">{page.type}</p>
|
||||
<div
|
||||
class="grid grid-cols-2 gap-2 p-2 group-hover:opacity-100 transition-all"
|
||||
class:opacity-0={selected_slide !== i}
|
||||
>
|
||||
<BrownButton
|
||||
on:click={() => {
|
||||
selected_slide = selected_slide === i ? null : i;
|
||||
}}
|
||||
>
|
||||
{#if selected_slide === i}{$t('words.selected')}{:else}{$t(
|
||||
'words.select'
|
||||
)}{/if}
|
||||
</BrownButton>
|
||||
<BrownButton
|
||||
on:click={() => {
|
||||
opened_slide = i;
|
||||
}}>{$t('words.edit')}</BrownButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
{@const sel_t = data.pages[opened_slide].type}
|
||||
<div class="h-full">
|
||||
<div class="mb-2">
|
||||
<BrownButton
|
||||
on:click={() => {
|
||||
opened_slide = null;
|
||||
}}>{$t('words.back')}</BrownButton
|
||||
>
|
||||
</div>
|
||||
{#if sel_t === QuizTivityTypes.PDF}
|
||||
<PdfEdit />
|
||||
{:else if sel_t === QuizTivityTypes.MEMORY}
|
||||
<MemoryEdit bind:data={data.pages[opened_slide].data} />
|
||||
{:else if sel_t === QuizTivityTypes.MARKDOWN}
|
||||
<MarkdownEdit bind:data={data.pages[opened_slide].data} />
|
||||
{:else}
|
||||
<h1 class="text-8xl">ERROR!</h1>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if selected_type === null}
|
||||
<AddNewSlide bind:type={selected_type} />
|
||||
{/if}
|
||||
Reference in New Issue
Block a user