From d26602120a21fd9d7a1ca3d5b091ac86402b337c Mon Sep 17 00:00:00 2001 From: Staples1887 <59692325+Staples1887@users.noreply.github.com> Date: Mon, 5 Feb 2024 09:37:22 +0000 Subject: [PATCH 1/5] Added Tabs Example --- examples/tabs.ps1 | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 examples/tabs.ps1 diff --git a/examples/tabs.ps1 b/examples/tabs.ps1 new file mode 100644 index 00000000..638791ce --- /dev/null +++ b/examples/tabs.ps1 @@ -0,0 +1,31 @@ +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 'Basic tabs' -Theme Dark + + $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!' + ) + ) + ) + + Set-PodeWebHomePage -Content $tabs -Title 'Tabs' +} \ No newline at end of file From be4eac7bdb676d551eb7db5328ed75e4dd58ea6d Mon Sep 17 00:00:00 2001 From: Staples1887 <59692325+Staples1887@users.noreply.github.com> Date: Mon, 5 Feb 2024 11:20:26 +0000 Subject: [PATCH 2/5] Changes tabs example to use add-podewebpage --- examples/tabs.ps1 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/tabs.ps1 b/examples/tabs.ps1 index 638791ce..dea9fba5 100644 --- a/examples/tabs.ps1 +++ b/examples/tabs.ps1 @@ -9,7 +9,7 @@ Start-PodeServer { # set the use of templates, and set a login page Use-PodeWebTemplates -Title 'Basic tabs' -Theme Dark - $tabs = New-PodeWebTabs -Tabs @( + $tabs = New-PodeWebTabs -ActiveTab Tab2 -Tabs @( New-PodeWebTab -Name Tab1 -Content @( New-PodeWebContainer -Content @( New-PodeWebText -Value 'Hello World' @@ -27,5 +27,5 @@ Start-PodeServer { ) ) - Set-PodeWebHomePage -Content $tabs -Title 'Tabs' + Add-PodeWebPage -Name 'Home' -Path '/' -HomePage -Content $tabs -Title 'Tabs' } \ No newline at end of file From e6dfab83a394477cd2c22d6190e5b44d93146c58 Mon Sep 17 00:00:00 2001 From: Staples1887 <59692325+Staples1887@users.noreply.github.com> Date: Mon, 12 Feb 2024 01:11:36 +0000 Subject: [PATCH 3/5] Added Ability to select active element to the PodeCyclingElement and PodeCyclingChildElement. Added Active Tab Parameter to New-PodeWebTabs. Added Example for testing. --- examples/CyclingElements.ps1 | 86 +++++++++++++++++++++++ examples/tabs.ps1 | 31 -------- src/Public/Layouts.ps1 | 6 +- src/Templates/Public/scripts/templates.js | 23 ++++-- 4 files changed, 108 insertions(+), 38 deletions(-) create mode 100644 examples/CyclingElements.ps1 delete mode 100644 examples/tabs.ps1 diff --git a/examples/CyclingElements.ps1 b/examples/CyclingElements.ps1 new file mode 100644 index 00000000..bb71432f --- /dev/null +++ b/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' + +} \ No newline at end of file diff --git a/examples/tabs.ps1 b/examples/tabs.ps1 deleted file mode 100644 index dea9fba5..00000000 --- a/examples/tabs.ps1 +++ /dev/null @@ -1,31 +0,0 @@ -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 'Basic tabs' -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 'Home' -Path '/' -HomePage -Content $tabs -Title 'Tabs' -} \ No newline at end of file diff --git a/src/Public/Layouts.ps1 b/src/Public/Layouts.ps1 index ea55cc36..5d91c9c1 100644 --- a/src/Public/Layouts.ps1 +++ b/src/Public/Layouts.ps1 @@ -88,7 +88,10 @@ function New-PodeWebTabs $CycleInterval = 15, [switch] - $Cycle + $Cycle, + + [string] + $activeTab ) if (!(Test-PodeWebContent -Content $Tabs -ComponentType Layout -ObjectType Tab)) { @@ -108,6 +111,7 @@ function New-PodeWebTabs Enabled = $Cycle.IsPresent Interval = ($CycleInterval * 1000) } + ActiveElement = $activeTab } } diff --git a/src/Templates/Public/scripts/templates.js b/src/Templates/Public/scripts/templates.js index fcbe15cf..87a035a3 100644 --- a/src/Templates/Public/scripts/templates.js +++ b/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,8 @@ class PodeCyclingElement extends PodeContentElement { class PodeCyclingChildElement extends PodeContentElement { constructor(data, sender, opts) { super(data, sender, opts); - this.active = this.child.isFirst; + console.log("data.name:", data.Name) + this.active = (opts.parent.activeElement) ? (data.Name == opts.parent.activeElement) : this.child.isFirst; } open(data, sender, opts) { @@ -3916,6 +3917,10 @@ class PodeTabs extends PodeCyclingElement { addChild(element, data, sender, opts) { super.addChild(element, data, sender, opts); + console.log("Tabs:") + console.log(element) + console.log(element.active) + console.log(data) // add new tab selector if (element.getType() !== 'tab') { @@ -3924,17 +3929,22 @@ class PodeTabs extends PodeCyclingElement { var icon = element.setIcon(data.Icon, true); + var isActive = (this.activeElement) ? (element.name == this.activeElement) : (element.child.isFirst) + console.log("Active Element:",this.activeElement) + console.log("Name:", element.name) + console.log("isFirst:", element.child.isFirst) + console.log("isActive:", isActive) var html = `