Optimized for chrome (electricitymaps#53)

* add overlay * trigger overlay when not google chrome. Load viz only when google chrome. Fixes electricitymaps#48 * render viz even if not Chrome * add <continue without Chrome> option
Pantkowsky · Sep 14, 2016 · 1bc52a4 · 1bc52a4
1 parent d26c538
commit 1bc52a4
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 0 deletions.
diff --git a/public/app/main.js b/public/app/main.js
@@ -1,3 +1,29 @@
+// Snippet taken from: http://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome/13348618#13348618
+//
+// please note 
+// that IE11 now returns undefined again for window.chrome
+// and new Opera 30 outputs true for window.chrome
+// and new IE Edge outputs to true now for window.chrome
+// and if not iOS Chrome check
+// so use the below updated condition
+var isChromium = window.chrome,
+    winNav = window.navigator,
+    vendorName = winNav.vendor,
+    isOpera = winNav.userAgent.indexOf("OPR") > -1,
+    isIEedge = winNav.userAgent.indexOf("Edge") > -1,
+    isIOSChrome = winNav.userAgent.match("CriOS");
+
+if(isIOSChrome){
+   // is Google Chrome on IOS
+} else if(isChromium !== null && isChromium !== undefined && vendorName === "Google Inc." && isOpera == false && isIEedge == false) {
+    // is Google Chrome
+} else { 
+    // not Google Chrome
+
+    // show force-chrome overlay
+    document.getElementById('force-chrome-overlay').style.display = "flex";   
+}
+
 var ENDPOINT = document.domain == 'localhost' ? 'http://localhost:8000' : 'http://electricitymap-api.tmrow.co';
 
 var co2color = d3.scale.linear()
@@ -514,3 +540,6 @@ window.onresize = function () {
 
 redraw();
 fetchAndReschedule();
+
+
+
diff --git a/public/chromelogo-highres.png b/public/chromelogo-highres.png
diff --git a/public/index.html b/public/index.html
@@ -95,6 +95,17 @@
         </div>
         <small class="contribute-text">Help out with missing data by contributing on <a href="https://github.com/corradio/electricitymap#contribute" target="_blank">GitHub</a>. Follow us on <a href="https://twitter.com/tmrowco" target="_blank">Twitter</a> for the latest updates.</small>
         <div class="loading overlay"></div>
+        <div id="force-chrome-overlay" class="force-chrome" style="display: none;">
+            <div class="centered">
+                <h1>Bummer!</h1>
+                <p>In order to ensure the best viewing experience we’ve optimized the Electricity Map to the Chrome web browser.</p>
+
+                <p>Please switch to Chrome in oder to view this <b>real-time visualization of Energy production in Europe</b>.</p>
+
+                <p style="margin-top:3em;"><small>If you don't have Chrome, you can click the button below to install it, or simply <a href="#" onclick="document.getElementById('force-chrome-overlay').style.display = 'none';">continue without it</a> (not recommended).</small></p>
+                <p style="text-align:center;"><a class="button" href="https://www.google.com/chrome/browser/desktop/">Install <img src="chromelogo-highres.png"/></a></p>
+            </div>
+        </div>
     </body>
 
     <script src="app/main.js"></script>

diff --git a/public/style.css b/public/style.css
@@ -124,6 +124,61 @@ html, body {
     width: 300px;
 }
 
+.force-chrome {
+    position: absolute;
+    z-index: 99;
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: dimgrey;
+}
+
+.force-chrome .centered {
+    max-width: 400px;
+}
+
+.force-chrome h1{
+    text-align: center;
+    font-size: 2.5em;
+    margin-bottom: 1em;    
+}
+
+.force-chrome img {
+    height: 17px;
+    float: right;
+    margin-left: 7px;
+}
+
+.force-chrome a {
+    color: dimgrey;
+    text-decoration: underline;
+}
+
+.force-chrome a.button {
+    font-size: 13px;
+    display: inline-block;
+    border: 1px solid #a2a2a2;
+    border-radius: 10px;
+    padding: 7px 12px;
+    text-decoration: none;
+}
+
+.force-chrome a.button:hover {
+    text-decoration: none;
+    background-color: #f1f1f1;
+}
+
+
+.force-chrome p {
+    font-size: 0.9em;
+    font-weight: lighter;
+    text-align: justify;
+    line-height: 1.4;   
+}
+
 a {
     text-decoration: none;
     color: lightblue;

diff --git a/server.py b/server.py
@@ -111,6 +111,10 @@ def favicon_GET():
 def logo_GET():
     return flask.send_from_directory('public', 'tomorrow_logo_open_source.svg')
 
+@app.route('/chromelogo-highres.png')
+def chrome_logo_GET():
+    return flask.send_from_directory('public', 'chromelogo-highres.png')    
+
 @app.route('/vendor/<path:path>', methods=['GET', 'OPTIONS'])
 def vendor_GET(path):
     return flask.send_from_directory('public/vendor', path)