button: refine target parameter handling #351

exampleSite/content/basics/migration/_index.en.md

@@ -16,6 +16,8 @@ This document shows you what's new in the latest release. For a detailed list of
 
 ## 5.4.0
 
+- **Change**: The [`button` shortcode]({{% relref "shortcodes/button" %}}) has a new parameter `target` to set the destination frame/window for the URL to open. If not given, it defaults to a new window/tab for external URLs or is not set at all for internal URLs. Previously even internal URLs where opened in a new window/tab.
+
 - **New**: The [`math` shortcode]({{% relref "shortcodes/math" %}}) and [`mermaid` shortcode]({{% relref "shortcodes/mermaid" %}}) now support alignment parameter also if codefence syntax is used.
 
 - **New**: Translation for Finnish (Suomi).

exampleSite/content/shortcodes/button.en.md

@@ -51,8 +51,8 @@ Once the button is clicked, it opens another browser tab for the given URL.
 | **style**             | `transparent`   | The color scheme used to paint the button.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
 | **icon**              | see notes       | [Font Awesome icon name]({{%relref "cont/icons#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other colors: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
 | **iconposition**      | `left`          | Places the icon to the `left` or `right` of the title. |
+| **target**            | see notes       | The destination frame/window for the URL. This behaves similar to normal links. If the parameter is not given it defaults to:<br><br>- `_blank` for any address starting with `http://` or `https://`<br>- no specific value for all other links |
 | _**&lt;content&gt;**_ | see notes       | Arbitrary text for the button title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other colors: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
-| **target**            | _blank          | The destination frame/window for the URL. |
 
 ## Examples
 
@@ -153,3 +153,11 @@ Once the button is clicked, it opens another browser tab for the given URL.
 ````
 
 {{% button href="https://gohugo.io/" style="tip" %}}{{% /button %}}
+
+#### Button to internal page
+
+````go
+{{%/* button href="/" %}}Home{{% /button */%}}
+````
+
+{{% button href="/" %}}Home{{% /button %}}

layouts/partials/shortcodes/button.html

@@ -1,8 +1,11 @@
 {{- $context := .context }}
 {{- $content := .content }}
-{{- $href := .href }}
+{{- $href := .href | default "" }}
 {{- $style := .style | default "transparent" }}
-{{- $target := .target | default "_blank" }}
+{{- $target := .target | default "" }}
+{{- if and (eq (len $target) 0) (or (strings.HasPrefix $href "http://") (strings.HasPrefix $href "https://") ) }}
+  {{- $target = "_blank" }}
+{{- end }}
 {{- $title := .title | default ($content) | default ($style | T) }}
 {{- $icon := .icon | default "" }}
 {{- if and (not $icon) (eq (len $icon) 0) }}
@@ -18,7 +21,7 @@
 {{- $iconposition := .iconposition | default "left" }}
 {{- with $context }}
 <span class="btn cstyle {{ $style }}">
-  <a{{ if $href }} href="{{ $href }}" target="{{ $target }}"{{ end }}>
+  <a{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}" rel="noopener"{{ end }}{{ end }}>
     {{- if and $icon (eq $iconposition "left") }}
     <i class="{{ $icon }}"></i>
     {{- end }}