lapikud/Viido
2
0
Fork 0
mirror of https://github.com/Lapikud/Viido.git synced 2026-03-23 13:14:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove unnecessary jQuery dependency, change radios to simple buttons

Browse Source
This commit is contained in:
siinus
2020-06-12 02:30:48 +03:00
parent 535a6503a1
commit 719a2d3c3f
1 changed files with 32 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
www/index.html
View File

@@ -60,10 +60,6 @@
user-select: none; /* Likely future */ user-select: none; /* Likely future */
} }
.radio-toolbar input[type="radio"] {
display: none;
}
.radio-toolbar input[type="button"] { .radio-toolbar input[type="button"] {
display: none; display: none;
} }
@@ -99,17 +95,6 @@
border: 2px solid #af4c4c; border: 2px solid #af4c4c;
} }
.radio-toolbar input[type="radio"]:checked+label {
background-color: #4CAF50;
color: white;
}
.radio-toolbar input[type="radio"]:checked+label.red {
background-color: #af4c4c;
color: white;
border: 2px solid #af4c4c;
}
.button1:hover { .button1:hover {
background-color: #4CAF50; background-color: #4CAF50;
color: white; color: white;
@@ -135,28 +120,24 @@
} }
</style> </style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script> <script>
$(function() function show_loading(visible)
{ {
document.getElementById('loading').style.visibility = visible ? 'visible' : 'hidden';
}
$(".radio-toolbar input[type=radio]").change(function() function send_mode(value)
{ {
$("#loading").css("visibility", "visible"); show_loading(true);
var http = new XMLHttpRequest();
$.post("/projektor/status", {mode: $(this).val()}, function(data) http.open('POST', '/projektor/status', true);
{ http.onreadystatechange = function() {
$("#loading").css("visibility", "hidden"); if (http.readyState == 4 && http.status == 200) {
}); show_loading(false);
}); }
$(".radio-toolbar input[type=button]").click(function() }
{ http.send('mode=' + value);
$.post("/projektor/status", {mode: $(this).val()}, function(data) }
{
});
});
});
</script> </script>
</head> </head>
@@ -169,20 +150,20 @@
<h2 class="title">Projektori juhtimine</h2> <h2 class="title">Projektori juhtimine</h2>
<div class="radio-toolbar"> <div class="radio-toolbar">
<input type="radio" id="radio1" name="radios" value="off" class="red"> <input type="button" id="power1" name="power" value="off">
<label for="radio1" class="red">OFF</label> <label for="power1" class="red">OFF</label>
<input type="radio" id="radio2" name="radios" value="on"> <input type="button" id="power2" name="power" value="on">
<label for="radio2">ON</label> <label for="power2">ON</label>
</div> </div>
<h2 class="title">Sisendi juhtimine</h2> <h2 class="title">Sisendi juhtimine</h2>
<div class="radio-toolbar"> <div class="radio-toolbar">
<input type="radio" id="r2" name="receiver" value="viido"> <input type="button" id="r2" name="receiver" value="viido">
<label class="rbnt" for="r2">Viido</label> <label class="rbnt" for="r2">Viido</label>
<input type="radio" id="r3" name="receiver" value="steam"> <input type="button" id="r3" name="receiver" value="steam">
<label class="rbnt" for="r3">Steam</label> <label class="rbnt" for="r3">Steam</label>
<input type="button" id="v1" name="receiver" value="volumeup"> <input type="button" id="v1" name="receiver" value="volumeup">
@@ -191,10 +172,10 @@
</div> </div>
<br> <br>
<div class="radio-toolbar"> <div class="radio-toolbar">
<input type="radio" id="r4" name="receiver" value="hdmi"> <input type="button" id="r4" name="receiver" value="hdmi">
<label class="rbnt" for="r4">HDMI</label> <label class="rbnt" for="r4">HDMI</label>
<input type="radio" id="r5" name="receiver" value="aux"> <input type="button" id="r5" name="receiver" value="aux">
<label class="rbnt" for="r5">AUX</label> <label class="rbnt" for="r5">AUX</label>
<input type="button" id="v2" name="receiver" value="volumedown"> <input type="button" id="v2" name="receiver" value="volumedown">
@@ -208,5 +189,14 @@ pavucontrol &
</code> </code>
<div id="loading"></div> <div id="loading"></div>
<script type="text/javascript">
var modebuttons = document.querySelectorAll('.radio-toolbar input');
for (var i = 0; i < modebuttons.length; i++)
{
modebuttons[i].addEventListener('click', function(event) {
send_mode(event.target.value);
});
}
</script>
</body> </body>
</html> </html>