loviuz/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Fix: cleanup of wikipedia panel, fix #1570

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-09-19 14:29:11 +02:00
parent 0df56064fa
commit 203f24fca0
2 changed files with 67 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/UI/Wikipedia/WikipediaArticle.svelte
View file

@ -1,35 +1,38 @@
<script lang="ts"> <script lang="ts">
import type { FullWikipediaDetails } from "../../Logic/Web/Wikipedia" import type { FullWikipediaDetails } from "../../Logic/Web/Wikipedia";
import { Store } from "../../Logic/UIEventSource" import { Store } from "../../Logic/UIEventSource";
import FromHtml from "../Base/FromHtml.svelte" import FromHtml from "../Base/FromHtml.svelte";
import Loading from "../Base/Loading.svelte" import Loading from "../Base/Loading.svelte";
import { Disclosure, DisclosureButton, DisclosurePanel } from "@rgossiaux/svelte-headlessui" import { Disclosure, DisclosureButton, DisclosurePanel } from "@rgossiaux/svelte-headlessui";
import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid" import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid";
import ToSvelte from "../Base/ToSvelte.svelte" import ToSvelte from "../Base/ToSvelte.svelte";
import WikidataPreviewBox from "./WikidataPreviewBox" import WikidataPreviewBox from "./WikidataPreviewBox";
import Tr from "../Base/Tr.svelte" import Tr from "../Base/Tr.svelte";
import Translations from "../i18n/Translations" import Translations from "../i18n/Translations";
/** /**
* Small helper * Small helper
*/ */
export let wikipediaDetails: Store<FullWikipediaDetails> export let wikipediaDetails: Store<FullWikipediaDetails>;
</script> </script>
<a class="flex" href={$wikipediaDetails.articleUrl} rel="noreferrer" target="_blank"> {#if $wikipediaDetails.articleUrl}
<img class="h-6 w-6" src="./assets/svg/wikipedia.svg" />
<Tr t={Translations.t.general.wikipedia.fromWikipedia} />
</a>
<a class="flex" href={$wikipediaDetails.articleUrl} rel="noreferrer" target="_blank">
<img class="h-6 w-6" src="./assets/svg/wikipedia.svg" />
<Tr t={Translations.t.general.wikipedia.fromWikipedia} />
</a>
{/if}
{#if $wikipediaDetails.wikidata} {#if $wikipediaDetails.wikidata}
<ToSvelte construct={WikidataPreviewBox.WikidataResponsePreview($wikipediaDetails.wikidata)} /> <ToSvelte construct={WikidataPreviewBox.WikidataResponsePreview($wikipediaDetails.wikidata)} />
{/if} {/if}
{#if $wikipediaDetails.articleUrl}
{#if $wikipediaDetails.firstParagraph === "" || $wikipediaDetails.firstParagraph === undefined} {#if $wikipediaDetails.firstParagraph === "" || $wikipediaDetails.firstParagraph === undefined}
<Loading> <Loading>
<Tr t={Translations.t.general.wikipedia.loading} /> <Tr t={Translations.t.general.wikipedia.loading} />
</Loading> </Loading>
{:else} {:else}
<span class="wikipedia-article"> <span class="wikipedia-article">
<FromHtml src={$wikipediaDetails.firstParagraph} /> <FromHtml src={$wikipediaDetails.firstParagraph} />
<Disclosure let:open> <Disclosure let:open>
@ -47,4 +50,5 @@
</DisclosurePanel> </DisclosurePanel>
</Disclosure> </Disclosure>
</span> </span>
{/if}
{/if} {/if}

80
src/UI/Wikipedia/WikipediaPanel.svelte
View file

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