Merge pull request #595 from juliandescottes/unsupported-browser-popup

add a warning popup when detecting an unsupported browser

src/css/dialogs-performance-info.css

@@ -22,11 +22,13 @@
 
 #dialog-container.performance-info {
   width: 500px;
-  height: 525px;
+  height: 520px;
   top : 50%;
   left : 50%;
   position : absolute;
   margin-left: -250px;
+  margin-top: -260px;
+
 }
 
 .dialog-performance-info-body {

src/css/dialogs-unsupported-browser.css

@@ -0,0 +1,32 @@
+/************************************************************************************************/
+/* Unsupported browser dialog                                                                   */
+/************************************************************************************************/
+
+#dialog-container.unsupported-browser {
+  width: 600px;
+  height: 260px;
+  top : 50%;
+  left : 50%;
+  position : absolute;
+  margin-top: -130px;
+  margin-left: -300px;
+}
+
+.unsupported-browser .dialog-content {
+  font-size:1.2em;
+  letter-spacing: 1px;
+  padding:10px 20px;
+  overflow: auto;
+}
+
+.unsupported-browser .supported-browser-list {
+  padding: 5px 20px;
+}
+
+.unsupported-browser .supported-browser-list li {
+  list-style-type: square;
+}
+
+#current-user-agent {
+  color: gold;
+}

src/index.html

@@ -82,6 +82,7 @@
   @@include('templates/dialogs/browse-local.html', {})
   @@include('templates/dialogs/cheatsheet.html', {})
   @@include('templates/dialogs/performance-info.html', {})
+  @@include('templates/dialogs/unsupported-browser.html', {})
 
   <!-- settings-panel partials -->
   @@include('templates/settings/application.html', {})

src/js/app.js

@@ -181,6 +181,12 @@
         mb.createMacBuiltin('Piskel');
         gui.Window.get().menu = mb;
       }
+
+      if (pskl.utils.UserAgent.isUnsupported()) {
+        $.publish(Events.DIALOG_DISPLAY, {
+          dialogId : 'unsupported-browser'
+        });
+      }
     },
 
     loadPiskel_ : function (piskelData) {

src/js/controller/dialogs/DialogsController.js

@@ -21,6 +21,10 @@
     'performance-info' : {
       template : 'templates/dialogs/performance-info.html',
       controller : ns.PerformanceInfoController
+    },
+    'unsupported-browser' : {
+      template : 'templates/dialogs/unsupported-browser.html',
+      controller : ns.UnsupportedBrowserController
     }
   };
 

src/js/controller/dialogs/UnsupportedBrowserController.js

@@ -0,0 +1,13 @@
+(function () {
+  var ns = $.namespace('pskl.controller.dialogs');
+
+  ns.UnsupportedBrowserController = function () {};
+
+  pskl.utils.inherit(ns.UnsupportedBrowserController, ns.AbstractDialogController);
+
+  ns.UnsupportedBrowserController.prototype.init = function () {
+    this.superclass.init.call(this);
+    var currentUserAgentElement = document.querySelector('#current-user-agent');
+    currentUserAgentElement.innerText = pskl.utils.UserAgent.getDisplayName();
+  };
+})();

src/js/utils/UserAgent.js

@@ -2,14 +2,30 @@
   var ns = $.namespace('pskl.utils');
   var ua = navigator.userAgent;
 
+  var hasChrome =
+
   ns.UserAgent = {
     isIE : /MSIE/i.test(ua),
     isIE11 : /trident/i.test(ua),
-    isChrome : /Chrome/i.test(ua),
+    isEdge : /edge\//i.test(ua),
     isFirefox : /Firefox/i.test(ua),
-    isMac : /Mac/.test(ua)
+    isMac : /Mac/.test(ua),
+    isOpera : /OPR\//.test(ua),
+    // Shared user agent strings, sadly found in many useragent strings
+    hasChrome : /Chrome/i.test(ua),
+    hasSafari : /Safari\//.test(ua),
   };
 
+  ns.UserAgent.isChrome = ns.UserAgent.hasChrome && !ns.UserAgent.isOpera && !ns.UserAgent.isEdge;
+  ns.UserAgent.isSafari = ns.UserAgent.hasSafari && !ns.UserAgent.isOpera && !ns.UserAgent.isEdge;
+
+  ns.UserAgent.supportedUserAgents = [
+    'isIE11',
+    'isEdge',
+    'isChrome',
+    'isFirefox'
+  ];
+
   ns.UserAgent.version = (function () {
     if (pskl.utils.UserAgent.isIE) {
       return parseInt(/MSIE\s?(\d+)/i.exec(ua)[1], 10);
@@ -19,4 +35,27 @@
       return parseInt(/Firefox\/(\d+)/i.exec(ua)[1], 10);
     }
   })();
+
+  ns.UserAgent.isUnsupported = function () {
+    // Check that none of the supported UAs are set to true.
+    return ns.UserAgent.supportedUserAgents.every(function (uaTest) {
+      return !ns.UserAgent[uaTest];
+    });
+  };
+
+  ns.UserAgent.getDisplayName = function () {
+    if (ns.UserAgent.isIE) {
+      return 'Internet Explorer';
+    } else if (ns.UserAgent.isChrome) {
+      return 'Chrome';
+    } else if (ns.UserAgent.isFirefox) {
+      return 'Firefox';
+    } else if (ns.UserAgent.isSafari) {
+      return 'Safari';
+    } else if (ns.UserAgent.isOpera) {
+      return 'Opera';
+    } else {
+      return ua;
+    }
+  };
 })();

src/piskel-script-list.js

@@ -141,6 +141,7 @@
   "js/controller/dialogs/BrowseLocalController.js",
   "js/controller/dialogs/CheatsheetController.js",
   "js/controller/dialogs/PerformanceInfoController.js",
+  "js/controller/dialogs/UnsupportedBrowserController.js",
 
   // Dialogs controller
   "js/controller/dialogs/DialogsController.js",

src/piskel-style-list.js

@@ -23,6 +23,7 @@
   "css/dialogs-create-palette.css",
   "css/dialogs-import-image.css",
   "css/dialogs-performance-info.css",
+  "css/dialogs-unsupported-browser.css",
   "css/notifications.css",
   "css/toolbox.css",
   "css/toolbox-layers-list.css",

src/templates/dialogs/unsupported-browser.html

@@ -0,0 +1,18 @@
+<script type="text/template" id="templates/dialogs/unsupported-browser.html">
+  <div class="dialog-wrapper">
+    <h3 class="dialog-head">
+      Browser not supported
+      <span class="dialog-close">X</span>
+    </h3>
+    <div class="dialog-content">
+      <p>Your current browser (<span id="current-user-agent"></span>) is not supported.</p>
+      <p>Piskel is currently tested for:</p>
+      <ul class="supported-browser-list">
+        <li>Google Chrome <a href="https://www.google.com/chrome/browser/desktop/" target="_blank">https://www.google.com/chrome/browser/desktop/</a></li>
+        <li>Mozilla Firefox <a href="https://www.mozilla.org/en-US/firefox/" target="_blank">https://www.mozilla.org/en-US/firefox/</a></li>
+        <li>Microsoft Edge <a href="https://www.microsoft.com/en-us/windows/microsoft-edge" target="_blank">https://www.microsoft.com/en-us/windows/microsoft-edge</a></li>
+      </ul>
+      <p>This browser has not been tested with Piskel, you might experience unknown bugs and crashes if you decide to continue.</p>
+    </div>
+  </div>
+</script>