init

public/language/TODO

@@ -0,0 +1,2 @@
+For now, language packs will be stored here. Eventually, will be moved to server side to allow for npm installability.
+When that happens, server code will generate compressed JSON language files in this folder.

public/language/en/global.json

@@ -0,0 +1,3 @@
+{
+	"home": "Home"
+}

public/language/en/login.json

@@ -0,0 +1,8 @@
+{
+	"login": "Login",
+	"username": "Username",
+	"password": "Password",
+	"remember_me": "Remember Me?",
+	"forgot_password": "Forgot Password?",
+	"alternative_logins": "Alternative Logins"
+}

public/src/language.js

@@ -0,0 +1,12 @@
+(function (module) {
+
+
+
+
+
+
+})('undefined' === typeof module ? {
+	module: {
+		exports: {}
+	}
+} : module);

public/src/templates.js

@@ -180,7 +180,10 @@
 			else
 				template_data['relative_path'] = RELATIVE_PATH;
 
-			document.getElementById('content').innerHTML = templates[tpl_url].parse(template_data);
+
+			translator.translate(templates[tpl_url].parse(template_data), function (translatedTemplate) {
+				document.getElementById('content').innerHTML = translatedTemplate;
+			});
 
 			jQuery('#content [template-variable]').each(function (index, element) {
 				var value = null;

public/src/translator.js

@@ -0,0 +1,75 @@
+(function (module) {
+	"use strict";
+	/*global RELATIVE_PATH*/
+
+	var translator = {},
+		loaded = {};
+
+	module.exports = translator;
+
+
+	translator.load = function (file, callback) {
+		if (loaded[file]) {
+			callback(loaded[file]);
+		} else {
+			var timestamp = new Date().getTime(); //debug
+
+			jQuery.getJSON(RELATIVE_PATH + '/language/en/' + file + '.json?v=' + timestamp, function (language) {
+				loaded[file] = language;
+				callback(language);
+			});
+		}
+	};
+
+
+
+
+	translator.translate = function (data, callback) {
+		var keys = data.match(/\[\[.*?\]\]/g),
+			loading = 0;
+
+
+		for (var key in keys) {
+			if (keys.hasOwnProperty(key)) {
+				var parsedKey = keys[key].replace('[[', '').replace(']]', '').split(':'),
+					languageFile = parsedKey[0];
+
+				parsedKey = parsedKey[1];
+
+				if (loaded[languageFile]) {
+					data = data.replace(keys[key], loaded[file][parsedKey]);
+				} else {
+					loading++;
+
+					(function (languageKey, parsedKey) {
+						translator.load(languageFile, function (languageData) {
+							data = data.replace(languageKey, languageData[parsedKey]);
+							loading--;
+							checkComplete();
+						});
+					}(keys[key], parsedKey));
+
+				}
+			}
+
+			checkComplete();
+		}
+
+		function checkComplete() {
+
+			if (loading === 0) {
+				callback(data);
+			}
+		}
+
+	};
+
+	if ('undefined' !== typeof window) {
+		window.translator = module.exports;
+	}
+
+})('undefined' === typeof module ? {
+	module: {
+		exports: {}
+	}
+} : module);

public/templates/header.tpl

@@ -24,6 +24,7 @@
 	</script>
 	<script src="{relative_path}/src/templates.js"></script>
 	<script src="{relative_path}/src/ajaxify.js"></script>
+	<script src="{relative_path}/src/translator.js"></script>
 	<script src="{relative_path}/src/jquery.form.js"></script>
 	<script src="{relative_path}/src/utils.js"></script>
 

public/templates/login.tpl

@@ -1,9 +1,9 @@
 <ol class="breadcrumb">
 	<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
-		<a href="/" itemprop="url"><span itemprop="title">Home</span></a>
+		<a href="/" itemprop="url"><span itemprop="title">[[global:home]]</span></a>
 	</li>
 	<li class="active" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
-		<span itemprop="title">Login</span>
+		<span itemprop="title">[[login:login]]</span>
 	</li>
 </ol>
 
@@ -13,18 +13,18 @@
 		<div class="well well-lg">
 			<div class="alert alert-danger" id="login-error-notify" style="display:none">
 				<button type="button" class="close" data-dismiss="alert">&times;</button>
-				<strong>Failed Login Attempt</strong> <p></p>
+				<strong>[[login:failed_login_attempt]]</strong> <p></p>
 			</div>
 
 			<form class="form-horizontal" role="form">
 				<div class="form-group">
-					<label for="username" class="col-lg-2 control-label">Username</label>
+					<label for="username" class="col-lg-2 control-label">[[login:username]]</label>
 					<div class="col-lg-10">
 						<input class="form-control" type="text" placeholder="Enter Username" name="username" id="username" />
 					</div>
 				</div>
 				<div class="form-group">
-					<label for="password" class="col-lg-2 control-label">Password</label>
+					<label for="password" class="col-lg-2 control-label">[[login:password]]</label>
 					<div class="col-lg-10">
 						<input class="form-control" type="password" placeholder="Enter Password" name="password" id="password" />
 					</div>
@@ -33,14 +33,14 @@
 					<div class="col-lg-offset-2 col-lg-10">
 						<div class="checkbox">
 						<label>
-							<input type="checkbox"> Remember me
+							<input type="checkbox"> [[login:remember_me]]
 						</label>
 						</div>
 					</div>
 				</div>
 				<div class="form-group">
 					<div class="col-lg-offset-2 col-lg-10">
-						<button class="btn btn-primary" id="login" type="submit">Login</button> &nbsp; <a href="/reset">Forgot Password?</a>
+						<button class="btn btn-primary" id="login" type="submit">[[login:login]]</button> &nbsp; <a href="/reset">[[login:forgot_password]]</a>
 					</div>
 				</div>
 				<input type="hidden" name="_csrf" value="{token}" id="csrf-token" />
@@ -51,7 +51,7 @@
 
 	<div class="col-md-6 {alternate_logins:display}">
 		<div class="well well-lg">
-			<h4>Alternative Logins</h4>
+			<h4>[[login:alternative_logins]]</h4>
 			<ul class="alt-logins">
 				<li data-url="/auth/twitter" class="twitter {twitter:display}"><i class="icon-twitter-sign icon-3x"></i></li>
 				<li data-url="/auth/google" class="google {google:display}"><i class="icon-google-plus-sign icon-3x"></i></li>