Merge pull request #32 from wikimedia/lang-switching-T207709

Switch displayed labels and field values on change of source or target language

assets/app.js

@@ -82,25 +82,3 @@ $( function () {
 		OO.ui.infuse( 'search-widget' );
 	}
 } );
-
-// Add ULS to the target-language button.
-$( function () {
-	var targetLangButton,
-		$targetLangButton = $( '.target-lang-widget' );
-	if ( $targetLangButton.length === 0 ) {
-		// If the widget isn't present, do nothing.
-		return;
-	}
-	targetLangButton = OO.ui.infuse( $targetLangButton );
-	targetLangButton.$element.uls( {
-		// Save the language name and code in the widget.
-		onSelect: function ( language ) {
-			this.setLabel( $.uls.data.languages[ language ][ 2 ] );
-			this.setData( language );
-		}.bind( targetLangButton ),
-		// Add the preferred languages as the quick-list.
-		quickList: App.getCookieVal( 'preferredLangs', [] ),
-		// @HACK: Re-align the ULS menu because we're customizing its layout in translate.less.
-		left: targetLangButton.$element.offset().left
-	} );
-} );

assets/translate.js

@@ -0,0 +1,60 @@
+/**
+ * Add ULS to the target-language button.
+ */
+$( function () {
+	var targetLangButton,
+		$targetLangButton = $( '.target-lang-widget' );
+	if ( $targetLangButton.length === 0 ) {
+		// If the widget isn't present, do nothing.
+		return;
+	}
+	function onSelectTargetLang( language ) {
+		// Save the language name and code in the widget.
+		this.setLabel( $.uls.data.languages[ language ][ 2 ] );
+		this.setData( language );
+		// Also switch what's displayed in the form when a new language is selected in the ULS.
+		$( '.translation-fields .oo-ui-fieldLayout' ).each( function () {
+			var field = OO.ui.infuse( $( this ) ).getField();
+			if ( appConfig.translations[ field.data.nodeId ] &&
+				appConfig.translations[ field.data.nodeId ][ language ]
+			) {
+				// If there's a translation available, set the field's value.
+				field.setValue( appConfig.translations[ field.data.nodeId ][ language ].text );
+			} else {
+				// Otherwise, blank the field.
+				field.setValue( '' );
+			}
+		} );
+	}
+	targetLangButton = OO.ui.infuse( $targetLangButton );
+	targetLangButton.$element.uls( {
+		onSelect: onSelectTargetLang.bind( targetLangButton ),
+		// Add the preferred languages as the quick-list.
+		quickList: App.getCookieVal( 'preferredLangs', [] ),
+		// @HACK: Re-align the ULS menu because we're customizing its layout in translate.less.
+		left: targetLangButton.$element.offset().left
+	} );
+} );
+
+/**
+ * Switch displayed 'from' language.
+ */
+$( function () {
+	var sourceLangWidget,
+		$sourceLangWidget = $( '.source-lang-widget' );
+	if ( $sourceLangWidget.length !== 1 ) {
+		// Don't do anything if the widget isn't present.
+		return;
+	}
+	sourceLangWidget = OO.ui.infuse( $sourceLangWidget[ 0 ] );
+	sourceLangWidget.on( 'change', function () {
+		var newLangCode = sourceLangWidget.getValue();
+		// Go through all the field labels and fetch new values from the translations.
+		$( '.translation-fields .oo-ui-fieldLayout' ).each( function () {
+			var fieldLayout = OO.ui.infuse( $( this ) ),
+				nodeId = fieldLayout.getField().data.nodeId,
+				newLabel = appConfig.translations[ nodeId ][ newLangCode ].text;
+			fieldLayout.setLabel( newLabel );
+		} );
+	} );
+} );

config/packages/translation.yaml

@@ -1,6 +1,7 @@
 framework:
     default_locale: '%locale%'
     translator:
+        enabled: false
         default_path: '%kernel.project_dir%/translations'
         fallbacks:
             - '%locale%'

phpunit.xml.dist

@@ -10,18 +10,17 @@
     <php>
         <ini name="error_reporting" value="-1" />
         <env name="KERNEL_CLASS" value="App\Kernel" />
-        <env name="APP_ENV" value="test" />
         <env name="APP_DEBUG" value="1" />
-        <env name="APP_SECRET" value="s$cretf0rt3st" />
         <env name="SHELL_VERBOSITY" value="-1" />
         <!-- define your env variables for the test env here -->
 
         <!-- ###+ symfony/framework-bundle ### -->
-        <env name="APP_ENV" value="dev"/>
+        <env name="APP_ENV" value="test" />
         <env name="APP_SECRET" value="a90722e13630415e2e26313a37a56bbb"/>
         <!-- env name="TRUSTED_PROXIES" value="127.0.0.1,127.0.0.2" -->
         <!-- env name="TRUSTED_HOSTS" value="localhost,example.com" -->
         <!-- ###- symfony/framework-bundle ### -->
+
         <!-- ###+ symfony/swiftmailer-bundle ### -->
         <!-- For Gmail as a transport, use: "gmail://username:password@localhost" -->
         <!-- For a generic SMTP server, use: "smtp://localhost:25?encryption=&auth_mode=" -->

public/assets/manifest.json

@@ -1,5 +1,5 @@
 {
-  "assets/app.js": "assets/app.09c15a8a.js",
+  "assets/app.js": "assets/app.bd8bf375.js",
   "assets/app.css": "assets/app.2bb56d7b.css",
   "assets/images/help-ltr-progressive.svg": "assets/images/help-ltr-progressive.bb2e7c4b.svg",
   "assets/images/logo-Wikimedia-Discovery.png": "assets/images/logo-Wikimedia-Discovery.0ec7a6e6.png",

src/Controller/TranslateController.php

@@ -80,6 +80,7 @@ public function translate(Request $request, Intuition $intuition, Session $sessi
             // @TODO Get this value from the session.
             'value' => 'fallback',
             'classes' => ['source-lang-widget'],
+            'infusable' => true,
         ]);
         $targetLangDefault = $intuition->getLang();
         $cookie = $request->cookies->get('svgtranslate');
@@ -115,12 +116,13 @@ public function translate(Request $request, Intuition $intuition, Session $sessi
             $inputWidget = new TextInputWidget([
                 'name' => 'translation-field-'.$nodeId,
                 'value' => isset($langs[$targetLang->getValue()]) ? $langs[$targetLang->getValue()]['text'] : '',
+                'data' => ['nodeId' => $nodeId],
             ]);
             $field = new FieldLayout(
                 $inputWidget,
                 [
                     'label' => $langs[$sourceLang->getValue()]['text'],
-                    'id' => 'translation-field-'.$nodeId,
+                    'infusable' => true,
                 ]
             );
             $formFields[] = $field;

templates/base.html.twig

@@ -79,6 +79,7 @@
             {# This var is used for the Universal Language Selector. #}
             languages: {{ all_langs()|json_encode|raw }}
         };
+        {% block script %}{% endblock %}
     </script>
     <script type="text/javascript" src="{{ asset('assets/app.js') }}"></script>
     </body>

templates/translate.html.twig

@@ -34,3 +34,7 @@
         </div>
     </form>
 {% endblock %}
+
+{% block script %}
+appConfig.translations = {{ translations|json_encode|raw }};
+{% endblock %}

tests/Controller/TranslateControllerTest.php

@@ -0,0 +1,22 @@
+<?php
+declare(strict_types = 1);
+
+namespace App\Tests\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;
+
+class TranslateControllerTest extends WebTestCase
+{
+
+    /**
+     * The translate page.
+     */
+    public function testExists(): void
+    {
+        $client = static::createClient();
+        $crawler = $client->request('GET', '/File:Test.svg');
+        $response = $client->getResponse();
+        static::assertEquals(200, $response->getStatusCode());
+        static::assertContains('Test.svg', $crawler->filter('h1')->text());
+    }
+}

webpack.config.js

@@ -78,6 +78,7 @@
 			'./assets/app.js',
 			'./assets/app.less',
 			'./assets/search.less',
+			'./assets/translate.js',
 			'./assets/translate.less',
 			'./assets/InterfaceLangButton.js',
 			'./assets/LanguageDialog.js',