Skip to content

Commit

Permalink
flow: Add MouseEvent type
Browse files Browse the repository at this point in the history 
Use a little `desctructuring`-type of a trick to hint to Flow
that we already ensured the `target` prop is the correct type.
  • Loading branch information
@borisyankov
borisyankov committed Oct 10, 2018
1 parent fd3d142 commit b6e2083
Showing 1 changed file with 163 additions and 25 deletions.
188 changes: 163 additions & 25 deletions src/webview/js/generatedEs3.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
export default `
'use strict';
var documentBody = document.body;
if (!documentBody) {
throw new Error('No document.body element!');
}
Expand All @@ -27,17 +27,20 @@ var sendMessage = function sendMessage(msg) {
window.onerror = function (message, source, line, column, error) {
if (window.enableWebViewErrorDisplay) {
var elementJsError = document.getElementById('js-error-detailed');
if (elementJsError) {
elementJsError.innerHTML = ['Message: ' + message, 'Source: ' + source, 'Line: ' + line + ':' + column, 'Error: ' + JSON.stringify(error), ''].map(escapeHtml).join('<br>');
elementJsError.innerHTML = ["Message: " + message, "Source: " + source, "Line: " + line + ":" + column, "Error: " + JSON.stringify(error), ''].map(escapeHtml).join('<br>');
}
} else {
var _elementJsError = document.getElementById('js-error-plain');
var elementSheetGenerated = document.getElementById('generated-styles');
var elementSheetHide = document.getElementById('style-hide-js-error-plain');
if (_elementJsError && elementSheetGenerated && elementSheetHide && elementSheetHide instanceof HTMLStyleElement && elementSheetHide.sheet && elementSheetGenerated instanceof HTMLStyleElement && elementSheetGenerated.sheet) {
elementSheetHide.sheet.disabled = true;
var _height = _elementJsError.offsetHeight;
elementSheetGenerated.sheet.insertRule('.header-wrapper { top: ' + _height + 'px; }', 0);
elementSheetGenerated.sheet.insertRule(".header-wrapper { top: " + _height + "px; }", 0);
}
}
Expand All @@ -51,12 +54,27 @@ window.onerror = function (message, source, line, column, error) {
error: error
}
});
return true;
};
<<<<<<< HEAD
||||||| merged common ancestors
var scrollEventsDisabled = true;
var lastTouchEventTimestamp = 0;
var lastTouchPositionX = -1;
var lastTouchPositionY = -1;
=======
var scrollEventsDisabled = true;
var lastTouchEventTimestamp = 0;
var lastTouchPositionX = -1;
var lastTouchPositionY = -1;
>>>>>>> flow: Add MouseEvent type
var showHideElement = function showHideElement(elementId, show) {
var element = document.getElementById(elementId);
if (element) {
element.classList.toggle('hidden', !show);
}
Expand All @@ -73,23 +91,107 @@ window.addEventListener('resize', function (event) {
var getMessageNode = function getMessageNode(node) {
var curNode = node;
while (curNode && curNode.parentNode && curNode.parentNode !== documentBody) {
curNode = curNode.parentNode;
}
return curNode;
};
var getMessageIdFromNode = function getMessageIdFromNode(node) {
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
var msgNode = getMessageNode(node);
return msgNode && msgNode instanceof Element ? +msgNode.getAttribute('data-msg-id') : defaultValue;
};
<<<<<<< HEAD
||||||| merged common ancestors
var scrollToBottom = function scrollToBottom() {
window.scroll({ left: 0, top: documentBody.scrollHeight, behavior: 'smooth' });
};
var isNearBottom = function isNearBottom() {
return documentBody.scrollHeight - 100 < documentBody.scrollTop + documentBody.clientHeight;
};
var scrollToBottomIfNearEnd = function scrollToBottomIfNearEnd() {
if (isNearBottom()) {
scrollToBottom();
}
};
var scrollToAnchor = function scrollToAnchor(anchor) {
var anchorNode = document.getElementById('msg-' + anchor);
if (anchorNode) {
anchorNode.scrollIntoView({ block: 'start' });
} else {
window.scroll({ left: 0, top: documentBody.scrollHeight + 200 });
}
};
var height = documentBody.clientHeight;
window.addEventListener('resize', function (event) {
var difference = height - documentBody.clientHeight;
if (documentBody.scrollHeight !== documentBody.scrollTop + documentBody.clientHeight) {
window.scrollBy({ left: 0, top: difference });
}
height = documentBody.clientHeight;
});
=======
var scrollToBottom = function scrollToBottom() {
window.scroll({
left: 0,
top: documentBody.scrollHeight,
behavior: 'smooth'
});
};
var isNearBottom = function isNearBottom() {
return documentBody.scrollHeight - 100 < documentBody.scrollTop + documentBody.clientHeight;
};
var scrollToBottomIfNearEnd = function scrollToBottomIfNearEnd() {
if (isNearBottom()) {
scrollToBottom();
}
};
var scrollToAnchor = function scrollToAnchor(anchor) {
var anchorNode = document.getElementById("msg-" + anchor);
if (anchorNode) {
anchorNode.scrollIntoView({
block: 'start'
});
} else {
window.scroll({
left: 0,
top: documentBody.scrollHeight + 200
});
}
};
var height = documentBody.clientHeight;
window.addEventListener('resize', function (event) {
var difference = height - documentBody.clientHeight;
if (documentBody.scrollHeight !== documentBody.scrollTop + documentBody.clientHeight) {
window.scrollBy({
left: 0,
top: difference
});
}
height = documentBody.clientHeight;
});
>>>>>>> flow: Add MouseEvent type
var getStartAndEndNodes = function getStartAndEndNodes() {
var startNode = getMessageNode(document.elementFromPoint(200, 20));
var endNode = getMessageNode(document.elementFromPoint(200, window.innerHeight - 20));
return {
start: getMessageIdFromNode(startNode, Number.MAX_SAFE_INTEGER),
end: getMessageIdFromNode(endNode, 0)
Expand All @@ -100,10 +202,8 @@ var prevNodes = getStartAndEndNodes();
var sendScrollMessage = function sendScrollMessage() {
var currentNodes = getStartAndEndNodes();
sendMessage({
type: 'scroll',
offsetHeight: documentBody.offsetHeight,
innerHeight: window.innerHeight,
scrollY: window.scrollY,
Expand All @@ -127,12 +227,12 @@ var lastTouchPositionY = -1;
var handleScrollEvent = function handleScrollEvent() {
lastTouchEventTimestamp = 0;
if (scrollEventsDisabled) {
return;
}
sendScrollMessage();
var nearEnd = documentBody.offsetHeight - window.scrollY - window.innerHeight > 100;
showHideElement('scroll-bottom', nearEnd);
};
Expand Down Expand Up @@ -165,19 +265,29 @@ var scrollToAnchor = function scrollToAnchor(anchor) {
var findPreserveTarget = function findPreserveTarget() {
var msgNode = getMessageNode(document.elementFromPoint(200, 50));
if (!msgNode || !(msgNode instanceof HTMLElement)) {
return { type: 'none' };
return {
type: 'none'
};
}
var msgId = getMessageIdFromNode(msgNode);
var prevBoundRect = msgNode.getBoundingClientRect();
return { type: 'preserve', msgId: msgId, prevBoundTop: prevBoundRect.top };
return {
type: 'preserve',
msgId: msgId,
prevBoundTop: prevBoundRect.top
};
};
var scrollToPreserve = function scrollToPreserve(msgId, prevBoundTop) {
var newElement = document.getElementById('msg-' + msgId);
var newElement = document.getElementById("msg-" + msgId);
if (!newElement) {
return;
}
var newBoundRect = newElement.getBoundingClientRect();
window.scrollBy(0, newBoundRect.top - prevBoundTop);
};
Expand All @@ -190,29 +300,37 @@ var appendAuthToImages = function appendAuthToImages(auth) {
}
var srcPath = img.src.substring(auth.realm.length);
if (!(srcPath.startsWith('/user_uploads/') || srcPath.startsWith('/thumbnail?'))) {
return;
}
var delimiter = img.src.includes('?') ? '&' : '?';
img.src += delimiter + 'api_key=' + auth.apiKey;
img.src += delimiter + "api_key=" + auth.apiKey;
});
};
var handleMessageContent = function handleMessageContent(msg) {
var target = void 0;
var target;
if (msg.updateStrategy === 'replace') {
target = { type: 'none' };
target = {
type: 'none'
};
} else if (msg.updateStrategy === 'scroll-to-anchor') {
target = { type: 'anchor', anchor: msg.anchor };
target = {
type: 'anchor',
anchor: msg.anchor
};
} else if (msg.updateStrategy === 'scroll-to-bottom-if-near-bottom' && isNearBottom()) {
target = { type: 'bottom' };
target = {
type: 'bottom'
};
} else {
target = findPreserveTarget();
}
documentBody.innerHTML = msg.content;
appendAuthToImages(msg.auth);
if (target.type === 'bottom') {
Expand Down Expand Up @@ -241,6 +359,7 @@ var handleMessageFetching = function handleMessageFetching(msg) {
var handleMessageTyping = function handleMessageTyping(msg) {
var elementTyping = document.getElementById('typing');
if (elementTyping) {
elementTyping.innerHTML = msg.content;
setTimeout(function () {
Expand All @@ -254,22 +373,25 @@ var messageHandlers = {
fetching: handleMessageFetching,
typing: handleMessageTyping
};
document.addEventListener('message', function (e) {
scrollEventsDisabled = true;
var decodedData = decodeURIComponent(escape(window.atob(e.data)));
var messages = JSON.parse(decodedData);
messages.forEach(function (msg) {
messageHandlers[msg.type](msg);
});
scrollEventsDisabled = false;
});
documentBody.addEventListener('click', function (e) {
e.preventDefault();
lastTouchEventTimestamp = 0;
var target = e.target;
if (!(target instanceof HTMLElement)) {
return;
}
<<<<<<< HEAD
var target = e.target;
Expand All @@ -278,6 +400,11 @@ documentBody.addEventListener('click', function (e) {
}
if (target.matches('.scroll-bottom')) {
||||||| merged common ancestors
if (e.target.matches('.scroll-bottom')) {
=======
if (target.matches('.scroll-bottom')) {
>>>>>>> flow: Add MouseEvent type
scrollToBottom();
return;
}
Expand All @@ -299,7 +426,14 @@ documentBody.addEventListener('click', function (e) {
return;
}
<<<<<<< HEAD
var inlineImageLink = target.closest('.message_inline_image a');
||||||| merged common ancestors
var inlineImageLink = e.target.closest('.message_inline_image a');
=======
var inlineImageLink = target.closest('.message_inline_image a');
>>>>>>> flow: Add MouseEvent type
if (inlineImageLink && !inlineImageLink.closest('.youtube-video, .vimeo-video')) {
sendMessage({
type: 'image',
Expand Down Expand Up @@ -344,8 +478,11 @@ var handleLongPress = function handleLongPress(e) {
return;
}
lastTouchEventTimestamp = 0;
if (!(e.target instanceof Element)) {
return;
}
lastTouchEventTimestamp = 0;
sendMessage({
type: 'longPress',
target: e.target.matches('.header') ? 'header' : 'message',
Expand Down Expand Up @@ -379,21 +516,22 @@ documentBody.addEventListener('touchend', function (e) {
lastTouchEventTimestamp = Date.now();
}
});
documentBody.addEventListener('touchmove', function (e) {
lastTouchEventTimestamp = 0;
});
documentBody.addEventListener('drag', function (e) {
lastTouchEventTimestamp = 0;
});
var waitForBridge = function waitForBridge() {
if (window.postMessage.length === 1) {
sendMessage({ type: 'ready' });
sendMessage({
type: 'ready'
});
} else {
setTimeout(waitForBridge, 10);
}
};
waitForBridge();
`;

0 comments on commit b6e2083

Please sign in to comment.