121 lines
3.1 KiB
JavaScript
121 lines
3.1 KiB
JavaScript
$(function () {
|
|
|
|
var connection = new signalR.HubConnectionBuilder()
|
|
.withAutomaticReconnect()
|
|
.withUrl('/codeHub')
|
|
.build();
|
|
|
|
let $liveModeLink = $('#live-mode-link');
|
|
let $liveModeStatus = $('#live-mode-status');
|
|
let $usersList = $('#users-list');
|
|
let $yourNameText = $('#your-name-text');
|
|
let $yourColorText = $('#your-color-text');
|
|
|
|
let isTeacher = window.location.hash === '#4ELQcUq7UnFGghAZCVr4Chr9JmtncigfkGu5WSf9';
|
|
|
|
let isLive = false;
|
|
let editorLock = false;
|
|
|
|
let isLiveMode = function () {
|
|
|
|
isLive = window.location.hash === '#live';
|
|
|
|
$liveModeLink
|
|
.toggleClass('btn-success text-white', isLive)
|
|
.attr('href', isLive ? '#' : '#live');
|
|
|
|
isLive ? $liveModeStatus.fadeIn() : $liveModeStatus.fadeOut();
|
|
};
|
|
|
|
let sendName = function (e) {
|
|
|
|
let color = $yourColorText.val();
|
|
|
|
$yourNameText.css('color', color);
|
|
|
|
connection.invoke('SaveName', $yourNameText.val(), color);
|
|
};
|
|
|
|
let updateCode = function (editor, index) {
|
|
|
|
let user = $yourNameText.val();
|
|
let code = editor.getValue();
|
|
|
|
connection.invoke('UpdateCode', user, index, code, isTeacher).catch(function (err) {
|
|
return console.error(err.toString());
|
|
});
|
|
};
|
|
|
|
let setHeight = function () {
|
|
|
|
var editorHeight = $(window).height() - $('header').outerHeight() - $('footer').outerHeight();
|
|
|
|
$('#editor').height(editorHeight - 2);
|
|
};
|
|
|
|
// events
|
|
$(window).on('hashchange', isLiveMode);
|
|
$(window).resize(setHeight);
|
|
$('#your-name-text, #your-color-text').doneTyping(sendName);
|
|
|
|
isLiveMode();
|
|
setHeight();
|
|
|
|
if (isTeacher) {
|
|
$liveModeLink.hide();
|
|
$liveModeStatus.hide();
|
|
} else {
|
|
window.location.hash = '#live'; // set live mode on by default
|
|
}
|
|
|
|
let $editors = $('.ace_editor');
|
|
|
|
connection.on('ReceiveCode', function (user, index, code) {
|
|
|
|
if (!isTeacher && isLive) {
|
|
|
|
editorLock = true;
|
|
|
|
let editor = ace.edit($editors[index]);
|
|
|
|
editor.session.setValue(code);
|
|
|
|
editorLock = false;
|
|
}
|
|
});
|
|
|
|
connection.on('UsersList', function (users) {
|
|
|
|
let usersList = Object.values(users)
|
|
.filter(u => u.name !== '')
|
|
.map(u => `<a target="_blank" href="/view/${u.id}" style="color: ${u.color};" title="${u.color}">${u.name}</a>`);
|
|
|
|
$usersList.html(`<strong>${usersList.length} users online:</strong> ${usersList.join(', ')}`);
|
|
|
|
// set the height in case we have more than one row
|
|
setHeight();
|
|
});
|
|
|
|
connection.start().then(function () {
|
|
|
|
sendName();
|
|
|
|
$editors.each(function (i, e) {
|
|
|
|
let editor = ace.edit(e);
|
|
|
|
editor.session.on('change', function () {
|
|
|
|
if (!editorLock) {
|
|
updateCode(editor, i);
|
|
};
|
|
});
|
|
|
|
// send initial code
|
|
updateCode(editor, i);
|
|
});
|
|
|
|
}).catch(function (err) {
|
|
return console.error(err.toString());
|
|
});
|
|
}); |