Notes/wwwroot/js/site.js

109 lines
2.7 KiB
JavaScript
Raw Normal View History

2023-01-26 21:44:50 +00:00
let connection = new signalR.HubConnectionBuilder()
.withAutomaticReconnect()
.withUrl("/noteHub")
.build();
2022-11-29 15:14:15 +00:00
2023-01-31 14:35:24 +00:00
function start() {
connection.start().then(function () {
console.log('Started websocket listener');
}).catch(function (err) {
console.error(err.toString());
return alert('Connection error. Reload page.');
});
}
2022-11-29 15:14:15 +00:00
2023-01-31 14:35:24 +00:00
function showToast(selector) {
2022-11-29 15:14:15 +00:00
2023-01-25 13:48:50 +00:00
const cssClass = 'show';
2022-11-29 15:14:15 +00:00
2023-01-25 13:48:50 +00:00
// show 'saved' indicator
$(selector).addClass(cssClass).delay(800).queue(function (next) {
$(this).removeClass(cssClass);
next();
});
}
2023-01-31 14:35:24 +00:00
function saveContent($textarea) {
2023-01-25 13:48:50 +00:00
$textarea = $textarea || $('textarea');
var content = $textarea.val();
connection.invoke('SaveNote', content).then(function () {
showToast('#saved-indicator');
2023-01-26 16:13:12 +00:00
}).catch(function (err) {
console.error(err.toString());
setTimeout(start, 2000);
2022-11-29 15:14:15 +00:00
});
};
// start the signalr connection
start();
2022-11-29 15:14:15 +00:00
$(function () {
2023-01-31 14:35:24 +00:00
const $textarea = $('textarea');
2023-01-25 13:48:50 +00:00
2023-01-31 14:35:36 +00:00
// set focus on load
$textarea.focus();
2023-01-25 13:48:50 +00:00
// update content upon sync save
connection.on('updateNote', function (content) {
$textarea.val(content);
showToast('#update-indicator');
});
// update content after reconnected
connection.onreconnected(function() {
$.get('api/note', function(content) {
$textarea.val(content);
showToast('#update-indicator');
console.log('Refreshed after disconnect');
});
});
2022-12-03 02:38:05 +00:00
// set dark mode
if (window.location.hash == '#dark') {
2023-01-31 14:35:24 +00:00
$('body').addClass('dark');
2022-12-03 02:38:05 +00:00
}
2023-01-31 14:35:24 +00:00
let timer = null;
2023-01-25 13:48:50 +00:00
2023-01-31 14:35:24 +00:00
const ignoredKeyCodes = [17, 18, 20, 27, 37, 38, 39, 40, 91];
2023-01-09 20:54:20 +00:00
2023-01-11 15:57:23 +00:00
// save after a second delay after typing
2023-01-25 13:48:50 +00:00
$textarea.keyup(function (e) {
2022-12-02 20:18:04 +00:00
// only set timer if key isn't ignored
if (!ignoredKeyCodes.includes(e.keyCode)) {
2023-01-09 20:54:20 +00:00
clearTimeout(timer);
2022-12-02 20:18:04 +00:00
timer = setTimeout(function () {
saveContent();
}, 1000);
}
2022-11-29 15:14:15 +00:00
});
// support tab key in textarea
2023-01-25 13:48:50 +00:00
$textarea.keydown(function (e) {
2022-11-29 15:14:15 +00:00
if (e.keyCode === 9) { // tab was pressed
// get caret position/selection
var start = this.selectionStart;
end = this.selectionEnd;
var $this = $(this);
// set textarea value to: text before caret + tab + text after caret
$this.val($this.val().substring(0, start)
2023-01-26 18:32:51 +00:00
+ ' '
2022-11-29 15:14:15 +00:00
+ $this.val().substring(end));
// put caret at right position again
2023-01-26 18:32:51 +00:00
this.selectionStart = this.selectionEnd = start + 2;
2022-11-29 15:14:15 +00:00
// prevent the focus lose
return false;
}
});
});