LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Fixes #1940 WCAG support for website widget (#2071)

Browse Source 
Co-authored-by: Kaj Oudshoorn <kaj@milvum.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
This commit is contained in:
koudshoorn
2021-09-02 08:43:53 +02:00
committed by GitHub
parent 2ddd508aee
commit af1d8c0ee5
11 changed files with 109 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/sdk/IFrameHelper.js
View File

@@ -142,6 +142,7 @@ export const IFrameHelper = {
},
onBubbleToggle: isOpen => {
IFrameHelper.sendMessage('toggle-open', { isOpen });
if (!isOpen) {
IFrameHelper.events.resetUnreadMode();
} else {
@@ -194,6 +195,10 @@ export const IFrameHelper = {
const holderEl = document.querySelector('.woot-widget-holder');
removeClass(holderEl, 'has-unread-view');
},
closeChat: () => {
onBubbleClick({ toggleValue: false });
},
},
pushEvent: eventName => {
IFrameHelper.sendMessage('push-event', { eventName });

8
app/javascript/sdk/bubbleHelpers.js
View File

@@ -9,8 +9,8 @@ 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 chatBubble = document.createElement('button');
export const closeBubble = document.createElement('button');
export const notificationBubble = document.createElement('span');
export const getBubbleView = type =>
@@ -64,6 +64,10 @@ export const onBubbleClick = (props = {}) => {
toggleClass(closeBubble, 'woot--hide');
toggleClass(widgetHolder, 'woot--hide');
IFrameHelper.events.onBubbleToggle(newIsOpen);
if (!newIsOpen) {
chatBubble.focus();
}
}
};

3
app/javascript/sdk/sdk.js
View File

@@ -25,7 +25,9 @@ export const SDK_CSS = `.woot-widget-holder {
.woot-widget-bubble {
background: #1f93ff;
border-radius: 100px !important;
border-width: 0px;
bottom: 20px;
padding: 0px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
cursor: pointer;
height: 64px !important;
@@ -40,6 +42,7 @@ export const SDK_CSS = `.woot-widget-holder {
display: flex;
height: 48px !important;
width: auto !important;
align-items: center;
}
.woot-widget-bubble.woot-widget--expanded div {