forked from MapComplete/MapComplete
58 lines
1.7 KiB
Svelte
58 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>
|