Add the translation mechanism.

Signed-off-by: MachinisteWeb <[email protected]>

assets/javascripts/common.js

@@ -27,6 +27,9 @@ var website = website || {},
 	$body = $("body"),
 	$base = $("base");
 
+function googleTranslateElementInit() {
+  new google.translate.TranslateElement({ pageLanguage: 'fr' }, 'google_translate_element');
+}
 
 /*------------------------------------*\
 	$%COMMON
@@ -141,6 +144,14 @@ var website = website || {},
 		  ga('send', 'pageview');
 	};
 
+	publics.googleTranslate = function () {
+		var gt = document.createElement('script');
+
+		gt.setAttribute('src','//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');
+
+		document.head.appendChild(gt);
+	};
+
 	privates.lastScrollValue = 0;
 
 	publics.scrollAsideSynchonisation = function () {
@@ -230,6 +241,7 @@ var website = website || {},
 		publics.toggleMenu();
 		publics.chat();
 		publics.kc();
+		publics.googleTranslate();
 	};
 }(website));
 

assets/stylesheets/common.css

@@ -1356,4 +1356,33 @@ a.share-btn.share-btn-email:hover {
 
 .breadcrumb .fa {
 	font-size: .8em;
+}
+
+.language-selection {
+	display: none;
+	position: fixed;
+	bottom: -30px;
+	left: 0;
+	padding-left: 4px;
+	padding-right: 4px;
+	background-color: white;
+	z-index: 1000;
+}
+@media (min-width: 1160px) {
+	.language-selection {
+		display: block;
+	}
+}
+.language-selection::before {
+	content: ''
+	display: block;
+	position: absolute;
+	top: -20px;
+	left: 0;
+	height: 20px;
+	background: linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);
+	width: 100%;
+}
+.language-selection p {
+	margin-top: 0;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "blog-atlas",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "author": "Bruno Lesieur <[email protected]>",
   "description": "Exemple de développement de site Node.js.",
   "private": false,

views/partials/article.htm

@@ -12,7 +12,7 @@
 					<? } ?>
 
 					<aside class="share-buttons">
-						<a class="share-btn share-btn-branded share-btn-twitter" href="https://www.twitter.com/intent/tweet?text=<?- backend.article.title ?>&amp;url=<?- urlBasePath + common.articles.readMore.href.replace(/%urn%/g, backend.article.urn).slice(1) ?>&amp;via=MachinisteWeb" title="<?= common.shareOn.share + ' ' + common.shareOn.on ?> Twitter">
+						<a class="share-btn share-btn-branded share-btn-twitter" href="https://www.twitter.com/intent/tweet?text=<?- backend.article.title ?>&amp;url=<?- urlBasePath + common.articles.readMore.href.replace(/%urn%/g, backend.article.urn).slice(1) ?>&amp;via=ZetesEthique" title="<?= common.shareOn.share + ' ' + common.shareOn.on ?> Twitter">
 							<span class="fa fa-twitter"></span>
 							<span class="share-btn-text">Twitter</span>
 						</a>

views/partials/master-foot.htm

@@ -7,5 +7,9 @@
 		<? if ((typeof backend !== 'undefined' && backend.article && backend.article.script) || (typeof session !== 'undefined' && session.account)) { ?>
 			<script class="script" type="text/javascript"><?- (typeof backend !== 'undefined' && backend.article && backend.article.script) ? backend.article.script : "" ?></script>
 		<? } ?>
+		<div class="language-selection">
+			<p>Lire dans une autre langue</p>
+			<div id="google_translate_element"></div>
+		</div>
 	</body>
 </html>