summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/share/css/index/index.css2
-rw-r--r--web/share/css/keypad.css12
-rw-r--r--web/share/css/kvm/keyboard.css29
-rw-r--r--web/share/css/kvm/stream.css30
-rw-r--r--web/share/css/kvm/x-mobile.css85
-rw-r--r--web/share/css/main.css45
-rw-r--r--web/share/css/modal.css5
-rw-r--r--web/share/css/navbar.css6
-rw-r--r--web/share/css/radio.css14
-rw-r--r--web/share/css/slider.css21
-rw-r--r--web/share/css/switch.css10
-rw-r--r--web/share/css/tabs.css11
-rw-r--r--web/share/css/window.css19
-rw-r--r--web/share/css/x-desktop.css88
-rw-r--r--web/share/css/x-mobile.css121
-rw-r--r--web/share/js/bb.js100
-rw-r--r--web/share/js/index/main.js2
-rw-r--r--web/share/js/kvm/main.js2
-rw-r--r--web/share/js/login/main.js2
-rw-r--r--web/share/js/tools.js76
20 files changed, 401 insertions, 279 deletions
diff --git a/web/share/css/index/index.css b/web/share/css/index/index.css
index 001abefb..314b96f4 100644
--- a/web/share/css/index/index.css
+++ b/web/share/css/index/index.css
@@ -90,7 +90,7 @@ tr.server {
font-family: monospace;
}
-@media all and (display-mode: standalone) {
+@media only screen and (display-mode: standalone) {
div#app-keyboard-warning {
display: none;
}
diff --git a/web/share/css/keypad.css b/web/share/css/keypad.css
index e8c2d404..f3f16834 100644
--- a/web/share/css/keypad.css
+++ b/web/share/css/keypad.css
@@ -139,15 +139,3 @@ div.keypad div.label {
div.keypad b {
color: var(--cs-key-holded-bg);
}
-
-@media only screen and (pointer: coarse) {
- div.keypad {
- zoom: 1.28 !important;
- }
-
- div.keypad div.key:hover,
- div.keypad div.modifier:hover {
- color: var(--cs-key-default-fg);
- background-color: var(--cs-key-default-bg);
- }
-}
diff --git a/web/share/css/kvm/keyboard.css b/web/share/css/kvm/keyboard.css
index 96d67132..6f410b3f 100644
--- a/web/share/css/kvm/keyboard.css
+++ b/web/share/css/kvm/keyboard.css
@@ -20,38 +20,9 @@
*****************************************************************************/
-@media only screen and (pointer: coarse) {
- div#keyboard-window {
- visibility: visible !important;
- padding-top: 9px !important;
- padding-bottom: 30px !important;
- border-bottom: 0 !important;
- border-left: 0 !important;
- border-right: 0 !important;
- border-radius: 0 !important;
- top: unset !important;
- bottom: 0 !important;
- width: 100% !important;
- left: 50% !important;
- -webkit-transform: translateX(-50%) !important;
- transform: translateX(-50%) !important;
- }
- div#keyboard-window-header {
- display: none !important
- }
-}
-
div#keyboard-desktop {
display: block;
}
div#keyboard-mobile {
display: none;
}
-@media only screen and (pointer: coarse) {
- div#keyboard-desktop {
- display: none !important;
- }
- div#keyboard-mobile {
- display: block !important;
- }
-}
diff --git a/web/share/css/kvm/stream.css b/web/share/css/kvm/stream.css
index 57bcf25e..9cbd608f 100644
--- a/web/share/css/kvm/stream.css
+++ b/web/share/css/kvm/stream.css
@@ -102,33 +102,3 @@ div#stream-window.window-active:fullscreen div#stream-box div#stream-fullscreen-
div#stream-mouse-buttons {
display: none;
}
-
-@media only screen and (pointer: coarse) {
- div#stream-window {
- padding-top: 3px !important;
- padding-bottom: 80px !important;
- border-top: 0 !important;
- border-left: 0 !important;
- border-right: 0 !important;
- border-radius: 0 !important;
- top: 50px !important;
- left: 50% !important;
- width: 100% !important;
- -webkit-transform: translateX(-50%) !important;
- transform: translateX(-50%) !important;
- }
- div#stream-window-header {
- display: none !important;
- }
- div#stream-info {
- display: block !important;
- margin: 0;
- padding: 0;
- padding-bottom: 3px;
- font-size: 0.8em;
- color: var(--cs-window-header-default-fg);
- }
- div#stream-mouse-buttons {
- display: block !important;
- }
-}
diff --git a/web/share/css/kvm/x-mobile.css b/web/share/css/kvm/x-mobile.css
new file mode 100644
index 00000000..d41b9b4f
--- /dev/null
+++ b/web/share/css/kvm/x-mobile.css
@@ -0,0 +1,85 @@
+/*****************************************************************************
+# #
+# KVMD - The main PiKVM daemon. #
+# #
+# Copyright (C) 2018-2022 Maxim Devaev <[email protected]> #
+# #
+# This program is free software: you can redistribute it and/or modify #
+# it under the terms of the GNU General Public License as published by #
+# the Free Software Foundation, either version 3 of the License, or #
+# (at your option) any later version. #
+# #
+# This program is distributed in the hope that it will be useful, #
+# but WITHOUT ANY WARRANTY; without even the implied warranty of #
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the #
+# GNU General Public License for more details. #
+# #
+# You should have received a copy of the GNU General Public License #
+# along with this program. If not, see <https://www.gnu.org/licenses/>. #
+# #
+*****************************************************************************/
+
+
+/* ===== stream.css ===== */
+
+div#stream-window {
+ padding-top: 3px !important;
+ padding-bottom: 80px !important;
+ border-top: 0 !important;
+ border-left: 0 !important;
+ border-right: 0 !important;
+ border-radius: 0 !important;
+ top: 50px !important;
+ left: 50% !important;
+ width: 100% !important;
+ -webkit-transform: translateX(-50%) !important;
+ transform: translateX(-50%) !important;
+}
+
+div#stream-window-header {
+ display: none !important;
+}
+
+div#stream-info {
+ display: block !important;
+ margin: 0;
+ padding: 0;
+ padding-bottom: 3px;
+ font-size: 0.8em;
+ color: var(--cs-window-header-default-fg);
+}
+
+div#stream-mouse-buttons {
+ display: block !important;
+}
+
+
+/* ===== keyboard.css ===== */
+
+div#keyboard-window {
+ visibility: visible !important;
+ padding-top: 9px !important;
+ padding-bottom: 30px !important;
+ border-bottom: 0 !important;
+ border-left: 0 !important;
+ border-right: 0 !important;
+ border-radius: 0 !important;
+ top: unset !important;
+ bottom: 0 !important;
+ width: 100% !important;
+ left: 50% !important;
+ -webkit-transform: translateX(-50%) !important;
+ transform: translateX(-50%) !important;
+}
+
+div#keyboard-window-header {
+ display: none !important
+}
+
+div#keyboard-desktop {
+ display: none !important;
+}
+
+div#keyboard-mobile {
+ display: block !important;
+}
diff --git a/web/share/css/main.css b/web/share/css/main.css
index eda90875..9b2f078b 100644
--- a/web/share/css/main.css
+++ b/web/share/css/main.css
@@ -134,40 +134,6 @@ select.key {
border: var(--border-key-thin);
box-shadow: var(--shadow-micro);
}
-@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
- /* If we have a mouse cursor */
- button:enabled:hover,
- select:enabled:hover,
- input[type=file]:enabled:hover::-webkit-file-selector-button,
- input[type=file]:enabled:hover::file-selector-button {
- color: var(--cs-control-hovered-fg);
- background-color: var(--cs-control-hovered-bg);
- }
- button:active,
- select:active,
- input[type=file]:active::-webkit-file-selector-button,
- input[type=file]:active::file-selector-button {
- color: var(--cs-control-pressed-fg) !important;
- background-color: var(--cs-control-pressed-bg) !important;
- }
- button.key:active,
- select.key:active {
- box-shadow: none;
- }
- select:enabled:hover {
- background-image: url("../svg/select-arrow-intensive.svg") !important;
- }
-}
-@media (hover: none) {
- /* If we DON'T have a mouse cursor */
- button:active,
- select:active,
- input[type=file]:active::-webkit-file-selector-button,
- input[type=file]:active::file-selector-button {
- color: var(--cs-control-hovered-fg);
- background-color: var(--cs-control-hovered-bg);
- }
-}
button:disabled,
select:disabled,
input[type=file]:disabled::-webkit-file-selector-button,
@@ -214,17 +180,6 @@ input[type=text], input[type=password] {
height: 30px;
}
-@media only screen and (pointer: coarse) and (orientation: portrait) {
- button,
- select,
- input[type=text],
- input[type=password],
- input[type=file]::-webkit-file-selector-button,
- input[type=file]::file-selector-button {
- height: 45px !important;
- }
-}
-
div.buttons-row {
margin: 0;
padding: 0;
diff --git a/web/share/css/modal.css b/web/share/css/modal.css
index 6b6dfa53..ac2cb423 100644
--- a/web/share/css/modal.css
+++ b/web/share/css/modal.css
@@ -74,8 +74,3 @@ div.modal div.modal-window div.modal-buttons button {
border-radius: 0;
height: 40px;
}
-@media only screen and (pointer: coarse) and (orientation: portrait) {
- div.modal-buttons button {
- height: 50px !important;
- }
-}
diff --git a/web/share/css/navbar.css b/web/share/css/navbar.css
index e8a73820..a083c48f 100644
--- a/web/share/css/navbar.css
+++ b/web/share/css/navbar.css
@@ -82,12 +82,6 @@ ul#navbar li a#logo:hover:not(.active),
ul#navbar li a.menu-button:hover:not(.active) {
background-color: var(--cs-navbar-item-hovered-bg);
}
-@media only screen and (pointer: coarse) {
- ul#navbar li a#logo:hover:not(.active),
- ul#navbar li a.menu-button:hover:not(.active) {
- background-color: var(--cs-navbar-default-bg);
- }
-}
ul#navbar li a#logo img {
margin-top: -2px;
diff --git a/web/share/css/radio.css b/web/share/css/radio.css
index eb1ea0e0..c2057b04 100644
--- a/web/share/css/radio.css
+++ b/web/share/css/radio.css
@@ -45,11 +45,6 @@ div.radio-box label:not(:last-of-type) {
margin-right: 1px;
box-shadow: 1px 0 0 0 var(--cs-control-pressed-bg);
}
-@media only screen and (pointer: coarse) and (orientation: portrait) {
- div.radio-box input[type=radio] + label {
- height: 30px !important;
- }
-}
div.radio-box label:first-of-type {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
@@ -59,15 +54,6 @@ div.radio-box label:last-of-type {
border-bottom-right-radius: 4px;
}
-@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
- /* If we have a mouse cursor */
- div.radio-box input[type=radio]:not(:checked):not(:disabled) + label:hover {
- border: var(--border-hovered-2px);
- color: var(--cs-control-hovered-fg) !important;
- background-color: var(--cs-control-hovered-bg) !important;
- }
-}
-
div.radio-box input[type=radio]:checked + label {
/*font-weight: bold;*/
text-shadow: 0.5px 0 0 currentColor;
diff --git a/web/share/css/slider.css b/web/share/css/slider.css
index 288ad5fe..d472aac1 100644
--- a/web/share/css/slider.css
+++ b/web/share/css/slider.css
@@ -42,13 +42,6 @@
margin-right: 0;
}
}
-@media only screen and (pointer: coarse) and (orientation: portrait) {
- @supports (-webkit-appearance: none) {
- input[type=range].slider {
- margin: 20px 0 20px 0 !important;
- }
- }
-}
input[type=range].slider:disabled {
cursor: default;
}
@@ -61,13 +54,6 @@ input[type=range].slider::-webkit-slider-runnable-track {
input[type=range].slider:disabled::-webkit-slider-runnable-track {
cursor: default;
}
-@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
- /* If we have a mouse cursor */
- /*div.switch-box label span.switch-inner:not(:disabled):hover::before {*/
- input[type=range].slider:not(:disabled):hover::-webkit-slider-runnable-track {
- background-color: var(--cs-control-hovered-bg);
- }
-}
input[type=range].slider::-webkit-slider-thumb {
border: var(--border-intensive-2px);
@@ -92,13 +78,6 @@ input[type=range].slider::-moz-range-track {
input[type=range].slider:disabled::-moz-range-track {
cursor: default;
}
-@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
- /* If we have a mouse cursor */
- /*div.switch-box label span.switch-inner:not(:disabled):hover::before {*/
- input[type=range].slider:not(:disabled):hover::-moz-range-track {
- background-color: var(--cs-control-hovered-bg);
- }
-}
input[type=range].slider::-moz-range-thumb {
border: var(--border-intensive-2px);
diff --git a/web/share/css/switch.css b/web/share/css/switch.css
index 7a822feb..eb2241ed 100644
--- a/web/share/css/switch.css
+++ b/web/share/css/switch.css
@@ -79,16 +79,6 @@ div.switch-box label span.switch-inner:after {
text-align: right;
}
-@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
- /* If we have a mouse cursor */
- div.switch-box label span.switch-inner:not(:disabled):hover::before {
- background-color: var(--cs-control-hovered-bg);
- }
- div.switch-box label span.switch-inner:not(:disabled):hover::after {
- background-color: var(--cs-control-hovered-bg);
- }
-}
-
div.switch-box label span.switch {
display: block;
width: 13px;
diff --git a/web/share/css/tabs.css b/web/share/css/tabs.css
index f872d508..7efa76c6 100644
--- a/web/share/css/tabs.css
+++ b/web/share/css/tabs.css
@@ -53,11 +53,6 @@ div.tabs-box label {
position: relative;
top: 1px;
}
-@media only screen and (pointer: coarse) and (orientation: portrait) {
- div.tabs-box label {
- height: 30px !important;
- }
-}
div.tabs-box label:last-of-type {
border-right: var(--border-default-thin);
@@ -66,12 +61,6 @@ div.tabs-box label:last-of-type {
div.tabs-box input[type="radio"]:checked + label {
background-color: var(--cs-control-default-bg);
}
-@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
- /* If we have a mouse cursor */
- div.tabs-box input[type="radio"]:not(:checked):hover + label {
- color: var(--cs-control-hovered-fg);
- }
-}
div.tabs-box input[type="radio"]:checked + label + .tab {
display: block;
diff --git a/web/share/css/window.css b/web/share/css/window.css
index d241f72f..cbfaf205 100644
--- a/web/share/css/window.css
+++ b/web/share/css/window.css
@@ -169,22 +169,3 @@ div.window button.window-button-exit-full-tab:hover {
div.window.window-full-tab button.window-button-exit-full-tab {
visibility: visible !important;
}
-
-@media only screen and (pointer: coarse) {
- div.window {
- padding-top: 45px !important;
- }
- div.window div.window-header {
- height: 35px !important;
- }
- div.window div.window-header div.window-grab {
- height: 35px !important;
- }
- div.window div.window-header button.window-button-full-screen,
- div.window div.window-header button.window-button-enter-full-tab,
- div.window div.window-header button.window-button-original,
- div.window div.window-header button.window-button-maximize,
- div.window div.window-header button.window-button-close {
- height: 40px !important;
- }
-}
diff --git a/web/share/css/x-desktop.css b/web/share/css/x-desktop.css
new file mode 100644
index 00000000..f1728a96
--- /dev/null
+++ b/web/share/css/x-desktop.css
@@ -0,0 +1,88 @@
+/*****************************************************************************
+# #
+# KVMD - The main PiKVM daemon. #
+# #
+# Copyright (C) 2018-2022 Maxim Devaev <[email protected]> #
+# #
+# This program is free software: you can redistribute it and/or modify #
+# it under the terms of the GNU General Public License as published by #
+# the Free Software Foundation, either version 3 of the License, or #
+# (at your option) any later version. #
+# #
+# This program is distributed in the hope that it will be useful, #
+# but WITHOUT ANY WARRANTY; without even the implied warranty of #
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the #
+# GNU General Public License for more details. #
+# #
+# You should have received a copy of the GNU General Public License #
+# along with this program. If not, see <https://www.gnu.org/licenses/>. #
+# #
+*****************************************************************************/
+
+
+/* ===== main.css ===== */
+
+button:enabled:hover,
+select:enabled:hover,
+input[type=file]:enabled:hover::-webkit-file-selector-button,
+input[type=file]:enabled:hover::file-selector-button {
+ color: var(--cs-control-hovered-fg);
+ background-color: var(--cs-control-hovered-bg);
+}
+
+button:active,
+select:active,
+input[type=file]:active::-webkit-file-selector-button,
+input[type=file]:active::file-selector-button {
+ color: var(--cs-control-pressed-fg) !important;
+ background-color: var(--cs-control-pressed-bg) !important;
+}
+
+button.key:active,
+select.key:active {
+ box-shadow: none;
+}
+select:enabled:hover {
+ background-image: url("../svg/select-arrow-intensive.svg") !important;
+}
+
+
+/* ===== radio.css ===== */
+
+/* If we have a mouse cursor */
+div.radio-box input[type=radio]:not(:checked):not(:disabled) + label:hover {
+ border: var(--border-hovered-2px);
+ color: var(--cs-control-hovered-fg) !important;
+ background-color: var(--cs-control-hovered-bg) !important;
+}
+
+
+/* ===== slider.css ===== */
+
+/*div.switch-box label span.switch-inner:not(:disabled):hover::before {*/
+input[type=range].slider:not(:disabled):hover::-webkit-slider-runnable-track {
+ background-color: var(--cs-control-hovered-bg);
+}
+
+/*div.switch-box label span.switch-inner:not(:disabled):hover::before {*/
+input[type=range].slider:not(:disabled):hover::-moz-range-track {
+ background-color: var(--cs-control-hovered-bg);
+}
+
+
+/* ===== switch.css ===== */
+
+div.switch-box label span.switch-inner:not(:disabled):hover::before {
+ background-color: var(--cs-control-hovered-bg);
+}
+
+div.switch-box label span.switch-inner:not(:disabled):hover::after {
+ background-color: var(--cs-control-hovered-bg);
+}
+
+
+/* ===== tabs.css ===== */
+
+div.tabs-box input[type="radio"]:not(:checked):hover + label {
+ color: var(--cs-control-hovered-fg);
+}
diff --git a/web/share/css/x-mobile.css b/web/share/css/x-mobile.css
new file mode 100644
index 00000000..8a72fba2
--- /dev/null
+++ b/web/share/css/x-mobile.css
@@ -0,0 +1,121 @@
+/*****************************************************************************
+# #
+# KVMD - The main PiKVM daemon. #
+# #
+# Copyright (C) 2018-2022 Maxim Devaev <[email protected]> #
+# #
+# This program is free software: you can redistribute it and/or modify #
+# it under the terms of the GNU General Public License as published by #
+# the Free Software Foundation, either version 3 of the License, or #
+# (at your option) any later version. #
+# #
+# This program is distributed in the hope that it will be useful, #
+# but WITHOUT ANY WARRANTY; without even the implied warranty of #
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the #
+# GNU General Public License for more details. #
+# #
+# You should have received a copy of the GNU General Public License #
+# along with this program. If not, see <https://www.gnu.org/licenses/>. #
+# #
+*****************************************************************************/
+
+
+/* ===== main.css ===== */
+
+button:active,
+select:active,
+input[type=file]:active::-webkit-file-selector-button,
+input[type=file]:active::file-selector-button {
+ color: var(--cs-control-hovered-fg);
+ background-color: var(--cs-control-hovered-bg);
+}
+
+@media only screen and (orientation: portrait) {
+ button,
+ select,
+ input[type=text],
+ input[type=password],
+ input[type=file]::-webkit-file-selector-button,
+ input[type=file]::file-selector-button {
+ height: 45px !important;
+ }
+}
+
+
+/* ===== window.css ===== */
+
+div.window {
+ padding-top: 45px !important;
+}
+div.window div.window-header {
+ height: 35px !important;
+}
+div.window div.window-header div.window-grab {
+ height: 35px !important;
+}
+div.window div.window-header button.window-button-full-screen,
+div.window div.window-header button.window-button-enter-full-tab,
+div.window div.window-header button.window-button-original,
+div.window div.window-header button.window-button-maximize,
+div.window div.window-header button.window-button-close {
+ height: 40px !important;
+}
+
+
+/* ===== modal.css ===== */
+
+@media only screen and (orientation: portrait) {
+ div.modal-buttons button {
+ height: 50px !important;
+ }
+}
+
+
+/* ===== navbar.css ===== */
+
+ul#navbar li a#logo:hover:not(.active),
+ul#navbar li a.menu-button:hover:not(.active) {
+ background-color: var(--cs-navbar-default-bg);
+}
+
+
+/* ===== radio.css ===== */
+
+@media only screen and (orientation: portrait) {
+ div.radio-box input[type=radio] + label {
+ height: 30px !important;
+ }
+}
+
+
+/* ===== slider.css ===== */
+
+@media only screen and (orientation: portrait) {
+ @supports (-webkit-appearance: none) {
+ input[type=range].slider {
+ margin: 20px 0 20px 0 !important;
+ }
+ }
+}
+
+
+/* ===== tabs.css ===== */
+
+@media only screen and (orientation: portrait) {
+ div.tabs-box label {
+ height: 30px !important;
+ }
+}
+
+
+/* ===== keypad.css ===== */
+
+div.keypad {
+ zoom: 1.28 !important;
+}
+
+div.keypad div.key:hover,
+div.keypad div.modifier:hover {
+ color: var(--cs-key-default-fg);
+ background-color: var(--cs-key-default-bg);
+}
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);
+}
diff --git a/web/share/js/index/main.js b/web/share/js/index/main.js
index b34fa099..7510d133 100644
--- a/web/share/js/index/main.js
+++ b/web/share/js/index/main.js
@@ -31,7 +31,7 @@ import {wm, initWindowManager} from "../wm.js";
export function main() {
initWindowManager();
- if (checkBrowser()) {
+ if (checkBrowser(null, null)) {
__setAppText();
__loadKvmdInfo();
}
diff --git a/web/share/js/kvm/main.js b/web/share/js/kvm/main.js
index 3717f71d..6417da37 100644
--- a/web/share/js/kvm/main.js
+++ b/web/share/js/kvm/main.js
@@ -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) {
diff --git a/web/share/js/login/main.js b/web/share/js/login/main.js
index 5ef54e9a..2b5af5e3 100644
--- a/web/share/js/login/main.js
+++ b/web/share/js/login/main.js
@@ -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);
diff --git a/web/share/js/tools.js b/web/share/js/tools.js
index fee47824..05ba7f0a 100644
--- a/web/share/js/tools.js
+++ b/web/share/js/tools.js
@@ -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);
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 15:19:26 +0000