working clientside localization

src/Umbraco.Web.UI.Client/src/common/directives/localize.directive.js

@@ -8,13 +8,37 @@ angular.module("umbraco.directives")
         replace: true,
         link: function (scope, element, attrs) {
             var key = scope.key;
-            if(key[0] === '#')
-            {
-                key = key.slice(1);
-            }
-
-            var value = localizationService.getLocalizedString(key);
+            var value = localizationService.localize(key);
             element.html(value);
         }
     };
+})
+.directive('localize', function ($log, localizationService) {
+    return {
+        restrict: 'A',
+        link: function (scope, element, attrs) {
+            var keys = attrs.localize.split(',');
+
+            for (var i = keys.length - 1; i >= 0; i--) {
+                var attr = element.attr(keys[i]);
+
+                if(attr){
+                    var localizer = attr.split(':');
+                    var tokens;
+                    var key = localizer[0];
+
+                    if(localizer.length > 0){
+                        tokens = localizer[1].split(',');
+                        for (var x = 0; x < tokens.length; x++) {
+                            tokens[x] = scope.$eval(tokens[x]);
+                        } 
+                    }
+
+                    if(key[0] === '@'){
+                        element.attr(keys[i], localizationService.localize(key.substring(1), tokens));    
+                    }
+                }
+            }
+        }
+    };
 });

src/Umbraco.Web.UI.Client/src/common/services/localization.service.js

@@ -1,8 +1,6 @@
 angular.module('umbraco.services')
 .factory('localizationService', function ($http, $q, $rootScope, $window, $filter, userService) {
-        var localize = {
-            // use the $window service to get the language of the user's browser
-            language: userService.getCurrentUser().locale,
+        var service = {
             // array to hold the localized resource string entries
             dictionary:[],
             // location of the resource file
@@ -13,61 +11,76 @@ angular.module('umbraco.services')
             // success handler for all server communication
             successCallback:function (data) {
                 // store the returned array in the dictionary
-                localize.dictionary = data;
+                service.dictionary = data;
                 // set the flag that the resource are loaded
-                localize.resourceFileLoaded = true;
+                service.resourceFileLoaded = true;
                 // broadcast that the file has been loaded
                 $rootScope.$broadcast('localizeResourcesUpdates');
             },
 
             // allows setting of language on the fly
             setLanguage: function(value) {
-                localize.language = value;
-                localize.initLocalizedResources();
+                service.initLocalizedResources();
             },
 
             // allows setting of resource url on the fly
             setUrl: function(value) {
-                localize.url = value;
-                localize.initLocalizedResources();
-            },
-
-            // builds the url for locating the resource file
-            buildUrl: function() {
-                return '/i18n/resources-locale_' + localize.language + '.js';
+                service.url = value;
+                service.initLocalizedResources();
             },
 
             // loads the language resource file from the server
             initLocalizedResources:function () {
                 var deferred = $q.defer();
                 // build the url to retrieve the localized resource file
-                $http({ method:"GET", url:localize.url, cache:false })
+                $http({ method:"GET", url:service.url, cache:false })
                     .then(function(response){
-                        localize.resourceFileLoaded = true;
-                        localize.dictionary = response.data;
+                        service.resourceFileLoaded = true;
+                        service.dictionary = response.data;
 
                         $rootScope.$broadcast('localizeResourcesUpdates');
 
-                        return deferred.resolve(localize.dictionary);
+                        return deferred.resolve(service.dictionary);
                     }, function(err){
                         return deferred.reject("Something broke");
                     });
                 return deferred.promise;
             },
 
+            //helper to tokenize and compile a localization string
+            tokenize: function(value,scope) {
+                    if(value){
+                        var localizer = value.split(':');
+                        var retval = {tokens: undefined, key: localizer[0].substring(0)};
+                        if(localizer.length > 0){
+                            retval.tokens = localizer[1].split(',');
+                            for (var x = 0; x < retval.tokens.length; x++) {
+                                retval.tokens[x] = scope.$eval(retval.tokens[x]);
+                            }
+                        }
+
+                        return retval;
+                    }
+            },
+
             // checks the dictionary for a localized resource string
-            getLocalizedString: function(value) {
-                if(localize.resourceFileLoaded){
-                    return _lookup(value);
+            localize: function(value,tokens) {
+                if(service.resourceFileLoaded){
+                    return service._lookup(value,tokens);
                 }else{
-                    localize.initLocalizedResources().then(function(dic){
-                        return _lookup(value);
+                    service.initLocalizedResources().then(function(dic){
+                        return service._lookup(value,tokens);
                     });
                 }
             },
-            _lookup: function(value){
-                var entry = localize.dictionary[value];
+            _lookup: function(value,tokens){
+                var entry = service.dictionary[value];
                 if(entry){
+                    if(tokens){
+                        for (var i = 0; i < tokens.length; i++) {
+                            entry = entry.replace("%"+i+"%", tokens[i]);
+                        }    
+                    }
                     return entry;
                 }
                 return "[" + value + "]";
@@ -77,8 +90,8 @@ angular.module('umbraco.services')
         };
 
         // force the load of the resource file
-        localize.initLocalizedResources();
+        service.initLocalizedResources();
 
         // return the local instance when called
-        return localize;
+        return service;
     });