unhosted · bencharp · May 19, 2012 · May 21, 2012 · May 23, 2012
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,7 @@
 .cvsignore
 Thumbs.db
 .DS_Store
+*.esproj
 *.py[co]
 _darcs/*
 CVS/*
@@ -30,3 +31,7 @@ node_modules
 
 # Cloud9IDE
 .settings.xml
+
+libredocs.esproj/Project.espressostorage
+
+libredocs.esproj/user.benoit.espressostorage
diff --git a/closeDialog.html b/closeDialog.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+  <head>
+    <title>Closing dialog...</title>
+    <meta charset="utf-8">
+    <script src="js/require.js"></script>
+    <script>
+      require(['js/src/remoteStorage'], function(remoteStorage) {
+        var storageInfo = JSON.parse(localStorage.getItem('_juggleStorageInfo'));
+        localStorage.removeItem('_juggleStorageInfo');
+        window.opener.postMessage('conn:'+JSON.stringify({
+          storageInfo: storageInfo,
+          bearerToken: remoteStorage.receiveToken()
+        }), location.protocol+'//'+location.host);
+        window.close();
+      });
+    </script>
+  </head>
+  <body>
+    Closing dialog...
+  </body>
+</html>
diff --git a/css/custom.css b/css/custom.css
@@ -14,20 +14,32 @@ h1 span#docTitle { position:absolute; left:.08em; width:11em; white-space:nowrap
 h1+small { float:right; position:relative; top:-2em; right:0em; }
 h1>small { font-size:12px; position:absolute; left:16.8em; top:.5em; white-space:nowrap; }
 
+#lang { float:right; position:relative; top:-2em; right:3em; }
+#lang li {display: inline-block; text-transform: uppercase;	margin: 0 .3em; }
+
+
+#locale { float: right; margin-top: -3em; }
+#locale li { float: left; list-style: none; }
+#locale img { padding: 0; margin: 0; height: auto!important; }
+#locale li a { padding: 1em .5em.5em; margin: 0; }
+
+#locale a:hover, #locale a.selected { background: rgba(200, 200, 200, 0.7); border-bottom-left-radius: .5em; border-bottom-right-radius: .5em; box-shadow: #fff 0 1px 0; }
+
+
 #signin { margin-top:5.5em; padding:0 8em 1em 7em; white-space:nowrap; height:2.6em; }
 #write #signin { position:relative; float:right; top:1em; margin:0; }
-.content #welcome { height:29em; }
+.content #welcome { height:32em; }
 #steps { position:absolute; top:22em; }
 .step, .step.done, .step.done:hover { opacity:.5; position:relative; }
 .step.active, .step:hover { opacity:1; }
 .step.remotestorage { position:absolute; width:20em; left:0; }
 .step.remotestorage img, .step.write img { position:relative; left:20%; }
 .step.remotestorage img { margin:2em 0; width:12em; }
-.step.connect { position:absolute; width:18em; left:21em; }
-.step.connect #connect { position:absolute; width:15em; }
-.step.connect #connect-address { position:absolute; margin:4em 0 .5em; width:9.35em; padding-right:6em; height:2.5em; padding-left:3em; background:url('../images/remoteStorage-icon.png') no-repeat .3em center; }
-.step.connect #connect-button { position:absolute; margin:4.6em -3em 0 0; right:0; }
-.step.write { position:absolute; width:20em; left:41em; }
+.step.connect { position:absolute; width:19em; left:23em; }
+.step.connect #connect { position:absolute; width:16em; }
+.step.connect #connect-address { position:absolute; margin:4em 0 .5em -2em; width:9.35em; padding-right:7em; height:2.5em; padding-left:3em; background:url('../images/remoteStorage-icon.png') no-repeat .3em center; }
+.step.connect #connect-button { position:absolute; margin:4.6em -1em 0 0; right:0; }
+.step.write { position:absolute; width:18em; left:42em; }
 .step.write img { margin-top:-1em; }
 .step>h3 { position:absolute; top:7.3em; white-space:nowrap; }
 .step>p { position:absolute; top:12.5em; }

diff --git a/dialog.html b/dialog.html
diff --git a/documents.html b/documents.html
@@ -1,5 +1,5 @@
 <div id="documents">
-  <div class="btn" id="new-document"><strong>+ New document</strong></div>
+  <div class="btn translatable" id="new-document"><strong>+ New document</strong></div>
   <input id="upload-document" type="file" multiple></input>
   <!--  <div id="trashbox" class='box'>drop an entry to remove</div> -->
   <ul id="doclist">

diff --git a/goToStep.html b/goToStep.html
@@ -10,6 +10,6 @@
     </script>
   </head>
   <body>
-    <p>Done. Go <a href="welcome.html">back to the main page</a>.</p>
+    <p>Done. Go <a href="welcome.html">Retour à la page principale</a>.</p>
   </body>
 </html>
diff --git a/images/countries/de.png b/images/countries/de.png
diff --git a/images/countries/en.png b/images/countries/en.png
diff --git a/images/countries/fr.png b/images/countries/fr.png
diff --git a/images/countries/id.png b/images/countries/id.png
diff --git a/images/countries/it.png b/images/countries/it.png
diff --git a/images/countries/ru.png b/images/countries/ru.png
diff --git a/index.html b/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Write with Libre Docs &ndash; liberate your ideas</title>
+    <title class="translatable">Write with Libre Docs &ndash; liberate your ideas</title>
     <link href="css/bootstrap.min.css" rel="stylesheet">
     <link href="css/webodf.css" rel="stylesheet">
     <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
     <link href="css/custom.css" rel="stylesheet">
     <link rel="shortcut icon" href="images/libredocs.png">
     <link rel="apple-touch-icon" href="images/libredocs.png">
     <script src="js/require.js"></script>
+
     <script>
       require(['js/src/remoteStorage'], function(drop) {
         remoteStorage=drop;
@@ -18,12 +19,17 @@
     <script src="js/models/document.js"></script>
     <script src="js/sync.js"></script>
     <script src="js/init.js"></script>
+
+
   </head>
   <body>
+
     <div class="container">
       <div class="page-header" id="header">
         <img alt="" src="images/libredocs.png" />
         <h1><a href="#">Libre Docs</a> <small>molto alpha</small></h1><small id="signout"></small>
+
+        <ul id="locale"><li><span class="translatable">Translation Test</span> || </li></ul>
       </div>
       <div id="error" class="alert alert-block alert-error fade in" style="display:none;">
         <h4 id="error-heading" class="alert-heading"><!-- ERROR HEAD --></h4>
@@ -36,12 +42,14 @@ <h4 id="error-heading" class="alert-heading"><!-- ERROR HEAD --></h4>
         <!-- CONTENT -->
       </div>
       <footer>
-        <p><a href="/">Libre Docs</a> is a <a href="https://github.com/unhosted/libredocs">free software</a> app by <a href="http://unhosted.org">Unhosted</a> for a more open web.</p>
+        <p class="translatable"><a href="/">Libre Docs</a> is a <a href='https://github.com/unhosted/libredocs'>free software</a> app by <a href='http://unhosted.org'>Unhosted</a> for a more open web.</p>
       </footer>
     </div> <!-- /container -->
     <!-- fallback to local, thanks to HTML5 Boilerplate -->
+
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
     <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
+
     <script src="js/load.js"></script>
     <script src="js/ieblock.js"></script>
     <script src="js/features.js"></script>
@@ -53,6 +61,10 @@ <h4 id="error-heading" class="alert-heading"><!-- ERROR HEAD --></h4>
     <script src="js/bootstrap-modal.js"></script>
     <script src="/lib/runtime.js"></script>
     <script src="js/etherpad.js"></script>
+
+    <!-- Test traduction   -->
+    <script type="text/javascript" src="js/jquery.cookie.js"></script>
+    <script src="js/default.js"></script>
 
     <!-- SCRIPTS -->
   </body>

diff --git a/js/data.json b/js/data.json
@@ -0,0 +1,2 @@
+
+
diff --git a/js/default.js b/js/default.js
@@ -0,0 +1,104 @@
+var lp = {"locales":[{"id":"en","name":"english"},{"id":"fr","name":"french"}]};
+
+lp = $.extend(lp, {
+
+	/**
+	 * Actual user locale
+	 */
+	locale: 'en',
+
+	/**
+	 * Translation dictionaries
+	 */
+	dictionaries: {},
+
+	setLocale: function(locale) {
+		if (!locale) {
+			locale = $.cookie('locale');
+		}
+		if (!locale) {
+			locale = window.navigator.language ? window.navigator.language : window.navigator.userLanguage;
+		}
+
+		if (locale != lp.locale) {
+			$.cookie('locale', locale);
+			lp.locale = locale;
+
+			$.each(lp.locales, function(lidx, availableLocale) {
+				if (locale.indexOf(availableLocale.id) != -1 || !locale.indexOf(availableLocale.name != -1)) {
+					$('#locale a').removeClass('selected');
+					$('#lang-' + availableLocale.id).addClass('selected');
+					lp.translateTo(availableLocale.id);
+				}
+			} );
+		}
+	},
+
+	getDictionary: function(locale) {
+		$.getJSON('js/locales/' + locale + '.json', function(dictionary) {
+			lp.dictionaries[locale] = dictionary;
+			lp.translateTo(locale);
+		} );
+	},
+
+	translateTo: function(locale, $from) {
+		if (!locale) {
+			return;
+		}
+
+		if (typeof lp.dictionaries[locale] == 'undefined') {
+			lp.getDictionary(locale);
+			return;
+		}
+
+		var $toTranslate = $from ? $from.find('.translatable') : $('.translatable');
+		$toTranslate.each(function(idxe, element) {
+			var $element = $(element);
+			var translation = '';
+
+			if (typeof lp.dictionaries[locale][$element.data('translatable')] == 'string') {
+				translation = lp.dictionaries[locale][$element.data('translatable')];
+			} else {
+				translation = $element.data('translatable');
+			}
+			if ($element.html()) {
+				$element.html(translation);
+			}
+			// need i18n
+//			if ($element.data('text')) {
+//				$element.data('text', translation);
+//			}
+		} );
+	},
+
+	initTranslation: function($from) {
+		var $toInit = $from ? $from.find('.translatable') : $('.translatable');
+		$toInit.each(function(idxe, element) {
+			var $element = $(element);
+			$element.data('translatable', $element.html().replace(/"/g, '\''));
+		} );
+	},
+
+} );
+
+$(document).ready(function() {
+
+	// Create translations availables
+	var $locale = $('#locale');
+	$.each(lp.locales, function(lidx, locale) {
+		var $li = $('<li />');
+		var $a = $('<a href="#" id="lang-' + locale.id + '" />')
+			 .html('<img src="images/countries/' + locale.id + '.png" alt="' + locale.name + ' flag" />')
+			 .click(function() {
+				 lp.setLocale(locale.id);
+				 return false;
+			 } )
+			 .appendTo($li);
+		$li.appendTo($locale);
+	} );
+
+
+	lp.initTranslation();
+	lp.setLocale();
+
+} );
diff --git a/js/jquery.cookie.js b/js/jquery.cookie.js
@@ -0,0 +1,41 @@
+/**
+ * jQuery Cookie plugin
+ *
+ * Copyright (c) 2010 Klaus Hartl (stilbuero.de)
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ */
+jQuery.cookie = function (key, value, options) {
+
+    // key and at least value given, set cookie...
+    if (arguments.length > 1 && String(value) !== "[object Object]") {
+        options = jQuery.extend({}, options);
+
+        if (value === null || value === undefined) {
+            options.expires = -1;
+        }
+
+        if (typeof options.expires === 'number') {
+            var days = options.expires, t = options.expires = new Date();
+            t.setDate(t.getDate() + days);
+        }
+
+        value = String(value);
+
+        return (document.cookie = [
+            encodeURIComponent(key), '=',
+            options.raw ? value : encodeURIComponent(value),
+            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
+            options.path ? '; path=' + options.path : '',
+            options.domain ? '; domain=' + options.domain : '',
+            options.secure ? '; secure' : ''
+        ].join(''));
+    }
+
+    // key and possibly options given, get cookie...
+    options = value || {};
+    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
+    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
+};
diff --git a/js/load.js b/js/load.js
@@ -27,4 +27,4 @@ function loaded(view, doc) {
       script.loaded(doc);
     });
   });
-}
+}
diff --git a/js/locales/en.json b/js/locales/en.json
@@ -0,0 +1 @@
+{}
diff --git a/js/locales/fr.json b/js/locales/fr.json
@@ -0,0 +1,26 @@
+{
+	"Translation Test":
+	"Test de traduction",
+
+	"Libre Docs":
+	"Libre Docs",
+
+	"<a href='/'>Libre Docs</a> is a <a href='https://github.com/unhosted/libredocs'>free software</a> app by <a href='http://unhosted.org'>Unhosted</a> for a more open web.":
+	"<a href='/'>Libre Docs</a> est un <a href='https://github.com/unhosted/libredocs'>Logiciel Libre</a> développé par <a href='http://unhosted.org'>Unhosted</a> pour un web plus ouvert.",
+
+	"Liberate your ideas":
+	"Libérez vos idées",
+
+	"1. get remoteStorage":
+	"1. obtenir un stockage distant",
+
+	"2. connect":
+	"2. connectez-vous",
+
+	"3. write freely!":
+	"3. Écrivez librement!",
+
+	"+ New document":
+	"+ Nouveau document"
+
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,4 +27,4 @@ function loaded(view, doc) { @@
           script.loaded(doc);
         });
       });
-    }
+    }