GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2025-12-12 09:10:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed browser detection, loading css from js

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/share/css/index/index.css
View File

@ -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;
}

12
web/share/css/keypad.css
View File

@ -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);
}
}

29
web/share/css/kvm/keyboard.css
View File

@ -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;
}
}

30
web/share/css/kvm/stream.css
View File

@ -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;
}
}

85
web/share/css/kvm/x-mobile.css Normal file
View File

@ -0,0 +1,85 @@
/*****************************************************************************
# #
# KVMD - The main PiKVM daemon. #
# #
# Copyright (C) 2018-2022 Maxim Devaev <mdevaev@gmail.com> #
# #
# 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;
}

45
web/share/css/main.css
View File

@ -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;

5
web/share/css/modal.css
View File

@ -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;
}
}

6
web/share/css/navbar.css
View File

@ -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;

14
web/share/css/radio.css
View File

@ -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;

21
web/share/css/slider.css
View File

@ -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);

10
web/share/css/switch.css
View File

@ -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;

11
web/share/css/tabs.css
View File

@ -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;

19
web/share/css/window.css
View File

@ -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;
}
}

88
web/share/css/x-desktop.css Normal file
View File

@ -0,0 +1,88 @@
/*****************************************************************************
# #
# KVMD - The main PiKVM daemon. #
# #
# Copyright (C) 2018-2022 Maxim Devaev <mdevaev@gmail.com> #
# #
# 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);
}

121
web/share/css/x-mobile.css Normal file
View File

@ -0,0 +1,121 @@
/*****************************************************************************
# #
# KVMD - The main PiKVM daemon. #
# #
# Copyright (C) 2018-2022 Maxim Devaev <mdevaev@gmail.com> #
# #
# 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);
}

100
web/share/js/bb.js
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);
}

2
web/share/js/index/main.js
View File

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

2
web/share/js/kvm/main.js
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) {

2
web/share/js/login/main.js
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);

76
web/share/js/tools.js
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);