add a warning popup when detecting an unsupported browser

This commit is contained in:
Julian Descottes 2016-12-12 02:00:49 +01:00 committed by juliandescottes
parent eca9191f29
commit 6cc41ee07b
10 changed files with 120 additions and 3 deletions

View File

@ -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 {

View File

@ -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;
}

View File

@ -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', {})

View File

@ -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) {

View File

@ -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
}
};

View File

@ -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();
};
})();

View File

@ -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;
}
};
})();

View File

@ -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",

View File

@ -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",

View File

@ -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>