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

Add wikipedia box

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-10-02 22:31:16 +02:00
parent 1edf829cad
commit 8b4442c8cc
20 changed files with 401 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

4
UI/Base/Loading.ts
View file

@ -9,9 +9,9 @@ export default class Loading extends Combine {
const t = Translations.T(msg ) ?? Translations.t.general.loading.Clone();
t.SetClass("pl-2")
super([
Svg.loading_svg().SetClass("animate-spin").SetStyle("width: 1.5rem; height: 1.5rem; margin-bottom: 4px;"),
Svg.loading_svg().SetClass("animate-spin").SetStyle("width: 1.5rem; height: 1.5rem;"),
t
])
this.SetClass("flex m-1")
this.SetClass("flex p-1")
}
}

5
UI/ShowDataLayer/ShowDataLayer.ts
View file

@ -225,7 +225,6 @@ export default class ShowDataLayer {
popup.setContent(`<div style='height: 65vh' id='${id}'>Popup for ${feature.properties.id} ${feature.geometry.type}</div>`)
leafletLayer.on("popupopen", () => {
console.trace(`Opening the popup for ${feature.properties.id} ${feature.geometry.type}`)
if (infobox === undefined) {
const tags = State.state.allElements.getEventSourceById(feature.properties.id);
infobox = new FeatureInfoBox(tags, layer);
@ -239,7 +238,9 @@ export default class ShowDataLayer {
}
infobox.AttachTo(id)
infobox.Activate();
State.state.selectedElement.setData(feature)
if (State.state?.selectedElement?.data?.properties?.id !== feature.properties.id) {
State.state.selectedElement.setData(feature)
}
});

47
UI/SpecialVisualizations.ts
View file

@ -26,6 +26,7 @@ import StaticFeatureSource from "../Logic/FeatureSource/Sources/StaticFeatureSou
import ShowDataMultiLayer from "./ShowDataLayer/ShowDataMultiLayer";
import Minimap from "./Base/Minimap";
import AllImageProviders from "../Logic/ImageProviders/AllImageProviders";
import WikipediaBox from "./WikipediaBox";
export interface SpecialVisualization {
funcName: string,
@ -84,6 +85,20 @@ export default class SpecialVisualizations {
return new ImageUploadFlow(tags, args[0])
}
},
{
funcName: "wikipedia",
docs: "A box showing the corresponding wikipedia article - based on the wikidata tag",
args: [
{
name: "keyToShowWikipediaFor",
doc: "Use the wikidata entry from this key to show the wikipedia article for",
defaultValue: "wikidata"
}
],
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]]))
},
{
funcName: "minimap",
docs: "A small map showing the selected feature. Note that no styling is applied, wrap this in a div",
@ -153,10 +168,10 @@ export default class SpecialVisualizations {
}
})
new ShowDataMultiLayer(
new ShowDataMultiLayer(
{
leafletMap: minimap["leafletMap"],
enablePopups : false,
enablePopups: false,
zoomToFeatures: true,
layers: State.state.filteredLayers,
features: new StaticFeatureSource(featuresToShow, true)
@ -351,17 +366,17 @@ export default class SpecialVisualizations {
const key = args [0]
return new VariableUiElement(
tagSource.map(tags => tags[key]).map(value => {
if (value === undefined) {
return undefined
}
const allUnits = [].concat(...state.layoutToUse.layers.map(lyr => lyr.units))
const unit = allUnits.filter(unit => unit.isApplicableToKey(key))[0]
if (unit === undefined) {
return value;
}
return unit.asHumanLongValue(value);
if (value === undefined) {
return undefined
}
const allUnits = [].concat(...state.layoutToUse.layers.map(lyr => lyr.units))
const unit = allUnits.filter(unit => unit.isApplicableToKey(key))[0]
if (unit === undefined) {
return value;
}
return unit.asHumanLongValue(value);
})
})
)
}
},
@ -411,8 +426,8 @@ There are also some technicalities in your theme to keep in mind:
}
return kv
})
const rewrittenTags : UIEventSource<Tag[]> = tagSource.map(tags => {
const newTags : Tag [] = []
const rewrittenTags: UIEventSource<Tag[]> = tagSource.map(tags => {
const newTags: Tag [] = []
for (const [key, value] of tgsSpec) {
if (value.startsWith('$')) {
const origKey = value.substring(1)
@ -446,9 +461,9 @@ There are also some technicalities in your theme to keep in mind:
[
new Title(viz.funcName, 3),
viz.docs,
new Table(["name", "default", "description"],
viz.args.length > 0 ? new Table(["name", "default", "description"],
viz.args.map(arg => [arg.name, arg.defaultValue ?? "undefined", arg.doc])
),
) : undefined,
new Title("Example usage", 4),
new FixedUiElement(
viz.example ?? "`{" + viz.funcName + "(" + viz.args.map(arg => arg.defaultValue).join(",") + ")}`"

139
UI/WikipediaBox.ts
View file

@ -8,46 +8,109 @@ import BaseUIElement from "./BaseUIElement";
import Title from "./Base/Title";
import Translations from "./i18n/Translations";
import Svg from "../Svg";
import Wikidata from "../Logic/Web/Wikidata";
import Locale from "./i18n/Locale";
export default class WikipediaBox extends Combine{
constructor(options: {
pagename: string,
language: string
}) {
const htmlContent = UIEventSource.FromPromiseWithErr(Wikipedia.GetArticle({
pageName: options.pagename,
language: options.language,
removeInfoBoxes: true
}))
const contents : UIEventSource<string | BaseUIElement> = htmlContent.map(htmlContent => {
if(htmlContent === undefined){
// Still loading
return new Loading("Loading wikipedia page").SetClass("p-4")
}
if(htmlContent["success"] !== undefined){
return new FixedUiElement(htmlContent["success"]).SetClass("wikipedia-article")
}
if(htmlContent["error"]){
return new FixedUiElement(htmlContent["error"]).SetClass("alert p-4")
}
return undefined
})
const scrollable = new Combine([new VariableUiElement(contents).SetClass("block pl-6 pt-2")])
.SetClass("block overflow-auto normal-background rounded-lg")
super([
new Combine([Svg.wikipedia_svg().SetStyle("width: 1.5rem").SetClass("mr-3"),
new Title(Translations.t.general.wikipedia.wikipediaboxTitle, 2)]).SetClass("flex"),
scrollable])
this
.SetClass("block rounded-xl subtle-background m-1 p-2 flex flex-col")
export default class WikipediaBox extends Combine {
private static async ExtractWikiPages(wikidata): Promise<Map<string, string>> {
return (await Wikidata.LoadWikidataEntry(wikidata)).wikisites
}
private static _cache = new Map()
constructor(wikidataId: string | UIEventSource<string>) {
const wp = Translations.t.general.wikipedia;
if(typeof wikidataId === "string"){
wikidataId = new UIEventSource(wikidataId)
}
const knownPages = new UIEventSource<{success:Map<string, string>}|{error:any}>(undefined)
wikidataId.addCallbackAndRunD(wikidataId => {
WikipediaBox.ExtractWikiPages(wikidataId).then(pages => {
knownPages.setData({success:pages})
}).catch(err=> {
knownPages.setData({error: err})
})
})
const cachedPages = new Map<string, BaseUIElement>()
const contents = new VariableUiElement(
knownPages.map(pages => {
if (pages === undefined) {
return new Loading(wp.loading.Clone())
}
if (pages["error"] !== undefined) {
return wp.failed.Clone().SetClass("alert p-4")
}
const dict: Map<string, string> = pages["success"]
const preferredLanguage = [Locale.language.data, "en", Array.from(dict.keys())[0]]
let language
let pagetitle;
let i = 0
do {
language = preferredLanguage[i]
pagetitle = dict.get(language)
i++;
if(i >= preferredLanguage.length){
return wp.noWikipediaPage.Clone()
}
} while (pagetitle === undefined)
if(cachedPages.has(language)){
return cachedPages.get(language)
}
const page = WikipediaBox.createContents(pagetitle, language);
cachedPages.set(language, page)
return page
}, [Locale.language])
).SetClass("overflow-auto normal-background rounded-lg")
super([
new Combine([Svg.wikipedia_ui().SetStyle("width: 1.5rem").SetClass("mr-3"),
new Title(Translations.t.general.wikipedia.wikipediaboxTitle.Clone(), 2)]).SetClass("flex"),
contents])
this
.SetClass("block rounded-xl subtle-background m-1 p-2 flex flex-col")
}
/**
* Returns the actual content in a scrollable way
* @param pagename
* @param language
* @private
*/
private static createContents(pagename: string, language: string): 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"]) {
return wp.failed.Clone().SetClass("alert p-4")
}
return undefined
})
return new Combine([new VariableUiElement(contents).SetClass("block pl-6 pt-2")])
.SetClass("block")
}
}