fixed browser detection, loading css from js

1 files changed, 99 insertions, 1 deletions

diff --git a/web/share/js/bb.js b/web/share/js/bb.js
index cf20aa13..ec45b222 100644
--- a/web/share/js/bb.js
+++ b/web/share/js/bb.js
@@ -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);
+}