Use Django's JavaScript translation catalog

LICENCE-THIRD-PARTY

@@ -112,6 +112,15 @@ Licensed under BSD 3-clause "New" or "Revised" License.
 third-party-licenses/django-modeltranslation.txt
 ==============================================================================
 
+==============================================================================
+django-statici18n
+------------------------------------------------------------------------------
+https://github.com/zyegfryed/django-statici18n
+Copyright 2012 Sebastien Fievet
+licensed under BSD licence.
+third-party-licences/django-statici18n.txt
+==============================================================================
+
 ==============================================================================
 flake8
 ------------------------------------------------------------------------------

csu

@@ -75,7 +75,7 @@ cmd_restart() {
 }
 defhelp restart 'Stop and then restart development environment.'
 
-# Run Django migrate and updatedata commands
+# Completely update system
 cmd_update() {
   cmd_static
 
@@ -163,13 +163,15 @@ defhelp makeresourcethumbnails 'Run Django makeresourcethumbnails command.'
 cmd_makemessages() {
   echo "Creating message files..."
   docker-compose exec django /docker_venv/bin/python3 ./manage.py makemessages -l en
+  docker-compose exec django /docker_venv/bin/python3 ./manage.py makemessages --ignore=build/* -d djangojs
 }
 defhelp makemessages 'Run Django makemessages command.'
 
 # Run Django compilemessages command
 cmd_compilemessages() {
   echo "Compiling message files..."
   docker-compose exec django /docker_venv/bin/python3 ./manage.py compilemessages
+  docker-compose exec django /docker_venv/bin/python3 ./manage.py compilejsi18n
 }
 defhelp compilemessages 'Run Django compilemessages command.'
 
@@ -205,6 +207,7 @@ defhelp build 'Build or rebuild Docker images.'
 cmd_static() {
   echo "Building static files..."
   docker-compose exec nginx gulp build
+  cmd_compilemessages
 }
 defhelp static 'Build static files.'
 
@@ -313,7 +316,6 @@ cmd_clean() {
 
   echo
   echo "Deleting unused volumes..."
-
   unused_volumes=($(docker volume ls -qf dangling=true))
   for vol in "${unused_volumes[@]}"; do
       docker volume rm "${vol}"

csunplugged/config/settings/base.py

@@ -51,6 +51,7 @@
     "widget_tweaks",
     "modeltranslation",
     "bidiutils",
+    "statici18n",
 ]
 
 # Apps specific for this project go here.
@@ -346,3 +347,4 @@
 GENERAL_PAGES_CONTENT_BASE_PATH = os.path.join(str(ROOT_DIR.path("general")), "content")
 ACTIVITIES_CONTENT_BASE_PATH = os.path.join(str(ROOT_DIR.path("at_home")), "content")
 BREADCRUMBS_TEMPLATE = "django_bootstrap_breadcrumbs/bootstrap4.html"
+STATICI18N_ROOT = BUILD_ROOT

csunplugged/static/js/editor-options-menu.js

@@ -68,11 +68,11 @@ function setupLessonNav() {
   $("#close_nav_button").click(closeNav);
 
   // Sets the question progression text.
-  const progressionText = `Question <strong>${getCurrentIndex()+1}</strong> of <strong>${programming_exercises.length}</strong>`;
+  const progressionText = gettext(`Question <strong>${getCurrentIndex()+1}</strong> of <strong>${programming_exercises.length}</strong>`);
   document.getElementById("challenge_progression_text").innerHTML = progressionText;
 
   // Add testing examples info to the requirements block (temporary)
-  const static_requirement_info = "Your program should display the outputs in the table (shown on the right) for the given inputs provided.";
+  const static_requirement_info = gettext("Your program should display the outputs in the table (shown on the right) for the given inputs provided.");
   $("#requirement + p").append(`</br></br> <p>${static_requirement_info}</p>`);
 
   // Hides the next/prev challenge buttons if there is no challenge available in that direction.

csunplugged/static/js/test-code.js

@@ -79,23 +79,23 @@ async function run_testcase(
     } else {
       testcaseResult.status = "Failed";
       testcaseResult.userOutput = userResult.stdout;
-      testcaseResult.helpInfo = "Looks like your code was run successfully but didn’t match the expected output. Have a look at the ‘Expected Output’ and the 'Received Output’. See if you can spot the differences!"
+      testcaseResult.helpInfo = gettext("Looks like your code was run successfully but didn’t match the expected output. Have a look at the ‘Expected Output’ and the 'Received Output’. See if you can spot the differences!")
     }
   } else if (userResult.outcome == 11) {
     // Outcome 11: Compiler Error from Jobe (this has been changed to Syntax Error for plugging it in)
     testcaseResult.status = "Syntax Error";
     testcaseResult.userOutput = userResult.cmpinfo;
-    testcaseResult.helpInfo = "Oops, looks like there’s a spelling mistake or wrong character in your code. Try looking and see if you can find it! It might be a missing (parentheses) or a missing “quote mark”."
+    testcaseResult.helpInfo = gettext("Oops, looks like there’s a spelling mistake or wrong character in your code. Try looking and see if you can find it! It might be a missing (parentheses) or a missing “quote mark”.")
   } else if (userResult.outcome == 13) {
     // Outcome 13: Time limit exceeeded
     testcaseResult.status = "Time limit exceeded";
     testcaseResult.userOutput = userResult.cmpinfo;
-    testcaseResult.helpInfo = "Looks like your code took too long to run. Maybe you have an infinite loop somewhere in your code?"
+    testcaseResult.helpInfo = gettext("Looks like your code took too long to run. Maybe you have an infinite loop somewhere in your code?")
   } else {
     // Any other error
     testcaseResult.status = "Error";
     testcaseResult.userOutput = userResult.stderr;
-    testcaseResult.helpInfo = "Something went wrong when we tried to run your code. Have a look at the error output and see if you can solve this mystery error."
+    testcaseResult.helpInfo = gettext("Something went wrong when we tried to run your code. Have a look at the error output and see if you can solve this mystery error.")
   }
 
   return testcaseResult;

csunplugged/static/js/website.js

@@ -28,7 +28,7 @@ function open_glossary_definition() {
 
   var slug = $(this).data("glossary-term");
   if (glossary_modal.attr("data-glossary-term") != slug) {
-    $("#glossary-modal-term").text("Loading glossary definition...");
+    $("#glossary-modal-term").text(gettext("Loading glossary definition..."));
     $("#glossary-modal-definition").html("");
     $.ajax({
       type: "GET",
@@ -68,7 +68,7 @@ function show_glossary_modal_error(jqXHR, text_status, error_thrown) {
    */
   var glossary_modal = $("#glossary-modal");
   glossary_modal.attr("data-glossary-term", "");
-  $("#glossary-modal-term").text("Error!");
+  $("#glossary-modal-term").text(gettext("Error!"));
 }
 
 function details_element_closed() {

csunplugged/templates/core.html

@@ -1,5 +1,6 @@
 {% load i18n %}
 {% load static %}
+{% load statici18n %}
 {% load render_html_field %}
 {% load translate_url %}
 {% load django_bootstrap_breadcrumbs %}
@@ -262,6 +263,7 @@ <h5 class="modal-title" id="glossary-modal-term"></h5>
       glossary_url = "{% url 'topics:glossary_json' %}";
     </script>
     <script src="{% static 'js/website.js' %}"></script>
+    <script type="text/javascript" src="{% statici18n LANGUAGE_CODE %}"></script>
     <script src="https://www.youtube.com/player_api"></script>
     <script src="https://player.vimeo.com/api/player.js"></script>
     <script type="text/javascript" async

docs/source/developer/translation_infrastructure.rst

@@ -17,11 +17,15 @@ There are 3 types of files that contain translatable content:
 - Content Markdown files
 - Content YAML files containg translatable model strings
 - ``django.po`` file containing translatable system strings
+- JavaScript files
 
 Translatable source files must always reside under an ``en`` directory tree.
 Translated files are downloaded into a directory named with the language's
 locale code, and with the same structure as the source tree.
 
+Django's `JavaScript translation catalog <https://docs.djangoproject.com/en/2.2/topics/i18n/translation/#internationalization-in-javascript-code>`_ enables the use of gettext() in JavaScript files to translate text.
+The JavaScript translation files are prepared before server start.
+
 .. note::
 
   The locale code differs from the language code in format - where a language

requirements/base.txt

@@ -36,6 +36,7 @@ django-modeltranslation==0.15.1
 uniseg==0.7.1
 python-bidi==0.4.2
 django-bidi-utils==1.0
+django-statici18n==1.8.2
 
 # Plugging it in
 requests==2.24.0

third-party-licences/django-statici18n.txt

@@ -0,0 +1,53 @@
+django-statici18n
+-----------------
+Copyright (c) 2012, Sebastien Fievet
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are
+met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above
+      copyright notice, this list of conditions and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+    * Neither the name of the author nor the names of other
+      contributors may be used to endorse or promote products derived
+      from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+
+django-statici18n contains code from Jannis Leidel's django_compressor
+--------------------------------------------------------------------
+Copyright (c) 2009-2012 Django Compressor authors (see AUTHORS file)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.