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

refactoring

Browse Source
This commit is contained in:
Devaev Maxim 2018-11-14 02:52:00 +03:00
parent 49a09a6ba1
commit 2916c7fe06
23 changed files with 332 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tox.ini
View File

@ -32,7 +32,7 @@ deps =
[testenv:eslint]
whitelist_externals = eslint
commands = eslint --config=eslintrc.yaml --color web/js
commands = eslint --config=eslintrc.yaml --color --ext .js web/js
[testenv:htmlhint]
whitelist_externals = htmlhint

0
web/css/about.css → web/css/kvm/about.css
View File

0
web/css/hid.css → web/css/kvm/hid.css
View File

23
web/css/keyboard.css → web/css/kvm/keyboard.css
View File

@ -40,7 +40,7 @@ div.keyboard div.key, div.modifier {
}
div.keyboard div.key:hover, div.modifier:hover {
color: var(--fg-color-intensive);
background-color: var(--bg-color-ctl);
background-color: var(--bg-color-menu);
}
div.keyboard div.pressed {
box-shadow: none;
@ -99,6 +99,27 @@ div.keyboard b {
color: var(--bg-color-intensive);
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
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;
}

8
web/css/msd.css → web/css/kvm/msd.css
View File

@ -1,12 +1,8 @@
div#msd-menu {
width: 450px;
}
div#msd-menu
div#msd-not-in-operate,
div#msd-current-image-broken,
div#msd-another-another-user-uploads,
input#msd-select-new-image-file,
div#msd-new-image {
div.msd-message, input.msd-message {
display: none;
}

90
web/css/kvm/stream.css Normal file
View File

@ -0,0 +1,90 @@
div#stream-info {
display: none;
}
img#stream-image {
width: 640px;
height: 480px;
display: block;
background-color: black;
}
img.stream-image-active {
-webkit-filter: none;
filter: none;
}
img.stream-image-inactive {
-webkit-filter: grayscale(100%) brightness(75%) sepia(75%);
filter: grayscale(100%) brightness(75%) sepia(75%);
}
div#stream-box {
position: relative;
display: inline-block;
border: var(--border-dark-thin);
}
div.stream-box-inactive::after {
cursor: wait;
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: inline-block;
background: radial-gradient(transparent 20%, black);
}
div.stream-box-mouse-enabled {
cursor: url("../../svg/stream-mouse-cursor.svg"), pointer;
}
div.stream-slider-box {
margin-top: 5px;
display: flex;
}
table#stream-auto-resize-box {
width: 100%;
border-collapse: collapse;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
@supports (-webkit-appearance: none) {
table#stream-auto-resize-box {
margin: 20px 0 20px 0 !important;
}
}
}
div#stream-mouse-buttons {
display: none;
margin: 0;
padding: 0;
font-size: 0;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
div#stream-window {
padding-top: 3px !important;
border-top: 0 !important;
border-radius: 0 0 8px 8px !important;
top: 50px !important;
left: 50% !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(--fg-color-dark);
}
div#stream-mouse-buttons {
display: block !important;
}
}

107
web/css/main.css
View File

@ -83,6 +83,12 @@ select:active {
background-image: url("../svg/select-arrow-intensive.svg") !important;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
button, select {
height: 45px !important;
}
}
.row50 {
display: inline-block;
width: 50%;
@ -105,98 +111,7 @@ img.svg-gray {
vertical-align: middle;
}
img#logo {
padding-left: 16px;
}
ul#ctl {
box-shadow: var(--shadow-small);
list-style-type: none;
margin: 0;
padding: 0;
background-color: var(--bg-color-ctl);
position: fixed;
top: 0;
width: 100%;
height: 50px;
z-index: 2147483646;
}
ul#ctl li.ctl-logo {
line-height: 50px;
margin-top: -2px;
float: left;
}
ul#ctl li.ctl-right-actions {
float: right;
}
ul#ctl img {
vertical-align: middle;
margin-right: 10px;
height: 20px;
}
ul#ctl li a.ctl-item {
line-height: 50px;
outline: none;
cursor: pointer;
border-left: var(--border-black-thin);
display: inline-block;
color: var(--fg-color-normal);
padding-left: 16px;
padding-right: 16px;
text-decoration: none;
}
ul#ctl li a.ctl-item:hover:not(.active) {
background-color: var(--bg-color-hovered);
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* iPad 8 */
ul#ctl li a.ctl-item:hover:not(.active) {
background-color: var(--bg-color-ctl) !important;
}
}
ul#ctl li a.ctl-item-selected {
box-shadow: 0 5px 0 var(--border-color-intensive) inset;
background-color: var(--bg-color-selected) !important;
}
div.ctl-dropdown-content {
visibility: hidden;
overflow: hidden;
white-space: nowrap;
border: var(--border-intensive-2px);
border-top: var(--border-dark-thin);
border-radius: 0 0 8px 8px;
position: absolute;
background-color: var(--bg-color-ctl);
min-width: 180px;
box-shadow: var(--shadow-big);
z-index: 2147483645;
}
div.ctl-dropdown-content button, select {
text-align: left;
padding: 0 16px;
}
div.ctl-dropdown-content div.buttons-row {
margin: 0;
padding: 0;
font-size: 0;
}
div.ctl-dropdown-content hr {
margin: 0;
display: block;
height: 0px;
padding: 0;
border: none;
border-top: var(--border-dark-thin);
}
div.ctl-dropdown-content-buttons {
background-color: var(--bg-color-normal);
}
div.ctl-dropdown-content-text {
margin: 10px 15px 10px 15px;
font-size: 14px;
}
ul#footer {
ul.footer {
list-style-type: none;
bottom: 0;
position: fixed;
@ -206,15 +121,15 @@ ul#footer {
color: var(--fg-color-inactive);
z-index: -10;
}
ul#footer li {
ul.footer li {
padding: 0 10px;
}
ul#footer li.footer-left {
ul.footer li.footer-left {
float: left;
}
ul#footer li.footer-right {
ul.footer li.footer-right {
float: right;
}
ul#footer li a {
ul.footer li a {
color: var(--fg-color-inactive);
}

88
web/css/menu.css Normal file
View File

@ -0,0 +1,88 @@
ul.menu {
box-shadow: var(--shadow-small);
list-style-type: none;
margin: 0;
padding: 0;
background-color: var(--bg-color-menu);
position: fixed;
top: 0;
width: 100%;
height: 50px;
z-index: 2147483646;
}
ul.menu li.menu-logo {
line-height: 50px;
margin-top: -2px;
margin-left: 16px;
float: left;
}
ul.menu li.menu-right-actions {
float: right;
}
ul.menu img {
vertical-align: middle;
margin-right: 10px;
height: 20px;
}
ul.menu li a.menu-item {
line-height: 50px;
outline: none;
cursor: pointer;
border-left: var(--border-black-thin);
display: inline-block;
color: var(--fg-color-normal);
padding-left: 16px;
padding-right: 16px;
text-decoration: none;
}
ul.menu li a.menu-item:hover:not(.active) {
background-color: var(--bg-color-hovered);
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* iPad 8 */
ul.menu li a.menu-item:hover:not(.active) {
background-color: var(--bg-color-menu) !important;
}
}
ul.menu li a.menu-item-selected {
box-shadow: 0 5px 0 var(--border-color-intensive) inset;
background-color: var(--bg-color-selected) !important;
}
div.menu-dropdown-content {
visibility: hidden;
overflow: hidden;
white-space: nowrap;
border: var(--border-intensive-2px);
border-top: var(--border-dark-thin);
border-radius: 0 0 8px 8px;
position: absolute;
background-color: var(--bg-color-menu);
min-width: 180px;
box-shadow: var(--shadow-big);
z-index: 2147483645;
}
div.menu-dropdown-content button, select {
text-align: left;
padding: 0 16px;
}
div.menu-dropdown-content div.buttons-row {
margin: 0;
padding: 0;
font-size: 0;
}
div.menu-dropdown-content hr {
margin: 0;
display: block;
height: 0px;
padding: 0;
border: none;
border-top: var(--border-dark-thin);
}
div.menu-dropdown-content-buttons {
background-color: var(--bg-color-normal);
}
div.menu-dropdown-content-text {
margin: 10px 15px 10px 15px;
font-size: 14px;
}

65
web/css/mobile.css
View File

@ -1,65 +0,0 @@
/*
http://stephen.io/mediaqueries/
https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
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#stream-window {
padding-top: 3px !important;
border-top: 0 !important;
border-radius: 0 0 8px 8px !important;
top: 50px !important;
left: 50% !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(--fg-color-dark);
}
div#stream-mouse-buttons {
display: block !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
button, select {
height: 45px !important;
}
@supports (-webkit-appearance: none) {
input[type=range].slider {
margin: 20px 0 20px 0 !important;
}
table#stream-auto-resize-box {
margin: 20px 0 20px 0 !important;
}
}
}

7
web/css/sliders.css
View File

@ -20,6 +20,13 @@
margin-right: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
@supports (-webkit-appearance: none) {
input[type=range].slider {
margin: 20px 0 20px 0 !important;
}
}
}
input[type=range].slider:disabled {
cursor: default;
}

57
web/css/stream.css
View File

@ -1,57 +0,0 @@
div#stream-info {
display: none;
}
img#stream-image {
width: 640px;
height: 480px;
display: block;
background-color: var(--bg-color-stream-screen);
}
img.stream-image-active {
-webkit-filter: none;
filter: none;
}
img.stream-image-inactive {
-webkit-filter: grayscale(100%) brightness(75%) sepia(75%);
filter: grayscale(100%) brightness(75%) sepia(75%);
}
div#stream-box {
position: relative;
display: inline-block;
border: var(--border-dark-thin);
}
div.stream-box-inactive::after {
cursor: wait;
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: inline-block;
background: radial-gradient(transparent 20%, black);
}
div.stream-box-mouse-enabled {
cursor: url("../svg/stream-mouse-cursor.svg"), pointer;
}
div.stream-slider-box {
margin-top: 5px;
display: flex;
}
table#stream-auto-resize-box {
width: 100%;
border-collapse: collapse;
}
div#stream-mouse-buttons {
display: none;
margin: 0;
padding: 0;
font-size: 0;
}

6
web/css/vars.css
View File

@ -3,7 +3,7 @@
--bg-color-light: #484b51;
--bg-color-gray: #3b3e43;
--bg-color-dark: #17191d;
--bg-color-ctl: #202225;
--bg-color-menu: #202225;
--bg-color-intensive: #436a8a;
--bg-color-hovered: #1a1c1f;
--bg-color-selected: #171717;
@ -14,10 +14,8 @@
--fg-color-inactive: #6c7481;
--fg-color-selected: var(--fg-color-inactive);
--bg-color-stream-screen: black;
--border-color-normal: var(--bg-color-normal);
--border-color-gray: var(--bg-color-ctl);
--border-color-gray: var(--bg-color-menu);
--border-color-dark: var(--bg-color-dark);
--border-color-intensive: #5b90bb;
--border-color-important: #ff6467;

110
web/index.html
View File

@ -14,29 +14,29 @@
<link rel="stylesheet" href="css/vars.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/windows.css">
<link rel="stylesheet" href="css/modals.css">
<link rel="stylesheet" href="css/leds.css">
<link rel="stylesheet" href="css/sliders.css">
<link rel="stylesheet" href="css/switches.css">
<link rel="stylesheet" href="css/progress.css">
<link rel="stylesheet" href="css/stream.css">
<link rel="stylesheet" href="css/hid.css">
<link rel="stylesheet" href="css/msd.css">
<link rel="stylesheet" href="css/keyboard.css">
<link rel="stylesheet" href="css/about.css">
<link rel="stylesheet" href="css/mobile.css">
<link rel="stylesheet" href="css/kvm/stream.css">
<link rel="stylesheet" href="css/kvm/hid.css">
<link rel="stylesheet" href="css/kvm/msd.css">
<link rel="stylesheet" href="css/kvm/keyboard.css">
<link rel="stylesheet" href="css/kvm/about.css">
<script src="js/tools.js"></script>
<script src="js/stream.js"></script>
<script src="js/atx.js"></script>
<script src="js/keyboard.js"></script>
<script src="js/mouse.js"></script>
<script src="js/hid.js"></script>
<script src="js/msd.js"></script>
<script src="js/session.js"></script>
<script src="js/ui.js"></script>
<script src="js/main.js"></script>
<script src="js/kvm/stream.js"></script>
<script src="js/kvm/atx.js"></script>
<script src="js/kvm/keyboard.js"></script>
<script src="js/kvm/mouse.js"></script>
<script src="js/kvm/hid.js"></script>
<script src="js/kvm/msd.js"></script>
<script src="js/kvm/session.js"></script>
<script src="js/kvm/main.js"></script>
<script>window.onload = main;</script>
</head>
@ -60,20 +60,22 @@
</div>
</div>
<ul id="ctl">
<li class="ctl-logo"><img id="logo" class="svg-gray" src="svg/logo.svg" alt="&pi;-kvm" /></li>
<ul id="menu" class="menu">
<li class="menu-logo">
<img class="svg-gray" src="svg/logo.svg" alt="&pi;-kvm" />
</li>
<li class="ctl-right-actions">
<div class="ctl-dropdown">
<a class="ctl-item" href="#">
<li class="menu-right-actions">
<div class="menu-dropdown">
<a class="menu-item" href="#">
<img data-dont-hide-menu id="link-led" class="led-gray" src="svg/link-led.svg" />
<img data-dont-hide-menu id="stream-led" class="led-gray" src="svg/stream-led.svg" />
<img data-dont-hide-menu id="hid-keyboard-led" class="led-gray" src="svg/hid-keyboard-led.svg" />
<img data-dont-hide-menu id="hid-mouse-led" class="led-gray" src="svg/hid-mouse-led.svg" />
System &#8628;
</a>
<div data-dont-hide-menu class="ctl-dropdown-content">
<div class="ctl-dropdown-content-buttons">
<div data-dont-hide-menu class="menu-dropdown-content">
<div class="menu-dropdown-content-buttons">
<button disabled data-force-hide-menu id="stream-screenshot-button">&bull; Take a screenshot</button>
<hr>
<button data-force-hide-menu id="show-stream-button">&bull; Show stream</button>
@ -81,28 +83,28 @@
<button data-force-hide-menu id="show-about-button">&bull; Show about</button>
</div>
<hr>
<div class="ctl-dropdown-content-text">
<div class="menu-dropdown-content-text">
Stream quality: <span id="stream-quality-value">80%</span>
<div class="stream-slider-box">
<input disabled type="range" id="stream-quality-slider" class="slider" />
</div>
</div>
<hr>
<div class="ctl-dropdown-content-text">
<div class="menu-dropdown-content-text">
Stream FPS: <span id="stream-desired-fps-value">30</span>
<div class="stream-slider-box">
<input disabled type="range" id="stream-desired-fps-slider" class="slider" />
</div>
</div>
<hr>
<div class="ctl-dropdown-content-text">
<div class="menu-dropdown-content-text">
Stream size: <span id="stream-size-value">100%</span>
<div class="stream-slider-box">
<input type="range" id="stream-size-slider" class="slider" />
</div>
</div>
<hr>
<div class="ctl-dropdown-content-text">
<div class="menu-dropdown-content-text">
<table id="stream-auto-resize-box"><tr>
<td>Auto-resize stream:</td>
<td align="right">
@ -116,28 +118,28 @@
</td>
</tr></table>
</div>
<div class="ctl-dropdown-content-buttons">
<div class="menu-dropdown-content-buttons">
<hr>
<button disabled data-force-hide-menu id="stream-reset-button">&bull; Reset stream</button>
<button disabled data-force-hide-menu id="hid-reset-button">&bull; Reset keyboard &amp; mouse</button>
<button disabled data-force-hide-menu id="msd-reset-button">&bull; Reset mass storage</button>
</div>
<hr>
<div class="ctl-dropdown-content-buttons">
<div class="menu-dropdown-content-buttons">
<button data-force-hide-menu id="open-log-button">&bull; Open log</button>
</div>
</div>
</div>
</li>
<li class="ctl-right-actions">
<div class="ctl-dropdown">
<a class="ctl-item" href="#">
<li class="menu-right-actions">
<div class="menu-dropdown">
<a class="menu-item" href="#">
<img data-dont-hide-menu id="atx-power-led" class="led-gray" src="svg/atx-power-led.svg" />
<img data-dont-hide-menu id="atx-hdd-led" class="led-gray" src="svg/atx-hdd-led.svg" />
ATX &#8628;
</a>
<div class="ctl-dropdown-content ctl-dropdown-content-buttons">
<div class="menu-dropdown-content menu-dropdown-content-buttons">
<button disabled id="atx-power-button">&bull; Click Power <sup><i>short</i></sup></button>
<button disabled id="atx-power-button-long">&bull; Click Power <sup><i>long</i></sup></button>
<hr>
@ -146,15 +148,15 @@
</div>
</li>
<li class="ctl-right-actions">
<div class="ctl-dropdown">
<a class="ctl-item" href="#">
<li class="menu-right-actions">
<div class="menu-dropdown">
<a class="menu-item" href="#">
<img data-dont-hide-menu id="msd-led" class="led-gray" src="svg/msd-led.svg" />
Mass Storage &#8628;
</a>
<div data-dont-hide-menu id="msd-menu" class="ctl-dropdown-content">
<div id="msd-not-in-operate">
<div class="ctl-dropdown-content-text">
<div data-dont-hide-menu id="msd-menu" class="menu-dropdown-content">
<div id="msd-not-in-operate" class="msd-message">
<div class="menu-dropdown-content-text">
<table>
<tr>
<td><img src="svg/warning.svg" /></td>
@ -165,8 +167,8 @@
<hr>
</div>
<div id="msd-current-image-broken">
<div class="ctl-dropdown-content-text">
<div id="msd-current-image-broken" class="msd-message">
<div class="menu-dropdown-content-text">
<table>
<tr>
<td><img src="svg/warning.svg" /></td>
@ -177,8 +179,8 @@
<hr>
</div>
<div id="msd-another-another-user-uploads">
<div class="ctl-dropdown-content-text">
<div id="msd-another-another-user-uploads" class="msd-message">
<div class="menu-dropdown-content-text">
<table>
<tr>
<td><img src="svg/info.svg" /></td>
@ -213,15 +215,15 @@
</table>
<hr>
<input type="file" id="msd-select-new-image-file" />
<div class="ctl-dropdown-content-buttons buttons-row">
<input type="file" id="msd-select-new-image-file" class="msd-message" />
<div class="menu-dropdown-content-buttons buttons-row">
<button disabled id="msd-select-new-image-button" class="row50">Upload new image</button>
<button disabled id="msd-upload-new-image-button" class="row25">Start</button>
<button disabled id="msd-abort-uploading-button" class="row25">Abort</button>
</div>
<hr>
<div id="msd-new-image">
<div id="msd-new-image" class="msd-message">
<table class="msd-info">
<tr>
<td>New name:</td>
@ -233,7 +235,7 @@
</tr>
</table>
<hr>
<div class="ctl-dropdown-content-text">
<div class="menu-dropdown-content-text">
<div id="msd-progress" class="progress">
<span id="msd-progress-value" class="progress-value"></span>
</div>
@ -241,7 +243,7 @@
<hr>
</div>
<div class="ctl-dropdown-content-buttons buttons-row">
<div class="menu-dropdown-content-buttons buttons-row">
<button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="row50">&bull; Switch drive to KVM</button>
<button disabled data-force-hide-menu id="msd-switch-to-server-button" class="row50">&bull; Switch drive to Server</button>
</div>
@ -249,14 +251,14 @@
</div>
</li>
<li class="ctl-right-actions">
<div class="ctl-dropdown">
<a class="ctl-item" href="#">
<li class="menu-right-actions">
<div class="menu-dropdown">
<a class="menu-item" href="#">
<img data-dont-hide-menu id="hid-pak-led" class="led-gray" src="svg/gear-led.svg" />
Shortcuts &#8628;
</a>
<div data-dont-hide-menu class="ctl-dropdown-content">
<div class="ctl-dropdown-content-buttons">
<div data-dont-hide-menu class="menu-dropdown-content">
<div class="menu-dropdown-content-buttons">
<textarea id="hid-pak-text" placeholder="Paste your text here"></textarea>
<hr>
<button disabled data-force-hide-menu id="hid-pak-button">&bull; &uarr; Paste-as-Keys <sup><i>ascii-only</i></sup></button>
@ -279,11 +281,11 @@
<button data-force-hide-menu data-shortcut="ControlLeft AltLeft Delete">&bull; Ctrl+Alt+Del</button>
</div>
<hr>
<div class="ctl-dropdown-content-text">
<div class="menu-dropdown-content-text">
&darr; Alt+SysRq+... <sup><i>linux magic (<a target="_blank" href="https://www.kernel.org/doc/html/latest/admin-guide/sysrq.html">help</a>)</i></sup>
</div>
<hr>
<div class="ctl-dropdown-content-buttons buttons-row">
<div class="menu-dropdown-content-buttons buttons-row">
<button data-shortcut="AltLeft PrintScreen KeyR" class="row16">R</button>
<button data-shortcut="AltLeft PrintScreen KeyE" class="row16">E</button>
<button data-shortcut="AltLeft PrintScreen KeyI" class="row16">I</button>
@ -595,7 +597,7 @@
</div>
</div>
<ul id="footer">
<ul class="footer">
<li id="kvmd-version" class="footer-left"></li>
<li class="footer-right"><a target="_blank" href="https://github.com/pi-kvm">Pi-KVM Project</a></li>
</ul>

0
web/js/atx.js → web/js/kvm/atx.js
View File

0
web/js/hid.js → web/js/kvm/hid.js
View File

0
web/js/keyboard.js → web/js/kvm/keyboard.js
View File

23
web/js/kvm/main.js Normal file
View File

@ -0,0 +1,23 @@
var ui;
function main() {
if (
!window.navigator
|| window.navigator.userAgent.indexOf("MSIE ") > 0
|| window.navigator.userAgent.indexOf("Trident/") > 0
|| window.navigator.userAgent.indexOf("Edge/") > 0
) {
$("bad-browser-modal").style.visibility = "visible";
} else {
ui = new Ui();
tools.setOnClick($("show-about-button"), () => ui.showWindow($("about-window")));
tools.setOnClick($("show-keyboard-button"), () => ui.showWindow($("keyboard-window")));
tools.setOnClick($("show-stream-button"), () => ui.showWindow($("stream-window")));
tools.setOnClick($("open-log-button"), () => ui.open("kvmd/log?seek=3600&follow=1", "_blank"));
ui.showWindow($("stream-window"));
new Session();
}
}

0
web/js/mouse.js → web/js/kvm/mouse.js
View File

0
web/js/msd.js → web/js/kvm/msd.js
View File

27
web/js/session.js → web/js/kvm/session.js
View File

@ -1,4 +1,4 @@
function Session(hid, atx, msd, streamer) {
function Session() {
// var self = this;
/********************************************************************************/
@ -8,6 +8,11 @@ function Session(hid, atx, msd, streamer) {
var __ping_timer = null;
var __missed_heartbeats = 0;
var __hid = new Hid();
var __atx = new Atx();
var __msd = new Msd();
var __streamer = new Streamer();
var __init__ = function() {
$("link-led").title = "Not connected yet...";
__loadKvmdVersion();
@ -53,10 +58,10 @@ function Session(hid, atx, msd, streamer) {
$("link-led").className = "led-green";
$("link-led").title = "Connected";
tools.debug("Session: socket opened:", event);
streamer.loadInitialState();
atx.loadInitialState();
msd.loadInitialState();
hid.setSocket(__ws);
__streamer.loadInitialState();
__atx.loadInitialState();
__msd.loadInitialState();
__hid.setSocket(__ws);
__missed_heartbeats = 0;
__ping_timer = setInterval(__pingServer, 1000);
};
@ -68,11 +73,11 @@ function Session(hid, atx, msd, streamer) {
__missed_heartbeats = 0;
} else if (event.msg_type === "event") {
if (event.msg.event === "streamer_state") {
streamer.setState(event.msg.event_attrs);
__streamer.setState(event.msg.event_attrs);
} else if (event.msg.event === "atx_state") {
atx.setState(event.msg.event_attrs);
__atx.setState(event.msg.event_attrs);
} else if (event.msg.event === "msd_state") {
msd.setState(event.msg.event_attrs);
__msd.setState(event.msg.event_attrs);
}
}
};
@ -93,9 +98,9 @@ function Session(hid, atx, msd, streamer) {
clearInterval(__ping_timer);
__ping_timer = null;
}
streamer.clearState();
atx.clearState();
hid.setSocket(null);
__streamer.clearState();
__atx.clearState();
__hid.setSocket(null);
__ws = null;
setTimeout(function() {
$("link-led").className = "led-yellow";

0
web/js/stream.js → web/js/kvm/stream.js
View File

15
web/js/main.js
View File

@ -1,15 +0,0 @@
var ui;
function main() {
if (
!window.navigator
|| window.navigator.userAgent.indexOf("MSIE ") > 0
|| window.navigator.userAgent.indexOf("Trident/") > 0
|| window.navigator.userAgent.indexOf("Edge/") > 0
) {
$("bad-browser-modal").style.visibility = "visible";
} else {
ui = new Ui();
new Session(new Hid(), new Atx(), new Msd(), new Streamer());
}
}

35
web/js/ui.js
View File

@ -5,7 +5,7 @@ function Ui() {
var __top_z_index = 0;
var __windows = [];
var __ctl_items = [];
var __menu_items = [];
var __init__ = function() {
Array.prototype.forEach.call(document.querySelectorAll("button"), function(el_button) {
@ -14,9 +14,9 @@ function Ui() {
el_button.ontouchstart = function() {};
});
Array.prototype.forEach.call($$("ctl-item"), function(el_item) {
Array.prototype.forEach.call($$("menu-item"), function(el_item) {
tools.setOnClick(el_item, () => __toggleMenu(el_item));
__ctl_items.push(el_item);
__menu_items.push(el_item);
});
Array.prototype.forEach.call($$("window"), function(el_window) {
@ -37,13 +37,6 @@ function Ui() {
window.addEventListener("resize", () => __organizeWindowsOnResize(false));
window.addEventListener("orientationchange", () => __organizeWindowsOnResize(true));
tools.setOnClick($("show-about-button"), () => self.showWindow($("about-window")));
tools.setOnClick($("show-keyboard-button"), () => self.showWindow($("keyboard-window")));
tools.setOnClick($("show-stream-button"), () => self.showWindow($("stream-window")));
tools.setOnClick($("open-log-button"), () => window.open("kvmd/log?seek=3600&follow=1", "_blank"));
self.showWindow($("stream-window"));
};
/********************************************************************************/
@ -127,7 +120,7 @@ function Ui() {
if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered") || center) {
var view = self.getViewGeometry();
var rect = el_window.getBoundingClientRect();
el_window.style.top = Math.max($("ctl").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
el_window.style.top = Math.max($("menu").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
el_window.setAttribute("data-centered", "");
}
@ -139,7 +132,7 @@ function Ui() {
self.getViewGeometry = function() {
return {
top: $("ctl").clientHeight,
top: $("menu").clientHeight,
bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
left: 0,
right: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
@ -161,15 +154,15 @@ function Ui() {
var __toggleMenu = function(el_a) {
var all_hidden = true;
__ctl_items.forEach(function(el_item) {
var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
__menu_items.forEach(function(el_item) {
var el_menu = el_item.parentElement.querySelector(".menu-dropdown-content");
if (el_item === el_a && window.getComputedStyle(el_menu, null).visibility === "hidden") {
el_item.focus();
el_item.classList.add("ctl-item-selected");
el_item.classList.add("menu-item-selected");
el_menu.style.visibility = "visible";
all_hidden &= false;
} else {
el_item.classList.remove("ctl-item-selected");
el_item.classList.remove("menu-item-selected");
el_menu.style.visibility = "hidden";
}
});
@ -190,15 +183,15 @@ function Ui() {
var __closeAllMenues = function() {
document.onkeyup = null;
__ctl_items.forEach(function(el_item) {
var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
el_item.classList.remove("ctl-item-selected");
__menu_items.forEach(function(el_item) {
var el_menu = el_item.parentElement.querySelector(".menu-dropdown-content");
el_item.classList.remove("menu-item-selected");
el_menu.style.visibility = "hidden";
});
};
var __globalMouseButtonHandler = function(event) {
if (!event.target.matches(".ctl-item")) {
if (!event.target.matches(".menu-item")) {
for (var el_item = event.target; el_item && el_item !== document; el_item = el_item.parentNode) {
if (el_item.hasAttribute("data-force-hide-menu")) {
break;
@ -216,7 +209,7 @@ function Ui() {
Array.prototype.forEach.call($$("window"), function(el_window) {
if (el_window.style.visibility === "visible" && (orientation || el_window.hasAttribute("data-centered"))) {
var rect = el_window.getBoundingClientRect();
el_window.style.top = Math.max($("ctl").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
el_window.style.top = Math.max($("menu").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
el_window.setAttribute("data-centered", "");
}