KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Enhancement: Improve scrolling on widget #954 (#955)

Browse source 
Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>
This commit is contained in:
Nithin David Thomas 2020-06-13 20:33:23 +05:30 • committed by GitHub
parent f9e8bb8e10
commit 944fbf27b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

20
app/javascript/sdk/IFrameHelper.js
View file

@ -4,8 +4,6 @@ import {
body, body,
widgetHolder, widgetHolder,
createBubbleHolder, createBubbleHolder,
disableScroll,
enableScroll,
createBubbleIcon, createBubbleIcon,
bubbleImg, bubbleImg,
chatBubble, chatBubble,
@ -37,6 +35,7 @@ export const IFrameHelper = {
IFrameHelper.initPostMessageCommunication(); IFrameHelper.initPostMessageCommunication();
IFrameHelper.initLocationListener(); IFrameHelper.initLocationListener();
IFrameHelper.initWindowSizeListener(); IFrameHelper.initWindowSizeListener();
IFrameHelper.preventDefaultScroll();
}, },
getAppFrame: () => document.getElementById('chatwoot_live_chat_widget'), getAppFrame: () => document.getElementById('chatwoot_live_chat_widget'),
sendMessage: (key, value) => { sendMessage: (key, value) => {
@ -70,6 +69,21 @@ export const IFrameHelper = {
IFrameHelper.toggleCloseButton(); IFrameHelper.toggleCloseButton();
}); });
}, },
preventDefaultScroll: () => {
widgetHolder.addEventListener('wheel', event => {
const deltaY = event.deltaY;
const contentHeight = widgetHolder.scrollHeight;
const visibleHeight = widgetHolder.offsetHeight;
const scrollTop = widgetHolder.scrollTop;
if (
(scrollTop === 0 && deltaY < 0) ||
(visibleHeight + scrollTop === contentHeight && deltaY > 0)
) {
event.preventDefault();
}
});
},
events: { events: {
loaded: message => { loaded: message => {
Cookies.set('cw_conversation', message.config.authToken, { Cookies.set('cw_conversation', message.config.authToken, {
@ -99,8 +113,6 @@ export const IFrameHelper = {
const iframe = IFrameHelper.getAppFrame(); const iframe = IFrameHelper.getAppFrame();
iframe.style.visibility = ''; iframe.style.visibility = '';
iframe.setAttribute('id', `chatwoot_live_chat_widget`); iframe.setAttribute('id', `chatwoot_live_chat_widget`);
iframe.onmouseenter = disableScroll;
iframe.onmouseleave = enableScroll;
loadCSS(); loadCSS();
createBubbleHolder(); createBubbleHolder();

9
app/javascript/sdk/bubbleHelpers.js
View file

@ -12,7 +12,6 @@ export const chatBubble = document.createElement('div');
export const closeBubble = document.createElement('div'); export const closeBubble = document.createElement('div');
export const notificationBubble = document.createElement('span'); export const notificationBubble = document.createElement('span');
const bodyOverFlowStyle = document.body.style.overflow;
export const createBubbleIcon = ({ className, src, target }) => { export const createBubbleIcon = ({ className, src, target }) => {
target.className = `${className} woot-elements--${window.$chatwoot.position}`; target.className = `${className} woot-elements--${window.$chatwoot.position}`;
@ -45,11 +44,3 @@ export const onBubbleClick = () => {
export const onClickChatBubble = () => { export const onClickChatBubble = () => {
wootOn(bubbleHolder, 'click', onBubbleClick); wootOn(bubbleHolder, 'click', onBubbleClick);
}; };
export const disableScroll = () => {
document.body.style.overflow = 'hidden';
};
export const enableScroll = () => {
document.body.style.overflow = bodyOverFlowStyle;
};