From 7af5723470b86e7e8576e780e177a8266461e7b6 Mon Sep 17 00:00:00 2001 From: Kerry Shetline Date: Sun, 22 May 2022 20:52:58 -0400 Subject: [PATCH] Browser detection improvements (#22) Improved detection of incompatible web browsers. --- .eslintrc.json | 11 +++ angular.json | 14 +++- package-lock.json | 17 +++- package.json | 3 +- src/assets/home-page-lang.js | 60 +++++++++++++++ src/assets/incompatible.html | 43 +++++------ src/index.html | 145 ++++------------------------------- 7 files changed, 137 insertions(+), 156 deletions(-) create mode 100644 src/assets/home-page-lang.js diff --git a/.eslintrc.json b/.eslintrc.json index 10b3d71..8ecbda3 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -155,6 +155,17 @@ } ] } + }, + { + "files": ["*.es5.js"], + "env": { + "browser": true + }, + "rules": { + "no-eval": "off", + "no-template-curly-in-string": "off", + "no-var": "off" + } } ] } diff --git a/angular.json b/angular.json index f7be9eb..9a6c0b7 100644 --- a/angular.json +++ b/angular.json @@ -49,7 +49,12 @@ "inlineStyleLanguage": "scss", "assets": [ "src/favicon.ico", - "src/assets" + "src/assets", + { + "glob": "browser-check.min.js*", + "input": "./node_modules/@tubular/browser-check/dist/", + "output": "./assets/" + } ], "styles": [ "node_modules/primeng/resources/themes/arya-blue/theme.css", @@ -142,7 +147,12 @@ "inlineStyleLanguage": "scss", "assets": [ "src/favicon.ico", - "src/assets" + "src/assets", + { + "glob": "browser-check.min.js*", + "input": "./node_modules/@tubular/browser-check/dist/", + "output": "./assets/" + } ], "styles": [ "src/styles.scss" diff --git a/package-lock.json b/package-lock.json index 8bb1eea..1b81d66 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "prague-clock", - "version": "1.6.4", + "version": "1.6.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "prague-clock", - "version": "1.6.4", + "version": "1.6.6", "dependencies": { "@angular/animations": "~13.2.0", "@angular/cdk": "^13.2.6", @@ -43,6 +43,7 @@ "@angular/cli": "~13.2.5", "@angular/compiler-cli": "~13.2.0", "@angular/localize": "^13.2.7", + "@tubular/browser-check": "^1.0.2", "@types/jasmine": "~3.10.6", "@types/node": "^12.20.50", "@types/three": "^0.139.0", @@ -3027,6 +3028,12 @@ "node": ">=10.24.1" } }, + "node_modules/@tubular/browser-check": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@tubular/browser-check/-/browser-check-1.0.2.tgz", + "integrity": "sha512-gQx+Ci6wDVDqjr6xQaN+8YM1mpm3Wn5HiubAS0K1WPgeGNAQTW6RZc8SRR7QU1yIi038Q8isESINn5cP3fzaLQ==", + "dev": true + }, "node_modules/@tubular/math": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@tubular/math/-/math-3.1.0.tgz", @@ -16800,6 +16807,12 @@ "@tubular/util": "^4.5.1" } }, + "@tubular/browser-check": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@tubular/browser-check/-/browser-check-1.0.2.tgz", + "integrity": "sha512-gQx+Ci6wDVDqjr6xQaN+8YM1mpm3Wn5HiubAS0K1WPgeGNAQTW6RZc8SRR7QU1yIi038Q8isESINn5cP3fzaLQ==", + "dev": true + }, "@tubular/math": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@tubular/math/-/math-3.1.0.tgz", diff --git a/package.json b/package.json index 8ac8bb9..afe37ba 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "prague-clock", - "version": "1.6.4", + "version": "1.6.6", "scripts": { "ng": "ng", "start": "ng serve --configuration=development", @@ -52,6 +52,7 @@ "@angular/cli": "~13.2.5", "@angular/compiler-cli": "~13.2.0", "@angular/localize": "^13.2.7", + "@tubular/browser-check": "^1.0.2", "@types/jasmine": "~3.10.6", "@types/node": "^12.20.50", "@types/three": "^0.139.0", diff --git a/src/assets/home-page-lang.js b/src/assets/home-page-lang.js new file mode 100644 index 0000000..69a5603 --- /dev/null +++ b/src/assets/home-page-lang.js @@ -0,0 +1,60 @@ +(() => { + const specificLocale = (/\?(.*)\blang=([^&]+)/.exec(window.location.href) || [])[2]; + const urlLocale = (/\borloj\/([^/]+)/.exec(window.location.href) || [])[1]; + let locales = []; + + if (navigator.languages) + locales = navigator.languages; + else if (navigator.language) + locales = [navigator.language]; + + if (specificLocale) + locales = [specificLocale]; + else if (urlLocale) { + let matched = false; + + for (const locale of locales) { + if (locale.startsWith(urlLocale)) { + locales = [locale]; + matched = true; + break; + } + } + + if (!matched) + locales = [urlLocale]; + } + + for (const locale of locales) { + if (locale.startsWith('cs')) { + /* cSpell:disable-next-line */ // noinspection SpellCheckingInspection + document.querySelector('title').innerText = 'Simulátor pražského orloje'; + /* cSpell:disable-next-line */ // noinspection SpellCheckingInspection + document.getElementById('loading').innerText = 'Načítání...'; + break; + } + else if (locale.startsWith('de')) { + /* cSpell:disable-next-line */ // noinspection SpellCheckingInspection + document.querySelector('title').innerText = 'Pražský Orloj - Simulator der Prager astronomischen Uhr'; + /* cSpell:disable-next-line */ // noinspection SpellCheckingInspection + document.getElementById('loading').innerText = 'Wird geladen...'; + break; + } + else if (locale.startsWith('es')) { + /* cSpell:disable-next-line */ // noinspection SpellCheckingInspection + document.querySelector('title').innerText = 'Pražský Orloj - Simulador de Reloj Astronómico de Praga'; + /* cSpell:disable-next-line */ // noinspection SpellCheckingInspection + document.getElementById('loading').innerText = 'Cargando...'; + break; + } + else if (locale.startsWith('fr')) { + /* cSpell:disable-next-line */ // noinspection SpellCheckingInspection + document.querySelector('title').innerText = 'Pražský Orloj - Simulateur d\'horloge astronomique de Prague'; + /* cSpell:disable-next-line */ // noinspection SpellCheckingInspection + document.getElementById('loading').innerText = 'Chargement...'; + break; + } + else if (locale.startsWith('en')) + break; + } +})(); diff --git a/src/assets/incompatible.html b/src/assets/incompatible.html index 04a034e..89edb94 100644 --- a/src/assets/incompatible.html +++ b/src/assets/incompatible.html @@ -3,28 +3,22 @@ Pražský Orloj - Simulator incompatible with your web browser + @@ -32,18 +26,23 @@ var msg = (/\bmsg=([^&]*)/.exec(location.search) || [])[1]; if (msg) - document.write('

' + decodeURIComponent(msg) + '

'); + document.write('

' + decodeURIComponent(msg) + '

'); - if (location.href.includes('?')) + if (history.replaceState && location.href.indexOf('?') >= 0) history.replaceState(undefined, undefined, location.href.replace(/\?.*$/, '')); -
-

Your web browser does not have the capabilities needed to run the simulator.

+
+

Your web browser does not have the capabilities needed to run the simulator. + Please try again with a more up-to-date web browser.

-

Váš webový prohlížeč nemá schopnosti potřebné ke spuštění simulátoru.

-

Ihr Webbrowser verfügt nicht über die zum Ausführen des Simulators erforderlichen Funktionen.

-

Su navegador web no tiene las capacidades necesarias para ejecutar el simulador.

-

Votre navigateur Web n'a pas les capacités nécessaires pour exécuter le simulateur.

+

Váš webový prohlížeč nemá schopnosti potřebné ke spuštění simulátoru. + Zkuste to prosím znovu s aktuálnějším webovým prohlížečem.

+

Ihr Webbrowser verfügt nicht über die zum Ausführen des Simulators erforderlichen Funktionen. + Bitte versuchen Sie es erneut mit einem aktuelleren Webbrowser.

+

Su navegador web no tiene las capacidades necesarias para ejecutar el simulador. + Vuelva a intentarlo con un navegador web más actualizado.

+

Votre navigateur Web n'a pas les capacités nécessaires pour exécuter le simulateur. + Veuillez réessayer avec un navigateur Web plus récent.

orloj.eu
diff --git a/src/index.html b/src/index.html index 0496aa3..9bff013 100644 --- a/src/index.html +++ b/src/index.html @@ -12,73 +12,26 @@ + - + +