From 8b5800258a6936291aacca6c886e8efc344acdfe Mon Sep 17 00:00:00 2001
From: Nick Freear <nfreear@yahoo.co.uk>
Date: Mon, 1 Oct 2018 23:55:10 +0100
Subject: [PATCH] Bug #7, add `./compat` Javascript checker [iet:10364720]

* Executed on JS include, not in `require().app.run()`
---
 src/app.js             |  6 +++++
 src/compat.js          | 56 ++++++++++++++++++++++++++++++++++++++++++
 style/journeystyle.css |  4 +++
 3 files changed, 66 insertions(+)
 create mode 100644 src/compat.js

diff --git a/src/app.js b/src/app.js
index 8fa6ca7..8e2e0ce 100644
--- a/src/app.js
+++ b/src/app.js
@@ -3,6 +3,8 @@
 
 module.exports.run = run;
 
+const IS_COMPAT = require('./compat').check();
+
 const LOC = window.location;
 const CORE = require('./core');
 const LAYOUT = require('./layout');
@@ -13,6 +15,10 @@ const UTIL = require('./util'); // Was: require('./config');
 const VIEWS = require('./views');
 
 function run (config) {
+  if (!IS_COMPAT) {
+    return;
+  }
+
   console.warn('The our-journey API:', require('../index'), 'config:', config);
 
   UTIL.putConfig(config);
diff --git a/src/compat.js b/src/compat.js
new file mode 100644
index 0000000..57cd22b
--- /dev/null
+++ b/src/compat.js
@@ -0,0 +1,56 @@
+/* Browser compatibility | ©The Open University.
+*/
+
+module.exports.check = checkAndHandle;
+
+const UA = window.navigator.userAgent;
+const DOC = window.document;
+const LOC = window.location;
+const NO_COMPAT_MSG = [
+  // '<style> .ojs-error { color: #a00; } </style>',
+  '<div class="X-ojs-error alert alert-danger" role="alert">',
+  '  <p>Sorry! <i>our-journey</i> does not work on Internet Explorer.</p>',
+  '  <p><a href="https://browsehappy.com">Try a different browser — Browse Happy</a></p>',
+  '</div>'
+];
+const COMPAT_REGEX = /(MSIE|Trident\/)/; // Live!
+// const COMPAT_REGEX = /(MSIE|Trident\/|Chrome)/; // Test!
+
+function checkAndHandle () {
+  const IS_COMPAT = (!COMPAT_REGEX.test(UA) || /compatCheck=false/.test(LOC.href));
+
+  if (IS_COMPAT) {
+    console.warn('our-journey. Browser is compatible');
+  } else {
+    // console.error('our-journey. Browser NOT compatible (MSIE ?)');
+
+    notCompatibleMessage();
+
+    tryHideContainer();
+
+    let err = new Error('our-journey. Browser NOT compatible (MSIE ?)');
+    err.name = 'CompatError';
+    throw err;
+  }
+
+  return IS_COMPAT;
+}
+
+function notCompatibleMessage () {
+  // const CTR = UTIL.config('container');
+  const DIV = DOC.createElement('div');
+
+  DIV.innerHTML = NO_COMPAT_MSG.join('\n');
+  DIV.className = 'our-journey-js ojs-error ojs-no-compat ojs-msie';
+
+  DOC.body.insertBefore(DIV, DOC.body.firstChild); // Was: DOC.body.appendChild(CTR);
+}
+
+function tryHideContainer () {
+  // We can't use UTIL.config('container') here, so guess!
+  const TRY_CTR = DOC.querySelector('#our-journey-tool');
+
+  if (TRY_CTR) {
+    TRY_CTR.style.display = 'none';
+  }
+}
diff --git a/style/journeystyle.css b/style/journeystyle.css
index 4f078f3..cbe39cd 100644
--- a/style/journeystyle.css
+++ b/style/journeystyle.css
@@ -207,3 +207,7 @@ img[ src $= 'assets/iet-logo.svg' ] {
   margin-right: 16px;
   padding: 5px;
 }
+
+.ojs-error {
+  colour: #a00;
+}