forked from MapComplete/MapComplete
48 lines
1.7 KiB
Svelte
48 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import type { FullWikipediaDetails } from "../../Logic/Web/Wikipedia";
|
|
import { Store } from "../../Logic/UIEventSource";
|
|
import FromHtml from "../Base/FromHtml.svelte";
|
|
import Loading from "../Base/Loading.svelte";
|
|
import { Disclosure, DisclosureButton, DisclosurePanel } from "@rgossiaux/svelte-headlessui";
|
|
import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid";
|
|
import ToSvelte from "../Base/ToSvelte.svelte";
|
|
import WikidataPreviewBox from "./WikidataPreviewBox";
|
|
import Tr from "../Base/Tr.svelte";
|
|
import Translations from "../i18n/Translations";
|
|
|
|
/**
|
|
* Small helper
|
|
*/
|
|
export let wikipediaDetails: Store<FullWikipediaDetails>;
|
|
</script>
|
|
|
|
<a class="flex" href={$wikipediaDetails.articleUrl} rel="noreferrer" target="_blank">
|
|
<img class="w-6 h-6" src="./assets/svg/wikipedia.svg" />
|
|
<Tr t={Translations.t.general.wikipedia.fromWikipedia} />
|
|
</a>
|
|
|
|
{#if $wikipediaDetails.wikidata}
|
|
<ToSvelte construct={WikidataPreviewBox.WikidataResponsePreview($wikipediaDetails.wikidata)} />
|
|
{/if}
|
|
|
|
{#if $wikipediaDetails.firstParagraph === "" || $wikipediaDetails.firstParagraph === undefined}
|
|
<Loading>
|
|
<Tr t={Translations.t.general.wikipedia.loading} />
|
|
</Loading>
|
|
{:else}
|
|
<span class="wikipedia-article">
|
|
<FromHtml src={$wikipediaDetails.firstParagraph} />
|
|
<Disclosure let:open>
|
|
<DisclosureButton>
|
|
<span class="flex">
|
|
<ChevronRightIcon style={(open ? "transform: rotate(90deg); " : "") +" transition: all .25s linear; width: 1.5rem; height: 1.5rem"} />
|
|
Read the rest of the article
|
|
|
|
</span>
|
|
</DisclosureButton>
|
|
<DisclosurePanel>
|
|
<FromHtml src={$wikipediaDetails.restOfArticle} />
|
|
</DisclosurePanel>
|
|
</Disclosure>
|
|
</span>
|
|
{/if}
|