Closes #155: localize share app

This commit is contained in:
bgamard 2017-11-14 15:44:40 +01:00
parent b02039bad4
commit 3a1691066e
11 changed files with 133 additions and 38 deletions

View File

@ -5,13 +5,13 @@
*/ */
angular.module('share', angular.module('share',
// Dependencies // Dependencies
['ui.router', 'ui.bootstrap', 'restangular', 'ngSanitize', 'ngTouch'] ['ui.router', 'ui.bootstrap', 'restangular', 'ngSanitize', 'ngTouch', 'pascalprecht.translate', 'tmh.dynamicLocale']
) )
/** /**
* Configuring modules. * Configuring modules.
*/ */
.config(function($locationProvider, $stateProvider, $httpProvider, RestangularProvider) { .config(function($locationProvider, $stateProvider, $httpProvider, RestangularProvider, $translateProvider, tmhDynamicLocaleProvider) {
$locationProvider.hashPrefix(''); $locationProvider.hashPrefix('');
// Configuring UI Router // Configuring UI Router
@ -53,6 +53,31 @@ angular.module('share',
// Configuring Restangular // Configuring Restangular
RestangularProvider.setBaseUrl('../api'); 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 // Configuring $http to act like jQuery.ajax
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'; $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

View File

@ -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);
};
});

View File

@ -313,6 +313,13 @@
"new_entry": "New entry" "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": { "directive": {
"acledit": { "acledit": {
"acl_target": "For", "acl_target": "For",

View File

@ -313,6 +313,13 @@
"new_entry": "Nouvelle entrée" "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": { "directive": {
"acledit": { "acledit": {
"acl_target": "Pour", "acl_target": "Pour",

View File

@ -21,13 +21,13 @@
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li> <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> <span class="glyphicon glyphicon glyphicon-compressed"></span>
{{ 'document.view.download_files' | translate }} {{ 'document.view.download_files' | translate }}
</a> </a>
</li> </li>
<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> <span class="glyphicon glyphicon glyphicon-save-file"></span>
{{ 'document.view.export_pdf' | translate }} {{ 'document.view.export_pdf' | translate }}
</a> </a>

View File

@ -1,4 +1,4 @@
<div class="jumbotron"> <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> </div>

View File

@ -6,8 +6,8 @@
</div> </div>
<div class="btn-group"> <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>
<div class="btn-group pull-right"> <div class="btn-group pull-right">

View File

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

View File

@ -5,20 +5,20 @@
<div class="dropdown" uib-dropdown> <div class="dropdown" uib-dropdown>
<button class="btn btn-default" uib-dropdown-toggle> <button class="btn btn-default" uib-dropdown-toggle>
<span class="glyphicon glyphicon-export"></span> <span class="glyphicon glyphicon-export"></span>
Export {{ 'export' | translate }}
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li> <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> <span class="glyphicon glyphicon glyphicon-compressed"></span>
Download files {{ 'document.view.download_files' | translate }}
</a> </a>
</li> </li>
<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> <span class="glyphicon glyphicon glyphicon-save-file"></span>
Export to PDF {{ 'document.view.export_pdf' | translate }}
</a> </a>
</li> </li>
</ul> </ul>
@ -37,23 +37,23 @@
<p ng-bind-html="document.description | newline"></p> <p ng-bind-html="document.description | newline"></p>
<dl class="dl-horizontal"> <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> <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> <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> <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> <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> <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> <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> <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> <dd ng-if="document.rights">{{ document.rights }}</dd>
<dt>Contributors</dt> <dt>{{ 'document.contributors' | translate }}</dt>
<dd> <dd>
<span ng-repeat="contributor in document.contributors"> <span ng-repeat="contributor in document.contributors">
<span class="btn btn-link btn-xs"> <span class="btn btn-link btn-xs">
@ -82,14 +82,14 @@
<div class="col-md-2"> <div class="col-md-2">
<p class="page-header"> <p class="page-header">
<span class="glyphicon glyphicon-comment"></span> <span class="glyphicon glyphicon-comment"></span>
Comments {{ 'document.view.comments' | translate }}
</p> </p>
<div ng-show="!comments || comments.length == 0" class="text-center text-muted"> <div ng-show="!comments || comments.length == 0" class="text-center text-muted">
<h1 class="glyphicon glyphicon-comment"></h1> <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>
<div ng-repeat="comment in comments" class="media" style="overflow: hidden"> <div ng-repeat="comment in comments" class="media" style="overflow: hidden">

View File

@ -1,5 +1,5 @@
<div class="modal-header"> <div class="modal-header">
<h3>Export to PDF</h3> <h3>{{ 'document.pdf.export_title' | translate }}</h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form class="form-horizontal"> <form class="form-horizontal">
@ -7,7 +7,7 @@
<div class="col-sm-offset-2 col-sm-10"> <div class="col-sm-offset-2 col-sm-10">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" ng-model="export.metadata" /> Export metadata <input type="checkbox" ng-model="export.metadata" /> {{ 'document.pdf.export_metadata' | translate }}
</label> </label>
</div> </div>
</div> </div>
@ -16,7 +16,7 @@
<div class="col-sm-offset-2 col-sm-10"> <div class="col-sm-offset-2 col-sm-10">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" ng-model="export.comments" /> Export comments <input type="checkbox" ng-model="export.comments" /> {{ 'document.pdf.export_comments' | translate }}
</label> </label>
</div> </div>
</div> </div>
@ -25,21 +25,21 @@
<div class="col-sm-offset-2 col-sm-10"> <div class="col-sm-offset-2 col-sm-10">
<div class="checkbox"> <div class="checkbox">
<label> <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> </label>
</div> </div>
</div> </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"> <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"> <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> </div>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button ng-click="exportPdf()" class="btn btn-primary"> <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>
<button ng-click="close()" class="btn btn-default">Cancel</button> <button ng-click="close()" class="btn btn-default">{{ 'cancel' | translate }}</button>
</div> </div>

View File

@ -1,9 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html ng-app="share"> <html ng-app="share">
<head> <head>
<title>{{ appName }}</title> <title ng-bind-template="{{ appName }}">Sismics Docs</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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" /> <link rel="shortcut icon" href="favicon.png" />
<!-- ref:css style/style.min.css --> <!-- ref:css style/style.min.css -->
<link rel="stylesheet" href="style/bootstrap.css" type="text/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/less.js" type="text/javascript"></script>
<script src="lib/underscore.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.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.sanitize.js" type="text/javascript"></script>
<script src="lib/angular.touch.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-router.js" type="text/javascript"></script>
<script src="lib/angular.ui-bootstrap.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> <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/ShareModalPdf.js" type="text/javascript"></script>
<script src="app/share/controller/FileView.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/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/Newline.js" type="text/javascript"></script>
<script src="app/share/filter/Filesize.js" type="text/javascript"></script> <script src="app/share/filter/Filesize.js" type="text/javascript"></script>
<!-- endref --> <!-- endref -->
</head> </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="navbar-header">
<div class="hidden-xs navbar-text navbar-logo"> <div class="hidden-xs navbar-text navbar-logo">
<img src="../api/theme/image/logo" /> <img src="../api/theme/image/logo" />
@ -54,5 +59,30 @@
<div ui-view="page"> <div ui-view="page">
</div> </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> </body>
</html> </html>