69 lines
2.4 KiB
JavaScript
69 lines
2.4 KiB
JavaScript
|
////////////////////////////////////////////////////////////////////////////////
|
||
|
|
// https://bulma.io/documentation/components/navbar/#navbar-menu
|
||
|
|
function addBurgerMenu() {
|
||
|
|
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
||
|
|
// Add a click event on each of them
|
||
|
|
$navbarBurgers.forEach (el => {
|
||
|
|
el.addEventListener('click', () => {
|
||
|
|
const target = el.dataset.target;
|
||
|
|
const $target = document.getElementById(target);
|
||
|
|
el.classList.toggle('is-active');
|
||
|
|
$target.classList.toggle('is-active');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////////////////////////////////
|
||
|
|
function addWSSEventListener () {
|
||
|
|
const ws = new WebSocket('wss://' + window.location.host + '~a');
|
||
|
|
|
||
|
|
function receivedMessage(msg) {
|
||
|
|
document.getElementById('chat-messages')
|
||
|
|
.insertAdjacentHTML('afterbegin', msg.data);
|
||
|
|
// document.querySelector('#chat-messages').insertAdjacentHTML('afterbegin', msg.data);
|
||
|
|
}
|
||
|
|
|
||
|
|
ws.addEventListener ('message', receivedMessage);
|
||
|
|
}
|
||
|
|
|
||
|
|
function addInputFieldEventListener () {
|
||
|
|
const inputField = document.getElementById('chat-input');
|
||
|
|
inputField.addEventListener ('keyup', (evt) => {
|
||
|
|
if (evt.key === 'Enter') {
|
||
|
|
// clear the input on Enter
|
||
|
|
evt.target.value = '';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////////////////////////////////
|
||
|
|
function moreInfo() {
|
||
|
|
const chatForm = document.getElementById('chat-form');
|
||
|
|
const inputField = document.getElementById('chat-input');
|
||
|
|
const sendButton = document.getElementById('submit-button');
|
||
|
|
chatForm.reset ();
|
||
|
|
inputField.focus ();
|
||
|
|
document.execCommand('insertText', false, 'More Info!');
|
||
|
|
sendButton.click();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Removing the form attribute "disables" the form allowing the
|
||
|
|
// websocket chat to be used instead.
|
||
|
|
function disableHTMLForm () {
|
||
|
|
const inputField = document.getElementById('chat-input');
|
||
|
|
const sendButton = document.getElementById('submit-button');
|
||
|
|
inputField.removeAttribute ('form');
|
||
|
|
sendButton.removeAttribute ('form');
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
addBurgerMenu();
|
||
|
|
if (WebSocket) {
|
||
|
|
// Use websockets
|
||
|
|
addInputFieldEventListener();
|
||
|
|
// disableHTMLForm();
|
||
|
|
// addWSSEventListener();
|
||
|
|
}
|
||
|
|
// Fallback will be used otherwise.
|
||
|
|
});
|