Fixing New-CarouselItem URL parameter not functioning

src/UniversalDashboard.Materialize/Components/ud-image-carousel.jsx

@@ -1,110 +1,22 @@
 import React from 'react';
-import {Carousel} from "react-materialize";
-import $ from "jquery";
-
-export default class UdImageCarousel extends React.Component {
-
-    constructor(props){
-        super(props);
-
-        this.onCarouselButtonClick = this.onCarouselButtonClick.bind(this);
-        this.state = {
-            slideUrlLink:null
-        }
-    }
-
-    componentWillMount() {
-        this.pubSubToken = UniversalDashboard.subscribe(this.props.id, this.onIncomingEvent.bind(this));
-    }
-
-    onIncomingEvent(eventName, event) {
-        if (event.type === "syncElement") {
-            this.loadData();
+import { Slider, Slide } from "react-materialize";
+
+const UDImageCarousel = ({ items, ...props }) => {
+
+    return <Slider {...props}>
+        {
+            items.map(
+                item => <Slide
+                    style={{ ...item.style }}
+                    image={
+                        <a href={item.url}>
+                            <img alt="" src={item.imageSource} />
+                        </a>
+                    }
+                />
+            )
         }
-    }
-
-    onCarouselButtonClick(props){
-        let currentButtonParentId = props.id
-        let activeSlideHref = $(`#${currentButtonParentId} .carousel-item.active`)[0].attributes.href.value
-        this.setState({
-            slideUrlLink:activeSlideHref
-        })
-    }
-
-    render(){
-
-        // Carousel Items.
-        var carouselItems = this.props.items.map((item) => {
-            return <div
-                href={item.url} 
-                style={{
-                    backgroundColor:item.backgroundColor,
-                    backgroundImage:`url(${item.backgroundImage})`,
-                    backgroundRepeat:item.backgroundRepeat,
-                    backgroundSize:item.backgroundSize,
-                    backgroundPosition: item.backgroundPosition,
-                    color:item.fontColor
-                }}>
-                <h2 className={`${item.titlePosition}-align`} style={{
-                    color:item.fontColor,
-                    marginTop: '3em',
-                    fontSize:'48px',
-                    fontWeight:'800',
-                    }}>{item.title}</h2>
-
-                <p className={`${item.textPosition}-align`} style={{
-                    color:item.fontColor,
-                    marginTop: '1.5em',
-                    fontSize:'36px',
-                    fontWeight:'500'
-                    }}>{item.text}</p>
-            </div>
-        });
-
-        // Main carousel options.
-        var options = {
-            fullWidth:this.props.fullWidth,
-            indicators:this.props.showIndecators,
-            onCycleTo: () => {
-                if(this.props.autoCycle){
-                    this.onCarouselButtonClick(this.props)
-                    setTimeout(() => {
-                        this.instance.instance.next();
-                    },this.props.speed)
-                }
-                else{
-                    this.onCarouselButtonClick(this.props)
-                }        
-            }
-        }
-
-        // Fix item button on main carousel.
-        var btn = null;
-        if(this.props.fixButton){
-            btn = <a class="btn waves-effect white grey-text darken-text-2" href={this.state.slideUrlLink} target='_blank' >{this.props.buttonText}</a>
-        };
-
-		if(options.fullWidth) {
-			// Set the width and height of the carousel container 
-			$(`div#${this.props.id}.carousel.carousel-slider`).css({
-				"width":`${this.props.width}`,
-				"height":`${this.props.height}`
-			})
-		} else {
-			// Set the width and height of the carousel container if it is not a fullWidth
-			$(`div#${this.props.id}.carousel`).css({
-				"width":`${this.props.width}`,
-				"height":`${this.props.height}`
-			})
-		}
-
-        return (
-
-            <Carousel ref={x => this.instance = x} carouselId={this.props.id} options={options} fixedItem={btn}>
-                {carouselItems}
-            </Carousel>
-
-        )
-    }
+    </Slider>
+}
 
-}
+export default UDImageCarousel

src/UniversalDashboard.Materialize/Scripts/image-carousel.ps1

@@ -1,89 +1,75 @@
 function New-UDImageCarousel {
-    param(
-        [Parameter()]
+	param(
+		[Parameter()]
 		[ScriptBlock]$Items,
-	    [Parameter()]
-	    [string]$Id = ([Guid]::NewGuid()).ToString(),
-	    [Parameter()]
-	    [switch]$ShowIndicators,
-	    [Parameter()]
-	    [switch]$AutoCycle,
-	    [Parameter()]
-	    [int]$Speed,
-	    [Parameter()]
-	    [string]$Width,
-	    [Parameter()]
-	    [string]$Height,
-	    [Parameter()]
-	    [switch]$FullWidth,
-	    [Parameter()]
-	    [switch]$FixButton,
-	    [Parameter()]
-	    [string]$ButtonText
-    )
+		[Parameter()]
+		[string]$Id = ([Guid]::NewGuid()).ToString(),
+		[Parameter()]
+		[alias("ShowIndicators")] 
+		[switch]$Indicators,
+		[Parameter()]
+		[alias("FullWidth")]
+		[switch]$FullScreen,
+		[Parameter()]
+		[alias("Speed")]
+		[int]$Interval = 6000,
+		[Parameter()]
+		[int]$Duration = 500,
+		[Parameter()]
+		[int]$Height = 400
+	)
 
-    End {
-        @{
-            type = "image-carousel"
-            isPlugin = $true
-            assetId = $AssetId
+	End {
 
-            items = $Items.Invoke()
-            id = $id 
-            showIndicators = $ShowIndicators.IsPresent
-            autoCycle = $AutoCycle.IsPresent
-            speed = $Speed
-            width = $Width
-            height = $Height
-            fullWidth = $FullWidth.IsPresent
-            fixButton = $FixButton.IsPresent
-            buttonText = $ButtonText
-        }
-    }
+		$Options = @{
+			duration   = $Duration
+			height     = $Height 
+			interval   = $Interval
+			indicators = $Indicators.IsPresent
+		}
+
+		@{
+			type       = "image-carousel"
+			isPlugin   = $true
+			assetId    = $AssetId
+			items      = $Items.Invoke()
+			id         = $id 
+			fullscreen = $FullScreen.IsPresent
+			options    = $Options
+		}
+	}
 }
 
 function New-UDImageCarouselItem {
-    param(
-        [Parameter()]
-		[string]$Text,
-	    [Parameter()]
-	    [UniversalDashboard.Models.DashboardColor]$BackgroundColor = "#000",
-	    [Parameter()]
-	    [string]$BackgroundImage,
-	    [Parameter()]
-	    [UniversalDashboard.Models.DashboardColor]$FontColor = "#fff",
-	    [Parameter()]
-	    [string]$BackgroundRepeat,
-	    [Parameter()]
-	    [string]$BackgroundSize,
-	    [Parameter()]
-	    [string]$BackgroundPosition,
-	    [Parameter()]
-	    [string]$TitlePosition,
-	    [Parameter()]
-	    [string]$TextPosition,
-	    [Parameter()]
-	    [string]$Id = ([Guid]::NewGuid()).ToString(),
-	    [Parameter()]
-	    [string]$Title,
-	    [Parameter()]
-	    [string]$Url
-    )
+	param(
+		[Parameter()]
+		[hashtable]$Style,
+		[Parameter()]
+		[string]$Id = ([Guid]::NewGuid()).ToString(),
+		[Parameter()]
+		[alias("BackgroundImage")]
+		[string]$ImageSource,
+		[Parameter()]
+		[string]$Url
+	)
 
-    End {
-        @{
-            text = $Text 
-            backgroundColor = $BackgroundColor.HtmlColor
-            backgroundImage = $BackgroundImage
-            fontColor = $FontColor.HtmlColor
-            backgroundRepeat = $BackgroundRepeat
-            backgroundSize = $BackgroundSize
-            backgroundPosition = $BackgroundPosition
-            titlePosition = $TitlePosition
-            textPosition = $TextPosition
-            id = $id
-            title = $Title
-            url = $Url
-        }
-    }
+	End {
+		@{			
+			# all those properties can be replace with the Style property
+			# ----
+			# backgroundColor = $BackgroundColor.HtmlColor
+			# backgroundImage = $BackgroundImage
+			# fontColor = $FontColor.HtmlColor
+			# backgroundRepeat = $BackgroundRepeat
+			# backgroundSize = $BackgroundSize
+			# backgroundPosition = $BackgroundPosition
+			# titlePosition = $TitlePosition
+			# textPosition = $TextPosition
+			# ----
+			style       = $Style
+			id          = $id
+			url         = $Url
+			imageSource = $ImageSource
+		}
+	}
 }

src/UniversalDashboard/Help/New-UDImageCarousel.md

@@ -26,10 +26,10 @@ Add image carousel to UniversalDashboard you can set the carousel to be full scr
 ### Example 1
 ```
 New-UDImageCarousel -Items {
-        New-UDImageCarouselItem -BackgroundImage https://i0.wp.com/ironmansoftware.com/wp-content/uploads/2019/01/azure.png -BackgroundRepeat = 'no-repeat' -BackgroundSize = 'cover' -BackgroundColor  = '#3f51b5'
-        New-UDImageCarouselItem -BackgroundImage https://i2.wp.com/ironmansoftware.com/wp-content/uploads/2019/01/component.png -BackgroundRepeat = 'no-repeat' -BackgroundSize = 'cover' -BackgroundColor  = '#3f51b5'
-        New-UDImageCarouselItem -BackgroundImage https://i1.wp.com/ironmansoftware.com/wp-content/uploads/2019/01/dsl.png -BackgroundRepeat = 'no-repeat' -BackgroundSize = 'cover' -BackgroundColor  = '#3f51b5'
-}  -Height 650px -FullWidth -FixButton -ButtonText 'GO TO..' -ShowIndicators
+        New-UDImageCarouselItem -ImageSource https://hdqwalls.com/wallpapers/deadpool-baby-yoda-c6.jpg -Url 'https://hdqwalls.com/wallpapers/deadpool-baby-yoda-c6.jpg'
+        New-UDImageCarouselItem -ImageSource https://hdqwalls.com/wallpapers/black-widow4k-5b.jpg -Url 'https://hdqwalls.com/wallpapers/black-widow4k-5b.jpg'
+        New-UDImageCarouselItem -ImageSource https://hdqwalls.com/wallpapers/batman-fire-4k-xv.jpg -Url 'https://hdqwalls.com/wallpapers/batman-fire-4k-xv.jpg'
+} -Indicators
 ```
 
 Create new image carousel with 3 slides and with fixed button on every slide.