zias/wolk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Issue #32: working live with WebSockets! Needs to be reviewed.

Browse Source
This commit is contained in:
Henrique Dias
2016-10-30 20:42:56 +00:00
parent 12c76b7a54
commit 44065cfaf9
5 changed files with 190 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
_embed/public/css/styles.css
View File

@@ -473,8 +473,8 @@ header {
z-index: 999;
padding: 1.7em 0;
background-color: #2196f3;
border-bottom: 1px solid rgba(0,0,0,0.075);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
header h1 {
@@ -548,7 +548,7 @@ header p i {
min-width: 20em;
border: 0;
outline: 0;
color: #fff;
color: rgba(255, 255, 255, 0.72);
background-color: transparent;
}
@@ -574,14 +574,22 @@ header p i {
transition: .1s ease all;
visibility: hidden;
opacity: 0;
overflow-x: hidden;
overflow-y: auto;
max-height: 50vh;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
#search.active div i,
#sidebar #search.active div i {
color: #ccc;
display: block;
text-align: center;
margin: 0 auto;
display: table;
}
#search::-webkit-input-placeholder {

48
_embed/public/js/application.js
View File

@@ -503,29 +503,18 @@ var searchEvent = function(event) {
if (event.keyCode == 13) {
box.innerHTML = '<i class="material-icons spin">autorenew</i>';
let request = new XMLHttpRequest();
request.open('POST', window.location);
request.setRequestHeader('Command', value);
request.setRequestHeader('Token', token);
request.send();
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 501) {
box.innerHTML = "Command not implemented."
}
var conn = new WebSocket('ws://' + window.location.host + window.location.pathname + '?command=true');
conn.onopen = function() {
conn.send(value);
};
if (request.status == 500) {
box.innerHTML = "Something went wrong."
}
conn.onmessage = function(event) {
box.innerHTML = event.data
box.scrollTop = box.scrollHeight;
}
if (request.status == 200) {
let text = request.responseText;
text = text.substring(1, text.length - 1);
text = text.replace('\\n', "\n");
box.innerHTML = text;
reloadListing();
}
}
conn.onclose = function(event) {
reloadListing();
}
}
}
@@ -554,13 +543,28 @@ document.addEventListener('listing', event => {
});
if (user.AllowCommands) {
let hover = false, focus = false;
document.querySelector('#search input').addEventListener('focus', event => {
focus = true;
document.getElementById('search').classList.add('active');
});
document.querySelector('#search div').addEventListener('mouseover', event => {
hover = true;
document.getElementById('search').classList.add('active');
});
document.querySelector('#search input').addEventListener('blur', event => {
focus = false;
if (hover) return;
document.getElementById('search').classList.remove('active');
});
document.querySelector('#search').addEventListener('mouseleave', event => {
hover = false;
if (focus) return;
document.getElementById('search').classList.remove('active');
document.querySelector('#search input').value = '';
});
document.querySelector('#search div').innerHTML = "Write one of yours suported commands: " + user.Commands.join(", ") + ".";