diff --git a/src/css/dialogs-performance-info.css b/src/css/dialogs-performance-info.css index 132e8954..3e7401d2 100644 --- a/src/css/dialogs-performance-info.css +++ b/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 { diff --git a/src/css/dialogs-unsupported-browser.css b/src/css/dialogs-unsupported-browser.css new file mode 100644 index 00000000..d91e65ff --- /dev/null +++ b/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; +} diff --git a/src/index.html b/src/index.html index 6d52399d..a02dc52c 100644 --- a/src/index.html +++ b/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', {}) @@include('templates/settings/application.html', {}) diff --git a/src/js/app.js b/src/js/app.js index 2959beb6..a6d14593 100644 --- a/src/js/app.js +++ b/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) { diff --git a/src/js/controller/dialogs/DialogsController.js b/src/js/controller/dialogs/DialogsController.js index cf6a9e63..b4e2813f 100644 --- a/src/js/controller/dialogs/DialogsController.js +++ b/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 } }; diff --git a/src/js/controller/dialogs/UnsupportedBrowserController.js b/src/js/controller/dialogs/UnsupportedBrowserController.js new file mode 100644 index 00000000..7327a798 --- /dev/null +++ b/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(); + }; +})(); diff --git a/src/js/utils/UserAgent.js b/src/js/utils/UserAgent.js index 61ee283d..68102a5a 100644 --- a/src/js/utils/UserAgent.js +++ b/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; + } + }; })(); diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index cb2e8d3d..e3199d2a 100644 --- a/src/piskel-script-list.js +++ b/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", diff --git a/src/piskel-style-list.js b/src/piskel-style-list.js index a208b9c1..b0719cad 100644 --- a/src/piskel-style-list.js +++ b/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", diff --git a/src/templates/dialogs/unsupported-browser.html b/src/templates/dialogs/unsupported-browser.html new file mode 100644 index 00000000..0e5e2c81 --- /dev/null +++ b/src/templates/dialogs/unsupported-browser.html @@ -0,0 +1,18 @@ + \ No newline at end of file