Small fixes to the Slideshow

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),
+           new VariableUiElement(this._imageMeta.map(meta => (meta === undefined || meta === null) ? undefined : new Attribution(meta.artist, meta.license, undefined)))
-            
+        ]).SetClass('block relative h-full');
-        ]).SetClass('block relative')
-            ;
 
     }
 

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");
 
     }
 

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<BaseUIElement[]>) {
         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())
             }
         });

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")
 
     }
 

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;
+}

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()
+TestSlideshow()