diff --git a/exampleSite/content/basics/generator/_index.en.md b/exampleSite/content/basics/generator/_index.en.md index 08ec338ee6..4c516a27f8 100644 --- a/exampleSite/content/basics/generator/_index.en.md +++ b/exampleSite/content/basics/generator/_index.en.md @@ -26,14 +26,14 @@ This only works in modern browsers. ## Variant generator -{{% button style="secondary" icon="download" %}}Download variant{{% /button %}} -{{% button style="warning" icon="trash" %}}Reset variant{{% /button %}} +{{% button style="secondary" icon="download" href="javascript:window.variants&&variants.getStylesheet();this.blur();" %}}Download variant{{% /button %}} +{{% button style="warning" icon="trash" href="javascript:window.variants&&variants.resetVariant();this.blur();" %}}Reset variant{{% /button %}}
Graph
-{{% button style="secondary" icon="download" %}}Download variant{{% /button %}} -{{% button style="warning" icon="trash" %}}Reset variant{{% /button %}} +{{% button style="secondary" icon="download" href="javascript:window.variants&&variants.getStylesheet();this.blur();" %}}Download variant{{% /button %}} +{{% button style="warning" icon="trash" href="javascript:window.variants&&variants.resetVariant();this.blur();" %}}Reset variant{{% /button %}} diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index c1f6488ee5..176c8a2224 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -18,6 +18,8 @@ This document shows you what's new in the latest release. For a detailed list of - **Change**: The Korean language translation for this theme is now available with the language code `ko`. Formerly the country code `kr` was used instead. +- **New**: The [`button` shortcode]({{% relref "shortcodes/button" %}}) can now also be used as a real button inside of HTML forms - although this is a pretty rare use case. The documentation was updated accordingly. + - **New**: The search now supports the Korean language. --- diff --git a/exampleSite/content/shortcodes/button.en.md b/exampleSite/content/shortcodes/button.en.md index 66844c8794..1d5cfa3041 100644 --- a/exampleSite/content/shortcodes/button.en.md +++ b/exampleSite/content/shortcodes/button.en.md @@ -47,11 +47,12 @@ Once the button is clicked, it opens another browser tab for the given URL. | Name | Default | Notes | |:----------------------|:----------------|:------------| -| **href** | _<empty>_ | The destination URL for the button. If this parameter is not set, the button will do nothing but is still displayed as clickable. | +| **href** | _<empty>_ | Either the destination URL for the button or JavaScript code to be executed on click. If this parameter is not set, the button will do nothing but is still displayed as clickable.

- if starting with `javascript:` all following text will be executed in your browser
- every other string will be interpreted as URL| | **style** | `transparent` | The color scheme used to paint the button.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- 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.

- for severity styles: a nice matching icon for the severity
- for all other colors: _<empty>_

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:

- `_blank` for any address starting with `http://` or `https://`
- no specific value for all other links | +| **target** | see notes | The destination frame/window if **href** is an URL. Otherwise the parameter is not used. This behaves similar to normal links. If the parameter is not given it defaults to:

- `_blank` for any address starting with `http://` or `https://`
- no specific value for all other links | +| **type** | see notes | The [button type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) if **href** is JavaScript. Otherwise the parameter is not used. If the parameter is not given it defaults to `button` | | _**<content>**_ | 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.

- for severity styles: the matching title for the severity
- for all other colors: _<empty>_

If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | ## Examples @@ -146,7 +147,7 @@ Once the button is clicked, it opens another browser tab for the given URL. ### Other -#### Severity Style with all Defaults +#### Severity Style with All Defaults ````go {{%/* button href="https://gohugo.io/" style="tip" %}}{{% /button */%}} @@ -154,10 +155,43 @@ 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 +#### Button to Internal Page ````go {{%/* button href="/" %}}Home{{% /button */%}} ```` {{% button href="/" %}}Home{{% /button %}} + +#### Button with JavaScript Action + +If your JavaScript action does not change the focus afterwards, make sure to call `this.blur()` in the end to unselect the button. + +````go +{{%/* button style="primary" icon="bullhorn" href="javascript:alert('Hello world!');this.blur();" %}}Shout it out{{% /button */%}} +```` + +{{% button style="primary" icon="bullhorn" href="javascript:alert('Hello world!');this.blur();" %}}Shout it out{{% /button %}} + +#### Button within a `form` Element + +To use native HTML elements in your Markdown, add this in your `config.toml` + +````toml +[markup.goldmark.renderer] + unsafe = true +```` + +````html +
+ + {{%/* button type="submit" style="secondary" icon="search" %}}Search{{% /button */%}} +
+```` + +
+
+ + {{% button type="submit" style="secondary" icon="search" %}}Search{{% /button %}} +
+
diff --git a/layouts/partials/body.searchpage.html b/layouts/partials/body.searchpage.html index 25ee5d2806..0eccd192b6 100644 --- a/layouts/partials/body.searchpage.html +++ b/layouts/partials/body.searchpage.html @@ -4,13 +4,15 @@
- + - - - + {{ partial "shortcodes/button.html" (dict + "context" . + "type" "submit" + "style" "secondary" + "icon" "search" + "content" (T "Search") + )}}
diff --git a/layouts/partials/shortcodes/button.html b/layouts/partials/shortcodes/button.html index 31747bbdbf..9bcec94aa5 100644 --- a/layouts/partials/shortcodes/button.html +++ b/layouts/partials/shortcodes/button.html @@ -1,9 +1,17 @@ {{- $context := .context }} {{- $content := .content }} -{{- $href := .href | default "" }} +{{- $href := (trim .href " ") | default "" }} {{- $style := .style | default "transparent" }} {{- $target := .target | default "" }} -{{- if and (eq (len $target) 0) (or (strings.HasPrefix $href "http://") (strings.HasPrefix $href "https://") ) }} +{{- $type := .type | default "" }} +{{- $isButton := false }} +{{- if or (not $href) (strings.HasPrefix $href "javascript:") }} + {{- $isButton = true }} + {{- $href = substr $href (len "javascript:") }} + {{- if not $type }} + {{- $type = "button" }} + {{- end }} +{{- else 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) }} @@ -21,7 +29,11 @@ {{- $iconposition := .iconposition | default "left" }} {{- with $context }} + {{- if $isButton }} + + {{- else }} + {{- end }} {{- if and $icon (eq $iconposition "left") }} {{- end }} @@ -29,6 +41,10 @@ {{- if and $icon (eq $iconposition "right") }} {{- end }} + {{- if $isButton }} + + {{- else }} + {{- end }} {{- end }} \ No newline at end of file diff --git a/layouts/shortcodes/button.html b/layouts/shortcodes/button.html index b39e2c097e..1d192aefff 100644 --- a/layouts/shortcodes/button.html +++ b/layouts/shortcodes/button.html @@ -8,4 +8,5 @@ "style" (.Get "style") "title" (.Get "title") "target" (.Get "target") + "type" (.Get "type") ) }} \ No newline at end of file diff --git a/static/css/format-print.css b/static/css/format-print.css index 06c22693be..01a44d16db 100644 --- a/static/css/format-print.css +++ b/static/css/format-print.css @@ -67,7 +67,7 @@ pre { #body code, #body strong, #body b, #body li, #body dd, #body dt, #body p, -#body a { +#body a, #body button { /* better contrast for colored elements */ color: black; } @@ -112,7 +112,8 @@ body, margin-top: 1.5rem; padding-top: .75rem; } -#body #body-inner .footline a { +#body #body-inner .footline a, +#body #body-inner .btn a { text-decoration: none; } #body #body-inner a { diff --git a/static/js/variant.js b/static/js/variant.js index 59e343e665..d14819e40b 100644 --- a/static/js/variant.js +++ b/static/js/variant.js @@ -223,7 +223,7 @@ var variants = { } }, - generator: function( vargenerator, vardownload, varreset ){ + generator: function( vargenerator ){ var graphDefinition = this.generateGraph(); var graphs = document.querySelectorAll( vargenerator ); graphs.forEach( function( e ){ e.innerHTML = graphDefinition; }); @@ -234,12 +234,6 @@ var variants = { this.styleGraph(); } }.bind( this ), 25 ); - - var downloads = document.querySelectorAll( vardownload ); - downloads.forEach( function( e ){ e.addEventListener('click', this.getStylesheet.bind( this )); }.bind( this ) ); - - var resets = document.querySelectorAll( varreset ); - resets.forEach( function( e ){ e.addEventListener('click', this.resetVariant.bind( this )); }.bind( this ) ); }, download: function(data, mimetype, filename){