diff --git a/UI/Image/ImgurImage.ts b/UI/Image/ImgurImage.ts index 176e163729..93355df4e3 100644 --- a/UI/Image/ImgurImage.ts +++ b/UI/Image/ImgurImage.ts @@ -6,6 +6,7 @@ import Combine from "../Base/Combine"; import Attribution from "./Attribution"; import BaseUIElement from "../BaseUIElement"; import Img from "../Base/Img"; +import {VariableUiElement} from "../Base/VariableUIElement"; export class ImgurImage extends UIElement { @@ -19,7 +20,7 @@ export class ImgurImage extends UIElement { private readonly _imageLocation: string; constructor(source: string) { - super(undefined) + super() this._imageLocation = source; if (ImgurImage.allLicenseInfos[source] !== undefined) { this._imageMeta = ImgurImage.allLicenseInfos[source]; @@ -31,25 +32,15 @@ export class ImgurImage extends UIElement { self._imageMeta.setData(license) }) } - - this.ListenTo(this._imageMeta); - } InnerRender(): BaseUIElement { const image = new Img( this._imageLocation); - if(this._imageMeta.data === null){ - return image; - } - - const meta = this._imageMeta.data; return new Combine([ image, - new Attribution(meta.artist, meta.license, undefined), - - ]).SetClass('block relative') - ; + new VariableUiElement(this._imageMeta.map(meta => (meta === undefined || meta === null) ? undefined : new Attribution(meta.artist, meta.license, undefined))) + ]).SetClass('block relative h-full'); } diff --git a/UI/Image/MapillaryImage.ts b/UI/Image/MapillaryImage.ts index 9b2edf5655..53ec504313 100644 --- a/UI/Image/MapillaryImage.ts +++ b/UI/Image/MapillaryImage.ts @@ -53,7 +53,7 @@ export class MapillaryImage extends UIElement { return new Combine([ image, new Attribution(meta.artist, meta.license, Svg.mapillary_svg()) - ]).SetClass("relative block"); + ]).SetClass("relative block h-full"); } diff --git a/UI/Image/SlideShow.ts b/UI/Image/SlideShow.ts index 6a1ef5dac4..eea8ea5668 100644 --- a/UI/Image/SlideShow.ts +++ b/UI/Image/SlideShow.ts @@ -1,5 +1,7 @@ import {UIEventSource} from "../../Logic/UIEventSource"; import BaseUIElement from "../BaseUIElement"; +import {Utils} from "../../Utils"; +import Combine from "../Base/Combine"; export class SlideShow extends BaseUIElement { @@ -8,7 +10,7 @@ export class SlideShow extends BaseUIElement { constructor(embeddedElements: UIEventSource) { super() - this.embeddedElements = embeddedElements; + this.embeddedElements =embeddedElements; } protected InnerConstructElement(): HTMLElement { @@ -23,11 +25,12 @@ export class SlideShow extends BaseUIElement { el.removeChild(el.lastChild) } + elements = Utils.NoNull(elements).map(el => new Combine([el]) + .SetClass("block relative ml-1 bg-gray-200 m-1 rounded slideshow-item") + .SetStyle("min-width: 150px; width: max-content; height: var(--image-carousel-height);max-height: var(--image-carousel-height);") + ) + for (const element of elements ?? []) { - element - .SetClass("block ml-1; bg-gray-200") - .SetStyle("min-width: 150; max-height: var(--image-carousel-height); min-height: var(--image-carousel-height)") - el.appendChild(element.ConstructElement()) } }); diff --git a/UI/Image/WikimediaImage.ts b/UI/Image/WikimediaImage.ts index 754c8dab5c..85b4c50a49 100644 --- a/UI/Image/WikimediaImage.ts +++ b/UI/Image/WikimediaImage.ts @@ -51,7 +51,7 @@ export class WikimediaImage extends UIElement { return new Combine([ image, new Attribution(meta.artist, meta.license, Svg.wikimedia_commons_white_svg()) - ]).SetClass("relative block") + ]).SetClass("relative block h-full") } diff --git a/index.css b/index.css index c825383fd8..7e22c57b99 100644 --- a/index.css +++ b/index.css @@ -89,7 +89,6 @@ svg, img { display: unset; } - a { color: var(--foreground-color); } @@ -358,3 +357,9 @@ li::marker { height: 1em; max-width: 1em; } + + +.slideshow-item img{ + height: 100%; + width: unset; +} \ No newline at end of file diff --git a/test.ts b/test.ts index 92dfa62737..8dc3264023 100644 --- a/test.ts +++ b/test.ts @@ -5,8 +5,23 @@ import {UIEventSource} from "./Logic/UIEventSource"; import TagRenderingConfig from "./Customizations/JSON/TagRenderingConfig"; import State from "./State"; import TagRenderingQuestion from "./UI/Popup/TagRenderingQuestion"; +import {SlideShow} from "./UI/Image/SlideShow"; +import {FixedUiElement} from "./UI/Base/FixedUiElement"; +import Img from "./UI/Base/Img"; +import {ImgurImage} from "./UI/Image/ImgurImage"; +function TestSlideshow(){ + const elems = new UIEventSource([ + new FixedUiElement("A"), + new FixedUiElement("qmsldkfjqmlsdkjfmqlskdjfmqlksdf").SetClass("text-xl"), + new Img("https://i.imgur.com/8lIQ5Hv.jpg"), + new ImgurImage("https://i.imgur.com/y5XudzW.jpg"), + new Img("https://www.grunge.com/img/gallery/the-real-reason-your-cat-sleeps-so-much/intro-1601496900.webp") + ]) + new SlideShow(elems).AttachTo("maindiv") +} + function TestTagRendering(){ State.state = new State(undefined) const tagsSource = new UIEventSource({ @@ -47,4 +62,4 @@ function TestAllInputMethods(){ } -TestTagRendering() \ No newline at end of file +TestSlideshow() \ No newline at end of file