Skip to content

Commit

Permalink
feat: basic toggle button
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pipazoul
Pipazoul committed Nov 20, 2023
1 parent 94a7cfb commit 31bfca7
Showing 1 changed file with 64 additions and 44 deletions.
108 changes: 64 additions & 44 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,12 @@
}
let display = false;
let url = $page.url.href
let url = $page.url.href;
async function parse() {
const mainCatLines = await parseCSV(url +'/main.csv');
const catLines = await parseCSV(url +'/category.csv');
const itemLines = await parseCSV(url +'/items.csv');
const mainCatLines = await parseCSV(url + '/main.csv');
const catLines = await parseCSV(url + '/category.csv');
const itemLines = await parseCSV(url + '/items.csv');
let categories = catLines.map(([category_label, category_index]) => ({
category_index: category_index?.replace('\r', ''), // Remove the carriage return "\r
Expand All @@ -42,6 +41,7 @@
category_index: category_index.replace('\r', ''), // Remove the carriage return "\r
category_label: category_label,
checked: true,
toggle: false,
sub_categorie_items: category_index
.split(';')
.map((index) => categories.find((cat) => cat.category_index === index))
Expand All @@ -61,23 +61,29 @@
displayedCategories = spliced;
}
onMount(parse);
onMount(() => {
parse();
});
</script>

<section>
<div class="flex justify-center p-4">
<div class="flex w-auto h-20">
<img src={url +'/logos/interpretable.png'} alt="logo" class="pr-4"/>
<img src={url +'/logos/logo_erasme_entete.png'} alt="logo" class="h-auto"/>
<img src={url + '/logos/interpretable.png'} alt="logo" class="pr-4" />
<img src={url + '/logos/logo_erasme_entete.png'} alt="logo" class="h-auto" />
</div>
</div>

<div class="text-center text-2xl">
Interprétable est un outil de communication utilisant des pictogrammes.<br>
Il a été développé par le laboratoire d'innovation ouverte Erasme de la Métropole de Lyon.<br>
Pour plus d'information visitez la page <a class="text-purple-600 " href="https://erasme.org/interpretable" target="_blank">https://erasme.org/interpretable</a>.<br>
Interprétable est un outil de communication utilisant des pictogrammes.<br />
Il a été développé par le laboratoire d'innovation ouverte Erasme de la Métropole de Lyon.<br />
Pour plus d'information visitez la page
<a class="text-purple-600" href="https://erasme.org/interpretable" target="_blank"
>https://erasme.org/interpretable</a
>.<br />
</div>

<button
class="print:hidden roun bg-purple-600 p-3 rounded-3xl text-white fixed bottom-5 right-5 flex items-center hover:scale-125"
on:click={() => window.print()}
Expand All @@ -87,6 +93,7 @@
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<style>
svg {
fill: #ffffff;
Expand All @@ -97,54 +104,61 @@
>
<p class="ml-4">Imprimer</p>
</button>

<div class="print:hidden">
<h1>Categories</h1>
{#if display}
{#each mainCategories as category, categoryIndex}
<div class="flex flex-col">
<div>
<div class="flex items-center">
<input
type="checkbox"
id={category.category_index}
name={category.category_index}
value={category.category_index}
checked={category.checked}
on:change={(e) =>
displayedCategories = mainCategories.map((cat, catIndex) => {
(displayedCategories = mainCategories.map((cat, catIndex) => {
if (catIndex === categoryIndex) {
cat.checked = e.target.checked;
}
return cat;
}
)}
}))}
/>
<label for={category.category_index} class="ml-2">{category.category_label}</label>
<label for={category.category_index} class="ml-2" >{category.category_label}</label>
<p class="text-3xl cursor-pointer text-white" on:click={() => category.toggle = !category.toggle}>
{#if !category.toggle}
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>
{:else}
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128z"/></svg>
{/if}
</p>
</div>
<div class="{category.toggle ? '' : 'hidden'}">
{#each category.sub_categorie_items as subCategory, subCategoryIndex}
{#if subCategory}
<div class="ml-4">
<input
type="checkbox"
id={subCategory.category_index}
name={subCategory.category_index}
value={subCategory.category_index}
checked={subCategory.checked}
on:change={(e) =>
(displayedCategories = mainCategories.map((cat, catIndex) => {
if (catIndex === categoryIndex) {
cat.sub_categorie_items[subCategoryIndex].checked = e.target.checked;
}
return cat;
}))}
/>
<label for={subCategory.category_index} class="ml-2"
>{subCategory.category_label}</label
>
</div>
{/if}
{/each}
</div>

{#each category.sub_categorie_items as subCategory, subCategoryIndex}
{#if subCategory}
<div class="ml-4">
<input
type="checkbox"
id={subCategory.category_index}
name={subCategory.category_index}
value={subCategory.category_index}
checked={subCategory.checked}
on:change={(e) =>
displayedCategories = mainCategories.map((cat, catIndex) => {
if (catIndex === categoryIndex) {
cat.sub_categorie_items[subCategoryIndex].checked = e.target.checked;
}
return cat;
}
)}
/>
<label for={subCategory.category_index} class="ml-2"
>{subCategory.category_label}</label
>
</div>
{/if}
{/each}
</div>
{/each}
{/if}
Expand All @@ -160,7 +174,9 @@
<ul class="flex flex-wrap justify-center">
{#if category?.items}
{#each category.items as item, itemIndex}
<li class="w-1/3 md:w-1/5 lg:w-1/6 print:w-1/5 border border-solid border-r-4 rounded-lg m-1">
<li
class="w-1/3 md:w-1/5 lg:w-1/6 print:w-1/5 border border-solid border-r-4 rounded-lg m-1"
>
<button
class="print:hidden absolute -m-2 hover:scale-125"
on:click={() => removeItem(categoriesIndex, categoryIndex, itemIndex)}
Expand All @@ -170,6 +186,7 @@
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<style>
svg {
fill: #ff0000;
Expand All @@ -179,7 +196,10 @@
/></svg
>
</button>
<img src={url +'/svg/' + item.pictogram_file + '.svg'} alt={item.pictogram_label} />
<img
src={url + '/svg/' + item.pictogram_file + '.svg'}
alt={item.pictogram_label}
/>
<p>{item.pictogram_label}</p>
</li>
{/each}
Expand Down

0 comments on commit 31bfca7

Please sign in to comment.