~metalune/simplytranslate-devel

1

<textarea> auto resize

Esmail EL BoB <esmail@esmailelbob.xyz>
Details
Message ID
<4186bcc1-b016-b665-0f43-fe78519fece0@esmailelbob.xyz>
DKIM signature
pass
Download raw message
 From fa3b8c9b10053cdc5cbb7fa16342bb786a87d56a Mon Sep 17 00:00:00 2001
From: Esmail EL BoB <esmail@esmailelbob.xyz>
Date: Tue, 5 Apr 2022 06:23:07 +0200
Subject: [PATCH] Auto rezise of <textarea>

---
  templates/index.html | 366 +++++++++++++++++++++++--------------------
  1 file changed, 195 insertions(+), 171 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 1bc041b..e16ccd4 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,31 +1,32 @@
  <!doctype html>

  {% macro lang_option(lang_name, current_lang) %}
-    <option value="{{ lang_name }}" {{ 'selected' if current_lang == 
lang_name else '' }}>{{ lang_name }}</option>
+<option value="{{ lang_name }}" {{ 'selected' if current_lang == 
lang_name else '' }}>{{ lang_name }}</option>
  {% endmacro %}

  {% macro supported_source_lang_options(current_lang) %}
-    {% for lang_name in supported_source_languages.keys() %}
-        {{ lang_option(lang_name, current_lang) }}
-    {% endfor %}
+{% for lang_name in supported_source_languages.keys() %}
+{{ lang_option(lang_name, current_lang) }}
+{% endfor %}
  {% endmacro %}

  {% macro supported_target_lang_options(current_lang) %}
-    {% for lang_name in supported_target_languages.keys() %}
-        {{ lang_option(lang_name, current_lang) }}
-    {% endfor %}
+{% for lang_name in supported_target_languages.keys() %}
+{{ lang_option(lang_name, current_lang) }}
+{% endfor %}
  {% endmacro %}


  <html lang="en">
-    <head>
-        <title>SimplyTranslate</title>
-        <link rel="shortcut icon" href="{{ url_for('static', 
filename='favicon.ico') }}">
-        <meta name="description" content="Experience simple and private 
Google translations">
-        <meta name="viewport" content="width=device-width, 
initial-scale=1.0">
-        <meta charset="UTF-8">
-
-        <style>
+
+<head>
+    <title>SimplyTranslate</title>
+    <link rel="shortcut icon" href="{{ url_for('static', 
filename='favicon.ico') }}">
+    <meta name="description" content="Experience simple and private 
Google translations">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8">
+
+    <style>
          .center {
              text-align: center;
          }
@@ -125,7 +126,7 @@
          }

          .definitions li:not(:last-child) {
-          margin-bottom: 1rem;
+            margin-bottom: 1rem;
          }

          @media screen and (max-width: 1200px) {
@@ -193,189 +194,212 @@
                  color: yellow;
              }
          }
-        </style>
-    </head>
-
-    <body>
-        <header class="center"><h1>SimplyTranslate</h1></header>
-
-        <form action="/?engine={{ engine }}" method="POST" 
id="translation-form">
-
-            <!-- engine buttons -->
-            {% if engines|length > 1 %}
-                <div class="center">
-                    Translation Engine
-                    {% for _engine in engines %}
-                        <a style="
+    </style>
+</head>
+
+<body>
+    <header class="center">
+        <h1>SimplyTranslate</h1>
+    </header>
+
+    <form action="/?engine={{ engine }}" method="POST" 
id="translation-form">
+
+        <!-- engine buttons -->
+        {% if engines|length > 1 %}
+        <div class="center">
+            Translation Engine
+            {% for _engine in engines %}
+            <a style="
                                    {# Show the currently selected 
engine by underlining it #}
                                    {% if engine == _engine.name %}
                                      text-decoration: underline;
                                    {% endif %}
                              " href="/?engine={{ _engine.name }}">
-                            {{ _engine.display_name -}}
-                        </a>
+                {{ _engine.display_name -}}
+            </a>

-                        {% if not loop.last %}
-                            |
-                        {% endif %}
-                    {% endfor %}
-                </div>
-                <br>
+            {% if not loop.last %}
+            |
              {% endif %}
+            {% endfor %}
+        </div>
+        <br>
+        {% endif %}
+
+        <!-- from and to language -->
+        <div class="wrap">
+            <div class="language">
+                {% if use_text_fields %}
+                <input type="text" id="from_language" 
name="from_language" aria-label="Source language"
+                    value="{{ from_l }}" placeholder="from" />
+                {% else %}
+                <select name="from_language" id="from_language" 
aria-label="Source language">
+                    {{ supported_source_lang_options(from_l) }}
+                </select>
+                {% endif %}
+            </div>

-            <!-- from and to language -->
-            <div class="wrap">
-                <div class="language">
-                    {% if use_text_fields %}
-                        <input type="text" id="from_language" 
name="from_language" aria-label="Source language" value="{{ from_l }}" 
placeholder="from" />
-                    {% else %}
-                        <select name="from_language" id="from_language" 
aria-label="Source language">
-                            {{ supported_source_lang_options(from_l) }}
-                        </select>
-                    {% endif %}
-                </div>
-
-                <div class="switch_languages">
-                    <button id="switchbutton" aria-label="Switch 
languages" formaction="/switchlanguages/?engine={{ engine }}" 
type="submit">&lt;-&gt;</button>
-                </div>
+            <div class="switch_languages">
+                <button id="switchbutton" aria-label="Switch languages"
+                    formaction="/switchlanguages/?engine={{ engine }}" 
type="submit">&lt;-&gt;</button>
+            </div>

-                <div class="language">
-                    {% if use_text_fields %}
-                        <input type="text" id="to_language" 
aria-label="Target language" name="to_language" value="{{ to_l }}" 
placeholder="from" />
-                    {% else %}
-                        <select name="to_language" id="to_language" 
aria-label="Target language">
-                            {{ supported_target_lang_options(to_l) }}
-                        </select>
-                    {% endif %}
-                </div>
+            <div class="language">
+                {% if use_text_fields %}
+                <input type="text" id="to_language" aria-label="Target 
language" name="to_language" value="{{ to_l }}"
+                    placeholder="from" />
+                {% else %}
+                <select name="to_language" id="to_language" 
aria-label="Target language">
+                    {{ supported_target_lang_options(to_l) }}
+                </select>
+                {% endif %}
              </div>
+        </div>

-            {% if could_not_switch_languages %}
-                <div class="center" id="could_not_switch_languages_text">
-                    Sorry, {{ engine }} doesn't support switching from 
autodetect.
-                </div>
+        {% if could_not_switch_languages %}
+        <div class="center" id="could_not_switch_languages_text">
+            Sorry, {{ engine }} doesn't support switching from autodetect.
+        </div>
+        <br>
+        {% endif %}
+
+        <!-- text boxes -->
+        <div class="wrap">
+            <div class="item-wrapper">
+                <textarea autofocus class="item" id="input" 
name="input" dir="auto"
+                    placeholder="Enter Text Here">{{ inp }}</textarea>
+                <!-- TTS for the input text -->
+                {%- if tts_enabled and tts_from is not none -%}
                  <br>
-            {% endif %}
-
-            <!-- text boxes -->
-            <div class="wrap">
-                <div class="item-wrapper">
-                    <textarea autofocus class="item" id="input" 
name="input" dir="auto"  placeholder="Enter Text Here">{{ inp }}</textarea>
-                    <!-- TTS for the input text -->
-                    {%- if tts_enabled and tts_from is not none -%}
-                        <br>
-                        <div class="center">
-                            <audio controls>
-                                <source type="audio/mpeg" src="{{ 
tts_from }}">
-                            </audio>
-                        </div>
-                    {%- endif -%}
+                <div class="center">
+                    <audio controls>
+                        <source type="audio/mpeg" src="{{ tts_from }}">
+                    </audio>
                  </div>
+                {%- endif -%}
+            </div>



-                <div class="item-wrapper">
-                    <textarea class="translation item" dir="auto" 
placeholder="Translation" readonly>
+            <div class="item-wrapper">
+                <textarea class="translation item" dir="auto" 
placeholder="Translation" readonly>
                          {%- if translation is not none -%}{%- if 
translation['translated-text'] is not none -%}{{ 
translation['translated-text'] }}{%- endif -%}{%- endif -%}
                      </textarea>
-                    <!-- TTS for the output text -->
-                    {%- if tts_enabled and tts_to is not none -%}
-                        <br>
-                        <div class="center">
-                            <audio controls>
-                                <source type="audio/mpeg" src="{{ 
tts_to }}">
-                            </audio>
-                        </div>
-                    {%- endif -%}
+                <!-- TTS for the output text -->
+                {%- if tts_enabled and tts_to is not none -%}
+                <br>
+                <div class="center">
+                    <audio controls>
+                        <source type="audio/mpeg" src="{{ tts_to }}">
+                    </audio>
                  </div>
+                {%- endif -%}
              </div>
+        </div>

-            <br>
+        <br>

-            <div class="center">
-                <!-- translate button -->
-                <button type="submit">Translate with {{ engine }}!</button>
-            </div>
+        <div class="center">
+            <!-- translate button -->
+            <button type="submit">Translate with {{ engine }}!</button>
+        </div>

-            <br>
+        <br>

-            <div class="center">
-                <!-- link to share translation -->
-                <a href="/?engine={{ engine }}&text={{ inp|urlencode 
}}&sl={{ from_l_code }}&tl={{ to_l_code }}">Copy this link to share this 
translation with others</a>
-            </div>
+        <div class="center">
+            <!-- link to share translation -->
+            <a href="/?engine={{ engine }}&text={{ inp|urlencode 
}}&sl={{ from_l_code }}&tl={{ to_l_code }}">Copy this
+                link to share this translation with others</a>
+        </div>

-            <br>
-
-            <div id="definitions_and_translations">
-                {% if translation is not none and "definitions" in 
translation %}
-                    <div class="definitions">
-                        {% for type, definitions in 
translation["definitions"].items() %}
-                            <span class="def_type">{{type}}</span>
-                            <ol>
-                                {% for definition_item in definitions %}
-                                    <li>
- {{definition_item["definition"]}}
-                                        <br>
-                                        {% if "use-in-sentence" in 
definition_item %}
-                                            <span class="use_in_sentence">
- "{{definition_item["use-in-sentence"]}}"
-                                            </span>
-                                            <br>
-                                        {% endif %}
-                                        {% if "synonyms" in 
definition_item %}
-                                            {% for synonym_type in 
definition_item["synonyms"] %}
-                                                <span class="syn">
-                                                    {% if synonym_type 
!= "" %}
- <br>
-                                                        <span 
class="syn_type">{{synonym_type}}: </span>
-                                                    {% endif %}
-                                                    {{", 
".join(definition_item["synonyms"][synonym_type])}}
-                                                </span>
-                                            {% endfor %}
-                                        {% endif %}
-                                    </li>
-                                {% endfor %}
-                            </ol>
-                        {% endfor %}
-                    </div>
-                {% endif %}
+        <br>

-                {% if translation is not none and "translations" in 
translation %}
-                    <div class="translations">
-                        {% for def_type, translations in 
translation["translations"].items() %}
-                            <span class="def_type">{{def_type}}</span>
-                            <ul>
-                                {% for word, word_translations in 
translations.items() %}
-                                    <li>
-                                        <span 
class="syn_type">{{word}}:</span>
-                                        <span class="syn">{{", 
".join(word_translations["words"])}}</span>
-                                        <span 
class="syn_type">{{word_translations["frequency"]}}</span>
-                                    </li>
-                                    <br>
-                                {% endfor %}
-                            </ul>
+        <div id="definitions_and_translations">
+            {% if translation is not none and "definitions" in 
translation %}
+            <div class="definitions">
+                {% for type, definitions in 
translation["definitions"].items() %}
+                <span class="def_type">{{type}}</span>
+                <ol>
+                    {% for definition_item in definitions %}
+                    <li>
+                        {{definition_item["definition"]}}
+                        <br>
+                        {% if "use-in-sentence" in definition_item %}
+                        <span class="use_in_sentence">
+ "{{definition_item["use-in-sentence"]}}"
+                        </span>
+                        <br>
+                        {% endif %}
+                        {% if "synonyms" in definition_item %}
+                        {% for synonym_type in 
definition_item["synonyms"] %}
+                        <span class="syn">
+                            {% if synonym_type != "" %}
+                            <br>
+                            <span class="syn_type">{{synonym_type}}: 
</span>
+                            {% endif %}
+                            {{", 
".join(definition_item["synonyms"][synonym_type])}}
+                        </span>
                          {% endfor %}
-                    </div>
-                {% endif %}
+                        {% endif %}
+                    </li>
+                    {% endfor %}
+                </ol>
+                {% endfor %}
              </div>
+            {% endif %}

-        </form>
+            {% if translation is not none and "translations" in 
translation %}
+            <div class="translations">
+                {% for def_type, translations in 
translation["translations"].items() %}
+                <span class="def_type">{{def_type}}</span>
+                <ul>
+                    {% for word, word_translations in 
translations.items() %}
+                    <li>
+                        <span class="syn_type">{{word}}:</span>
+                        <span class="syn">{{", 
".join(word_translations["words"])}}</span>
+                        <span 
class="syn_type">{{word_translations["frequency"]}}</span>
+                    </li>
+                    <br>
+                    {% endfor %}
+                </ul>
+                {% endfor %}
+            </div>
+            {% endif %}
+        </div>

-        <br>
-        <br>
-        <br>
+    </form>
+
+    <br>
+    <br>
+    <br>
+
+    <footer class="center">
+        <a href="/prefs">Preferences</a> | <a 
href="https://simple-web.org/projects/simplytranslate.html">Project
+            Page</a> | <a href="https://simple-web.org">Simple Web 
Project</a>
+    </footer>
+
+    <script>
+        // this code submits the translation form when pressing 
Ctrl/Meta+Enter while focussed on the input text field
+ document.getElementById("input").addEventListener("keydown", function 
(event) {
+            if (event.keyCode === 13 && (event.metaKey || event.ctrlKey)) {
+ document.getElementById("translation-form").submit();
+            }
+        });
+    </script>
+    <script>
+        // Auto resize textarea to fit words inside it without need to 
scroll -- Thanks to: https://stackoverflow.com/a/25621277
+        const tx = document.getElementsByTagName("textarea");
+
+        for (let i = 0; i < tx.length; i++) {
+            tx[i].setAttribute("style", "height:" + 
(tx[i].scrollHeight) + "px;overflow-y:hidden;");
+            tx[i].addEventListener("input", OnInput, false);
+        }
+
+        function OnInput(e) {
+            this.style.height = 150 + "px";
+            this.style.height = (this.scrollHeight) + "px";
+        }
+    </script>
+</body>

-        <footer class="center">
-            <a href="/prefs">Preferences</a> | <a 
href="https://simple-web.org/projects/simplytranslate.html">Project 
Page</a> | <a href="https://simple-web.org">Simple Web Project</a>
-        </footer>
-
-        <script>
-            // this code submits the translation form when pressing 
Ctrl/Meta+Enter while focussed on the input text field
- document.getElementById("input").addEventListener("keydown", 
function(event) {
-                if (event.keyCode === 13 && (event.metaKey || 
event.ctrlKey)) {
- document.getElementById("translation-form").submit();
-                }
-            });
-        </script>
-    </body>
-</html>
+</html>
\ No newline at end of file
-- 
2.35.1
Details
Message ID
<5554438.DvuYhMxLoT@thinkpad>
In-Reply-To
<4186bcc1-b016-b665-0f43-fe78519fece0@esmailelbob.xyz> (view parent)
DKIM signature
pass
Download raw message
On Dienstag, 5. April 2022 06:32:15 CEST Esmail EL BoB wrote:
>  From fa3b8c9b10053cdc5cbb7fa16342bb786a87d56a Mon Sep 17 00:00:00 2001
> From: Esmail EL BoB <esmail@esmailelbob.xyz>
> Date: Tue, 5 Apr 2022 06:23:07 +0200
> Subject: [PATCH] Auto rezise of <textarea>
> 
> ---
>   templates/index.html | 366 +++++++++++++++++++++++--------------------
>   1 file changed, 195 insertions(+), 171 deletions(-)
> 
> diff --git a/templates/index.html b/templates/index.html
> index 1bc041b..e16ccd4 100644
> --- a/templates/index.html
> +++ b/templates/index.html
> @@ -1,31 +1,32 @@
>   <!doctype html>
> 
>   {% macro lang_option(lang_name, current_lang) %}
> -    <option value="{{ lang_name }}" {{ 'selected' if current_lang == 
> lang_name else '' }}>{{ lang_name }}</option>
> +<option value="{{ lang_name }}" {{ 'selected' if current_lang == 
> lang_name else '' }}>{{ lang_name }}</option>
>   {% endmacro %}
> 
>   {% macro supported_source_lang_options(current_lang) %}
> -    {% for lang_name in supported_source_languages.keys() %}
> -        {{ lang_option(lang_name, current_lang) }}
> -    {% endfor %}
> +{% for lang_name in supported_source_languages.keys() %}
> +{{ lang_option(lang_name, current_lang) }}
> +{% endfor %}
>   {% endmacro %}
> 
>   {% macro supported_target_lang_options(current_lang) %}
> -    {% for lang_name in supported_target_languages.keys() %}
> -        {{ lang_option(lang_name, current_lang) }}
> -    {% endfor %}
> +{% for lang_name in supported_target_languages.keys() %}
> +{{ lang_option(lang_name, current_lang) }}
> +{% endfor %}
>   {% endmacro %}
> 
> 
>   <html lang="en">
> -    <head>
> -        <title>SimplyTranslate</title>
> -        <link rel="shortcut icon" href="{{ url_for('static', 
> filename='favicon.ico') }}">
> -        <meta name="description" content="Experience simple and private 
> Google translations">
> -        <meta name="viewport" content="width=device-width, 
> initial-scale=1.0">
> -        <meta charset="UTF-8">
> -
> -        <style>
> +
> +<head>
> +    <title>SimplyTranslate</title>
> +    <link rel="shortcut icon" href="{{ url_for('static', 
> filename='favicon.ico') }}">
> +    <meta name="description" content="Experience simple and private 
> Google translations">
> +    <meta name="viewport" content="width=device-width, initial-scale=1.0">
> +    <meta charset="UTF-8">
> +
> +    <style>
>           .center {
>               text-align: center;
>           }
> @@ -125,7 +126,7 @@
>           }
> 
>           .definitions li:not(:last-child) {
> -          margin-bottom: 1rem;
> +            margin-bottom: 1rem;
>           }
> 
>           @media screen and (max-width: 1200px) {
> @@ -193,189 +194,212 @@
>                   color: yellow;
>               }
>           }
> -        </style>
> -    </head>
> -
> -    <body>
> -        <header class="center"><h1>SimplyTranslate</h1></header>
> -
> -        <form action="/?engine={{ engine }}" method="POST" 
> id="translation-form">
> -
> -            <!-- engine buttons -->
> -            {% if engines|length > 1 %}
> -                <div class="center">
> -                    Translation Engine
> -                    {% for _engine in engines %}
> -                        <a style="
> +    </style>
> +</head>
> +
> +<body>
> +    <header class="center">
> +        <h1>SimplyTranslate</h1>
> +    </header>
> +
> +    <form action="/?engine={{ engine }}" method="POST" 
> id="translation-form">
> +
> +        <!-- engine buttons -->
> +        {% if engines|length > 1 %}
> +        <div class="center">
> +            Translation Engine
> +            {% for _engine in engines %}
> +            <a style="
>                                     {# Show the currently selected 
> engine by underlining it #}
>                                     {% if engine == _engine.name %}
>                                       text-decoration: underline;
>                                     {% endif %}
>                               " href="/?engine={{ _engine.name }}">
> -                            {{ _engine.display_name -}}
> -                        </a>
> +                {{ _engine.display_name -}}
> +            </a>
> 
> -                        {% if not loop.last %}
> -                            |
> -                        {% endif %}
> -                    {% endfor %}
> -                </div>
> -                <br>
> +            {% if not loop.last %}
> +            |
>               {% endif %}
> +            {% endfor %}
> +        </div>
> +        <br>
> +        {% endif %}
> +
> +        <!-- from and to language -->
> +        <div class="wrap">
> +            <div class="language">
> +                {% if use_text_fields %}
> +                <input type="text" id="from_language" 
> name="from_language" aria-label="Source language"
> +                    value="{{ from_l }}" placeholder="from" />
> +                {% else %}
> +                <select name="from_language" id="from_language" 
> aria-label="Source language">
> +                    {{ supported_source_lang_options(from_l) }}
> +                </select>
> +                {% endif %}
> +            </div>
> 
> -            <!-- from and to language -->
> -            <div class="wrap">
> -                <div class="language">
> -                    {% if use_text_fields %}
> -                        <input type="text" id="from_language" 
> name="from_language" aria-label="Source language" value="{{ from_l }}" 
> placeholder="from" />
> -                    {% else %}
> -                        <select name="from_language" id="from_language" 
> aria-label="Source language">
> -                            {{ supported_source_lang_options(from_l) }}
> -                        </select>
> -                    {% endif %}
> -                </div>
> -
> -                <div class="switch_languages">
> -                    <button id="switchbutton" aria-label="Switch 
> languages" formaction="/switchlanguages/?engine={{ engine }}" 
> type="submit">&lt;-&gt;</button>
> -                </div>
> +            <div class="switch_languages">
> +                <button id="switchbutton" aria-label="Switch languages"
> +                    formaction="/switchlanguages/?engine={{ engine }}" 
> type="submit">&lt;-&gt;</button>
> +            </div>
> 
> -                <div class="language">
> -                    {% if use_text_fields %}
> -                        <input type="text" id="to_language" 
> aria-label="Target language" name="to_language" value="{{ to_l }}" 
> placeholder="from" />
> -                    {% else %}
> -                        <select name="to_language" id="to_language" 
> aria-label="Target language">
> -                            {{ supported_target_lang_options(to_l) }}
> -                        </select>
> -                    {% endif %}
> -                </div>
> +            <div class="language">
> +                {% if use_text_fields %}
> +                <input type="text" id="to_language" aria-label="Target 
> language" name="to_language" value="{{ to_l }}"
> +                    placeholder="from" />
> +                {% else %}
> +                <select name="to_language" id="to_language" 
> aria-label="Target language">
> +                    {{ supported_target_lang_options(to_l) }}
> +                </select>
> +                {% endif %}
>               </div>
> +        </div>
> 
> -            {% if could_not_switch_languages %}
> -                <div class="center" id="could_not_switch_languages_text">
> -                    Sorry, {{ engine }} doesn't support switching from 
> autodetect.
> -                </div>
> +        {% if could_not_switch_languages %}
> +        <div class="center" id="could_not_switch_languages_text">
> +            Sorry, {{ engine }} doesn't support switching from autodetect.
> +        </div>
> +        <br>
> +        {% endif %}
> +
> +        <!-- text boxes -->
> +        <div class="wrap">
> +            <div class="item-wrapper">
> +                <textarea autofocus class="item" id="input" 
> name="input" dir="auto"
> +                    placeholder="Enter Text Here">{{ inp }}</textarea>
> +                <!-- TTS for the input text -->
> +                {%- if tts_enabled and tts_from is not none -%}
>                   <br>
> -            {% endif %}
> -
> -            <!-- text boxes -->
> -            <div class="wrap">
> -                <div class="item-wrapper">
> -                    <textarea autofocus class="item" id="input" 
> name="input" dir="auto"  placeholder="Enter Text Here">{{ inp }}</textarea>
> -                    <!-- TTS for the input text -->
> -                    {%- if tts_enabled and tts_from is not none -%}
> -                        <br>
> -                        <div class="center">
> -                            <audio controls>
> -                                <source type="audio/mpeg" src="{{ 
> tts_from }}">
> -                            </audio>
> -                        </div>
> -                    {%- endif -%}
> +                <div class="center">
> +                    <audio controls>
> +                        <source type="audio/mpeg" src="{{ tts_from }}">
> +                    </audio>
>                   </div>
> +                {%- endif -%}
> +            </div>
> 
> 
> 
> -                <div class="item-wrapper">
> -                    <textarea class="translation item" dir="auto" 
> placeholder="Translation" readonly>
> +            <div class="item-wrapper">
> +                <textarea class="translation item" dir="auto" 
> placeholder="Translation" readonly>
>                           {%- if translation is not none -%}{%- if 
> translation['translated-text'] is not none -%}{{ 
> translation['translated-text'] }}{%- endif -%}{%- endif -%}
>                       </textarea>
> -                    <!-- TTS for the output text -->
> -                    {%- if tts_enabled and tts_to is not none -%}
> -                        <br>
> -                        <div class="center">
> -                            <audio controls>
> -                                <source type="audio/mpeg" src="{{ 
> tts_to }}">
> -                            </audio>
> -                        </div>
> -                    {%- endif -%}
> +                <!-- TTS for the output text -->
> +                {%- if tts_enabled and tts_to is not none -%}
> +                <br>
> +                <div class="center">
> +                    <audio controls>
> +                        <source type="audio/mpeg" src="{{ tts_to }}">
> +                    </audio>
>                   </div>
> +                {%- endif -%}
>               </div>
> +        </div>
> 
> -            <br>
> +        <br>
> 
> -            <div class="center">
> -                <!-- translate button -->
> -                <button type="submit">Translate with {{ engine
> }}!</button>
 -            </div>
> +        <div class="center">
> +            <!-- translate button -->
> +            <button type="submit">Translate with {{ engine }}!</button>
> +        </div>
> 
> -            <br>
> +        <br>
> 
> -            <div class="center">
> -                <!-- link to share translation -->
> -                <a href="/?engine={{ engine }}&text={{ inp|urlencode 
> }}&sl={{ from_l_code }}&tl={{ to_l_code }}">Copy this link to share this 
> translation with others</a>
> -            </div>
> +        <div class="center">
> +            <!-- link to share translation -->
> +            <a href="/?engine={{ engine }}&text={{ inp|urlencode 
> }}&sl={{ from_l_code }}&tl={{ to_l_code }}">Copy this
> +                link to share this translation with others</a>
> +        </div>
> 
> -            <br>
> -
> -            <div id="definitions_and_translations">
> -                {% if translation is not none and "definitions" in 
> translation %}
> -                    <div class="definitions">
> -                        {% for type, definitions in 
> translation["definitions"].items() %}
> -                            <span class="def_type">{{type}}</span>
> -                            <ol>
> -                                {% for definition_item in definitions %}
> -                                    <li>
> - {{definition_item["definition"]}}
> -                                        <br>
> -                                        {% if "use-in-sentence" in 
> definition_item %}
> -                                            <span class="use_in_sentence">
> - "{{definition_item["use-in-sentence"]}}"
> -                                            </span>
> -                                            <br>
> -                                        {% endif %}
> -                                        {% if "synonyms" in 
> definition_item %}
> -                                            {% for synonym_type in 
> definition_item["synonyms"] %}
> -                                                <span class="syn">
> -                                                    {% if synonym_type 
> != "" %}
> - <br>
> -                                                        <span 
> class="syn_type">{{synonym_type}}: </span>
> -                                                    {% endif %}
> -                                                    {{", 
> ".join(definition_item["synonyms"][synonym_type])}}
> -                                                </span>
> -                                            {% endfor %}
> -                                        {% endif %}
> -                                    </li>
> -                                {% endfor %}
> -                            </ol>
> -                        {% endfor %}
> -                    </div>
> -                {% endif %}
> +        <br>
> 
> -                {% if translation is not none and "translations" in 
> translation %}
> -                    <div class="translations">
> -                        {% for def_type, translations in 
> translation["translations"].items() %}
> -                            <span class="def_type">{{def_type}}</span>
> -                            <ul>
> -                                {% for word, word_translations in 
> translations.items() %}
> -                                    <li>
> -                                        <span 
> class="syn_type">{{word}}:</span>
> -                                        <span class="syn">{{", 
> ".join(word_translations["words"])}}</span>
> -                                        <span 
> class="syn_type">{{word_translations["frequency"]}}</span>
> -                                    </li>
> -                                    <br>
> -                                {% endfor %}
> -                            </ul>
> +        <div id="definitions_and_translations">
> +            {% if translation is not none and "definitions" in 
> translation %}
> +            <div class="definitions">
> +                {% for type, definitions in 
> translation["definitions"].items() %}
> +                <span class="def_type">{{type}}</span>
> +                <ol>
> +                    {% for definition_item in definitions %}
> +                    <li>
> +                        {{definition_item["definition"]}}
> +                        <br>
> +                        {% if "use-in-sentence" in definition_item %}
> +                        <span class="use_in_sentence">
> + "{{definition_item["use-in-sentence"]}}"
> +                        </span>
> +                        <br>
> +                        {% endif %}
> +                        {% if "synonyms" in definition_item %}
> +                        {% for synonym_type in 
> definition_item["synonyms"] %}
> +                        <span class="syn">
> +                            {% if synonym_type != "" %}
> +                            <br>
> +                            <span class="syn_type">{{synonym_type}}: 
> </span>
> +                            {% endif %}
> +                            {{", 
> ".join(definition_item["synonyms"][synonym_type])}}
> +                        </span>
>                           {% endfor %}
> -                    </div>
> -                {% endif %}
> +                        {% endif %}
> +                    </li>
> +                    {% endfor %}
> +                </ol>
> +                {% endfor %}
>               </div>
> +            {% endif %}
> 
> -        </form>
> +            {% if translation is not none and "translations" in 
> translation %}
> +            <div class="translations">
> +                {% for def_type, translations in 
> translation["translations"].items() %}
> +                <span class="def_type">{{def_type}}</span>
> +                <ul>
> +                    {% for word, word_translations in 
> translations.items() %}
> +                    <li>
> +                        <span class="syn_type">{{word}}:</span>
> +                        <span class="syn">{{", 
> ".join(word_translations["words"])}}</span>
> +                        <span 
> class="syn_type">{{word_translations["frequency"]}}</span>
> +                    </li>
> +                    <br>
> +                    {% endfor %}
> +                </ul>
> +                {% endfor %}
> +            </div>
> +            {% endif %}
> +        </div>
> 
> -        <br>
> -        <br>
> -        <br>
> +    </form>
> +
> +    <br>
> +    <br>
> +    <br>
> +
> +    <footer class="center">
> +        <a href="/prefs">Preferences</a> | <a 
> href="https://simple-web.org/projects/simplytranslate.html">Project
> +            Page</a> | <a href="https://simple-web.org">Simple Web 
> Project</a>
> +    </footer>
> +
> +    <script>
> +        // this code submits the translation form when pressing 
> Ctrl/Meta+Enter while focussed on the input text field
> + document.getElementById("input").addEventListener("keydown", function 
> (event) {
> +            if (event.keyCode === 13 && (event.metaKey || event.ctrlKey))
> {
 + document.getElementById("translation-form").submit();
> +            }
> +        });
> +    </script>
> +    <script>
> +        // Auto resize textarea to fit words inside it without need to 
> scroll -- Thanks to: https://stackoverflow.com/a/25621277
> +        const tx = document.getElementsByTagName("textarea");
> +
> +        for (let i = 0; i < tx.length; i++) {
> +            tx[i].setAttribute("style", "height:" + 
> (tx[i].scrollHeight) + "px;overflow-y:hidden;");
> +            tx[i].addEventListener("input", OnInput, false);
> +        }
> +
> +        function OnInput(e) {
> +            this.style.height = 150 + "px";
> +            this.style.height = (this.scrollHeight) + "px";
> +        }
> +    </script>
> +</body>
> 
> -        <footer class="center">
> -            <a href="/prefs">Preferences</a> | <a 
> href="https://simple-web.org/projects/simplytranslate.html">Project 
> Page</a> | <a href="https://simple-web.org">Simple Web Project</a>
> -        </footer>
> -
> -        <script>
> -            // this code submits the translation form when pressing 
> Ctrl/Meta+Enter while focussed on the input text field
> - document.getElementById("input").addEventListener("keydown", 
> function(event) {
> -                if (event.keyCode === 13 && (event.metaKey || 
> event.ctrlKey)) {
> - document.getElementById("translation-form").submit();
> -                }
> -            });
> -        </script>
> -    </body>
> -</html>
> +</html>
> \ No newline at end of file
> -- 
> 2.35.1
> 
>

I think you somehow malformatted this patch, please try sending it again 
https://lists.sr.ht/~metalune/simplytranslate-devel/%3C4186bcc1-b016-b665-0f43-fe78519fece0%40esmailelbob.xyz%3E
as you can see here it doesn't show up as a patch but rather as a normal email 
and I'd like to keep a clean history on SourceHut :)
Reply to thread Export thread (mbox)