Active Tab parameter

examples/CyclingElements.ps1

@@ -0,0 +1,86 @@
+Import-Module Pode -MaximumVersion 2.99.99 -Force
+Import-Module ..\src\Pode.Web.psm1 -Force
+
+Start-PodeServer {
+    # add a simple endpoint
+    Add-PodeEndpoint -Address localhost -Port 8090 -Protocol Http
+    New-PodeLoggingMethod -Terminal | Enable-PodeErrorLogging
+
+    # set the use of templates, and set a login page
+    Use-PodeWebTemplates -Title 'Cycling Elements' -Theme Dark
+
+    $tabs = New-PodeWebTabs -ActiveTab "Tab2" -Tabs @(
+        New-PodeWebTab -Name Tab1 -Content @(
+            New-PodeWebContainer -Content @(
+                New-PodeWebText -Value 'Hello World'
+            )
+        )
+        New-PodeWebTab -Name Tab2 -Content @(
+            New-PodeWebContainer -Content @(
+                New-PodeWebText -Value 'Hello There'
+            )
+        )
+        New-PodeWebTab -Name Tab3 -Content @(
+            New-PodeWebContainer -Content @(
+                New-PodeWebText -Value 'HI!'
+            )
+        )
+    )
+
+    Add-PodeWebPage -Name 'Tabs' -Path '/' -HomePage -Content $tabs -Title 'Tabs' -Icon 'Tab'
+
+    $tabs = New-PodeWebTabs -Tabs @(
+        New-PodeWebTab -Name Tab1 -Content @(
+            New-PodeWebContainer -Content @(
+                New-PodeWebText -Value 'Hello World'
+            )
+        )
+        New-PodeWebTab -Name Tab2 -Content @(
+            New-PodeWebContainer -Content @(
+                New-PodeWebText -Value 'Hello There'
+            )
+        )
+        New-PodeWebTab -Name Tab3 -Content @(
+            New-PodeWebContainer -Content @(
+                New-PodeWebText -Value 'HI!'
+            )
+        )
+    )
+
+    Add-PodeWebPage -Name 'Tabs (No Active tab)' -Content $tabs -Title 'Tabs' -Icon 'Tab'
+
+    $Accordion = New-PodeWebAccordion -Bellows @(
+        New-PodeWebBellow -Name Bellow1 -Content @(
+            New-PodeWebText -Value 'Hello 1'
+        )
+        New-PodeWebBellow -Name Bellow2 -Content @(
+            New-PodeWebText -Value 'Hello 2'
+        )
+        New-PodeWebBellow -Name Bellow3 -Content @(
+            New-PodeWebText -Value 'Hello 3'
+        )
+    )
+
+    Add-PodeWebPage -Name 'Accordion' -Content $Accordion -Title 'Accordion' -Icon 'view-split-horizontal'
+
+    $Carousel = New-PodeWebCarousel -Slides @(
+        New-PodeWebSlide -Title Slide1 -Message 'This is a message' -Content @(
+            New-PodeWebContainer -Nobackground -Content @(
+                New-PodeWebQuote -Value 'Pode is awesome!' -Source 'Badgerati' -Alignment Center
+            )
+        )
+        New-PodeWebSlide -Title Slide2 -Message 'This is a message' -Content @(
+            New-PodeWebContainer -Nobackground -Content @(
+                New-PodeWebQuote -Value 'You should try Pode.Web!' -Source 'Badgerati' -Alignment Center
+            )
+        )
+        New-PodeWebSlide -Title Slide3 -Message 'This is a message' -Content @(
+            New-PodeWebContainer -Nobackground -Content @(
+                New-PodeWebQuote -Value 'PowerShell rocks!' -Source 'Badgerati' -Alignment Center
+            )
+        )
+    )
+
+    Add-PodeWebPage -Name 'Carousel' -Content $Carousel -Title 'Carousel' -Icon 'view-carousel'
+
+}

src/Public/Layouts.ps1

@@ -85,7 +85,10 @@ function New-PodeWebTabs {
         $CycleInterval = 15,
 
         [switch]
-        $Cycle
+        $Cycle,
+
+        [string]
+        $activeTab
     )
 
     if (!(Test-PodeWebContent -Content $Tabs -ComponentType Layout -ObjectType Tab)) {
@@ -105,6 +108,7 @@ function New-PodeWebTabs {
             Enabled  = $Cycle.IsPresent
             Interval = ($CycleInterval * 1000)
         }
+        ActiveElement = $activeTab
     }
 }
 

src/Templates/Public/scripts/templates.js

@@ -1092,7 +1092,7 @@ class PodeTextualElement extends PodeContentElement {
 class PodeCyclingElement extends PodeContentElement {
     constructor(data, sender, opts) {
         super(data, sender, opts);
-
+        this.activeElement = data.ActiveElement
         this.cycling = {
             enabled: data.Cycle ? (data.Cycle.Enabled ?? false) : false,
             interval: data.Cycle ? (data.Cycle.Interval ?? 0) : 0,
@@ -1147,7 +1147,7 @@ class PodeCyclingElement extends PodeContentElement {
 class PodeCyclingChildElement extends PodeContentElement {
     constructor(data, sender, opts) {
         super(data, sender, opts);
-        this.active = this.child.isFirst;
+        this.active = (opts.parent.activeElement) ? (data.Name == opts.parent.activeElement) : this.child.isFirst;
     }
 
     open(data, sender, opts) {
@@ -3924,17 +3924,19 @@ class PodeTabs extends PodeCyclingElement {
 
         var icon = element.setIcon(data.Icon, true);
 
+        var isActive = (this.activeElement) ? (element.name == this.activeElement) : (element.child.isFirst)
+
         var html = `<li class='nav-item' role='presentation'>
             <a
                 id='${element.id}'
                 name='${element.name}'
-                class='nav-link ${element.child.isFirst ? 'active' : ''}'
+                class='nav-link ${isActive ? 'active' : ''}'
                 data-toggle='tab'
                 href='#${element.id}_content'
                 for='${element.uuid}'
                 role='tab'
                 aria-controls='${element.id}_content'
-                aria-selected='${element.child.isFirst}'>
+                aria-selected='${isActive}'>
                 ${icon}
                 ${data.DisplayName}
             </a>
@@ -3950,16 +3952,16 @@ class PodeTab extends PodeCyclingChildElement {
 
     constructor(data, sender, opts) {
         super(data, sender, opts);
-
         if (!this.checkParentType('tabs')) {
             throw 'Tab element can only be used in Tabs'
         }
     }
 
     new(data, sender, opts) {
+
         return `<div
             id='${this.id}_content'
-            class='tab-pane fade show ${this.child.isFirst ? 'active' : ''}'
+            class='tab-pane fade show ${this.active ? 'active' : ''}'
             pode-object="${this.getType()}"
             pode-id="${this.uuid}"
             role='tabpanel'