forked from MapComplete/MapComplete
57 lines
1.7 KiB
Svelte
57 lines
1.7 KiB
Svelte
|
<script lang="ts">
|
||
|
|
/**
|
||
|
|
* Shows one or more wikidata info boxes or wikipedia articles in a tabbed component.
|
||
|
|
*/
|
||
|
|
import type { FullWikipediaDetails } from "../../Logic/Web/Wikipedia";
|
||
|
|
import Wikipedia from "../../Logic/Web/Wikipedia";
|
||
|
|
import Locale from "../i18n/Locale";
|
||
|
|
import { Store } from "../../Logic/UIEventSource";
|
||
|
|
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@rgossiaux/svelte-headlessui";
|
||
|
|
import WikipediaTitle from "./WikipediaTitle.svelte";
|
||
|
|
import WikipediaArticle from "./WikipediaArticle.svelte";
|
||
|
|
import { onDestroy } from "svelte";
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Either a wikidata item or a '<language>:<article>' link
|
||
|
|
*/
|
||
|
|
export let wikiIds: Store<string[]>;
|
||
|
|
let wikipediaStores: Store<Store<FullWikipediaDetails>[]> = Locale.language.bind(language =>
|
||
|
|
wikiIds.map(wikiIds => wikiIds.map(id => Wikipedia.fetchArticleAndWikidata(id, language))));
|
||
|
|
let _wikipediaStores;
|
||
|
|
onDestroy(wikipediaStores.addCallbackAndRunD(wikipediaStores => {
|
||
|
|
_wikipediaStores = wikipediaStores;
|
||
|
|
}));
|
||
|
|
</script>
|
||
|
|
{#if _wikipediaStores !== undefined}
|
||
|
|
<TabGroup>
|
||
|
|
<TabList>
|
||
|
|
{#each _wikipediaStores as store (store.tag)}
|
||
|
|
<Tab class={({selected}) => selected ? "tab-selected" : "tab-unselected"}>
|
||
|
|
<WikipediaTitle wikipediaDetails={store} />
|
||
|
|
</Tab>
|
||
|
|
{/each}
|
||
|
|
</TabList>
|
||
|
|
<TabPanels>
|
||
|
|
|
||
|
|
{#each _wikipediaStores as store (store.tag)}
|
||
|
|
<TabPanel>
|
||
|
|
<WikipediaArticle wikipediaDetails={store} />
|
||
|
|
|
||
|
|
</TabPanel>
|
||
|
|
{/each}
|
||
|
|
</TabPanels>
|
||
|
|
</TabGroup>
|
||
|
|
{/if}
|
||
|
|
<style>
|
||
|
|
.tab-selected {
|
||
|
|
background-color: rgb(59 130 246);
|
||
|
|
color: rgb(255 255 255);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-unselected {
|
||
|
|
background-color: rgb(255 255 255);
|
||
|
|
color: rgb(0 0 0);
|
||
|
|
}
|
||
|
|
</style>
|