Chatwoot/app/javascript/sdk/bubbleHelpers.js
Pranav Raj S 6770126de0
Feature: Customise the position of messenger (#767)
Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
2020-04-25 23:18:00 +05:30

55 lines
2.2 KiB
JavaScript

import { addClass, toggleClass, wootOn } from './DOMHelpers';
import { IFrameHelper } from './IFrameHelper';
export const bubbleImg =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAAwgJEBk0TVheY2R5eo+ut8jb5OXs8fX2+cjRDTIAAADsSURBVHgBldZbkoMgFIThRgQv8SKKgGf/C51UnJqaRI30/9zfe+NQUQ3TvG7bOk9DVeCmshmj/CuOTYnrdBfkUOg0zlOtl9OWVuEk4+QyZ3DIevmSt/ioTvK1VH/s5bY3YdM9SBZ/mUUyWgx+U06ycgp7D8msxSvtc4HXL9BLdj2elSEfhBJAI0QNgJEBI1BEBsQClVBVGDgwYOLAhJkDM1YOrNg4sLFAsLJgZsHEgoEFFQt0JAFGFjQsKAMJ0LFAexKgZYFyJIDxJIBNJEDNAtSJBLCeBDCOBFAPzwFA94ED+zmhwDO9358r8ANtIsMXi7qVAwAAAABJRU5ErkJggg==';
export const body = document.getElementsByTagName('body')[0];
export const widgetHolder = document.createElement('div');
export const bubbleHolder = document.createElement('div');
export const chatBubble = document.createElement('div');
export const closeBubble = document.createElement('div');
export const notificationBubble = document.createElement('span');
const bodyOverFlowStyle = document.body.style.overflow;
export const createBubbleIcon = ({ className, src, target }) => {
target.className = `${className} woot-elements--${window.$chatwoot.position}`;
const bubbleIcon = document.createElement('img');
bubbleIcon.src = src;
target.appendChild(bubbleIcon);
return target;
};
export const createBubbleHolder = () => {
addClass(bubbleHolder, 'woot--bubble-holder');
body.appendChild(bubbleHolder);
};
export const createNotificationBubble = () => {
addClass(notificationBubble, 'woot--notification');
return notificationBubble;
};
export const onBubbleClick = () => {
window.$chatwoot.isOpen = !window.$chatwoot.isOpen;
toggleClass(chatBubble, 'woot--hide');
toggleClass(closeBubble, 'woot--hide');
toggleClass(widgetHolder, 'woot--hide');
if (window.$chatwoot.isOpen) {
IFrameHelper.pushEvent('webwidget.triggered');
}
};
export const onClickChatBubble = () => {
wootOn(bubbleHolder, 'click', onBubbleClick);
};
export const disableScroll = () => {
document.body.style.overflow = 'hidden';
};
export const enableScroll = () => {
document.body.style.overflow = bodyOverFlowStyle;
};