formio-sfds
Version:
The Form.io theme for sf.gov
222 lines (208 loc) • 8.34 kB
HTML
<html lang="en">
<head>
<title>WTF | formio-sfds</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/sfgov/forms.css">
<link rel="stylesheet" href="//unpkg.com/highlight.js@10.3.2/styles/github.css">
<style>
dt {
font-weight: bold;
}
pre {
white-space: pre-wrap;
word-break: break-word;
}
.hljs {
padding: 0;
}
</style>
</head>
<body>
<div class="formio-sfds">
<div class="container p-2">
<h1 class="h3 mb-4">
<a href="/">formio-sfds@{{ pkg.version }}</a> /
WTF
</h1>
<h2 class="d-1">What the form</h2>
<form class="mb-4" method="GET">
<h2>
<label for="url-input">Enter a URL:</label>
</h2>
<div class="d-flex flex-align-start">
<div class="flex-auto mr-2">
<input type="text" id="url-input" name="url" value="{{ query.url }}">
</div>
<div>
<button class="btn" type="submit">Go!</button>
</div>
</div>
<div class="small fg-light-slate mt-1">
Form page URLs on sf.gov (or Pantheon sites) and form.io URLs (including edit links) <em>should</em> work.
</div>
{% if pages %}
<div class="mt-1">
<label for="page-select">or choose a live form:</label>
<select id="page-select">
<option></option>
{% for page in pages %}
<option value="{{ page.url }}"
{% if page.url == sfgov.url %}
selected
{% endif %}
>
{{ page.title }} ({{ page.url }})
</option>
{% endfor %}
</select>
<div class="small fg-light-slate mt-1">
Selecting a page will populate the URL field above and submit the form automatically.
</div>
</div>
{% endif %}
</form>
{% if error %}
<div class="bg-red-1 p-2 border-1 border-red-3 round-1 mb-2">
{{ error }}
</div>
{% endif %}
{% if warnings.length %}
<ul class="bg-yellow-1 p-2 border-1 border-yellow-3 round-1 list-style-none">
{% for warning in warnings %}
<li>{{ warning }}</li>
{% endfor %}
</ul>
{% endif %}
<dl>
{% if sfgov.url %}
<dt>SF.gov form page</dt>
<dd class="mb-2">
{{ sfgov.title }}<br>
<a href="{{ sfgov.url }}">{{ sfgov.url }}</a>
( <a href="{{ sfgov.url }}/edit">edit</a> )<br>
Document language: {{ lang.name | default('English') }} ( <code>{{ lang.code | default('en') }}</code> )
{% if lang.links %}
<br>View in other languages:
{% for link in lang.links %}
<a href="?url={{ link.href }}">{{ link.lang.name }}</a>
{% if not loop.last %} | {% endif %}
{% endfor %}
{% endif %}
</dd>
{% endif %}
{% if formio.form %}
<dt>Form.io form</dt>
<dd class="mb-2">
<a href="{{ formio.url }}">{{ formio.form.title }}</a>
{% set formio_url %}https://portal.form.io/#/project/{{ formio.form.project }}/form/{{ formio.form._id }}{% endset %}
(
<a href="{{ formio_url }}/edit">edit</a> |
<a href="{{ formio_url }}/settings">settings</a> |
<a href="{{ formio_url }}/submission">submissions</a>
)
</dd>
{% elif formio.url %}
<dt>Form.io data source URL</dt>
<dd class="mb-2">
<a href="{{ formio.url }}">{{ formio.url }}</a>
</dd>
{% endif %}
{% if query.url %}
<dt class="{% if not translation.url %}fg-red-4{% endif %}">Translation</dt>
<dd class="mb-2">
{% if translation.url %}
{% if translation.source %}
{% if translation.source.url %}
<a href="{{ translation.source.url }}">{{ translation.source.title }}</a>
{% else %}
{{ translation.source.title }}
{% endif %}
{% endif %}
(
<a href="/api/translate?url={{ sfgov.url }}">translate</a> |
<a href="/api/strings?formUrl={{ formio.url }}">get strings</a> |
<a href="{{ translation.url }}">data API</a>
)
{% else %}
<div>
⚠️ <b>This form has not been translated.</b>
Please <a href="/docs/localization/#translate-a-form">see
the docs</a> to start the translation process.
</div>
<div class="mt-1">
Download the strings for this form by holding <kbd>option</kbd>
when clicking <a href="/api/strings?formUrl={{ formio.url }}">this JSON link</a>.
</div>
{% if sfgov.url %}
<div class="mt-1">
Once you’ve uploaded strings and connected the
form to Phrase, you can visit the
<a href="/api/translate?url={{ sfgov.url }}">translate view</a>
to translate them in context.
</div>
{% endif %}
{% endif %}
</dd>
{% endif %}
{% if formiojs.version %}
<dt>formio.js version</dt>
<dd class="mb-2">
<a href="https://unpkg.com/formiojs@{{ formiojs.version }}/">
<code>{{ formiojs.version }}</code>
</a>
( <a href="https://github.com/formio/formio.js/blob/v{{ formiojs.version }}/Changelog.md#readme">
changelog
</a> )
</dd>
{% endif %}
{% if theme.version %}
<dt>formio-sfds theme version</dt>
<dd class="mb-2">
<a href="https://unpkg.com/formio-sfds@{{ theme.version }}/">
<code>{{ theme.version }}</code>
</a>
( <a href="https://github.com/SFDigitalServices/formio-sfds/releases/tag/v{{ theme.version }}">
release notes
</a> )
<form action="/api/preview">
Preview this page with formio-sfds version:
<input type="text" name="version" value="latest" class="d-inline-block mx-1" style="width: 8em;">
<input type="hidden" name="url" value="{{ sfgov.url }}">
<button type="submit" class="btn">Go!</button>
</form>
</dd>
{% endif %}
{% if formio.options %}
<dt>Form.io render options</dt>
<dd class="mb-2">
<pre class="my-0"><code class="language-json bg-none">{{ formio.options | dump(2) }}</code></pre>
</dd>
{% endif %}
</dl>
{% if body %}
<details>
<summary>Response HTML</summary>
<pre class="border-1 border-bright-blue p-2 m-0 round-bottom-1"><code class="language-html bg-none">{{ body | e }}</code></pre>
</details>
{% endif %}
</div>
</div>
<script src="//unpkg.com/formiojs@{{ pkg.dependencies.formiojs }}/dist/formio.full.min.js"></script>
<script src="/dist/formio-sfds.standalone.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad()
var select = document.getElementById('page-select')
if (select) {
select.addEventListener('change', e => {
if (select.value) {
select.form.querySelector('[name=url]').value = select.value
select.form.submit()
}
})
}
</script>
</body>
</html>