fixed browser detection, loading css from js

This commit is contained in:
Maxim Devaev
2022-10-16 23:51:27 +03:00
parent 5d54b32ab6
commit e5ed253d68
20 changed files with 401 additions and 279 deletions

View File

@@ -23,7 +23,82 @@
"use strict";
export function checkBrowser() {
export var browser = new function() {
// https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851769
// Opera 8.0+
let is_opera = (
(!!window.opr && !!opr.addons) // eslint-disable-line no-undef
|| !!window.opera
|| (navigator.userAgent.indexOf(" OPR/") >= 0)
);
// Firefox 1.0+
let is_firefox = (typeof InstallTrigger !== "undefined");
// Safari 3.0+ "[object HTMLElementConstructor]"
let is_safari = (function() {
if (/constructor/i.test(String(window["HTMLElement"]))) {
return true;
}
let push = null;
try {
push = window.top["safari"].pushNotification;
} catch {
try {
push = window["safari"].pushNotification;
} catch {
return false;
}
}
return String(push) === "[object SafariRemoteNotification]";
})();
// Chrome 1+
let is_chrome = !!window.chrome;
// Blink engine detection
let is_blink = ((is_chrome || is_opera) && !!window.CSS);
// Any browser on Mac
let is_mac = ((
window.navigator.oscpu
|| window.navigator.platform
|| window.navigator.appVersion
|| "Unknown"
).indexOf("Mac") !== -1);
// Any Windows
let is_win = (navigator && !!(/win/i).exec(navigator.platform));
// iOS browsers
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
// https://github.com/lancedikson/bowser/issues/329
let is_ios = (!!navigator.platform && (
/iPad|iPhone|iPod/.test(navigator.platform)
|| (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1 && !window["MSStream"])
));
let is_android = /android/i.test(navigator.userAgent);
let flags = {
"is_opera": is_opera,
"is_firefox": is_firefox,
"is_safari": is_safari,
"is_chrome": is_chrome,
"is_blink": is_blink,
"is_mac": is_mac,
"is_win": is_win,
"is_ios": is_ios,
"is_android": is_android,
"is_mobile": (is_ios || is_android),
};
console.log("===== BB flags:", flags);
return flags;
};
export function checkBrowser(desktop_css, mobile_css) {
if (
!window.navigator
|| window.navigator.userAgent.indexOf("MSIE ") > 0
@@ -52,7 +127,30 @@ export function checkBrowser() {
`;
document.body.appendChild(el_modal);
return false;
} else {
if (browser.is_mobile) {
__addCssLink("/share/css/x-mobile.css");
if (mobile_css) {
__addCssLink(mobile_css);
}
} else {
__addCssLink("/share/css/x-desktop.css");
if (desktop_css) {
__addCssLink(desktop_css);
}
}
return true;
}
}
function __addCssLink(path) {
console.log("===== Adding CSS:", path);
let el_head = document.getElementsByTagName("head")[0];
let el_link = document.createElement("link");
el_link.rel = "stylesheet";
el_link.type = "text/css";
el_link.href = path;
el_link.media = "all";
el_head.appendChild(el_link);
}

View File

@@ -31,7 +31,7 @@ import {wm, initWindowManager} from "../wm.js";
export function main() {
initWindowManager();
if (checkBrowser()) {
if (checkBrowser(null, null)) {
__setAppText();
__loadKvmdInfo();
}

View File

@@ -31,7 +31,7 @@ import {Session} from "./session.js";
export function main() {
if (checkBrowser()) {
if (checkBrowser(null, "/share/css/kvm/x-mobile.css")) {
tools.storage.bindSimpleSwitch($("page-close-ask-switch"), "page.close.ask", true, function(value) {
if (value) {
window.onbeforeunload = function(event) {

View File

@@ -29,7 +29,7 @@ import {wm, initWindowManager} from "../wm.js";
export function main() {
if (checkBrowser()) {
if (checkBrowser(null, null)) {
initWindowManager();
tools.el.setOnClick($("login-button"), __login);

View File

@@ -23,6 +23,9 @@
"use strict";
import {browser} from "./bb.js";
export var tools = new function() {
var self = this;
@@ -335,78 +338,7 @@ export var tools = new function() {
};
};
self.browser = new function() {
// https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851769
// Opera 8.0+
let is_opera = (
(!!window.opr && !!opr.addons) // eslint-disable-line no-undef
|| !!window.opera
|| (navigator.userAgent.indexOf(" OPR/") >= 0)
);
// Firefox 1.0+
let is_firefox = (typeof InstallTrigger !== "undefined");
// Safari 3.0+ "[object HTMLElementConstructor]"
let is_safari = (function() {
if (/constructor/i.test(String(window["HTMLElement"]))) {
return true;
}
let push = null;
try {
push = window.top["safari"].pushNotification;
} catch {
try {
push = window["safari"].pushNotification;
} catch {
return false;
}
}
return String(push) === "[object SafariRemoteNotification]";
})();
// Chrome 1+
let is_chrome = !!window.chrome;
// Blink engine detection
let is_blink = ((is_chrome || is_opera) && !!window.CSS);
// Any browser on Mac
let is_mac = ((
window.navigator.oscpu
|| window.navigator.platform
|| window.navigator.appVersion
|| "Unknown"
).indexOf("Mac") !== -1);
// Any Windows
let is_win = (navigator && !!(/win/i).exec(navigator.platform));
// iOS browsers
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
// https://github.com/lancedikson/bowser/issues/329
let is_ios = (!!navigator.platform && (
/iPad|iPhone|iPod/.test(navigator.platform)
|| (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1 && !window["MSStream"])
));
let is_android = /android/i.test(navigator.userAgent);
return {
"is_opera": is_opera,
"is_firefox": is_firefox,
"is_safari": is_safari,
"is_chrome": is_chrome,
"is_blink": is_blink,
"is_mac": is_mac,
"is_win": is_win,
"is_ios": is_ios,
"is_android": is_android,
"is_mobile": (is_ios || is_android),
};
};
self.info("Browser:", self.browser);
self.browser = browser;
};
export var $ = (id) => document.getElementById(id);