123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- {% extends "layout.html" %}
- {% set title ='BIBFRAME ScriptShifter' %}
- {% block body %}
- <style>
- body{
- font-family: Avenir,Helvetica,Arial,sans-serif;
- }
- textarea{
- width: 99%;
- height: 15vh;
- padding: 0.5em;
- }
- #results{
- font-size: 1.25em;
- background-color: whitesmoke;
- margin-top: 1em;
- padding: 1em;
- }
- </style>
- <form id="transliterate" action="/transliterate" method="POST">
- <fieldset>
- <label for="text">Input text</label>
- <textarea id="text" name="text"></textarea>
- <label for="lang">Language</label>
- <select id="lang" name="lang">
- {% for k, v in languages.items() %}
- <option value="{{ k }}">{{ v["name"] }}</option>
- {% endfor %}
- </select>
- <div>
- <label class="label-inline" for="r2s">Roman to Script</label>
- <input type="checkbox" id="r2s" name="r2s">
- </div>
- </fieldset>
- <fieldset>
- <legend>Capitalize</legend>
- <div>
- <label class="label-inline" for="no-change">No change</label>
- <input
- type="radio" id="no-change" name="capitalize"
- value="no_change" checked>
- </div>
- <div>
- <label class="label-inline" for="first">First word</label>
- <input type="radio" id="first" name="capitalize" value="first">
- </div>
- <div>
- <label class="label-inline" for="all">All words</label>
- <input type="radio" id="all" name="capitalize" value="all">
- </div>
- </fieldset>
- <fieldset>
- <input class="button-primary" type="submit" value="Transliterate!">
- </fieldset>
- </form>
- <div id="results">
- Results will appear here.
- </div>
- <script type="text/javascript">
- document.getElementById('transliterate').addEventListener('submit',(event)=>{
- const data = new URLSearchParams();
- let capitalize = Array.from(document.getElementsByName("capitalize")).find(r => r.checked).value;
- data.append('text',document.getElementById('text').value)
- data.append('lang',document.getElementById('lang').value)
- if (document.getElementById('r2s').checked){
- data.append('r2s','on')
- }
- data.append('capitalize',capitalize)
- fetch('/transliterate', {
- method: 'post',
- body: data,
- })
- .then(response=>response.text())
- .then((text)=>{
- document.getElementById('results').innerText = text
- }).catch((error) => {
- alert("Error:\n" + error)
- });
- event.preventDefault()
- return false
- })
- </script>
- <!--
- <form action="/transliterate" method="POST">
- <fieldset>
- <label for="text">Input text</label>
- <textarea id="text" name="text"></textarea>
- <label for="lang">Language</label>
- <select id="lang" name="lang">
- {% for k, v in languages.items() %}
- <option value="{{ k }}">{{ v["name"] }}</option>
- {% endfor %}
- </select>
- <div>
- <label class="label-inline" for="r2s">Roman to Script</label>
- <input type="checkbox" id="r2s" name="r2s">
- </div>
- </fieldset>
- <fieldset>
- <legend>Capitalize</legend>
- <div>
- <label class="label-inline" for="no-change">No change</label>
- <input
- type="radio" id="no-change" name="capitalize"
- value="no_change" checked>
- </div>
- <div>
- <label class="label-inline" for="first">First word</label>
- <input type="radio" id="first" name="capitalize" value="first">
- </div>
- <div>
- <label class="label-inline" for="all">All words</label>
- <input type="radio" id="all" name="capitalize" value="all">
- </div>
- </fieldset>
- <fieldset>
- <input class="button-primary" type="submit" value="Transliterate!">
- </fieldset>
- </form> -->
- </div>
- {% endblock %}
|