I18N Footer to component directive

oppia · seanlip · Aug 5, 2019 · Jul 5, 2019 · Jul 5, 2019 · Jul 5, 2019
commit 79ed17d05323e0175ad6d56f72ddcb8e776e1e69
@@ -324,6 +324,7 @@
 /core/templates/dev/head/app.constants.ts @ankita240796
 /core/templates/dev/head/pages/interaction-specs.constants.ts @vojtechjelinek @Jamesjay4199
 /core/templates/dev/head/I18nFooter.ts @seanlip
+/core/templates/dev/head/i18n-footer.directive.html @seanlip
 /core/templates/dev/head/services/TranslationFileHashLoaderService.ts @seanlip
 
 

diff --git a/core/templates/dev/head/I18nFooter.ts b/core/templates/dev/head/I18nFooter.ts
@@ -20,40 +20,50 @@
 
 var oppia = require('AppInit.ts').module;
 
-oppia.controller('I18nFooter', [
-  '$cookies', '$http', '$rootScope', '$scope', '$timeout', '$translate',
-  'UserService',
-  function(
-      $cookies, $http, $rootScope, $scope, $timeout, $translate,
-      UserService) {
-    // Changes the language of the translations.
-    var preferencesDataUrl = '/preferenceshandler/data';
-    var siteLanguageUrl = '/save_site_language';
-    $scope.supportedSiteLanguages = constants.SUPPORTED_SITE_LANGUAGES;
+oppia.directive('i18nFooter', ['UrlInterpolationService', function(
+    UrlInterpolationService) {
+  return {
+    restrict: 'E',
+    scope: {},
+    bindToController: {},
+    templateUrl: UrlInterpolationService.getDirectiveTemplateUrl(
+      '/i18n-footer.directive.html'),
+    controllerAs: '$ctrl',
+    controller: [
+      '$cookies', '$http', '$rootScope', '$scope', '$timeout', '$translate',
+      'UserService',
+      function(
+          $cookies, $http, $rootScope, $scope, $timeout, $translate,
+          UserService) {
+        var ctrl = this;
+        // Changes the language of the translations.
+        var preferencesDataUrl = '/preferenceshandler/data';
+        var siteLanguageUrl = '/save_site_language';
+        ctrl.supportedSiteLanguages = constants.SUPPORTED_SITE_LANGUAGES;
 
-    // The $timeout seems to be necessary for the dropdown to show anything
-    // at the outset, if the default language is not English.
-    $timeout(function() {
-      // $translate.use() returns undefined until the language file is fully
-      // loaded, which causes a blank field in the dropdown, hence we use
-      // $translate.proposedLanguage() as suggested in
-      // http://stackoverflow.com/a/28903658
-      $scope.currentLanguageCode = $translate.use() ||
-        $translate.proposedLanguage();
-    }, 50);
+        // The $timeout seems to be necessary for the dropdown to show anything
+        // at the outset, if the default language is not English.
+        $timeout(function() {
+          // $translate.use() returns undefined until the language file is fully
+          // loaded, which causes a blank field in the dropdown, hence we use
+          // $translate.proposedLanguage() as suggested in
+          // http://stackoverflow.com/a/28903658
+          ctrl.currentLanguageCode = $translate.use() ||
+            $translate.proposedLanguage();
+        }, 50);
 
-    $scope.changeLanguage = function() {
-      $translate.use($scope.currentLanguageCode);
-      UserService.getUserInfoAsync().then(function(userInfo) {
-        if (userInfo.isLoggedIn()) {
-          $http.put(siteLanguageUrl, {
-            site_language_code: $scope.currentLanguageCode
+        ctrl.changeLanguage = function() {
+          $translate.use(ctrl.currentLanguageCode);
+          UserService.getUserInfoAsync().then(function(userInfo) {
+            if (userInfo.isLoggedIn()) {
+              $http.put(siteLanguageUrl, {
+                site_language_code: ctrl.currentLanguageCode
+              });
+            }
           });
-        }
-      });
-    };
-  }
-]);
+        };
+      }]};
+}]);
 
 oppia.config([
   '$translateProvider', 'DEFAULT_TRANSLATIONS',

diff --git a/core/templates/dev/head/i18n-footer.directive.html b/core/templates/dev/head/i18n-footer.directive.html
@@ -0,0 +1,8 @@
+<ul>
+  <select ng-model="$ctrl.currentLanguageCode"
+          ng-change="$ctrl.changeLanguage()"
+          ng-options="language.id as language.text for language in $ctrl.supportedSiteLanguages"
+          class="oppia-language-selector protractor-test-i18n-language-selector"
+          style="color: black;" aria-label="Change languages">
+  </select>
+</ul>
diff --git a/core/templates/dev/head/pages/oppia_footer_directive.html b/core/templates/dev/head/pages/oppia_footer_directive.html
@@ -30,14 +30,7 @@ <h4 translate="I18N_FOOTER_CONTRIBUTE_ALL_CAPS"></h4>
       </div>
       <div class="col-sm-3">
         <h4><span translate="I18N_LANGUAGE_FOOTER_VIEW_IN"></span></h4>
-        <ul ng-controller="I18nFooter">
-          <select ng-model="currentLanguageCode"
-                  ng-change="changeLanguage()"
-                  ng-options="language.id as language.text for language in supportedSiteLanguages"
-                  class="oppia-language-selector protractor-test-i18n-language-selector"
-                  style="color: black;" aria-label="Change languages">
-          </select>
-        </ul>
+        <i18n-footer></i18n-footer>
         <social-buttons></social-buttons>
       </div>
     </div>

diff --git a/core/templates/dev/head/pages/thanks-page/thanks-page.controller.ts b/core/templates/dev/head/pages/thanks-page/thanks-page.controller.ts
@@ -37,4 +37,5 @@ oppia.directive('thanksPage', ['UrlInterpolationService', function(
       var ctrl = this;
       ctrl.thanksImgUrl = UrlInterpolationService.getStaticImageUrl(
         '/general/donate.png');
-    }]}}]);
+    }]};
+}]);