mad-star-studio/element-web
2
0
Fork 0
Code Pull requests Activity

Use Modernizr to check for browser compatibility

Browse source 
Add a CompatibilityPage which is shown for incompatible clients. If they
continue on regardless, proceed as if it never happened.
This commit is contained in:
Kegan Dougal 2015-10-28 17:39:50 +00:00
parent 4175dcd102
commit 59d8cbe742
6 changed files with 150 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/vector/index.js
View file

@ -16,6 +16,7 @@ limitations under the License.
'use strict';
var RunModernizrTests = require("./modernizr"); // this side-effects a global
var React = require("react");
var sdk = require("matrix-react-sdk");
sdk.loadSkin(require('../skins/vector/skindex'));
@ -25,6 +26,33 @@ var qs = require("querystring");
var lastLocationHashSet = null;
function checkBrowserFeatures(featureList) {
if (!window.Modernizr) {
console.error("Cannot check features - Modernizr global is missing.");
return false;
}
var featureComplete = true;
for (var i = 0; i < featureList.length; i++) {
if (window.Modernizr[featureList[i]] === undefined) {
console.error(
"Looked for feature '%s' but Modernizr has no results for this. " +
"Has it been configured correctly?", featureList[i]
);
return false;
}
if (window.Modernizr[featureList[i]] === false) {
console.error("Browser missing feature: '%s'", featureList[i]);
// toggle flag rather than return early so we log all missing features
// rather than just the first.
featureComplete = false;
}
}
return featureComplete;
}
var validBrowser = checkBrowserFeatures([
"displaytable", "flexbox", "es5object", "es5function", "foo"
]);
// We want to support some name / value pairs in the fragment
// so we're re-using query string like format
@ -84,14 +112,11 @@ var makeRegistrationUrl = function() {
'#/register';
}
var MatrixChat = sdk.getComponent('pages.MatrixChat');
window.matrixChat = React.render(
<MatrixChat onNewScreen={onNewScreen} registrationUrl={makeRegistrationUrl()} />,
document.getElementById('matrixchat')
);
window.addEventListener('hashchange', onHashChange);
window.onload = function() {
if (!validBrowser) {
return;
}
routeUrl(window.location);
loaded = true;
if (lastLoadedScreen) {
@ -100,3 +125,28 @@ window.onload = function() {
}
}
function loadApp() {
if (validBrowser) {
var MatrixChat = sdk.getComponent('pages.MatrixChat');
window.matrixChat = React.render(
<MatrixChat onNewScreen={onNewScreen} registrationUrl={makeRegistrationUrl()} />,
document.getElementById('matrixchat')
);
}
else {
console.error("Browser is missing required features.");
// take to a different landing page to AWOOOOOGA at the user
var CompatibilityPage = require("../skins/vector/views/pages/CompatibilityPage");
window.matrixChat = React.render(
<CompatibilityPage onAccept={function() {
validBrowser = true;
console.log("User accepts the compatibility risks.");
loadApp();
window.onload(); // still do the same code paths for compatible clients
}} />,
document.getElementById('matrixchat')
);
}
}
loadApp();