diff --git a/UI/Base/Link.ts b/UI/Base/Link.ts index 10d9f2508..72357b186 100644 --- a/UI/Base/Link.ts +++ b/UI/Base/Link.ts @@ -4,32 +4,41 @@ import {UIEventSource} from "../../Logic/UIEventSource"; export default class Link extends BaseUIElement { - private readonly _element: HTMLElement; + private readonly _href: string | UIEventSource; + private readonly _embeddedShow: BaseUIElement; + private readonly _newTab: boolean; constructor(embeddedShow: BaseUIElement | string, href: string | UIEventSource, newTab: boolean = false) { super(); - const _embeddedShow = Translations.W(embeddedShow); + this._embeddedShow =Translations.W(embeddedShow); + this._href = href; + this._newTab = newTab; - - const el = document.createElement("a") - - if(typeof href === "string"){ - el.href = href - }else{ - href.addCallbackAndRun(href => { - el.href = href; - }) - } - if (newTab) { - el.target = "_blank" - } - el.appendChild(_embeddedShow.ConstructElement()) - this._element = el } protected InnerConstructElement(): HTMLElement { + const embeddedShow = this._embeddedShow?.ConstructElement(); + if(embeddedShow === undefined){ + return undefined; + } + const el = document.createElement("a") + if(typeof this._href === "string"){ + el.href = this._href + }else{ + this._href.addCallbackAndRun(href => { + el.href = href; + }) + } + if (this._newTab) { + el.target = "_blank" + } + el.appendChild(embeddedShow) + return el; + } - return this._element; + AsMarkdown(): string { + // @ts-ignore + return `[${this._embeddedShow.AsMarkdown()}](${this._href.data ?? this._href})`; } } \ No newline at end of file diff --git a/UI/Input/DirectionInput.ts b/UI/Input/DirectionInput.ts index 254f804d2..858c9b73c 100644 --- a/UI/Input/DirectionInput.ts +++ b/UI/Input/DirectionInput.ts @@ -2,6 +2,7 @@ import {InputElement} from "./InputElement"; import {UIEventSource} from "../../Logic/UIEventSource"; import Combine from "../Base/Combine"; import Svg from "../../Svg"; +import {FixedUiElement} from "../Base/FixedUiElement"; /** @@ -11,15 +12,18 @@ export default class DirectionInput extends InputElement { private readonly value: UIEventSource; public readonly IsSelected: UIEventSource = new UIEventSource(false); - private _element: HTMLElement; constructor(value?: UIEventSource) { super(); this.value = value ?? new UIEventSource(undefined); - - this._element = new Combine([ - `
`, + } + + protected InnerConstructElement(): HTMLElement { + + + const element = new Combine([ + new FixedUiElement("").SetClass("w-full h-full absolute top-0 left-O rounded-full"), Svg.direction_svg().SetStyle( `position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform:rotate(${this.value.data ?? 0}deg);`) .SetClass("direction-svg"), @@ -30,20 +34,15 @@ export default class DirectionInput extends InputElement { .ConstructElement() -const self = this; this.value.addCallbackAndRun(rotation => { - const selfElement = self._element; - if (selfElement === null) { - return; - } - const cone = selfElement.getElementsByClassName("direction-svg")[0] as HTMLElement + const cone = element.getElementsByClassName("direction-svg")[0] as HTMLElement cone.style.transform = `rotate(${rotation}deg)`; }) - } - - protected InnerConstructElement(): HTMLElement { - return this._element + + this.RegisterTriggers(element) + + return element; } @@ -52,7 +51,7 @@ const self = this; } - protected InnerUpdate(htmlElement: HTMLElement) { + private RegisterTriggers(htmlElement: HTMLElement) { const self = this; function onPosChange(x: number, y: number) { diff --git a/UI/Input/ValidatedTextField.ts b/UI/Input/ValidatedTextField.ts index 27f1f9051..51b24b2e4 100644 --- a/UI/Input/ValidatedTextField.ts +++ b/UI/Input/ValidatedTextField.ts @@ -39,7 +39,7 @@ export default class ValidatedTextField { undefined, undefined, "text"), - + ValidatedTextField.tp( "date", "A date", @@ -63,7 +63,24 @@ export default class ValidatedTextField { (value) => new SimpleDatePicker(value)), ValidatedTextField.tp( "wikidata", - "A wikidata identifier, e.g. Q42"), + "A wikidata identifier, e.g. Q42", + (str) => { + if (str === undefined) { + return false; + } + return (str.length > 1 && (str.startsWith("q") || str.startsWith("Q")) || str.startsWith("https://www.wikidata.org/wiki/Q")) + }, + (str) => { + if (str === undefined) { + return undefined; + } + const wd = "https://www.wikidata.org/wiki/"; + if (str.startsWith(wd)) { + str = str.substr(wd.length) + } + return str.toUpperCase(); + }), + ValidatedTextField.tp( "int", "A number", @@ -213,8 +230,8 @@ export default class ValidatedTextField { placeholder?: string | UIElement, value?: UIEventSource, htmlType?: string, - textArea?:boolean, - inputMode?:string, + textArea?: boolean, + inputMode?: string, textAreaRows?: number, isValid?: ((s: string, country: () => string) => boolean), country?: () => string, diff --git a/index.html b/index.html index e8354f59a..c2b1e8f7e 100644 --- a/index.html +++ b/index.html @@ -12,8 +12,6 @@ - - diff --git a/scripts/generateDocs.ts b/scripts/generateDocs.ts index c76cb1583..f9a9c5a32 100644 --- a/scripts/generateDocs.ts +++ b/scripts/generateDocs.ts @@ -12,15 +12,19 @@ import {writeFileSync} from "fs"; import LayoutConfig from "../Customizations/JSON/LayoutConfig"; import State from "../State"; import {QueryParameters} from "../Logic/Web/QueryParameters"; +import Link from "../UI/Base/Link"; -function WriteFile(filename, html: string | BaseUIElement): void { - writeFileSync(filename, Translations.W(html).AsMarkdown()); +function WriteFile(filename, html: string | BaseUIElement, autogenSource: string): void { + writeFileSync(filename, new Combine([Translations.W(html), + new Link("Generated from "+autogenSource, "../../../"+autogenSource) + ]).AsMarkdown()); } -WriteFile("./Docs/SpecialRenderings.md", SpecialVisualizations.HelpMessage) -WriteFile("./Docs/CalculatedTags.md", new Combine([SimpleMetaTagger.HelpText(), ExtraFunction.HelpText()]).SetClass("flex-col")) -WriteFile("./Docs/SpecialInputElements.md", ValidatedTextField.HelpText()); +WriteFile("./Docs/SpecialRenderings.md", SpecialVisualizations.HelpMessage, "UI/SpecialVisualisations.ts") +WriteFile("./Docs/CalculatedTags.md", new Combine([SimpleMetaTagger.HelpText(), ExtraFunction.HelpText()]).SetClass("flex-col"), + "SimpleMetaTagger and ExtraFunction") +WriteFile("./Docs/SpecialInputElements.md", ValidatedTextField.HelpText(),"ValidatedTextField.ts"); new State(new LayoutConfig({ @@ -47,7 +51,7 @@ new State(new LayoutConfig({ })) QueryParameters.GetQueryParameter("layer-", "true", "Wether or not the layer with id is shown") -WriteFile("./Docs/URL_Parameters.md", QueryParameters.GenerateQueryParameterDocs()) +WriteFile("./Docs/URL_Parameters.md", QueryParameters.GenerateQueryParameterDocs(), "QueryParameters") console.log("Generated docs") diff --git a/test.ts b/test.ts index 5e1525b22..604b2ebb7 100644 --- a/test.ts +++ b/test.ts @@ -1,40 +1,10 @@ -import {UIEventSource} from "./Logic/UIEventSource"; -import SpecialVisualizations from "./UI/SpecialVisualizations"; -import State from "./State"; +import ValidatedTextField from "./UI/Input/ValidatedTextField"; import Combine from "./UI/Base/Combine"; -import {FixedUiElement} from "./UI/Base/FixedUiElement"; -import OpeningHoursVisualization from "./UI/OpeningHours/OpeningHoursVisualization"; -import OpeningHoursPickerTable from "./UI/OpeningHours/OpeningHoursPickerTable"; -import OpeningHoursPicker from "./UI/OpeningHours/OpeningHoursPicker"; -import {OH, OpeningHour} from "./UI/OpeningHours/OpeningHours"; import {VariableUiElement} from "./UI/Base/VariableUIElement"; -import PublicHolidayInput from "./UI/OpeningHours/PublicHolidayInput"; -const tagsSource = new UIEventSource({ - id: 'id', - name: 'name', - surface: 'asphalt', - image: "https://i.imgur.com/kX3rl3v.jpg", - "image:1": "https://i.imgur.com/oHAJqMB.jpg", - "opening_hours": "mo-fr 09:00-18:00", - _country: "be", -}) - -const state = new State(undefined) -State.state = state - -const ohData = new UIEventSource("") -new OpeningHoursPicker().AttachTo("maindiv") -/* -const allSpecials = SpecialVisualizations.specialVisualizations.map(spec => { - try{ - - return new Combine([spec.funcName, spec.constr(state, tagsSource, spec.args.map(a => a.defaultValue ?? "")).SetClass("block")]) - .SetClass("flex flex-col border border-black p-2 m-2"); - }catch(e){ - console.error(e) - return new FixedUiElement("Could not construct "+spec.funcName+" due to "+e).SetClass("alert") - } -}) -new Combine(allSpecials).AttachTo("maindiv")*/ \ No newline at end of file +new Combine(ValidatedTextField.tpList.map(tp => { + const tf = ValidatedTextField.InputForType(tp.name); + + return new Combine([tf, new VariableUiElement(tf.GetValue()).SetClass("alert")]); +})).AttachTo("maindiv") \ No newline at end of file