Skip to content

Commit

Permalink
Fix fetching and loading visuals not updating (#1768)
Browse files Browse the repository at this point in the history
  • Loading branch information
@borisyankov
borisyankov authored Jan 20, 2018
1 parent 7511df4 commit 9e9c565
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 58 deletions.
42 changes: 16 additions & 26 deletions src/render-html/es3.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,15 @@
export default `
'use strict';
var documentBody = document.body;
var elementSpinnerOlder = document.getElementById('spinner-older');
var elementSpinnerNewer = document.getElementById('spinner-newer');
var elementTyping = document.getElementById('typing');
var elementMessageLoading = document.getElementById('message-loading');
var scrollEventsDisabled = false;
if (!documentBody || !elementSpinnerOlder || !elementSpinnerNewer || !elementTyping || !elementMessageLoading) {
throw new Error('HTML elements missing');
}
var sendMessage = function sendMessage(msg) {
window.postMessage(JSON.stringify(msg), '*');
};
var getMessageNode = function getMessageNode(node) {
var curNode = node;
while (curNode && curNode.parentNode && curNode.parentNode !== documentBody) {
while (curNode && curNode.parentNode && curNode.parentNode !== document.body) {
curNode = curNode.parentNode;
}
return curNode;
Expand All @@ -32,19 +22,19 @@ var getMessageIdFromNode = function getMessageIdFromNode(node) {
var isTargetIsMessageContent = function isTargetIsMessageContent(target) {
var curNode = target;
while (curNode && curNode.parentNode && curNode.parentNode !== documentBody) {
while (curNode && curNode.parentNode && curNode.parentNode !== document.body) {
if (curNode.matches('.msg-raw-content')) return true;
curNode = curNode.parentNode;
}
return false;
};
var scrollToBottom = function scrollToBottom() {
window.scroll({ left: 0, top: documentBody.scrollHeight, behavior: 'smooth' });
window.scroll({ left: 0, top: document.body.scrollHeight, behavior: 'smooth' });
};
var scrollToBottomIfNearEnd = function scrollToBottomIfNearEnd() {
if (documentBody.scrollHeight - 100 < documentBody.scrollTop + documentBody.clientHeight) {
if (document.body.scrollHeight - 100 < document.body.scrollTop + document.body.clientHeight) {
scrollToBottom();
}
};
Expand All @@ -59,13 +49,13 @@ var scrollToAnchor = function scrollToAnchor(anchor) {
}
};
var height = documentBody.clientHeight;
var height = document.body.clientHeight;
window.addEventListener('resize', function (event) {
var difference = height - documentBody.clientHeight;
if (documentBody.scrollHeight !== documentBody.scrollTop + documentBody.clientHeight) {
var difference = height - document.body.clientHeight;
if (document.body.scrollHeight !== document.body.scrollTop + document.body.clientHeight) {
window.scrollBy({ left: 0, top: difference });
}
height = documentBody.clientHeight;
height = document.body.clientHeight;
});
var handleMessageBottom = function handleMessageBottom(msg) {
Expand All @@ -76,14 +66,14 @@ var handleMessageContent = function handleMessageContent(msg) {
var msgNode = document.getElementById('msg-' + msg.anchor);
if (!msgNode) {
documentBody.innerHTML = msg.content;
document.body.innerHTML = msg.content;
scrollToAnchor(msg.anchor);
return;
}
scrollEventsDisabled = true;
var prevBoundRect = msgNode.getBoundingClientRect();
documentBody.innerHTML = msg.content;
document.body.innerHTML = msg.content;
var newElement = document.getElementById('msg-' + msg.anchor);
if (newElement) {
var newBoundRect = newElement.getBoundingClientRect();
Expand All @@ -93,13 +83,13 @@ var handleMessageContent = function handleMessageContent(msg) {
};
var handleMessageFetching = function handleMessageFetching(msg) {
elementMessageLoading.classList.toggle('hidden', !msg.showMessagePlaceholders);
elementSpinnerOlder.classList.toggle('hidden', !msg.fetchingOlder);
elementSpinnerNewer.classList.toggle('hidden', !msg.fetchingNewer);
document.getElementById('message-loading').classList.toggle('hidden', !msg.showMessagePlaceholders);
document.getElementById('spinner-older').classList.toggle('hidden', !msg.fetchingOlder);
document.getElementById('spinner-newer').classList.toggle('hidden', !msg.fetchingNewer);
};
var handleMessageTyping = function handleMessageTyping(msg) {
elementTyping.innerHTML = msg.content;
document.getElementById('typing').innerHTML = msg.content;
setTimeout(function () {
return scrollToBottomIfNearEnd();
});
Expand Down Expand Up @@ -149,15 +139,15 @@ window.addEventListener('scroll', function () {
type: 'scroll',
scrollY: window.scrollY,
innerHeight: window.innerHeight,
offsetHeight: documentBody.offsetHeight,
offsetHeight: document.body.offsetHeight,
startMessageId: Math.min(prevNodes.start, currentNodes.start),
endMessageId: Math.max(prevNodes.end, currentNodes.end)
}), '*');
prevNodes = currentNodes;
});
documentBody.addEventListener('click', function (e) {
document.body.addEventListener('click', function (e) {
if (e.target.matches('.avatar-img')) {
sendMessage({
type: 'avatar',
Expand Down
50 changes: 18 additions & 32 deletions src/render-html/js.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,12 @@
const documentBody = document.body;
const elementSpinnerOlder = document.getElementById('spinner-older');
const elementSpinnerNewer = document.getElementById('spinner-newer');
const elementTyping = document.getElementById('typing');
const elementMessageLoading = document.getElementById('message-loading');

let scrollEventsDisabled = false;

if (
!documentBody ||
!elementSpinnerOlder ||
!elementSpinnerNewer ||
!elementTyping ||
!elementMessageLoading
) {
throw new Error('HTML elements missing');
}

const sendMessage = msg => {
window.postMessage(JSON.stringify(msg), '*');
};

const getMessageNode = node => {
let curNode = node;
while (curNode && curNode.parentNode && curNode.parentNode !== documentBody) {
while (curNode && curNode.parentNode && curNode.parentNode !== document.body) {
curNode = curNode.parentNode;
}
return curNode;
Expand All @@ -35,19 +19,19 @@ const getMessageIdFromNode = node => {

const isTargetIsMessageContent = target => {
let curNode = target;
while (curNode && curNode.parentNode && curNode.parentNode !== documentBody) {
while (curNode && curNode.parentNode && curNode.parentNode !== document.body) {
if (curNode.matches('.msg-raw-content')) return true;
curNode = curNode.parentNode;
}
return false;
};

const scrollToBottom = () => {
window.scroll({ left: 0, top: documentBody.scrollHeight, behavior: 'smooth' });
window.scroll({ left: 0, top: document.body.scrollHeight, behavior: 'smooth' });
};

const scrollToBottomIfNearEnd = () => {
if (documentBody.scrollHeight - 100 < documentBody.scrollTop + documentBody.clientHeight) {
if (document.body.scrollHeight - 100 < document.body.scrollTop + document.body.clientHeight) {
scrollToBottom();
}
};
Expand All @@ -62,13 +46,13 @@ const scrollToAnchor = anchor => {
}
};

let height = documentBody.clientHeight;
let height = document.body.clientHeight;
window.addEventListener('resize', event => {
const difference = height - documentBody.clientHeight;
if (documentBody.scrollHeight !== documentBody.scrollTop + documentBody.clientHeight) {
const difference = height - document.body.clientHeight;
if (document.body.scrollHeight !== document.body.scrollTop + document.body.clientHeight) {
window.scrollBy({ left: 0, top: difference });
}
height = documentBody.clientHeight;
height = document.body.clientHeight;
});

const handleMessageBottom = msg => {
Expand All @@ -79,14 +63,14 @@ const handleMessageContent = msg => {
const msgNode = document.getElementById(`msg-${msg.anchor}`);

if (!msgNode) {
documentBody.innerHTML = msg.content;
document.body.innerHTML = msg.content;
scrollToAnchor(msg.anchor);
return;
}

scrollEventsDisabled = true;
const prevBoundRect = msgNode.getBoundingClientRect();
documentBody.innerHTML = msg.content;
document.body.innerHTML = msg.content;
const newElement = document.getElementById(`msg-${msg.anchor}`);
if (newElement) {
const newBoundRect = newElement.getBoundingClientRect();
Expand All @@ -96,13 +80,15 @@ const handleMessageContent = msg => {
};

const handleMessageFetching = msg => {
elementMessageLoading.classList.toggle('hidden', !msg.showMessagePlaceholders);
elementSpinnerOlder.classList.toggle('hidden', !msg.fetchingOlder);
elementSpinnerNewer.classList.toggle('hidden', !msg.fetchingNewer);
document
.getElementById('message-loading')
.classList.toggle('hidden', !msg.showMessagePlaceholders);
document.getElementById('spinner-older').classList.toggle('hidden', !msg.fetchingOlder);
document.getElementById('spinner-newer').classList.toggle('hidden', !msg.fetchingNewer);
};

const handleMessageTyping = msg => {
elementTyping.innerHTML = msg.content;
document.getElementById('typing').innerHTML = msg.content;
setTimeout(() => scrollToBottomIfNearEnd());
};

Expand Down Expand Up @@ -149,7 +135,7 @@ window.addEventListener('scroll', () => {
type: 'scroll',
scrollY: window.scrollY,
innerHeight: window.innerHeight,
offsetHeight: documentBody.offsetHeight,
offsetHeight: document.body.offsetHeight,
startMessageId: Math.min(prevNodes.start, currentNodes.start),
endMessageId: Math.max(prevNodes.end, currentNodes.end),
}),
Expand All @@ -159,7 +145,7 @@ window.addEventListener('scroll', () => {
prevNodes = currentNodes;
});

documentBody.addEventListener('click', e => {
document.body.addEventListener('click', e => {
if (e.target.matches('.avatar-img')) {
sendMessage({
type: 'avatar',
Expand Down

0 comments on commit 9e9c565

Please sign in to comment.