Merge pull request #584 from Badgerati/update_links

Adds Actions to allow Updating, Enabling, and Disabling Links

docs/Getting-Started/Migrating/08-to-10.md

@@ -181,6 +181,10 @@ In principle, all of the parameters on `Set-PodeWebHomePage` should map over 1-t
 
 The quickest way for most implementations will be to replace all occurrences of `Set-PodeWebHomePage` with `Add-PodeWebPage -Name 'Home' -Path '/' -HomePage`.
 
+## Links
+
+The `-Source` parameter on `New-PodeWebLink` has been renamed to `-Url`.
+
 ### Default Root Page
 
 Before v1.X, when `Use-PodeWebTemplates` was called it would set up an empty root (`/`) page for you as the Home Page - meaning you were always forced to have a "Home" page in the sidebar. In v1.X this is no longer the case, a default root Home page is no longer automatically configured.

docs/Tutorials/Actions/Button.md

@@ -36,7 +36,7 @@ New-PodeWebCard -Content @(
 
 ## Disable
 
-To disable a enabled button on the page, you can use [`Disable-PodeWebButton`](../../../Functions/Actions/Disable-PodeWebButton):
+To disable an enabled button on the page, you can use [`Disable-PodeWebButton`](../../../Functions/Actions/Disable-PodeWebButton):
 
 ```powershell
 New-PodeWebCard -Content @(
@@ -54,7 +54,7 @@ New-PodeWebCard -Content @(
 
 You can update a button's Icon, DisplayName, Colour, and Size using [`Update-PodeWebButton`](../../../Functions/Actions/Update-PodeWebButton).
 
-For example, just change a solid button to be yellow and outlined:
+For example, to change a solid button to be yellow and outlined:
 
 ```powershell
 New-PodeWebCard -Content @(

docs/Tutorials/Actions/Link.md

@@ -0,0 +1,47 @@
+# Link
+
+This page details the actions available to Links.
+
+## Enable
+
+To enable a disabled link on the page, you can use [`Enable-PodeWebLink`](../../../Functions/Actions/Enable-PodeWebLink):
+
+```powershell
+New-PodeWebCard -Content @(
+    New-PodeWebLink -Value 'Google' -Url 'https://www.google.com' -Id 'link' -Disabled
+
+    New-PodeWebButton -Name 'Example' -ScriptBlock {
+        Enable-PodeWebLink -Id 'link'
+    }
+)
+```
+
+## Disable
+
+To disable an enabled link on the page, you can use [`Disable-PodeWebLink`](../../../Functions/Actions/Disable-PodeWebLink):
+
+```powershell
+New-PodeWebCard -Content @(
+    New-PodeWebLink -Value 'Google' -Url 'https://www.google.com' -Id 'link'
+
+    New-PodeWebButton -Name 'Example' -ScriptBlock {
+        Disable-PodeWebLink -Id 'link'
+    }
+)
+```
+
+## Update
+
+You can update a link's URL, Value, or Tab state using [`Update-PodeWebLink`](../../../Functions/Actions/Update-PodeWebLink).
+
+For example, to change the URL of a link from Google to DuckDuckGo, including its Value:
+
+```powershell
+New-PodeWebCard -Content @(
+    New-PodeWebLink -Value 'Google' -Url 'https://www.google.com' -Id 'link'
+
+    New-PodeWebButton -Name 'Example' -ScriptBlock {
+        Update-PodeWebLink -Id 'link' -Url 'https://www.duckduckgo.com' -Value 'DuckDuckGo'
+    }
+)
+```

docs/Tutorials/ClassAndStyles.md

@@ -44,7 +44,7 @@ For example, the following would display a paragraph with yellow text:
 ```powershell
 New-PodeWebParagraph -Content @(
     New-PodeWebText -Value 'And then here is some more text, that also includes a '
-    New-PodeWebLink -Value 'link' -Source 'https://google.com'
+    New-PodeWebLink -Value 'link' -Url 'https://google.com'
     New-PodeWebText -Value ' that takes you to Google'
 ) |
     Add-PodeWebStyle -Key 'color' -Value 'yellow'

docs/Tutorials/Elements/Alert.md

@@ -1,8 +1,8 @@
 # Alert
 
-| Support | |
-| ------- |-|
-| Events | No |
+| Support |     |
+| ------- | --- |
+| Events  | No  |
 
 An alert is a colour block containing information text; alerts can for warning, errors, tips, etc. To add an alert you use [`New-PodeWebAlert`](../../../Functions/Elements/New-PodeWebAlert), and supply either a `-Value` or `-Content`:
 
@@ -11,7 +11,7 @@ New-PodeWebCard -Content @(
     New-PodeWebAlert -Value 'Everything looks to be OK here!' -Type Success
     New-PodeWebAlert -Type Error -Content @(
         New-PodeWebText -Value 'Eek, an error! Go'
-        New-PodeWebLink -Value 'here' -Source 'https://google.com'
+        New-PodeWebLink -Value 'here' -Url 'https://google.com'
         New-PodeWebText -Value 'for more information.'
     )
     New-PodeWebAlert -Value 'Example of a Note alarm' -Type Note

docs/Tutorials/Elements/Button.md

@@ -1,14 +1,14 @@
 # Button
 
-| Support | |
-| ------- |-|
-| Events | No |
+| Support |     |
+| ------- | --- |
+| Events  | No  |
 
 To display a button on your page you use [`New-PodeWebButton`](../../../Functions/Elements/New-PodeWebButton); a button can either be dynamic and run custom logic via a `-ScriptBlock`, or it can redirect a user to a `-Url`.
 
 ## Dynamic
 
-A dynamic button is one that takes a custom `-ScriptBlock`, and when clicked will invoke that logic. You can run whatever you like, including actions for Pode.Web to action against.
+A dynamic button takes a custom `-ScriptBlock`, and when clicked will invoke that logic. You can run whatever you like, including actions for Pode.Web to action against.
 
 When using a dynamic button you can also supply a `-DataValue`, which is a way of supplying a special value/identity when the button is clicked. If supplied, this value is available in your scriptblock via `$WebEvent.Data['Value']`.
 
@@ -58,7 +58,7 @@ New-PodeWebButton -Name 'Repository' -Icon Link -Url 'https://github.com/Badgera
 
 ## Outlined
 
-By default a button will be displayed as a block colour, but you can show a button as an outline by using the `-Outline` switch:
+By default, a button will be displayed as a block colour, but you can show a button as an outline by using the `-Outline` switch:
 
 ```powershell
 New-PodeWebButton -Name 'Example' -Colour Cyan -Outline -ScriptBlock {
@@ -72,4 +72,4 @@ Which looks like below:
 
 ## Grouping
 
-You can group a series of Buttons together by using a [Button Group](../ButtonGroup).
+You can group a series of Buttons by using a [Button Group](../ButtonGroup).

docs/Tutorials/Elements/Link.md

@@ -1,15 +1,15 @@
 # Link
 
-| Support | |
-| ------- |-|
-| Events | Yes |
+| Support |     |
+| ------- | --- |
+| Events  | Yes |
 
-This will render a hyperlink (`<a>`) to your page, using [`New-PodeWebLink`](../../../Functions/Elements/New-PodeWebLink). You need to supply a `-Source` (the href), and a `-Value` to show to the user:
+This will render a hyperlink (`<a>`) to your page, using [`New-PodeWebLink`](../../../Functions/Elements/New-PodeWebLink). You need to supply a `-Url` (the href), and a `-Value` to show to the user:
 
 ```powershell
 New-PodeWebCard -Content @(
     New-PodeWebText -Value 'This is a link to '
-    New-PodeWebLink -Source 'https://github.com/Badgerati/Pode' -Value 'Pode'
+    New-PodeWebLink -Url 'https://github.com/Badgerati/Pode' -Value 'Pode'
 )
 ```
 
@@ -22,5 +22,5 @@ Which looks like below:
 To open the link in a new tab, supply the `-NewTab` switch:
 
 ```powershell
-New-PodeWebLink -Source 'https://github.com/Badgerati/Pode' -Value 'Pode' -NewTab
+New-PodeWebLink -Url 'https://github.com/Badgerati/Pode' -Value 'Pode' -NewTab
 ```

docs/Tutorials/Elements/Paragraph.md

@@ -1,8 +1,8 @@
 # Paragraph
 
-| Support | |
-| ------- |-|
-| Events | No |
+| Support |     |
+| ------- | --- |
+| Events  | No  |
 
 You can display a `-Value`, or other `-Content`, within a paragraph block using [`New-PodeWebParagraph`](../../../Functions/Elements/New-PodeWebParagraph). This lets you separate blocks of text/elements neatly on a page:
 
@@ -11,7 +11,7 @@ New-PodeWebCard -Content @(
     New-PodeWebParagraph -Value 'This is some random text within a paragraph'
     New-PodeWebParagraph -Content @(
         New-PodeWebText -Value 'And then here is some more text, that also includes a '
-        New-PodeWebLink -Value 'link' -Source 'https://google.com'
+        New-PodeWebLink -Value 'link' -Url 'https://google.com'
         New-PodeWebText -Value ' that takes you to Google'
     )
 )

examples/class_and_style.ps1

@@ -20,7 +20,7 @@ Start-PodeServer {
 
         New-PodeWebParagraph -Content @(
             New-PodeWebText -Value 'And then here is some more text, that also includes a '
-            New-PodeWebLink -Value 'link' -Source 'https://google.com'
+            New-PodeWebLink -Value 'link' -Url 'https://google.com'
             New-PodeWebText -Value ' that takes you to Google'
         ) |
             Add-PodeWebStyle -Key 'color' -Value 'yellow' |

examples/full.ps1

@@ -82,7 +82,7 @@ Start-PodeServer -StatusPageExceptions Show {
         )
         New-PodeWebParagraph -Content @(
             New-PodeWebText -Value "Look, here's a "
-            New-PodeWebLink -Id 'link_test' -Source 'https://github.com/badgerati/pode' -Value 'link' -NewTab
+            New-PodeWebLink -Id 'link_test' -Url 'https://github.com/badgerati/pode' -Value 'link' -NewTab
             New-PodeWebText -Value '! '
             New-PodeWebBadge -Id 'bdg_test' -Value 'Sweet!' -Colour Cyan |
                 Register-PodeWebEvent -Type Click -NoAuth -ScriptBlock {

examples/full_custom_auth.ps1

@@ -101,7 +101,7 @@ Start-PodeServer -StatusPageExceptions Show {
         )
         New-PodeWebParagraph -Content @(
             New-PodeWebText -Value "Look, here's a "
-            New-PodeWebLink -Source 'https://github.com/badgerati/pode' -Value 'link' -NewTab
+            New-PodeWebLink -Url 'https://github.com/badgerati/pode' -Value 'link' -NewTab
             New-PodeWebText -Value '! '
             New-PodeWebBadge -Id 'bdg_test' -Value 'Sweet!' -Colour Cyan |
                 Register-PodeWebEvent -Type Click -NoAuth -ScriptBlock {

examples/full_iis.ps1

@@ -59,7 +59,7 @@ Start-PodeServer -StatusPageExceptions Show {
         )
         New-PodeWebParagraph -Content @(
             New-PodeWebText -Value "Look, here's a "
-            New-PodeWebLink -Source 'https://github.com/badgerati/pode' -Value 'link' -NewTab
+            New-PodeWebLink -Url 'https://github.com/badgerati/pode' -Value 'link' -NewTab
             New-PodeWebText -Value '! '
             New-PodeWebBadge -Id 'bdg_test' -Value 'Sweet!' -Colour Cyan |
                 Register-PodeWebEvent -Type Click -ScriptBlock {

examples/links.ps1

@@ -0,0 +1,35 @@
+Import-Module Pode -MaximumVersion 2.99.99 -Force
+Import-Module ..\src\Pode.Web.psm1 -Force
+
+Start-PodeServer -Browse {
+    # 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 'Links Example' -Theme Dark
+
+    # home page with link togglging
+    Add-PodeWebPage -Name 'Home' -Path '/' -HomePage -Title 'Homepage' -ScriptBlock {
+        New-PodeWebCard -Name 'Link' -Content @(
+            New-PodeWebLink -Value 'Google' -Url 'https://www.google.com' -Id 'link' -NewTab
+        )
+
+        New-PodeWebCard -Name 'Update Link' -Content @(
+            New-PodeWebButtonGroup -Buttons @(
+                New-PodeWebButton -Name 'Update to Goole' -ScriptBlock {
+                    Update-PodeWebLink -Id 'link' -Value 'Google' -Url 'https://www.google.com'
+                }
+                New-PodeWebButton -Name 'Update to DuckDuckGo' -ScriptBlock {
+                    Update-PodeWebLink -Id 'link' -Value 'DuckDuckGo' -Url 'https://www.duckduckgo.com'
+                }
+                New-PodeWebButton -Name 'Disable Link' -ScriptBlock {
+                    Disable-PodeWebLink -Id 'link'
+                }
+                New-PodeWebButton -Name 'Enable Link' -ScriptBlock {
+                    Enable-PodeWebLink -Id 'link'
+                }
+            )
+        )
+    }
+}

src/Public/Actions.ps1

@@ -2839,4 +2839,65 @@ function Submit-PodeWebElementGroup {
         ObjectType = 'Element-Group'
         ID         = $Id
     }
+}
+
+function Enable-PodeWebLink {
+    [CmdletBinding()]
+    param(
+        [Parameter(Mandatory = $true)]
+        [string]
+        $Id
+    )
+
+    Send-PodeWebAction -Value @{
+        Operation  = 'Enable'
+        ObjectType = 'Link'
+        ID         = $Id
+    }
+}
+
+function Disable-PodeWebLink {
+    [CmdletBinding()]
+    param(
+        [Parameter(Mandatory = $true)]
+        [string]
+        $Id
+    )
+
+    Send-PodeWebAction -Value @{
+        Operation  = 'Disable'
+        ObjectType = 'Link'
+        ID         = $Id
+    }
+}
+
+function Update-PodeWebLink {
+    [CmdletBinding()]
+    param(
+        [Parameter(Mandatory = $true)]
+        [string]
+        $Id,
+
+        [Parameter()]
+        [string]
+        $Url,
+
+        [Parameter()]
+        [string]
+        $Value,
+
+        [Parameter()]
+        [ValidateSet('Unchanged', 'SameTab', 'NewTab')]
+        [string]
+        $TabState = 'Unchanged'
+    )
+
+    Send-PodeWebAction -Value @{
+        Operation  = 'Update'
+        ObjectType = 'Link'
+        ID         = $Id
+        Url        = (Add-PodeWebAppPath -Url $Url)
+        Value      = [System.Net.WebUtility]::HtmlEncode($Value)
+        TabState   = $TabState.ToLowerInvariant()
+    }
 }

src/Public/Elements.ps1

@@ -941,14 +941,17 @@ function New-PodeWebLink {
 
         [Parameter(Mandatory = $true)]
         [string]
-        $Source,
+        $Url,
 
         [Parameter(Mandatory = $true)]
         [string]
         $Value,
 
         [switch]
-        $NewTab
+        $NewTab,
+
+        [switch]
+        $Disabled
     )
 
     $Id = Get-PodeWebElementId -Tag A -Id $Id
@@ -958,9 +961,10 @@ function New-PodeWebLink {
         ComponentType = 'Element'
         ObjectType    = 'Link'
         ID            = $Id
-        Source        = (Add-PodeWebAppPath -Url $Source)
+        Url           = (Add-PodeWebAppPath -Url $Url)
         Value         = [System.Net.WebUtility]::HtmlEncode($Value)
         NewTab        = $NewTab.IsPresent
+        Disabled      = $Disabled.IsPresent
     }
 }
 

src/Templates/Public/scripts/templates.js

@@ -1807,7 +1807,7 @@ class PodeLink extends PodeTextualElement {
 
     new(data, sender, opts) {
         return `<a
-            href='${data.Source}'
+            href='${data.Url}'
             id='${this.id}'
             class="pode-text"
             target='${data.NewTab ? '_blank' : '_self'}'
@@ -1817,6 +1817,20 @@ class PodeLink extends PodeTextualElement {
                 ${data.Value}
         </a>`;
     }
+
+    update(data, sender, opts) {
+        super.update(data, sender, opts);
+
+        // update the url
+        if (data.Url) {
+            this.element.attr('href', data.Url);
+        }
+
+        // update target
+        if (data.TabState != 'unchanged') {
+            this.element.attr('target', data.TabState == 'newtab' ? '_blank' : '_self');
+        }
+    }
 }
 PodeElementFactory.setClass(PodeLink);