Add option to change language of the site

app.js

@@ -2,23 +2,32 @@ const path = require('path')
 const express = require('express')
 const hbs = require('express-handlebars')
 const router = require('./routes/index.js')
-const text = require('./text.js').english
+const bodyParser = require('body-parser')
 const convertToIcons = require('./helpers/convertToIcons.js')
-require('env2')('./config.env')
 const mongoose = require('mongoose')
 mongoose.connect(process.env.MONGODB_URI)
 const favicon = require('serve-favicon')
 require('env2')('./config.env')
 
 const app = express()
 const db = mongoose.connection
+app.set('port', process.env.PORT || 4444)
 
-app.locals.text = text
+// import the languages object and set the default language and text dir for arabic
+const languages = require('./text.js')
+const language = 'arabic'
+const lang = 'ar'
+const text = languages[language]
+const dir = 'rtl'
 
-app.set('port', process.env.PORT || 4444)
+app.locals.dir = dir
+app.locals.text = text
+app.locals.lang = lang
 
 const pubPath = path.join(__dirname, './', 'public')
 
+app.use(bodyParser.urlencoded({extended: false}))
+app.use(bodyParser.json())
 app.use(favicon(path.join(__dirname, './public', 'favicon.ico')))
 app.use(express.static(pubPath))
 

package.json

@@ -20,6 +20,7 @@
   },
   "homepage": "https://github.com/FACN1/easyNaz#readme",
   "dependencies": {
+    "body-parser": "^1.17.2",
     "env2": "^2.2.0",
     "express": "^4.15.2",
     "express-handlebars": "^3.0.0",

public/main.js → public/js/navbar.js

@@ -1,5 +1,13 @@
+// clientside JS file for nav bar buttons
+
 var help = document.getElementById('help')
 help.addEventListener('click', function (event) {
   var showInformation = document.getElementById('show-information')
   showInformation.classList.toggle('dn')
 })
+
+var languageBtn = document.querySelector('#languageBtn')
+
+languageBtn.addEventListener('change', function (event) {
+  this.submit()
+})

routes/changeLanguage.js

@@ -0,0 +1,22 @@
+const languages = require('../text.js')
+
+module.exports = (req, res) => {
+  // change language to what the user clicked on
+  const language = req.body.language
+  const text = languages[language]
+  let dir = 'ltr'
+  let lang = 'en'
+
+  if (language === 'arabic') {
+    dir = 'rtl'
+    lang = 'ar'
+  }
+
+  // set the locals
+  req.app.locals.dir = dir
+  req.app.locals.text = text
+  req.app.locals.lang = lang
+
+  // redirect back to the page they clicked the button from
+  res.redirect(req.headers.referer)
+}

routes/index.js

@@ -4,10 +4,12 @@ const homePage = require('./home.js')
 const resultPage = require('./results.js')
 const servicesPage = require('./services.js')
 const serviceInfoPage = require('./serviceInfo.js')
+const changeLanguage = require('./changeLanguage.js')
 
 router.get('/', homePage)
 router.get('/services', servicesPage)
 router.get('/result', resultPage)
 router.get('/serviceinfo', serviceInfoPage)
+router.post('/language_change', changeLanguage)
 
 module.exports = router

text.js

@@ -13,6 +13,10 @@ module.exports = {
     helpIcon: 'Icon for the help button',
     helpInfo: 'easyNaz is made in aim to let people know of the few accissible places in Nazareth and encourage more businesses to become accessible! In our app you can find all the accessible places and businesses in Nazrareth anytime and just a few clicks depends on what you need or looking for.',
     notFound: 'Sorry we have no services in our database that match your selections',
+    // Language change
+    chooseLang: 'Change Language',
+    langEnglish: 'English',
+    langArabic: 'عربي',
     // Disabilities page
     disabilitiesPrompt: 'Select the Disability or Disabilities you want to be catered for',
     visual: 'Visual',
@@ -53,7 +57,10 @@ module.exports = {
     helpIcon: ' ايقونه للمساعده',
     helpInfo: ' هذا التطبيق بني بهدف مساعدة الناس على التعرف على بعض الاماكن في الناصرة التي توفر خدمات لذوي الاحتياجات الخاصة ولتشجيع اصحاب المصالح التجارية لادخال هذة الخدمات ضمن عملهم ومن خلال تطبيقنا تستطيع ان تجد اي خدمة تبحث عنها في اي وقت هي مجرد كبسة زر حتى تجد ما تبحث عنه',
     notFound: ' نعتذر لا يوجد لدينا في قاعده البيانات معلومات متطابقه لاختياراتك ',
-
+    // Language change
+    chooseLang: 'تغيير اللغه',
+    langEnglish: 'English',
+    langArabic: 'عربي',
     // Disabilities page
     disabilitiesPrompt: 'حدد نوع الاعاقة او الاعاقات التي تهمك ',
     visual: 'بصري',

views/home.hbs

@@ -1,6 +1,6 @@
-  <section class="">
+  <section class="ma0">
     <div class="">
-      <h2>{{text.disabilitiesPrompt}}</h2>
+      <h1>{{text.disabilitiesPrompt}}</h1>
     </div>
     <div id="filter-buttons" class="">
       <button type="button" data-storageid="disability" aria-pressed="false">{{text.visual}}</button>

views/layouts/main.hbs

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html dir={{{dir}}} lang={{{lang}}}>
   <head>
     <meta charset="utf-8">
     <title>{{title}}</title>
@@ -9,8 +9,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
   </head>
-
-  <body class="vh-100">
+  <body class="vh-100 pt4">
+    {{>header}}
     {{{body}}}
     {{>navbar}}
     <script type="text/javascript" src="./js/public.js"></script>

views/partials/header.hbs

@@ -0,0 +1,11 @@
+<div class="w-100 fixed top-0 h2 bg-white grey o-50 bb shadow-1">
+  <form id="languageBtn" action="/language_change" method="post">
+    <fieldset class="b--transparent">
+      <legend class="sr-only">{{text.chooseLang}}</legend>
+      <input id="arabic"type="radio" name="language" value="arabic">
+      <label for="arabic">{{text.langArabic}}</label>
+      <input id="english"type="radio" name="language" value="english">
+      <label for="english">{{text.langEnglish}}</label>
+    </fieldset>
+  </form>
+</div>

views/partials/navbar.hbs

@@ -14,5 +14,4 @@
       </a>
     </div>
 </nav>
-
-<script src="./main.js" type="text/javascript"></script>
+<script type="text/javascript" src="./js/navbar.js" ></script>