1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110

<!-- $PF_GENERATE_ONCE$ -->
{% import (
  "{{{ .Package }}}/app"
  "{{{ .Package }}}/app/controller/cutil"
  "{{{ .Package }}}/app/util"
  "{{{ .Package }}}/views/components"
  "{{{ .Package }}}/views/components/view"
  "{{{ .Package }}}/views/layout"
) %}

{% code type Testbed struct { layout.Basic } %}

{% func (p *Testbed) Body(as *app.State, ps *cutil.PageState) %}
{%= tabs(as, ps) %}
{%= accordion(as, ps) %}
{%= modal(as, ps) %}
{%= icons(as, ps) %}
{%= script(as, ps) %}
{% endfunc %}

{%- func tabs(as *app.State, ps *cutil.PageState) -%}
  <div class="card">
    <h3>Tabs</h3>
    <div class="tabs">
      {%- for _, o := range []string{"Alpha", "Beta", "Gamma", "Delta", "Epsilon"} -%}
      <input name="type" type="radio" id="tab-{%s o %}" class="input"/>
      <label for="tab-{%s o %}" class="label">{%s o %}</label>
      <div class="panel"><p>This is a tab named {%s o %}</p></div>
      {%- endfor -%}
    </div>
  </div>
{%- endfunc -%}

{%- func accordion(as *app.State, ps *cutil.PageState) -%}
  <div class="card">
    <h3>Accordion</h3>
    <ul class="accordion">
      <li>
        <input id="accordion-a" type="checkbox" hidden="hidden" />
        <label for="accordion-a">{%= components.ExpandCollapse(3, ps) %} Option A</label>
        <div class="bd"><div><div>
          Option A!
        </div></div></div>
      </li>
      <li>
        <input id="accordion-c" type="checkbox" hidden="hidden" />
        <label for="accordion-c">{%= components.ExpandCollapse(3, ps) %} Option B (no animation)</label>
        <div class="bd-no-animation">
          Option B!
        </div>
      </li>
    </ul>
  </div>
{%- endfunc -%}

{%- func modal(as *app.State, ps *cutil.PageState) -%}
  <div class="card">
    <h3>Modal</h3>
    <div class="mt"><a href="#modal-x"><button>Open modal</button></a></div>
  </div>
  <div id="modal-x" class="modal" style="display: none;">
    <a class="backdrop" href="#"></a>
    <div class="modal-content">
      <div class="modal-header">
        <a href="#" class="modal-close">×</a>
        <h2>Modal</h2>
      </div>
      <div class="modal-body">
        Here's a modal body!
      </div>
    </div>
  </div>
{%- endfunc -%}

{%- func icons(as *app.State, ps *cutil.PageState) -%}
  <div class="card">
    <h3>SVG Icons</h3>
    {%= components.IconGallery(as, ps) %}
  </div>
{%- endfunc -%}

{%- func script(as *app.State, ps *cutil.PageState) -%}
  <div class="card">
    <div class="right"><a class="link-confirm" href="/about" data-message="Are you sure you want to go to the about page?"><button>Safe Link</button></a></div>
    <h3>JavaScript</h3>
    <div class="mt">
      {%- code t := util.TimeCurrentP() -%}
      <table class="mt min-200">
        <tbody>
          <tr>
            <th class="shrink">Timestamp</th>
            <td>{%= view.Timestamp(t) %}</td>
          </tr>
          <tr>
            <th>Timestamp (ms)</th>
            <td>{%= view.TimestampMillis(t) %}</td>
          </tr>
          <tr>
            <th>Relative</th>
            <td>{%= view.TimestampRelative(t, true) %}</td>
          </tr>
          <tr>
            <th>Relative (live)</th>
            <td>{%= view.TimestampRelative(t, false) %}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
{%- endfunc -%}