diff --git a/src/webview/js/generatedEs3.js b/src/webview/js/generatedEs3.js index 262544b9705..d923387b9e2 100644 --- a/src/webview/js/generatedEs3.js +++ b/src/webview/js/generatedEs3.js @@ -8,8 +8,8 @@ export default ` 'use strict'; - var documentBody = document.body; + if (!documentBody) { throw new Error('No document.body element!'); } @@ -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('
'); + elementJsError.innerHTML = ["Message: " + message, "Source: " + source, "Line: " + line + ":" + column, "Error: " + JSON.stringify(error), ''].map(escapeHtml).join('
'); } } 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); } } @@ -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); } @@ -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) @@ -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, @@ -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); }; @@ -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); }; @@ -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') { @@ -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 () { @@ -254,10 +373,8 @@ 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) { @@ -265,11 +382,16 @@ document.addEventListener('message', function (e) { }); 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; @@ -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; } @@ -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', @@ -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', @@ -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(); `;