Closes #155: localize share app

docs-web/src/main/webapp/src/app/share/app.js

@@ -5,13 +5,13 @@
  */
 angular.module('share',
     // Dependencies
-    ['ui.router', 'ui.bootstrap', 'restangular', 'ngSanitize', 'ngTouch']
+    ['ui.router', 'ui.bootstrap', 'restangular', 'ngSanitize', 'ngTouch', 'pascalprecht.translate', 'tmh.dynamicLocale']
   )
 
 /**
  * Configuring modules.
  */
-.config(function($locationProvider, $stateProvider, $httpProvider, RestangularProvider) {
+.config(function($locationProvider, $stateProvider, $httpProvider, RestangularProvider, $translateProvider, tmhDynamicLocaleProvider) {
   $locationProvider.hashPrefix('');
 
   // Configuring UI Router
@@ -54,6 +54,31 @@ angular.module('share',
   // Configuring Restangular
   RestangularProvider.setBaseUrl('../api');
 
+  // Configuring Angular Translate
+  $translateProvider
+      .useSanitizeValueStrategy(null)
+      .useStaticFilesLoader({
+        prefix: 'locale/',
+        suffix: '.json'
+      })
+      .registerAvailableLanguageKeys(['en', 'fr', 'zh_CN', 'zh_HK', 'zh_TW'], {
+        'zh_*': 'zh_CN',
+        'en_*': 'en',
+        'fr_*': 'fr',
+        '*': 'en'
+      });
+
+  if (!_.isUndefined(localStorage.overrideLang)) {
+    // Set the current language if an override is saved in local storage
+    $translateProvider.use(localStorage.overrideLang);
+  } else {
+    // Or else determine the language based on the user's browser
+    $translateProvider.determinePreferredLanguage();
+  }
+
+  // Configuring tmhDynamicLocale
+  tmhDynamicLocaleProvider.localeLocationPattern('locale/angular-locale_{{locale}}.js');
+  
   // Configuring $http to act like jQuery.ajax
   $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
   $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

docs-web/src/main/webapp/src/app/share/controller/Footer.js

@@ -0,0 +1,26 @@
+'use strict';
+
+/**
+ * Footer controller.
+ */
+angular.module('share').controller('Footer', function($scope, $rootScope, Restangular, $translate, tmhDynamicLocale, $locale) {
+  // Load app data
+  Restangular.one('app').get().then(function(data) {
+    $scope.app = data;
+  });
+
+  // Save the current language to local storage
+  $rootScope.$on('$translateChangeSuccess', function() {
+    $scope.currentLang = $translate.use();
+    localStorage.overrideLang = $scope.currentLang;
+    tmhDynamicLocale.set($scope.currentLang).then(function () {
+      $rootScope.dateFormat = $locale.DATETIME_FORMATS.shortDate;
+      $rootScope.dateTimeFormat = $locale.DATETIME_FORMATS.short;
+    });
+  });
+
+  // Change the current language
+  $scope.changeLanguage = function(lang) {
+    $translate.use(lang);
+  };
+});

docs-web/src/main/webapp/src/locale/en.json

@@ -313,6 +313,13 @@
       "new_entry": "New entry"
     }
   },
+  "app_share": {
+    "main": "Ask a shared document link to access it",
+    "403": {
+      "title": "Not authorized",
+      "message": "The document you are trying to view is not shared anymore"
+    }
+  },
   "directive": {
     "acledit": {
       "acl_target": "For",

docs-web/src/main/webapp/src/locale/fr.json

@@ -313,6 +313,13 @@
       "new_entry": "Nouvelle entrée"
     }
   },
+  "app_share": {
+    "main": "Demandez un lien de partage d'un document pour y accéder",
+    "403": {
+      "title": "Non autorisé",
+      "message": "Le document que vous tentez de consulter n'est plus disponible"
+    }
+  },
   "directive": {
     "acledit": {
       "acl_target": "Pour",

docs-web/src/main/webapp/src/partial/docs/document.view.html

@@ -21,13 +21,13 @@
       </button>
       <ul class="dropdown-menu">
         <li>
-          <a ng-href="../api/file/zip?id={{ document.id }}" title="Download all files">
+          <a ng-href="../api/file/zip?id={{ document.id }}">
             <span class="glyphicon glyphicon glyphicon-compressed"></span>
             {{ 'document.view.download_files' | translate }}
           </a>
         </li>
         <li>
-          <a ng-click="exportPdf()" title="Export document to PDF" class="pointer">
+          <a href ng-click="exportPdf()">
             <span class="glyphicon glyphicon glyphicon-save-file"></span>
             {{ 'document.view.export_pdf' | translate }}
           </a>

docs-web/src/main/webapp/src/partial/share/403.html

@@ -1,4 +1,4 @@
 <div class="jumbotron">
-  <h1>Not authorized</h1>
+  <h1>{{ 'app_share.403.title' | translate }}</h1>
-  <p>The document you are trying to view is not shared anymore</p>
+  <p>{{ 'app_share.403.message' | translate }}</p>
 </div>

docs-web/src/main/webapp/src/partial/share/file.view.html

@@ -6,8 +6,8 @@
   </div>
 
   <div class="btn-group">
-    <button type="button" class="btn btn-default" ng-click="previousFile()">Previous</button>
+    <button type="button" class="btn btn-default" ng-click="previousFile()">{{ 'file.view.previous' | translate }}</button>
-    <button type="button" class="btn btn-default" ng-click="nextFile()">Next</button>
+    <button type="button" class="btn btn-default" ng-click="nextFile()">{{ 'file.view.next' | translate }}</button>
   </div>
 
   <div class="btn-group pull-right">

docs-web/src/main/webapp/src/partial/share/main.html

@@ -1,4 +1,4 @@
 <div class="jumbotron text-center">
   <h1>{{ appName }}</h1>
-  <p>Ask a shared document link to access it</p>
+  <p>{{ 'app_share.main' | translate }}</p>
 </div>

docs-web/src/main/webapp/src/partial/share/share.html

@@ -5,20 +5,20 @@
         <div class="dropdown" uib-dropdown>
           <button class="btn btn-default" uib-dropdown-toggle>
             <span class="glyphicon glyphicon-export"></span>
-            Export
+            {{ 'export' | translate }}
             <span class="caret"></span>
           </button>
           <ul class="dropdown-menu">
             <li>
-              <a ng-href="../api/file/zip?id={{ document.id }}&share={{ $stateParams.shareId }}" title="Download all files">
+              <a ng-href="../api/file/zip?id={{ document.id }}&share={{ $stateParams.shareId }}">
                 <span class="glyphicon glyphicon glyphicon-compressed"></span>
-                Download files
+                {{ 'document.view.download_files' | translate }}
               </a>
             </li>
             <li>
-              <a ng-click="exportPdf()" title="Export document to PDF" class="pointer">
+              <a href ng-click="exportPdf()">
                 <span class="glyphicon glyphicon glyphicon-save-file"></span>
-                Export to PDF
+                {{ 'document.view.export_pdf' | translate }}
               </a>
             </li>
           </ul>
@@ -37,23 +37,23 @@
 
     <p ng-bind-html="document.description | newline"></p>
     <dl class="dl-horizontal">
-      <dt ng-if="document.subject">Subject</dt>
+      <dt ng-if="document.subject">{{ 'document.subject' | translate }}</dt>
       <dd ng-if="document.subject">{{ document.subject }}</dd>
-      <dt ng-if="document.identifier">Identifier</dt>
+      <dt ng-if="document.identifier">{{ 'document.identifier' | translate }}</dt>
       <dd ng-if="document.identifier">{{ document.identifier }}</dd>
-      <dt ng-if="document.publisher">Publisher</dt>
+      <dt ng-if="document.publisher">{{ 'document.publisher' | translate }}</dt>
       <dd ng-if="document.publisher">{{ document.publisher }}</dd>
-      <dt ng-if="document.format">Format</dt>
+      <dt ng-if="document.format">{{ 'document.format' | translate }}</dt>
       <dd ng-if="document.format">{{ document.format }}</dd>
-      <dt ng-if="document.source">Source</dt>
+      <dt ng-if="document.source">{{ 'document.source' | translate }}</dt>
       <dd ng-if="document.source">{{ document.source }}</dd>
-      <dt ng-if="document.type">Type</dt>
+      <dt ng-if="document.type">{{ 'document.type' | translate }}</dt>
       <dd ng-if="document.type">{{ document.type }}</dd>
-      <dt ng-if="document.coverage">Coverage</dt>
+      <dt ng-if="document.coverage">{{ 'document.coverage' | translate }}</dt>
       <dd ng-if="document.coverage">{{ document.coverage }}</dd>
-      <dt ng-if="document.rights">rights</dt>
+      <dt ng-if="document.rights">{{ 'document.rights' | translate }}</dt>
       <dd ng-if="document.rights">{{ document.rights }}</dd>
-      <dt>Contributors</dt>
+      <dt>{{ 'document.contributors' | translate }}</dt>
       <dd>
         <span ng-repeat="contributor in document.contributors">
           <span class="btn btn-link btn-xs">
@@ -82,14 +82,14 @@
   <div class="col-md-2">
     <p class="page-header">
       <span class="glyphicon glyphicon-comment"></span>
-      Comments
+      {{ 'document.view.comments' | translate }}
     </p>
 
     <div ng-show="!comments || comments.length == 0" class="text-center text-muted">
       <h1 class="glyphicon glyphicon-comment"></h1>
-      <p ng-show="!comments && !commentsError">Loading...</p>
+      <p ng-show="!comments && !commentsError">{{ 'loading' | translate }}</p>
-      <p ng-show="comments.length == 0">No comments on this document yet</p>
+      <p ng-show="comments.length == 0">{{ 'document.view.no_comments' | translate }}</p>
-      <p ng-show="!comments && commentsError">Error loading comments</p>
+      <p ng-show="!comments && commentsError">{{ 'document.view.error_loading_comments' | translate }}</p>
     </div>
 
     <div ng-repeat="comment in comments" class="media" style="overflow: hidden">

docs-web/src/main/webapp/src/partial/share/share.pdf.html

@@ -1,5 +1,5 @@
 <div class="modal-header">
-  <h3>Export to PDF</h3>
+  <h3>{{ 'document.pdf.export_title' | translate }}</h3>
 </div>
 <div class="modal-body">
   <form class="form-horizontal">
@@ -7,7 +7,7 @@
       <div class="col-sm-offset-2 col-sm-10">
         <div class="checkbox">
           <label>
-            <input type="checkbox" ng-model="export.metadata" /> Export metadata
+            <input type="checkbox" ng-model="export.metadata" /> {{ 'document.pdf.export_metadata' | translate }}
           </label>
         </div>
       </div>
@@ -16,7 +16,7 @@
       <div class="col-sm-offset-2 col-sm-10">
         <div class="checkbox">
           <label>
-            <input type="checkbox" ng-model="export.comments" /> Export comments
+            <input type="checkbox" ng-model="export.comments" /> {{ 'document.pdf.export_comments' | translate }}
           </label>
         </div>
       </div>
@@ -25,21 +25,21 @@
       <div class="col-sm-offset-2 col-sm-10">
         <div class="checkbox">
           <label>
-            <input type="checkbox" ng-model="export.fitimagetopage" /> Fit image to page
+            <input type="checkbox" ng-model="export.fitimagetopage" /> {{ 'document.pdf.fit_to_page' | translate }}
           </label>
         </div>
       </div>
     </div>
-    <label for="inputMargin" class="col-sm-2 control-label">Margin</label>
+    <label for="inputMargin" class="col-sm-2 control-label">{{ 'document.pdf.margin' | translate }}</label>
     <div class="input-group col-sm-5">
       <input type="number" class="form-control" id="inputMargin" ng-model="export.margin" min="0" max="100" step="1">
-      <div class="input-group-addon">mm</div>
+      <div class="input-group-addon">{{ 'document.pdf.millimeter' | translate }}</div>
     </div>
   </form>
 </div>
 <div class="modal-footer">
   <button ng-click="exportPdf()" class="btn btn-primary">
-    <span class="glyphicon glyphicon-save-file"></span> Export
+    <span class="glyphicon glyphicon-save-file"></span> {{ 'export' | translate }}
   </button>
-  <button ng-click="close()" class="btn btn-default">Cancel</button>
+  <button ng-click="close()" class="btn btn-default">{{ 'cancel' | translate }}</button>
 </div>

docs-web/src/main/webapp/src/share.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html ng-app="share">
   <head>
-    <title>{{ appName }}</title>
+    <title ng-bind-template="{{ appName }}">Sismics Docs</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="renderer" content="webkit" />
     <link rel="shortcut icon" href="favicon.png" />
     <!-- ref:css style/style.min.css -->
     <link rel="stylesheet" href="style/bootstrap.css" type="text/css" />
@@ -26,8 +28,10 @@
     <script src="lib/less.js" type="text/javascript"></script>
     <script src="lib/underscore.js" type="text/javascript"></script>
     <script src="lib/angular.js" type="text/javascript"></script>
+    <script src="lib/angular.translate.js" type="text/javascript"></script>
     <script src="lib/angular.sanitize.js" type="text/javascript"></script>
     <script src="lib/angular.touch.js" type="text/javascript"></script>
+    <script src="lib/angular.tmhDynamicLocale.js" type="text/javascript"></script>
     <script src="lib/angular.ui-router.js" type="text/javascript"></script>
     <script src="lib/angular.ui-bootstrap.js" type="text/javascript"></script>
     <script src="lib/angular.restangular.js" type="text/javascript"></script>
@@ -37,12 +41,13 @@
     <script src="app/share/controller/ShareModalPdf.js" type="text/javascript"></script>
     <script src="app/share/controller/FileView.js" type="text/javascript"></script>
     <script src="app/share/controller/FileModalView.js" type="text/javascript"></script>
+    <script src="app/share/controller/Footer.js" type="text/javascript"></script>
     <script src="app/share/filter/Newline.js" type="text/javascript"></script>
     <script src="app/share/filter/Filesize.js" type="text/javascript"></script>
     <!-- endref -->
   </head>
-  <body>
+  <body translate-cloak ng-cloak>
-    <div class="navbar navbar-default" role="navigation">
+    <div class="navbar navbar-inverse" role="navigation">
       <div class="navbar-header">
         <div class="hidden-xs navbar-text navbar-logo">
           <img src="../api/theme/image/logo" />
@@ -54,5 +59,30 @@
 
     <div ui-view="page">
     </div>
+
+    <div class="row" ng-controller="Footer">
+      <div class="col-md-12 footer text-center text-muted">
+        <ul class="list-inline">
+          <li uib-dropdown class="dropdown">
+            <a href uib-dropdown-toggle>
+              <span ng-switch="currentLang">
+                <span ng-switch-when="en">English</span>
+                <span ng-switch-when="fr">Français</span>
+                <span ng-switch-when="zh_CN">简体中文</span>
+              </span>
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu">
+              <li><a href ng-click="changeLanguage('en')" ng-class="{ 'bg-info': currentLang == 'en' }">English</a></li>
+              <li><a href ng-click="changeLanguage('fr')" ng-class="{ 'bg-info': currentLang == 'fr' }">Français</a></li>
+              <li><a href ng-click="changeLanguage('zh_CN')" ng-class="{ 'bg-info': currentLang == 'zh_CN' }">简体中文</a></li>
+            </ul>
+          </li>
+          <li translate="document.default.footer_sismics"></li>
+          <li><a href="apidoc/">{{ 'document.default.api_documentation' | translate }}</a></li>
+          <li>v{{ app.current_version }}</li>
+        </ul>
+      </div>
+    </div>
   </body>
 </html>