Browse Source

feat(layouts): provide form builder snippets

adds all the snippets necessary to build power web forms
Josh Habdas 1 year ago
parent
commit
ada893d12d
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74

+ 32
- 27
README.md View File

@@ -32,7 +32,7 @@ Feature | Summary
32 32
 [Section Menu](#section-menu) | Display an accessible site-wide navigation with links to content sections.
33 33
 [Display Variants](#display-variants) | Customize look-and-feel with one of six included display variations.
34 34
 [Custom Styles](#custom-styles) | Add to, override or disable theme styles for complete design control.
35
-[Trim Color](#trim-color) | Defines the default trim color and sometimes affects how a browser or OS displays the site.
35
+[Trim Color](#trim-color) | Define how user agents should display the border around your site.
36 36
 [SVG Favicon](#svg-favicon) | Help push browser standards forward by decorating your site with an SVG favicon.
37 37
 [Fuzzy Search](#fuzzy-search) | Find and share indexable content anywhere on your site. No registration required.
38 38
 [Code Highlighter](#code-highlighter) | Highlight code in over 160 languages without requiring JavaScript.
@@ -43,7 +43,7 @@ Feature | Summary
43 43
 [Modification Dating](#modification-dating) | Recently updated content is flagged and made more discoverable to readers.
44 44
 [Index Blocking](#index-blocking) | Hide pages from search engines without modifying robots.txt.
45 45
 [Referrer Policy](#referrer-policy) | Help protect your visitors from nosy neighbors with a simple site-wide policy.
46
-[Snippets](#snippets) | Adjust layouts, add form components and more without repeating yourself.
46
+[Snippets](#snippets) | Display alerts, cards, progress indicators and easily build great-looking forms.
47 47
 [Related Content](#related-content) | Display links to relevant content below blog posts automatically.
48 48
 [Table of Contents](#table-of-contents) | Create collapsable content summaries with deep link and smooth-scroll support.
49 49
 [404 Page](#404-page) | Entertain users into staying when they experience linkrot on your site.
@@ -516,35 +516,30 @@ See the Hugo docs for additional [configuration options](http://gohugo.io/overvi
516 516
 
517 517
 ### Snippets
518 518
 
519
-Snippets are reusable bits of code you can sprinkle across your site to reduce repetition and improve consistency. They are composed of [partials](https://gohugo.io/templates/partials) and [shortcodes](https://gohugo.io/content-management/shortcodes). After Dark provides a number of snippets to help make your site easier to customize and maintain.
519
+Snippets are reusable bits of code you can add to your site to reduce repetition and improve consistency. They are composed of [partials](https://gohugo.io/templates/partials) and [shortcodes](https://gohugo.io/content-management/shortcodes). After Dark provides a number of snippets to help make your site easier to customize and maintain.
520 520
 
521 521
 Take for example the included `buttongroup` snippet for creating a set of [hackcss]-styled buttons, which we'll look at in detail here.
522 522
 
523 523
 First the `buttongroup` partial:
524 524
 
525 525
 ```html
526
-<form
527
-  {{ if .action }}action="{{ .action | safeURL }}" {{ end }}
528
-  {{ if .target }}target="{{ .target }}" {{ end }}
529
-  {{ if in (slice "get" "post") .method }}method="{{ .method }}" {{ end }}
530
-  class="btn-group">
526
+<div class="btn-group{{ if eq .formactions "true" }} form-actions{{ end }}{{ with .class }} {{ . }}{{ end }}">
531 527
   {{ .body }}
532
-</form>
528
+</div>
533 529
 ```
534 530
 
535 531
 Now the `buttongroup` shortcode:
536 532
 
537 533
 ```html
538
-{{ $action := .Get "action" }}
539
-{{ $target := .Get "target" }}
540
-{{ $method := .Get "method" }}
541
-{{ $body := .Get "body" | default .Inner }}
542
-{{ partial "components/buttongroup.html" (dict "action" $action "target" $target "method" $method "body" $body)}}
534
+{{ $formactions := .Get "formactions" }}
535
+{{ $class := .Get "class" }}
536
+{{ $body := .Inner }}
537
+{{ partial "components/buttongroup.html" (dict "formactions" $formactions "class" $class "body" $body) }}
543 538
 ```
544 539
 
545
-Notice how the shortcode serves primarily to call the partial, which contains all of the markup and presentation logic. This delegation of responsibility is what enables snippets to be shared between layout (via partial) and content (via shortcode). Now let's see how to actually use it.
540
+Notice how the shortcode serves primarily to call the partial, which contains all of the markup and presentation logic. This delegation of responsibility enables code to be shared between layout (via partial) and content (via shortcode) without duplication. Now let's see how to actually use it.
546 541
 
547
-To use the `buttongroup` snippet via markdown content use the shortcode form:
542
+To use the `buttongroup` snippet in markdown content use the shortcode form:
548 543
 
549 544
 ```html
550 545
 {{< hackcss-buttongroup >}}
@@ -554,7 +549,7 @@ To use the `buttongroup` snippet via markdown content use the shortcode form:
554 549
 {{< /hackcss-buttongroup >}}
555 550
 ```
556 551
 
557
-This creates a styled button group from your content with three buttons and places them inside a form using the default `form` action.
552
+This creates a styled button group with three adjoining buttons.
558 553
 
559 554
 To use the `buttongroup` in layout use the partial form:
560 555
 
@@ -562,21 +557,31 @@ To use the `buttongroup` in layout use the partial form:
562 557
 {{ partial "components/buttongroup.html" (dict "body" (partial "components/button.html" (dict "type" "success" "body" "Submit" "action" .RelPermalink))) }}
563 558
 ```
564 559
 
565
-This creates a button group from your layout with a single button and specifies the desired `form` action.
560
+This creates a button group with a single button specifying a custom action.
566 561
 
567
-After Dark includes the following snippets designed to take advantage of  [hackcss components][hackcss] available in the theme:
562
+After Dark includes the following snippets designed to take advantage of a number of pre-styled and customizable [hackcss components][hackcss] available in the theme:
568 563
 
569
-- [`hackcss-alert`](layouts/shortcodes/hackcss-alert.html) - Provides themed alert boxes. See file for usage notes.
570
-- [`hackcss-button`](layouts/shortcodes/hackcss-button.html) - Provides themed buttons. See file for usage notes.
571
-- [`hackcss-buttongroup`](layouts/shortcodes/hackcss-buttongroup.html) - Allows buttons to be grouped together. See file for usage notes.
572
-- [`hackcss-card`](layouts/shortcodes/hackcss-card.html) - Provides themed card element. See file for usage notes.
573
-- [`hackcss-progress`](layouts/shortcodes/hackcss-progress.html) - Provides themed progress meter. See file for usage notes.
574
-- [`hackcss-throbber`](layouts/shortcodes/hackcss-throbber.html) - Provides themed loading indicator. See file for usage notes.
564
+- [`hackcss-alert`](layouts/shortcodes/hackcss-alert.html) - Show various alert boxes. See file for usage notes.
565
+- [`hackcss-button`](layouts/shortcodes/hackcss-button.html) - Add buttons inside and out of forms. See file for usage notes.
566
+- [`hackcss-buttongroup`](layouts/shortcodes/hackcss-buttongroup.html) - Group buttons together visually. See file for usage notes.
567
+- [`hackcss-card`](layouts/shortcodes/hackcss-card.html) - Display a card with title. See file for usage notes.
568
+- [`hackcss-form`](layouts/shortcodes/hackcss-form.html) - Enables powerful form-building applications. See file for usage notes.
569
+- [`hackcss-formgroup`](layouts/shortcodes/hackcss-formgroup.html) - Groups together form controls. See file for usage notes.
570
+- [`hackcss-helpblock`](layouts/shortcodes/hackcss-helpblock.html) - Display help text in your forms. See file for usage notes.
571
+- [`hackcss-label`](layouts/shortcodes/hackcss-label.html) - Add labels to form controls. See file for usage notes.
572
+- [`hackcss-progress`](layouts/shortcodes/hackcss-progress.html) - Display a progress meter. See file for usage notes.
573
+- [`hackcss-textarea`](layouts/shortcodes/hackcss-textarea.html) - Provide an area to enter longer text. See file for usage notes.
574
+- [`hackcss-textinput`](layouts/shortcodes/hackcss-textinput.html) - Accept any kind of text input. See file for usage notes.
575
+- [`hackcss-throbber`](layouts/shortcodes/hackcss-throbber.html) - Show an animated spinner. See file for usage notes.
575 576
 
576
-If you'd like to try your hand at creating a snippet look at the above examples then try abstracting the following custom shortcodes included:
577
+Combine snippets to build great-looking forms anywhere on your site:
578
+
579
+![Form snippets screenshot](https://git.habd.as/comfusion/after-dark/raw/branch/master/images/docs/feat-snippets-fs8.png "Example form created using snippet shortcodes.")
580
+
581
+Or try your hand at creating your own snippets for the following additional shortcodes included with After Dark:
577 582
 
578 583
 - [`blockquote`](layouts/shortcodes/blockquote.html) – Provides a styled blockquote with optional citation link. See file for usage notes.
579
-- [`figure`](layouts/shortcodes/figure.html) – Overrides Hugo [built-in shortcode](https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes) to provide a [lazy-loaded](#lazy-loading) figure element with small caption text.
584
+- [`figure`](layouts/shortcodes/figure.html) – Overrides Hugo [built-in shortcode](https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes) to provide a [lazy-loaded](#lazy-loading) figure element with small caption text. See file for usage notes.
580 585
 
581 586
 Reference the Hugo docs for additional help using [shortcode](https://gohugo.io/templates/shortcode-templates/) and [partial](https://gohugo.io/templates/partials/) templates.
582 587
 

+ 2
- 1
assets/css/theme.css View File

@@ -68,7 +68,8 @@ input.form-control {
68 68
   -moz-appearance: none;
69 69
   -ms-appearance: none;
70 70
 }
71
-input.form-control {
71
+input.form-control,
72
+textarea.form-control {
72 73
   font-size: initial;
73 74
 }
74 75
 .hack .help-block {

BIN
images/docs/feat-snippets-fs8.png View File


BIN
images/docs/feat-snippets.png View File


+ 6
- 4
layouts/partials/components/button.html View File

@@ -1,7 +1,9 @@
1 1
 <button
2
-  {{ if .action }}formaction="{{ .action | safeURL }}" {{ end }}
3
-  {{ if .target }}formtarget="{{ .target }}" {{ end }}
2
+  {{ with .action }}formaction="{{ . | safeURL }}" {{ end }}
3
+  {{ with .target }}formtarget="{{ . }}" {{ end }}
4
+  {{ with .tabindex }}tabindex="{{ . }}" {{ end }}
5
+  {{ with .onclick }}onclick="{{ . }}" {{ end }}
4 6
   {{ if in (slice "get" "post") .method }}formmethod="{{ .method }}" {{ end }}
5 7
   class="btn btn-{{ .type | default "default" }}{{ if eq .isghost "true" }} btn-ghost{{ end }}
6
-  {{ if eq .isblock "true" }} btn-block{{ end }}"
7
->{{ .body }}</button>
8
+  {{- if eq .isblock "true" }} btn-block{{ end }}"
9
+>{{ .body }}</button>

+ 2
- 6
layouts/partials/components/buttongroup.html View File

@@ -1,7 +1,3 @@
1
-<form
2
-  {{ if .action }}action="{{ .action | safeURL }}" {{ end }}
3
-  {{ if .target }}target="{{ .target }}" {{ end }}
4
-  {{ if in (slice "get" "post") .method }}method="{{ .method }}" {{ end }}
5
-  class="btn-group">
1
+<div class="btn-group{{ if eq .formactions "true" }} form-actions{{ end }}{{ with .class }} {{ . }}{{ end }}">
6 2
   {{ .body }}
7
-</form>
3
+</div>

+ 11
- 0
layouts/partials/components/form.html View File

@@ -0,0 +1,11 @@
1
+<form
2
+  {{ with .action }}action="{{ . | safeURL }}" {{ end }}
3
+  {{ with .enctype }}enctype="{{ . }}" {{ end }}
4
+  {{ with .target }}target="{{ . }}" {{ end }}
5
+  {{ with .accept_charset }}accept-charset="{{ . }}" {{ end }}
6
+  {{ if eq .novalidate "true" }}novalidate {{ end }}
7
+  {{ if in (slice "on" "off") .autocomplete }}autocomplete="{{ .autocomplete }}" {{ end }}
8
+  {{ if in (slice "get" "post") .method }}method="{{ .method }}" {{ end }}
9
+  class="form{{ if in (slice "success" "error" "warning") .state }} form-{{ .state | safeHTMLAttr }}{{ end }}{{ with .class }} {{ . }}{{ end }}">
10
+  {{ .body }}
11
+</form>

+ 1
- 0
layouts/partials/components/formactions.html View File

@@ -0,0 +1 @@
1
+<div class="form-actions">{{ .body }}</div>

+ 8
- 0
layouts/partials/components/formgroup.html View File

@@ -0,0 +1,8 @@
1
+<fieldset
2
+  {{ with .form }}form="{{ . }}" {{ end }}
3
+  {{ with .name }}name="{{ . }}" {{ end }}
4
+  {{ if eq .disabled "true" }}disabled {{ end }}
5
+  class="form-group{{ if eq .hastextarea "true" }} form-textarea{{ end }}{{ if in (slice "success" "error" "warning") .state }} form-{{ .state }}{{ end }}{{ with .class }} {{ . }}{{ end }}">
6
+  {{ with .legend }}<legend>{{ . }}</legend>{{ end }}
7
+  {{ .body }}
8
+</fieldset>

+ 1
- 0
layouts/partials/components/helpblock.html View File

@@ -0,0 +1 @@
1
+<div class="help-block{{ with .class }}{{ . }}{{ end }}">{{ .body }}</div>

+ 1
- 0
layouts/partials/components/label.html View File

@@ -0,0 +1 @@
1
+<label{{ with .for }} for="{{ . }}"{{ end }}{{ with .form }} form="{{ . }}"{{ end }}>{{ .body }}</label>

+ 2
- 2
layouts/partials/components/progress.html View File

@@ -1,11 +1,11 @@
1 1
 {{ if eq .show_percent "true" }}
2 2
   <div class="progress-bar progress-bar-show-percent">
3 3
     {{ with .value }}
4
-      <div class="progress-bar-filled" style="width:{{ . }}%" data-filled="{{ .fill_text }} {{ . }}%"></div>
4
+      <div class="progress-bar-filled" style="width:{{ . }}%" data-filled="{{ $.fill_text }} {{ . }}%"></div>
5 5
     {{ end }}
6 6
   </div>
7 7
 {{ else }}
8 8
   <div class="progress-bar">
9 9
     <div class="progress-bar-filled" style="width: {{ .value }}%"></div>
10 10
   </div>
11
-{{ end }}
11
+{{ end }}

+ 5
- 0
layouts/partials/components/select.html View File

@@ -0,0 +1,5 @@
1
+<select{{ with .id }} id="{{ . }}"{{ end }} class="form-control">
2
+  {{ range .options }}
3
+    <option>{{ . }}</option>
4
+  {{ end }}
5
+</select>

+ 22
- 0
layouts/partials/components/textarea.html View File

@@ -0,0 +1,22 @@
1
+{{ $permitted_attrs := (slice "id" "name" "class" "autocomplete" "autofocus" "cols" "disabled" "form" "maxlength" "minlength" "name" "placeholder" "readonly" "required" "rows" "spellcheck" "wrap" "tabindex") }}
2
+{{ $boolean_attrs := (slice "autofocus" "disabled" "readonly" "required") }}
3
+{{ $validated_attrs := (slice "spellcheck" "autocomplete" "wrap") }}
4
+{{ $validations := (dict "spellcheck" (slice "true" "default" "false") "autocomplete" (slice "on" "off") "wrap" (slice "hard" "soft" "off")) }}
5
+<textarea
6
+  {{ range $name, $value := .attrs }}
7
+    {{ if and (ne $value nil) (in $permitted_attrs $name) }}
8
+      {{ if ne "class" $name }}
9
+        {{ if in $boolean_attrs $name }}
10
+          {{ if eq $value "true" }}{{ $name }}{{ end }}
11
+        {{ else if index $validations $name }}
12
+          {{ if in (index $validations $name) $value }}
13
+            {{ $name | safeHTMLAttr }}="{{ $value }}"
14
+          {{ end }}
15
+        {{ else }}
16
+          {{ $name | safeHTMLAttr }}="{{ $value }}"
17
+        {{ end }}
18
+      {{ end }}
19
+    {{ end }}
20
+  {{ end }}
21
+  class="form-control{{ with .attrs.class }} {{ . }}{{ end }}"
22
+>{{ with .body }}{{ . }}{{ end }}</textarea>

+ 24
- 0
layouts/partials/components/textinput.html View File

@@ -0,0 +1,24 @@
1
+{{ $permitted_attrs := (slice "id" "name" "class" "autocomplete" "autofocus" "disabled" "form" "formaction" "formmethod" "formnovalidate" "formtarget" "height" "max" "maxlength" "min" "minlength" "multiple" "pattern" "placeholder" "readonly" "required" "size" "spellcheck" "step" "tabindex" "type" "value" "width") }}
2
+{{ $possible_types := (slice "email" "hidden" "number" "password" "search" "tel" "text" "url") }}
3
+<input
4
+  {{ range $name, $value := .attrs }}
5
+    {{ if in $permitted_attrs $name }}
6
+      {{ if eq $name "type" }}
7
+        {{ if in $possible_types $value }}
8
+          type="{{ $value }}"
9
+        {{ end }}
10
+      {{ else if in (slice "disabled" "readonly" "required") $name }}
11
+        {{ if eq $value "true" }}{{ $name }}{{ end }}
12
+      {{ else if and (eq $name "class") $value }}
13
+        class="form-control {{ $value }}"
14
+      {{ else if and (eq $name "pattern") $value }}
15
+        pattern="{{ $value | safeHTMLAttr }}"
16
+      {{ else if $value }}
17
+        {{ $name | safeHTMLAttr }}="{{ $value }}"
18
+      {{ end }}
19
+    {{ end }}
20
+  {{ end }}
21
+  {{ if ne (in .attrs "class") true }}
22
+    class="form-control"
23
+  {{ end }}
24
+>

+ 4
- 2
layouts/shortcodes/hackcss-alert.html View File

@@ -1,11 +1,13 @@
1 1
 <!-- {{/*
2
+Custom attributes: "type", "text" [default: Inner]
3
+Possible types: "success", "info", "warning", "error"
4
+
2 5
 Basic Usage:
3 6
 {{< hackcss-alert type="info" text="Alert Text" />}}
4 7
 {{< hackcss-alert >}}Inner block of text{{< /hackcss-alert >}}
5 8
 {{% hackcss-alert %}}**Note:** Markdown available{{% /hackcss-alert %}}
6 9
 
7
-Available styles: "success", "info", "warning", "error"
8 10
 */}} -->
9 11
 {{ $type := .Get "type" }}
10 12
 {{ $body := .Get "text" | default .Inner }}
11
-{{ partial "components/alert.html" (dict "type" $type "body" $body) }}
13
+{{ partial "components/alert.html" (dict "type" $type "body" $body) }}

+ 9
- 6
layouts/shortcodes/hackcss-button.html View File

@@ -1,5 +1,6 @@
1 1
 <!-- {{/*
2
-Available types: "default", "primary", "success", "info", "warning", "error"
2
+Permitted attributes: "type", "text", "isghost", "isblock", "action", "onclick", "tabindex", "target", "method"
3
+Available types: [default], "primary", "success", "info", "warning", "error"
3 4
 
4 5
 Basic usage:
5 6
 {{< hackcss-button text="Default" />}}
@@ -17,20 +18,22 @@ With loading indicator:
17 18
   Please wait&hellip; {{< hackcss-throbber >}}
18 19
 {{< /hackcss-button >}}
19 20
 
20
-Inside a ButtonGroup:
21
-{{< hackcss-buttongroup action="/go/somewhere" >}}
21
+Inside a button group:
22
+{{< hackcss-buttongroup >}}
22 23
   {{< hackcss-button text="Default Action" isghost="true" />}}
23 24
   {{< hackcss-button text="Custom Action" action="/go/elsewhere" />}}
24
-  {{< hackcss-button text="Custom Target" target="_blank" />}}
25
+  {{< hackcss-button text="Custom Target" target="_blank" tabindex="-1" />}}
25 26
   {{< hackcss-button text="Custom Method" method="get" />}}
26 27
 {{< /hackcss-buttongroup >}}
27 28
 
28 29
 */}} -->
29 30
 {{ $type := .Get "type" }}
30
-{{ $body := .Get "body" | default .Inner }}
31
+{{ $body := .Get "text" | default .Inner }}
31 32
 {{ $isghost := .Get "isghost" }}
32 33
 {{ $isblock := .Get "isblock" }}
33 34
 {{ $action := .Get "action" }}
35
+{{ $onclick := .Get "onclick" }}
36
+{{ $tabindex := .Get "tabindex" }}
34 37
 {{ $target := .Get "target" }}
35 38
 {{ $method := .Get "method" }}
36
-{{ partial "components/button" (dict "type" $type "body" $body "isghost" $isghost "isblock" $isblock "action" $action "target" $target "method" $method) }}
39
+{{ partial "components/button.html" (dict "type" $type "body" $body "isghost" $isghost "isblock" $isblock "action" $action "onclick" $onclick "tabindex" $tabindex "target" $target "method" $method) }}

+ 25
- 19
layouts/shortcodes/hackcss-buttongroup.html View File

@@ -1,32 +1,38 @@
1 1
 <!-- {{/*
2
-Basic usage:
2
+HTML attributes: "class"
3
+Custom attributes: "formactions"
4
+
5
+Outside form with a single button:
3 6
 {{< hackcss-buttongroup >}}
4
-  {{< hackcss-button text="Left" />}}
5
-  {{< hackcss-button text="Middle" type="info" />}}
6
-  {{< hackcss-button text="Right" isghost="true" />}}
7
+  {{< hackcss-button text="Print" action="javascript:window.print()" />}}
7 8
 {{< /hackcss-buttongroup >}}
8 9
 
10
+With three buttons, one ghosted and one of type info
9 11
 {{< hackcss-buttongroup >}}
10
-  {{< hackcss-button text="Left" action="/go/somewhere" />}}
12
+  {{< hackcss-button text="Left" />}}
13
+  {{< hackcss-button text="Middle" type="info" />}}
14
+  {{< hackcss-button text="Right" isghost="true" />}}
11 15
 {{< /hackcss-buttongroup >}}
12 16
 
13
-Advanced usage:
14
-{{< hackcss-buttongroup action="/go/somewhere" method="post" >}}
17
+With self-targeted button and custom class names:
18
+{{< hackcss-buttongroup class="targetself" >}}
15 19
   {{< hackcss-button text="Left" target="_self" />}}
16 20
   {{< hackcss-button text="Right" isghost="true" />}}
17 21
 {{< /hackcss-buttongroup >}}
18 22
 
19
-{{< hackcss-buttongroup action="/do/something" target="_blank" >}}
20
-  <input type="hidden" name="AssociateTag" value="jhabdas-20">
21
-  <input type="hidden" name="ASIN.1" value="B0736PV196">
22
-  <input type="hidden" name="Quantity.1" value="2">
23
-  {{< hackcss-button text="Print" action="javascript:window.print()" />}}
24
-  {{< hackcss-button text="Purchase" isghost="true" />}}
25
-{{< /hackcss-buttongroup >}}
23
+Inside a form with a default action, target and hidden inputs:
24
+{{< hackcss-form action="/do/something" target="_blank" >}}
25
+  {{< hackcss-textinput type="hiddden" name="AssociateTag" value="jhabdas-20" >}}
26
+  {{< hackcss-textinput type="hidden" name="ASIN.1" value="B0736PV196" >}}
27
+  {{< hackcss-textinput type="hidden" name="Quantity.1" value="2" >}}
28
+  {{< hackcss-buttongroup formactions="true" >}}
29
+    {{< hackcss-button text="Print" action="javascript:window.print()" />}}
30
+    {{< hackcss-button text="Purchase" isghost="true" />}}
31
+  {{< /hackcss-buttongroup >}}
32
+{{< /hackcss-form >}}
26 33
 
27 34
 */}} -->
28
-{{ $action := .Get "action" }}
29
-{{ $target := .Get "target" }}
30
-{{ $method := .Get "method" }}
31
-{{ $body := .Get "body" | default .Inner }}
32
-{{ partial "components/buttongroup.html" (dict "action" $action "target" $target "method" $method "body" $body)}}
35
+{{ $formactions := .Get "formactions" }}
36
+{{ $class := .Get "class" }}
37
+{{ $body := .Inner }}
38
+{{ partial "components/buttongroup.html" (dict "formactions" $formactions "class" $class "body" $body) }}

+ 38
- 0
layouts/shortcodes/hackcss-form.html View File

@@ -0,0 +1,38 @@
1
+<!-- {{/*
2
+HTML attributes: "accept-charset", "action", "enctype", "target", "novalidate", "method", "class", "autocomplete"
3
+
4
+Available states: [default], "success", "error", "warning"
5
+Possible methods: "get", "post"
6
+Possible autocompletes: "on", "off"
7
+
8
+Basic usage:
9
+{{< hackcss-form >}}
10
+  {{< hackcss-textinput >}}
11
+{{< /hackcss-form >}}
12
+
13
+Targeting self with text input and autocomplete disabled:
14
+{{< hackcss-form autocomplete="disabled" >}}
15
+  {{< hackcss-textinput name="query" >}}
16
+{{< /hackcss-form >}}
17
+
18
+Hidden with blank target, no validation and custom post action:
19
+{{< hackcss-form novalidate="true" method="post" action="/do/something" target="_blank" >}}
20
+  {{< hackcss-textinput type="hidden" name="throttle" value="80" >}}
21
+{{< /hackcss-form >}}
22
+
23
+Specify allowed encodings:
24
+{{< hackcss-form acceptcharset="UTF-8 ISO-8859-1" >}}
25
+  {{< hackcss-textinput value="☻" >}}
26
+{{< /hackcss-form >}}
27
+
28
+*/}} -->
29
+{{ $accept_charset := .Get "acceptcharset" }}
30
+{{ $action := .Get "action" }}
31
+{{ $enctype := .Get "enctype" }}
32
+{{ $target := .Get "target" }}
33
+{{ $novalidate := .Get "novalidate" }}
34
+{{ $autocomplete := .Get "autocomplete" }}
35
+{{ $method := .Get "method" }}
36
+{{ $class := .Get "class" }}
37
+{{ $body := .Inner }}
38
+{{ partial "components/form.html" (dict "accept_charset" $accept_charset "action" $action "enctype" $enctype "target" $target "novalidate" $novalidate "method" $method "class" $class "body" $body) }}

+ 35
- 0
layouts/shortcodes/hackcss-formgroup.html View File

@@ -0,0 +1,35 @@
1
+<!-- {{/*
2
+HTML attributes: "disabled", "form", "name", "class", "legend", "body"
3
+Custom attributes: "hastextarea", "state"
4
+
5
+Possible states: "success", "warning", "error"
6
+
7
+Basic example:
8
+{{< hackcss-formgroup >}}
9
+  {{< hackcss-label for="query" text="Query:" />}}
10
+  {{< hackcss-textinput id="query" type="search" >}}
11
+{{< /hackcss-formgroup >}}
12
+
13
+With text area:
14
+{{< hackcss-formgroup hastextarea="true" >}}
15
+  {{< hackcss-label for="message" text="Message:" >}}
16
+  {{< hackcss-textarea id="message" rows="10" >}}
17
+{{< /hackcss-formgroup >}}
18
+
19
+With legend and helper text:
20
+{{< hackcss-formgroup legend="Personal Information" >}}
21
+  {{< hackcss-label for="phone" text="Phone Number:" />}}
22
+  {{< hackcss-textinput id="phone" type="tel" value="+86 180 800 8000" >}}
23
+  {{< hackcss-helpblock text="In this format: +86 xxx xxx xxxxx" />}}
24
+{{< /hackcss-formgroup >}}
25
+
26
+*/}} -->
27
+{{ $hastextarea := .Get "hastextarea" }}
28
+{{ $state := .Get "state" }}
29
+{{ $disabled := .Get "disabled" }}
30
+{{ $form := .Get "form" }}
31
+{{ $name := .Get "name" }}
32
+{{ $class := .Get "class" }}
33
+{{ $legend := .Get "legend" }}
34
+{{ $body := .Get "body" | default .Inner }}
35
+{{ partial "components/formgroup.html" (dict "hastextarea" $hastextarea "state" $state "class" $class "disabled" $disabled "form" $form "name" $name "legend" $legend "body" $body) }}

+ 23
- 0
layouts/shortcodes/hackcss-helpblock.html View File

@@ -0,0 +1,23 @@
1
+<!-- {{/*
2
+HTML attributes: "class"
3
+Custom attributes: "text" [default: Inner]
4
+
5
+Basic usage:
6
+{{< hackcss-helpblock text="You need help. Seriously." />}}
7
+
8
+With markdown formatting:
9
+{{% hackcss-helpblock %}}**Pay attention!**{{% /hackcss-helpblock %}}
10
+
11
+Affixed above and below input control:
12
+{{< hackcss-formgroup >}}
13
+  {{< hackcss-helpblock >}}
14
+    <em>Enter a secure password below:</em>
15
+  {{< /hackcss-helpblock >}}
16
+  {{< hackcss-textinput type="password" >}}
17
+  {{< hackcss-helpblock text="Min. 27 chars" />}}
18
+{{< /hackcss-formgroup >}}
19
+
20
+*/}} -->
21
+{{ $class := .Get "class" }}
22
+{{ $body := .Get "text" | default .Inner }}
23
+{{ partial "components/helpblock.html" (dict "class" $class "body" $body) }}

+ 24
- 0
layouts/shortcodes/hackcss-label.html View File

@@ -0,0 +1,24 @@
1
+<!-- {{/*
2
+Permitted attributes: "for", "form", "text"
3
+
4
+Explicit label association (preferred):
5
+{{< hackcss-label for="query" text="Enter search query:" />}}
6
+{{< hackcss-textinput type="search" id="query" >}}
7
+
8
+Implicit label association with markup:
9
+{{< hackcss-label >}}
10
+  mau kemana?<sup><a href="#kemana">§</a></sup>
11
+  {{< hackcss-textinput placeholder="di ingres" >}}
12
+{{< /hackcss-label >}}
13
+
14
+Inside form group for default label styling:
15
+{{< hackcss-formgroup >}}
16
+  {{< hackcss-label for="fullname" text="Name:" />}}
17
+  {{< hackcss-textinput id="fullname" >}}
18
+{{< /hackcss-formgroup >}}
19
+
20
+*/}} -->
21
+{{ $for := .Get "for" }}
22
+{{ $form := .Get "form" }}
23
+{{ $body := .Get "text" | default .Inner }}
24
+{{ partial "components/label.html" (dict "for" $for "form" $form "body" $body) }}

+ 4
- 1
layouts/shortcodes/hackcss-progress.html View File

@@ -1,10 +1,13 @@
1 1
 <!-- {{/*
2
+Custom attributes: "showpercent", "value", "filltext" [default: "Loading"]
3
+
2 4
 Basic usage:
3 5
 {{< hackcss-progress value="40" >}}
4 6
 {{< hackcss-progress value="30" showpercent="true" >}}
5 7
 {{< hackcss-progress value="70" showpercent="true" filltext="pemuatan" >}}
8
+
6 9
 */}} -->
7 10
 {{ $show_percent := .Get "showpercent" }}
8 11
 {{ $fill_text := .Get "filltext" | default "Loading" }}
9 12
 {{ $value := .Get "value" }}
10
-{{ partial "components/progress.html" (dict "show_percent" $show_percent "fill_text" $fill_text "value" $value) }}
13
+{{ partial "components/progress.html" (dict "show_percent" $show_percent "fill_text" $fill_text "value" $value) }}

+ 44
- 0
layouts/shortcodes/hackcss-textarea.html View File

@@ -0,0 +1,44 @@
1
+<!-- {{/*
2
+HTML attributes: "id", "name", "class", "autocomplete", "autofocus", "cols", "disabled", "form", "maxlength", "minlength", "name", "placeholder", "readonly", "required", "rows", "spellcheck", "wrap", "tabindex"
3
+Custom attributes: "text"
4
+
5
+Possible autocompletes: [none], "on", "off"
6
+Possible wraps: [none], "hard", "soft", "off"
7
+Possible spellchecks: [none], "true", "default", "false"
8
+
9
+Read-only with prefilled text:
10
+{{< hackcss-textarea readonly="true" text="Only this and nothing more." >}}
11
+
12
+With spellcheck disabled:
13
+{{< hackcss-textarea spellcheck="false" >}}
14
+
15
+With 16 columns and hard wrapping enabled:
16
+{{< hackcss-textarea cols="16" wrap="hard" >}}
17
+
18
+Inside disabled form group With error label and placeholder:
19
+{{< hackcss-formgroup hastextarea="true" disabled="true" state="error" >}}
20
+  {{< hackcss-label for="message" text="Message:" />}}
21
+  {{< hackcss-textarea id="message" placeholder="Guestbook offline…" rows="10" >}}
22
+{{< /hackcss-formgroup >}}
23
+
24
+*/}} -->
25
+{{ $id := .Get "id" | default nil }}
26
+{{ $name := .Get "name" | default nil }}
27
+{{ $class := .Get "class" | default nil }}
28
+{{ $autocomplete := .Get "autocomplete" | default nil }}
29
+{{ $autofocus := .Get "autofocus" | default nil }}
30
+{{ $cols := .Get "cols" | default nil }}
31
+{{ $disabled := .Get "disabled" | default nil }}
32
+{{ $form := .Get "form" | default nil }}
33
+{{ $maxlength := .Get "maxlength" | default nil }}
34
+{{ $minlength := .Get "minlength" | default nil }}
35
+{{ $name := .Get "name" | default nil }}
36
+{{ $placeholder := .Get "placeholder" | default nil }}
37
+{{ $readonly := .Get "readonly" | default nil }}
38
+{{ $required := .Get "required" | default nil }}
39
+{{ $rows := .Get "rows" | default nil }}
40
+{{ $spellcheck := .Get "spellcheck" | default nil }}
41
+{{ $wrap := .Get "wrap" | default nil }}
42
+{{ $tabindex := .Get "tabindex" | default nil }}
43
+{{ $body := .Get "text" | default nil }}
44
+{{ partial "components/textarea.html" (dict "body" $body "attrs" (dict "id" $id "name" $name "class" $class "autocomplete" $autocomplete "autofocus" $autofocus "cols" $cols "disabled" $disabled "form" $form "maxlength" $maxlength "minlength" $minlength "name" $name "placeholder" $placeholder "readonly" $readonly "required" $required "rows" $rows "spellcheck" $spellcheck "wrap" $wrap "tabindex" $tabindex)) }}

+ 60
- 0
layouts/shortcodes/hackcss-textinput.html View File

@@ -0,0 +1,60 @@
1
+<!-- {{/*
2
+HTML attributes: "id", "name", "class", "autocomplete", "autofocus", "disabled", "form", "formaction", "formmethod", "formtarget", "height", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "tabindex", "type", "value", "width"
3
+Possible types: "email", "hidden", "number", "password", "search", "tel", "text", "url"
4
+
5
+Basic usage:
6
+{{< hackcss-textinput >}}
7
+{{< hackcss-textinput type="password" >}}
8
+{{< hackcss-textinput type="email" placeholder="name@domain.example" >}}
9
+{{< hackcss-textinput disabled="true" >}}
10
+
11
+With control label and search input targeting form owner:
12
+{{< hackcss-formgroup >}}
13
+  {{< hackcss-label for="query" text="Enter search query:" />}}
14
+  {{< hackcss-textinput type="search" id="query" form="search" >}}
15
+{{< /hackcss-formgroup >}}
16
+
17
+Required with placeholder text and custom regex validation:
18
+{{< hackcss-form autocomplete="disabled" >}}
19
+  {{< hackcss-textinput
20
+      placeholder="associate-20"
21
+      name="AssociateTag"
22
+      pattern="^\b\w*\b-20$" >}}
23
+{{< /hackcss-form >}}
24
+
25
+Inside form group with warning label and help block:
26
+{{< hackcss-formgroup state="warning" >}}
27
+  {{< hackcss-label for="key64" text="64-bit PGP key:" />}}
28
+  {{< hackcss-textinput type="text" id="key64" >}}
29
+  {{< hackcss-helpblock text="In this format: BB73 67EE 9A70 A631" />}}
30
+{{< /hackcss-formgroup >}}
31
+
32
+*/}} -->
33
+{{ $id := .Get "id" }}
34
+{{ $name := .Get "name" }}
35
+{{ $class := .Get "class" }}
36
+{{ $autocomplete := .Get "autocomplete" }}
37
+{{ $autofocus := .Get "autofocus" }}
38
+{{ $disabled := .Get "disabled" }}
39
+{{ $form := .Get "form" }}
40
+{{ $formaction := .Get "formaction" }}
41
+{{ $formmethod := .Get "formmethod" }}
42
+{{ $formtarget := .Get "formtarget" }}
43
+{{ $height := .Get "height" }}
44
+{{ $max := .Get "max" }}
45
+{{ $maxlength := .Get "maxlength" }}
46
+{{ $min := .Get "min" }}
47
+{{ $minlength := .Get "minlength" }}
48
+{{ $multiple := .Get "multiple" }}
49
+{{ $pattern := .Get "pattern" }}
50
+{{ $placeholder := .Get "placeholder" }}
51
+{{ $readonly := .Get "readonly" }}
52
+{{ $required := .Get "required" }}
53
+{{ $size := .Get "size" }}
54
+{{ $spellcheck := .Get "spellcheck" }}
55
+{{ $step := .Get "step" }}
56
+{{ $tabindex := .Get "tabindex" }}
57
+{{ $type := .Get "type" }}
58
+{{ $value := .Get "value" }}
59
+{{ $width := .Get "width" }}
60
+{{ partial "components/textinput.html" (dict "attrs" (dict "id" $id "name" $name "class" $class "autocomplete" $autocomplete "autofocus" $autofocus "disabled" $disabled "form" $form "formaction" $formaction "formmethod" $formmethod "formtarget" $formtarget "height" $height "max" $max "maxlength" $maxlength "min" $min "minlength" $minlength "multiple" $multiple "pattern" $pattern "placeholder" $placeholder "readonly" $readonly "required" $required "size" $size "spellcheck" $spellcheck "step" $step "tabindex" $tabindex "type" $type "value" $value "width" $width)) }}

+ 2
- 1
layouts/shortcodes/hackcss-throbber.html View File

@@ -9,5 +9,6 @@ Inside button:
9 9
 
10 10
 Additional CSS-only loading elements:
11 11
 https://www.pexels.com/blog/css-only-loaders/
12
+
12 13
 */}} -->
13
-{{ partial "components/throbber.html" . }}
14
+{{ partial "components/throbber.html" . }}

Loading…
Cancel
Save