andros/demo-HTML-over-WebSockets-in-Django
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add comments broadcast

Browse Source
This commit is contained in:
Andros Fenollosa
2021-03-21 14:24:02 +01:00
parent 3229d7f255
commit 83b28bc1cb
4 changed files with 53 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/front/templates/layouts/main.html
View File

@ -40,19 +40,23 @@
});
document.$CHAT_SOCKET.addEventListener('message', (event) => {
console.log(event);
const NEW_DATA = JSON.parse(event.data);
const rangeHTML = document.createRange().createContextualFragment(NEW_DATA.html);
document.querySelector(NEW_DATA.selector).innerHTML = '';
document.querySelector(NEW_DATA.selector).appendChild(rangeHTML);
if (NEW_DATA.template === document.$CHAT_TEMPLATE) {
const rangeHTML = document.createRange().createContextualFragment(NEW_DATA.html);
document.querySelector(NEW_DATA.selector).innerHTML = '';
document.querySelector(NEW_DATA.selector).appendChild(rangeHTML);
}
});
document.querySelector('#link-about').addEventListener('click', (event) => {
event.preventDefault();
document.$CHAT_TEMPLATE = "partials/website/about.html";
document.$CHAT_SOCKET.send(JSON.stringify({
selector: "#main",
template: "partials/website/about.html",
template: document.$CHAT_TEMPLATE,
data: {}
}));
});
@ -60,9 +64,11 @@
document.querySelector('#link-all').addEventListener('click', (event) => {
event.preventDefault();
document.$CHAT_TEMPLATE = "partials/blog/all_articles.html";
document.$CHAT_SOCKET.send(JSON.stringify({
selector: "#main",
template: "partials/blog/all_articles.html",
template: document.$CHAT_TEMPLATE,
data: {}
}));
});

9
apps/front/templates/partials/blog/all_articles.html
View File

@ -24,9 +24,10 @@
buttons.forEach((button) => {
button.addEventListener('click', event => {
document.$CHAT_TEMPLATE = "partials/blog/single.html";
document.$CHAT_SOCKET.send(JSON.stringify({
selector: "#main",
template: "partials/blog/single.html",
template: document.$CHAT_TEMPLATE,
data: {
id: event.target.dataset.id
}
@ -40,9 +41,10 @@
pagPrevious.addEventListener('click', (event) => {
event.preventDefault();
document.$CHAT_TEMPLATE = "partials/blog/all_articles.html";
document.$CHAT_SOCKET.send(JSON.stringify({
selector: "#main",
template: "partials/blog/all_articles.html",
template: document.$CHAT_TEMPLATE,
data: {
pag: {% if pag > 1 %}{{ pag }} - 1{% else %}1{% endif %}
}
@ -52,9 +54,10 @@
pagNext.addEventListener('click', (event) => {
event.preventDefault();
document.$CHAT_TEMPLATE = "partials/blog/all_articles.html";
document.$CHAT_SOCKET.send(JSON.stringify({
selector: "#main",
template: "partials/blog/all_articles.html",
template: document.$CHAT_TEMPLATE,
data: {
pag: {{ pag }} + 1
}

4
apps/front/templates/partials/blog/single.html
View File

@ -53,9 +53,11 @@
publish.addEventListener('click', (event) => {
event.preventDefault();
document.$CHAT_TEMPLATE = "partials/blog/single.html";
document.$CHAT_SOCKET.send(JSON.stringify({
selector: "#main",
template: "partials/blog/single.html",
template: document.$CHAT_TEMPLATE,
data: {
id: event.target.dataset.id,
newName: newName.value,