forked from MapComplete/MapComplete
Add a wikidata search box
This commit is contained in:
parent
54bc4f24da
commit
b5a2ee1757
21 changed files with 4141 additions and 3590 deletions
80
UI/Wikipedia/WikidataPreviewBox.ts
Normal file
80
UI/Wikipedia/WikidataPreviewBox.ts
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
import {VariableUiElement} from "../Base/VariableUIElement";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import Wikidata, {WikidataResponse} from "../../Logic/Web/Wikidata";
|
||||
import {Translation} from "../i18n/Translation";
|
||||
import {FixedUiElement} from "../Base/FixedUiElement";
|
||||
import Loading from "../Base/Loading";
|
||||
import {Transform} from "stream";
|
||||
import Translations from "../i18n/Translations";
|
||||
import Combine from "../Base/Combine";
|
||||
import Img from "../Base/Img";
|
||||
import {WikimediaImageProvider} from "../../Logic/ImageProviders/WikimediaImageProvider";
|
||||
import Link from "../Base/Link";
|
||||
import Svg from "../../Svg";
|
||||
import BaseUIElement from "../BaseUIElement";
|
||||
|
||||
export default class WikidataPreviewBox extends VariableUiElement {
|
||||
|
||||
constructor(wikidataId : UIEventSource<string>) {
|
||||
let inited = false;
|
||||
const wikidata = wikidataId
|
||||
.stabilized(250)
|
||||
.bind(id => {
|
||||
if (id === undefined || id === "" || id === "Q") {
|
||||
return null;
|
||||
}
|
||||
inited = true;
|
||||
return Wikidata.LoadWikidataEntry(id)
|
||||
})
|
||||
|
||||
super(wikidata.map(maybeWikidata => {
|
||||
if(maybeWikidata === null || !inited){
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if(maybeWikidata === undefined){
|
||||
return new Loading(Translations.t.general.loading)
|
||||
}
|
||||
|
||||
if (maybeWikidata["error"] !== undefined) {
|
||||
return new FixedUiElement(maybeWikidata["error"]).SetClass("alert")
|
||||
}
|
||||
const wikidata = <WikidataResponse> maybeWikidata["success"]
|
||||
return WikidataPreviewBox.WikidataResponsePreview(wikidata)
|
||||
}))
|
||||
|
||||
}
|
||||
|
||||
public static WikidataResponsePreview(wikidata: WikidataResponse): BaseUIElement{
|
||||
let link = new Link(
|
||||
new Combine([
|
||||
wikidata.id,
|
||||
Svg.wikidata_ui().SetStyle("width: 2.5rem").SetClass("block")
|
||||
]).SetClass("flex"),
|
||||
"https://wikidata.org/wiki/"+wikidata.id ,true)
|
||||
|
||||
let info = new Combine( [
|
||||
new Combine([Translation.fromMap(wikidata.labels).SetClass("font-bold"),
|
||||
link]).SetClass("flex justify-between"),
|
||||
Translation.fromMap(wikidata.descriptions)
|
||||
]).SetClass("flex flex-col link-underline")
|
||||
|
||||
|
||||
let imageUrl = undefined
|
||||
if(wikidata.claims.get("P18")?.size > 0){
|
||||
imageUrl = Array.from(wikidata.claims.get("P18"))[0]
|
||||
}
|
||||
|
||||
|
||||
if(imageUrl){
|
||||
imageUrl = WikimediaImageProvider.singleton.PrepUrl(imageUrl).url
|
||||
info = new Combine([ new Img(imageUrl).SetStyle("max-width: 5rem; width: unset; height: 4rem").SetClass("rounded-xl mr-2"),
|
||||
info.SetClass("w-full")]).SetClass("flex")
|
||||
}
|
||||
|
||||
info.SetClass("p-2 w-full")
|
||||
|
||||
return info
|
||||
}
|
||||
|
||||
}
|
||||
119
UI/Wikipedia/WikidataSearchBox.ts
Normal file
119
UI/Wikipedia/WikidataSearchBox.ts
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
import Combine from "../Base/Combine";
|
||||
import {InputElement} from "../Input/InputElement";
|
||||
import {TextField} from "../Input/TextField";
|
||||
import Translations from "../i18n/Translations";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import Wikidata, {WikidataResponse} from "../../Logic/Web/Wikidata";
|
||||
import Locale from "../i18n/Locale";
|
||||
import {VariableUiElement} from "../Base/VariableUIElement";
|
||||
import {FixedUiElement} from "../Base/FixedUiElement";
|
||||
import WikidataPreviewBox from "./WikidataPreviewBox";
|
||||
import Title from "../Base/Title";
|
||||
import WikipediaBox from "./WikipediaBox";
|
||||
import Svg from "../../Svg";
|
||||
import Link from "../Base/Link";
|
||||
|
||||
export default class WikidataSearchBox extends InputElement<string> {
|
||||
|
||||
private readonly wikidataId: UIEventSource<string>
|
||||
private readonly searchText: UIEventSource<string>
|
||||
|
||||
constructor(options?: {
|
||||
searchText?: UIEventSource<string>,
|
||||
value?: UIEventSource<string>
|
||||
}) {
|
||||
super();
|
||||
this.searchText = options?.searchText
|
||||
this.wikidataId = options?.value ?? new UIEventSource<string>(undefined);
|
||||
}
|
||||
|
||||
GetValue(): UIEventSource<string> {
|
||||
return this.wikidataId;
|
||||
}
|
||||
|
||||
protected InnerConstructElement(): HTMLElement {
|
||||
|
||||
const searchField = new TextField({
|
||||
placeholder: Translations.t.general.wikipedia.searchWikidata,
|
||||
value: this.searchText,
|
||||
inputStyle: "width: calc(100% - 0.5rem); border: 1px solid black"
|
||||
|
||||
})
|
||||
const selectedWikidataId = this.wikidataId
|
||||
|
||||
const lastSearchResults = new UIEventSource<WikidataResponse[]>([])
|
||||
const searchFailMessage = new UIEventSource(undefined)
|
||||
searchField.GetValue().addCallbackAndRunD(searchText => {
|
||||
if (searchText.length < 3) {
|
||||
return;
|
||||
}
|
||||
searchFailMessage.setData(undefined)
|
||||
lastSearchResults.WaitForPromise(
|
||||
Wikidata.searchAndFetch(searchText, {
|
||||
lang: Locale.language.data,
|
||||
maxCount: 5
|
||||
}
|
||||
), err => searchFailMessage.setData(err))
|
||||
|
||||
})
|
||||
|
||||
|
||||
const previews = new VariableUiElement(lastSearchResults.map(searchResults => {
|
||||
if (searchFailMessage.data !== undefined) {
|
||||
return new Combine([Translations.t.general.wikipedia.failed.Clone().SetClass("alert"), searchFailMessage.data])
|
||||
}
|
||||
|
||||
if(searchResults.length === 0){
|
||||
return Translations.t.general.wikipedia.noResults.Subs({search: searchField.GetValue().data ?? ""})
|
||||
}
|
||||
|
||||
if (searchResults.length === 0) {
|
||||
return Translations.t.general.wikipedia.doSearch
|
||||
}
|
||||
|
||||
return new Combine(searchResults.map(wikidataresponse => {
|
||||
const el = WikidataPreviewBox.WikidataResponsePreview(wikidataresponse).SetClass("rounded-xl p-1 sm:p-2 md:p-3 m-px border-2 sm:border-4 transition-colors")
|
||||
el.onClick(() => {
|
||||
selectedWikidataId.setData(wikidataresponse.id)
|
||||
})
|
||||
selectedWikidataId.addCallbackAndRunD(selected => {
|
||||
if (selected === wikidataresponse.id) {
|
||||
el.SetClass("subtle-background border-attention")
|
||||
} else {
|
||||
el.RemoveClass("subtle-background")
|
||||
el.RemoveClass("border-attention")
|
||||
}
|
||||
})
|
||||
return el;
|
||||
|
||||
})).SetClass("flex flex-col")
|
||||
|
||||
}, [searchFailMessage]))
|
||||
|
||||
//
|
||||
const full = new Combine([
|
||||
new Title(Translations.t.general.wikipedia.searchWikidata, 3).SetClass("m-2"),
|
||||
new Combine([
|
||||
Svg.search_ui().SetStyle("width: 1.5rem"),
|
||||
searchField.SetClass("m-2 w-full")]).SetClass("flex"),
|
||||
previews
|
||||
]).SetClass("flex flex-col border-2 border-black rounded-xl m-2 p-2")
|
||||
|
||||
return new Combine([
|
||||
new VariableUiElement(selectedWikidataId.map(wid => {
|
||||
if (wid === undefined) {
|
||||
return undefined
|
||||
}
|
||||
return new WikipediaBox([wid]);
|
||||
})).SetStyle("max-height:12.5rem"),
|
||||
full
|
||||
]).ConstructElement();
|
||||
}
|
||||
|
||||
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
|
||||
|
||||
IsValid(t: string): boolean {
|
||||
return t.startsWith("Q") && !isNaN(Number(t.substring(1)));
|
||||
}
|
||||
|
||||
}
|
||||
202
UI/Wikipedia/WikipediaBox.ts
Normal file
202
UI/Wikipedia/WikipediaBox.ts
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
import BaseUIElement from "../BaseUIElement";
|
||||
import Locale from "../i18n/Locale";
|
||||
import {VariableUiElement} from "../Base/VariableUIElement";
|
||||
import {Translation} from "../i18n/Translation";
|
||||
import Svg from "../../Svg";
|
||||
import Combine from "../Base/Combine";
|
||||
import Title from "../Base/Title";
|
||||
import Wikipedia from "../../Logic/Web/Wikipedia";
|
||||
import Wikidata, {WikidataResponse} from "../../Logic/Web/Wikidata";
|
||||
import {TabbedComponent} from "../Base/TabbedComponent";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import Loading from "../Base/Loading";
|
||||
import {FixedUiElement} from "../Base/FixedUiElement";
|
||||
import Translations from "../i18n/Translations";
|
||||
import Link from "../Base/Link";
|
||||
import WikidataPreviewBox from "./WikidataPreviewBox";
|
||||
|
||||
export default class WikipediaBox extends Combine {
|
||||
|
||||
|
||||
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, WikidataResponse] | "loading" | "failed" | ["no page", WikidataResponse]> =
|
||||
Wikidata.LoadWikidataEntry(wikidataId)
|
||||
.map(maybewikidata => {
|
||||
if (maybewikidata === undefined) {
|
||||
return "loading"
|
||||
}
|
||||
if (maybewikidata["error"] !== undefined) {
|
||||
return "failed"
|
||||
|
||||
}
|
||||
const wikidata = <WikidataResponse>maybewikidata["success"]
|
||||
if (wikidata.wikisites.size === 0) {
|
||||
return ["no page", wikidata]
|
||||
}
|
||||
|
||||
const preferredLanguage = [Locale.language.data, "en", Array.from(wikidata.wikisites.keys())[0]]
|
||||
let language
|
||||
let pagetitle;
|
||||
let i = 0
|
||||
do {
|
||||
language = preferredLanguage[i]
|
||||
pagetitle = wikidata.wikisites.get(language)
|
||||
i++;
|
||||
} while (pagetitle === undefined)
|
||||
return [pagetitle, language, wikidata]
|
||||
}, [Locale.language])
|
||||
|
||||
|
||||
const contents = new VariableUiElement(
|
||||
wikiLink.map(status => {
|
||||
if (status === "loading") {
|
||||
return new Loading(wp.loading.Clone()).SetClass("pl-6 pt-2")
|
||||
}
|
||||
|
||||
if (status === "failed") {
|
||||
return wp.failed.Clone().SetClass("alert p-4")
|
||||
}
|
||||
if (status[0] == "no page") {
|
||||
const [_, wd] = <[string, WikidataResponse]> status
|
||||
return new Combine([
|
||||
WikidataPreviewBox.WikidataResponsePreview(wd),
|
||||
wp.noWikipediaPage.Clone().SetClass("subtle")]).SetClass("flex flex-col p-4")
|
||||
}
|
||||
|
||||
const [pagetitle, language, wd] = <[string, string, WikidataResponse]> status
|
||||
return WikipediaBox.createContents(pagetitle, language, wd)
|
||||
|
||||
})
|
||||
).SetClass("overflow-auto normal-background rounded-lg")
|
||||
|
||||
|
||||
const titleElement = new VariableUiElement(wikiLink.map(state => {
|
||||
if (typeof state !== "string") {
|
||||
const [pagetitle, _] = state
|
||||
if(pagetitle === "no page"){
|
||||
const wd = <WikidataResponse> state[1]
|
||||
return new Title( Translation.fromMap(wd.labels),3)
|
||||
}
|
||||
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
|
||||
if(pagetitle === "no page"){
|
||||
const wd = <WikidataResponse> state[1]
|
||||
return new Link(Svg.pop_out_ui().SetStyle("width: 1.2rem").SetClass("block "),
|
||||
"https://www.wikidata.org/wiki/"+wd.id
|
||||
, true)
|
||||
}
|
||||
|
||||
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 {
|
||||
contents: contents,
|
||||
linkElement: linkElement,
|
||||
titleElement: titleElement
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Returns the actual content in a scrollable way
|
||||
* @param pagename
|
||||
* @param language
|
||||
* @private
|
||||
*/
|
||||
private static createContents(pagename: string, language: string, wikidata: WikidataResponse): BaseUIElement {
|
||||
const htmlContent = Wikipedia.GetArticle({
|
||||
pageName: pagename,
|
||||
language: language
|
||||
})
|
||||
const wp = Translations.t.general.wikipedia
|
||||
const contents: UIEventSource<string | BaseUIElement> = htmlContent.map(htmlContent => {
|
||||
if (htmlContent === undefined) {
|
||||
// Still loading
|
||||
return new Loading(wp.loading.Clone())
|
||||
}
|
||||
if (htmlContent["success"] !== undefined) {
|
||||
return new FixedUiElement(htmlContent["success"]).SetClass("wikipedia-article")
|
||||
}
|
||||
if (htmlContent["error"]) {
|
||||
console.warn("Loading wikipage failed due to", htmlContent["error"])
|
||||
return wp.failed.Clone().SetClass("alert p-4")
|
||||
}
|
||||
|
||||
return undefined
|
||||
})
|
||||
|
||||
return new Combine([new VariableUiElement(contents)
|
||||
.SetClass("block pl-6 pt-2")])
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue