feat(translateCloak): adds translate-cloak directive

angular-translate · Feb 9, 2014 · c125c56 · c125c56
1 parent eb73f6d
commit c125c56
Show file tree

Hide file tree

Showing 4 changed files with 225 additions and 0 deletions.
diff --git a/demo/ex10_translate-cloak.html b/demo/ex10_translate-cloak.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html ng-app='app'>
+
+<head>
+  <meta charset="utf-8">
+  <title translate="load.static.TITLE">Load static files</title>
+  <style>
+    body { text-align: center; }
+    .translate-cloak {
+      background: red;
+    }
+  </style>
+</head>
+
+<body ng-controller="ctrl" translate-cloak>
+
+  <p>
+    <a href="#" ng-click="setLang('en_US')">English</a>
+    |
+    <a href="#" ng-click="setLang('ru_RU')">Русский</a>
+  </p>
+
+  <h1>{{ 'load.static.HEADER' | translate }}</h1>
+  <h2 translate>load.static.SUBHEADER</h2>
+
+<script src="../../bower_components/angular/angular.js"></script>
+<script src="../../bower_components/angular-cookies/angular-cookies.js"></script>
+<script src="../../src/translate.js"></script>
+<script src="../../src/service/default-interpolation.js"></script>
+<script src="../../src/service/handler-log.js"></script>
+<script src="../../src/service/loader-static-files.js"></script>
+
+
+<script src="../../src/service/storage-key.js"></script>
+<script src="../../src/service/storage-local.js"></script>
+<script src="../../src/service/storage-cookie.js"></script>
+<script src="../../src/service/translate.js"></script>
+<script src="../../src/directive/translate.js"></script>
+<script src="../../src/directive/translate-cloak.js"></script>
+<script src="../../src/filter/translate.js"></script>
+<script>
+angular.module('app', ['pascalprecht.translate', 'ngCookies'])
+
+.config(['$translateProvider', '$provide', function($translateProvider, $provide){
+
+    $translateProvider.useLoader('customLoader');
+
+  $provide.factory('customLoader', ['$q', '$timeout', function ($q, $timeout) {
+    return function (options) {
+      var deferred = $q.defer();
+
+      $timeout(function () {
+        deferred.resolve({
+          'foo': 'bar'
+        });
+        }, 2000);
+
+      return deferred.promise;
+    };
+  }]);
+  // Tell the module what language to use by default
+  $translateProvider.preferredLanguage('en_US');
+
+  // Tell the module to store the language in the cookies
+  $translateProvider.useCookieStorage();
+
+}])
+
+.controller('ctrl', ['$scope', '$translate', function($scope, $translate) {
+
+  $scope.setLang = function(langKey) {
+    // You can change the language during runtime
+    $translate.uses(langKey);
+  };
+
+}]);
+</script>
+
+</body>
+</html>
diff --git a/src/directive/translate-cloak.js b/src/directive/translate-cloak.js
@@ -0,0 +1,28 @@
+angular.module('pascalprecht.translate')
+/**
+ * @ngdoc directive
+ * @name pascalprecht.translate.directive:translateCloak
+ * @requires $rootScope
+ * @requires $translate
+ * @restrict A
+ *
+ * $description
+ * Adds a `translate-cloak` class name to the given element where this directive
+ * is applied initially and removes it, once a loader has finished loading.
+ *
+ * This directive can be used to prevent initial flickering when loading translation
+ * data asynchronously.
+ *
+ * @param {string=} translate-cloak
+ */
+.directive('translateCloak', ['$rootScope', '$translate', function ($rootScope, $translate) {
+
+  return {
+    compile: function (tElement) {
+      $rootScope.$on('$translateLoadingSuccess', function () {
+        tElement.removeClass($translate.cloakClassName());
+      });
+      tElement.addClass($translate.cloakClassName());
+    }
+  }
+}]);
diff --git a/src/service/translate.js b/src/service/translate.js
@@ -25,6 +25,7 @@ angular.module('pascalprecht.translate').provider('$translate', ['$STORAGE_KEY',
       $interpolatorFactories = [],
       $interpolationSanitizationStrategy = false,
       $loaderFactory,
+      $cloakClassName = 'translate-cloak',
       $loaderOptions,
       $notFoundIndicatorLeft,
       $notFoundIndicatorRight,
@@ -133,6 +134,26 @@ angular.module('pascalprecht.translate').provider('$translate', ['$STORAGE_KEY',
 
   this.translations = translations;
 
+  /**
+   * @ngdoc function
+   * @name pascalprecht.translate.$translateProvider#cloakClassName
+   * @methodOf pascalprecht.translate.$translateProvider
+   *
+   * @description
+   *
+   * Let's you change the class name for `translate-cloak` directive.
+   * Default class name is `translate-cloak`.
+   *
+   * @param {string} name translate-cloak class name
+   */
+  this.cloakClassName = function (name) {
+    if (!name) {
+      return $cloakClassName;
+    }
+    $cloakClassName = name;
+    return this;
+  };
+
   /**
    * @name flatObject
    * @private
@@ -1126,6 +1147,20 @@ angular.module('pascalprecht.translate').provider('$translate', ['$STORAGE_KEY',
         return $preferredLanguage;
       };
 
+      /**
+       * @ngdoc function
+       * @name pascalprecht.translate.$translate#cloakClassName
+       * @methodOf pascalprecht.translate.$translate
+       *
+       * @description
+       * Returns the configured class name for `translate-cloak` directive.
+       *
+       * @return {string} cloakClassName
+       */
+      $translate.cloakClassName = function () {
+        return $cloakClassName;
+      };
+
       /**
        * @ngdoc function
        * @name pascalprecht.translate.$translate#fallbackLanguage

diff --git a/test/unit/directive/translate-cloak.spec.js b/test/unit/directive/translate-cloak.spec.js
@@ -0,0 +1,82 @@
+describe('pascalprecht.translate', function () {
+
+  var element;
+
+  describe('translate-cloak directive', function () {
+
+    describe('default class name', function () {
+      beforeEach(module('pascalprecht.translate', function ($translateProvider, $provide) {
+        $translateProvider
+          .useLoader('customLoader')
+          .preferredLanguage('en_EN');
+        $provide.factory('customLoader', ['$q', function ($q) {
+          return function (options) {
+            var deferred = $q.defer();
+
+            deferred.resolve({
+              'foo': 'bar'
+            });
+
+            return deferred.promise;
+          };
+        }]);
+      }));
+
+      var $compile, $rootScope;
+
+      beforeEach(inject(function (_$compile_, _$rootScope_) {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+      }));
+
+      it('should add translate-cloak class', function () {
+        element = $compile('<div translate-cloak></div>')($rootScope);
+        expect(element.hasClass('translate-cloak')).toBe(true);
+      });
+
+      it('should remove translate-cloak class when loader is finished', function () {
+        element = $compile('<div translate-cloak></div>')($rootScope);
+        $rootScope.$digest();
+        expect(element.hasClass('translate-cloak')).toBe(false);
+      });
+    });
+
+    describe('custom class name', function () {
+      beforeEach(module('pascalprecht.translate', function ($translateProvider, $provide) {
+        $translateProvider
+          .useLoader('customLoader')
+          .preferredLanguage('en_EN')
+          .cloakClassName('foo');
+        $provide.factory('customLoader', ['$q', function ($q) {
+          return function (options) {
+            var deferred = $q.defer();
+
+            deferred.resolve({
+              'foo': 'bar'
+            });
+
+            return deferred.promise;
+          };
+        }]);
+      }));
+
+      var $compile, $rootScope;
+
+      beforeEach(inject(function (_$compile_, _$rootScope_) {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+      }));
+
+      it('should add custom translate-cloak class', function () {
+        element = $compile('<div translate-cloak></div>')($rootScope);
+        expect(element.hasClass('foo')).toBe(true);
+      });
+
+      it('should remove custom translate-cloak class when loader is finished', function () {
+        element = $compile('<div translate-cloak></div>')($rootScope);
+        $rootScope.$digest();
+        expect(element.hasClass('foo')).toBe(false);
+      });
+    });
+  });
+});