forked from MapComplete/MapComplete
Graciously handle multiple entries in wikidata for fetching images and showing articles, verious bug fixes
This commit is contained in:
parent
8d52ef1106
commit
a996ba2a7c
14 changed files with 231 additions and 90 deletions
|
|
@ -6,11 +6,16 @@ import {VariableUiElement} from "./VariableUIElement";
|
|||
|
||||
export class TabbedComponent extends Combine {
|
||||
|
||||
constructor(elements: { header: BaseUIElement | string, content: BaseUIElement | string }[], openedTab: (UIEventSource<number> | number) = 0) {
|
||||
constructor(elements: { header: BaseUIElement | string, content: BaseUIElement | string }[],
|
||||
openedTab: (UIEventSource<number> | number) = 0,
|
||||
options?: {
|
||||
leftOfHeader?: BaseUIElement
|
||||
styleHeader?: (header: BaseUIElement) => void
|
||||
}) {
|
||||
|
||||
const openedTabSrc = typeof (openedTab) === "number" ? new UIEventSource(openedTab) : (openedTab ?? new UIEventSource<number>(0))
|
||||
|
||||
const tabs: BaseUIElement[] = []
|
||||
const tabs: BaseUIElement[] = [options?.leftOfHeader ]
|
||||
const contentElements: BaseUIElement[] = [];
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
let element = elements[i];
|
||||
|
|
@ -25,16 +30,19 @@ export class TabbedComponent extends Combine {
|
|||
}
|
||||
})
|
||||
const content = Translations.W(element.content)
|
||||
content.SetClass("relative p-4 w-full inline-block")
|
||||
content.SetClass("relative w-full inline-block")
|
||||
contentElements.push(content);
|
||||
const tab = header.SetClass("block tab-single-header")
|
||||
tabs.push(tab)
|
||||
}
|
||||
|
||||
const header = new Combine(tabs).SetClass("tabs-header-bar")
|
||||
if(options?.styleHeader){
|
||||
options.styleHeader(header)
|
||||
}
|
||||
const actualContent = new VariableUiElement(
|
||||
openedTabSrc.map(i => contentElements[i])
|
||||
)
|
||||
).SetStyle("max-height: inherit; height: inherit")
|
||||
super([header, actualContent])
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,6 +73,9 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen {
|
|||
}
|
||||
);
|
||||
|
||||
tabs.forEach(c => c.content.SetClass("p-4"))
|
||||
tabsWithAboutMc.forEach(c => c.content.SetClass("p-4"))
|
||||
|
||||
return new Toggle(
|
||||
new TabbedComponent(tabsWithAboutMc, State.state.welcomeMessageOpenedTab),
|
||||
new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab),
|
||||
|
|
|
|||
|
|
@ -21,10 +21,11 @@ export default class Attribution extends VariableUiElement {
|
|||
icon?.SetClass("block left").SetStyle("height: 2em; width: 2em; padding-right: 0.5em;"),
|
||||
|
||||
new Combine([
|
||||
Translations.W(license?.artist ?? ".").SetClass("block font-bold"),
|
||||
Translations.W(license?.title).SetClass("block"),
|
||||
Translations.W(license?.artist ?? "").SetClass("block font-bold"),
|
||||
Translations.W((license?.license ?? "") === "" ? "CC0" : (license?.license ?? ""))
|
||||
]).SetClass("flex flex-col")
|
||||
]).SetClass("flex flex-row bg-black text-white text-sm absolute bottom-0 left-0 p-0.5 pl-5 pr-3 rounded-lg")
|
||||
]).SetClass("flex flex-row bg-black text-white text-sm absolute bottom-0 left-0 p-0.5 pl-5 pr-3 rounded-lg no-images")
|
||||
|
||||
}));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,7 +100,16 @@ export default class SpecialVisualizations {
|
|||
],
|
||||
example: "`{wikipedia()}` is a basic example, `{wikipedia(name:etymology:wikidata)}` to show the wikipedia page of whom the feature was named after. Also remember that these can be styled, e.g. `{wikipedia():max-height: 10rem}` to limit the height",
|
||||
constr: (_, tagsSource, args) =>
|
||||
new WikipediaBox( tagsSource.map(tags => tags[args[0]]))
|
||||
new VariableUiElement(
|
||||
tagsSource.map(tags => tags[args[0]])
|
||||
.map(wikidata => {
|
||||
const wikidatas : string[] =
|
||||
Utils.NoEmpty(wikidata?.split(";")?.map(wd => wd.trim()) ?? [])
|
||||
return new WikipediaBox(wikidatas)
|
||||
})
|
||||
|
||||
)
|
||||
|
||||
},
|
||||
{
|
||||
funcName: "minimap",
|
||||
|
|
|
|||
|
|
@ -10,27 +10,73 @@ import Translations from "./i18n/Translations";
|
|||
import Svg from "../Svg";
|
||||
import Wikidata, {WikidataResponse} from "../Logic/Web/Wikidata";
|
||||
import Locale from "./i18n/Locale";
|
||||
import Toggle from "./Input/Toggle";
|
||||
import Link from "./Base/Link";
|
||||
import {TabbedComponent} from "./Base/TabbedComponent";
|
||||
|
||||
export default class WikipediaBox extends Toggle {
|
||||
export default class WikipediaBox extends Combine {
|
||||
|
||||
|
||||
constructor(wikidataId: string | UIEventSource<string>) {
|
||||
const wp = Translations.t.general.wikipedia;
|
||||
if (typeof wikidataId === "string") {
|
||||
wikidataId = new UIEventSource(wikidataId)
|
||||
constructor(wikidataIds: string[]) {
|
||||
|
||||
const mainContents = []
|
||||
|
||||
const pages = wikidataIds.map(wdId => WikipediaBox.createLinkedContent(wdId))
|
||||
if (wikidataIds.length == 1) {
|
||||
const page = pages[0]
|
||||
mainContents.push(
|
||||
new Combine([
|
||||
new Combine([Svg.wikipedia_ui()
|
||||
.SetStyle("width: 1.5rem").SetClass("inline-block mr-3"), page.titleElement])
|
||||
.SetClass("flex"),
|
||||
page.linkElement
|
||||
]).SetClass("flex justify-between align-middle"),
|
||||
)
|
||||
mainContents.push(page.contents)
|
||||
} else if (wikidataIds.length > 1) {
|
||||
|
||||
const tabbed = new TabbedComponent(
|
||||
pages.map(page => {
|
||||
const contents = page.contents.SetClass("block").SetStyle("max-height: inherit; height: inherit; padding-bottom: 3.3rem")
|
||||
return {
|
||||
header: page.titleElement.SetClass("pl-2 pr-2"),
|
||||
content: new Combine([
|
||||
page.linkElement
|
||||
.SetStyle("top: 2rem; right: 2.5rem;")
|
||||
.SetClass("absolute subtle-background rounded-full p-3 opacity-50 hover:opacity-100 transition-opacity"),
|
||||
contents
|
||||
]).SetStyle("max-height: inherit; height: inherit").SetClass("relative")
|
||||
}
|
||||
|
||||
}),
|
||||
0,
|
||||
{
|
||||
leftOfHeader: Svg.wikipedia_ui().SetStyle("width: 1.5rem; align-self: center;").SetClass("mr-4"),
|
||||
styleHeader: header => header.SetClass("subtle-background").SetStyle("height: 3.3rem")
|
||||
}
|
||||
)
|
||||
tabbed.SetStyle("height: inherit; max-height: inherit; overflow: hidden")
|
||||
mainContents.push(tabbed)
|
||||
|
||||
}
|
||||
|
||||
|
||||
super(mainContents)
|
||||
|
||||
|
||||
this.SetClass("block rounded-xl subtle-background m-1 p-2 flex flex-col")
|
||||
.SetStyle("max-height: inherit")
|
||||
}
|
||||
|
||||
private static createLinkedContent(wikidataId: string): {
|
||||
titleElement: BaseUIElement,
|
||||
contents: BaseUIElement,
|
||||
linkElement: BaseUIElement
|
||||
} {
|
||||
|
||||
const wp = Translations.t.general.wikipedia;
|
||||
|
||||
const wikiLink: UIEventSource<[string, string] | "loading" | "failed" | "no page"> =
|
||||
wikidataId
|
||||
.bind(id => {
|
||||
if (id === undefined) {
|
||||
return undefined
|
||||
}
|
||||
return Wikidata.LoadWikidataEntry(id);
|
||||
})
|
||||
Wikidata.LoadWikidataEntry(wikidataId)
|
||||
.map(maybewikidata => {
|
||||
if (maybewikidata === undefined) {
|
||||
return "loading"
|
||||
|
|
@ -72,38 +118,39 @@ export default class WikipediaBox extends Toggle {
|
|||
|
||||
const [pagetitle, language] = status
|
||||
return WikipediaBox.createContents(pagetitle, language)
|
||||
|
||||
|
||||
})
|
||||
).SetClass("overflow-auto normal-background rounded-lg")
|
||||
|
||||
|
||||
const linkElement = new VariableUiElement(wikiLink.map(state => {
|
||||
const titleElement = new VariableUiElement(wikiLink.map(state => {
|
||||
if (typeof state !== "string") {
|
||||
const [pagetitle, language] = state
|
||||
const url= `https://${language}.wikipedia.org/wiki/${pagetitle}`
|
||||
return new Title(pagetitle, 3)
|
||||
}
|
||||
//return new Title(Translations.t.general.wikipedia.wikipediaboxTitle.Clone(), 2)
|
||||
return new Title(wikidataId,3)
|
||||
|
||||
}))
|
||||
|
||||
const linkElement = new VariableUiElement(wikiLink.map(state => {
|
||||
if (typeof state !== "string") {
|
||||
const [pagetitle, language] = state
|
||||
const url = `https://${language}.wikipedia.org/wiki/${pagetitle}`
|
||||
return new Link(Svg.pop_out_ui().SetStyle("width: 1.2rem").SetClass("block "), url, true)
|
||||
}
|
||||
return undefined}))
|
||||
.SetClass("flex items-center")
|
||||
return undefined
|
||||
}))
|
||||
.SetClass("flex items-center")
|
||||
|
||||
const mainContent = new Combine([
|
||||
new Combine([
|
||||
new Combine([
|
||||
Svg.wikipedia_ui().SetStyle("width: 1.5rem").SetClass("mr-3"),
|
||||
new Title(Translations.t.general.wikipedia.wikipediaboxTitle.Clone(), 2),
|
||||
]).SetClass("flex"),
|
||||
|
||||
linkElement
|
||||
]).SetClass("flex justify-between"),
|
||||
contents]).SetClass("block rounded-xl subtle-background m-1 p-2 flex flex-col")
|
||||
.SetStyle("max-height: inherit")
|
||||
super(
|
||||
mainContent,
|
||||
undefined,
|
||||
wikidataId.map(id => id !== undefined)
|
||||
)
|
||||
return {
|
||||
contents: contents,
|
||||
linkElement: linkElement,
|
||||
titleElement: titleElement
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Returns the actual content in a scrollable way
|
||||
* @param pagename
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue