chore: Remove unnecessary methods and polyfills (#5614)

app/javascript/packs/sdk.js

@@ -10,7 +10,7 @@ import {
   getUserCookieName,
   hasUserKeys,
 } from '../sdk/cookieHelpers';
-import { addClass, removeClass } from '../sdk/DOMHelpers';
+import { addClasses, removeClasses } from '../sdk/DOMHelpers';
 import { SDK_SET_BUBBLE_VISIBILITY } from 'shared/constants/sharedFrameEvents';
 const runSDK = ({ baseUrl, websiteToken }) => {
   if (window.$chatwoot) {
@@ -41,12 +41,12 @@ const runSDK = ({ baseUrl, websiteToken }) => {
       let widgetElm = document.querySelector('.woot--bubble-holder');
       let widgetHolder = document.querySelector('.woot-widget-holder');
       if (visibility === 'hide') {
-        addClass(widgetHolder, 'woot-widget--without-bubble');
-        addClass(widgetElm, 'woot-hidden');
+        addClasses(widgetHolder, 'woot-widget--without-bubble');
+        addClasses(widgetElm, 'woot-hidden');
         window.$chatwoot.hideMessageBubble = true;
       } else if (visibility === 'show') {
-        removeClass(widgetElm, 'woot-hidden');
-        removeClass(widgetHolder, 'woot-widget--without-bubble');
+        removeClasses(widgetElm, 'woot-hidden');
+        removeClasses(widgetHolder, 'woot-widget--without-bubble');
         window.$chatwoot.hideMessageBubble = false;
       }
       IFrameHelper.sendMessage(SDK_SET_BUBBLE_VISIBILITY, {

app/javascript/sdk/DOMHelpers.js

@@ -3,68 +3,20 @@ import { IFrameHelper } from './IFrameHelper';
 
 export const loadCSS = () => {
   const css = document.createElement('style');
-  css.type = 'text/css';
   css.innerHTML = `${SDK_CSS}`;
   document.body.appendChild(css);
 };
 
-export const wootOn = (elm, event, fn) => {
-  if (document.addEventListener) {
-    elm.addEventListener(event, fn, false);
-  } else if (document.attachEvent) {
-    // <= IE 8 loses scope so need to apply, we add this to object so we
-    // can detach later (can't detach anonymous functions)
-    // eslint-disable-next-line
-    elm[event + fn] = function() {
-      // eslint-disable-next-line
-      return fn.apply(elm, arguments);
-    };
-    elm.attachEvent(`on${event}`, elm[event + fn]);
-  }
-};
-
-export const classHelper = (classes, action, elm) => {
-  let search;
-  let replace;
-  let i;
-  let has = false;
-  if (classes) {
-    // Trim any whitespace
-    const classarray = classes.split(/\s+/);
-    for (i = 0; i < classarray.length; i += 1) {
-      search = new RegExp(`\\b${classarray[i]}\\b`, 'g');
-      replace = new RegExp(` *${classarray[i]}\\b`, 'g');
-      if (action === 'remove') {
-        // eslint-disable-next-line
-        elm.className = elm.className.replace(replace, '');
-      } else if (action === 'toggle') {
-        // eslint-disable-next-line
-        elm.className = elm.className.match(search)
-          ? elm.className.replace(replace, '')
-          : `${elm.className} ${classarray[i]}`;
-      } else if (action === 'has') {
-        if (elm.className.match(search)) {
-          has = true;
-          break;
-        }
-      }
-    }
-  }
-  return has;
-};
-
-export const addClass = (elm, classes) => {
-  if (classes) {
-    elm.className += ` ${classes}`;
-  }
+export const addClasses = (elm, classes) => {
+  elm.classList.add(...classes.split(' '));
 };
 
 export const toggleClass = (elm, classes) => {
-  classHelper(classes, 'toggle', elm);
+  elm.classList.toggle(classes);
 };
 
-export const removeClass = (elm, classes) => {
-  classHelper(classes, 'remove', elm);
+export const removeClasses = (elm, classes) => {
+  elm.classList.remove(...classes.split(' '));
 };
 
 export const onLocationChange = ({ referrerURL, referrerHost }) => {

app/javascript/sdk/IFrameHelper.js

@@ -1,9 +1,8 @@
 import Cookies from 'js-cookie';
 import {
-  wootOn,
-  addClass,
+  addClasses,
   loadCSS,
-  removeClass,
+  removeClasses,
   onLocationChangeListener,
 } from './DOMHelpers';
 import {
@@ -68,7 +67,7 @@ export const IFrameHelper = {
       holderClassName += ` woot-widget-holder--flat`;
     }
 
-    addClass(widgetHolder, holderClassName);
+    addClasses(widgetHolder, holderClassName);
     widgetHolder.appendChild(iframe);
     body.appendChild(widgetHolder);
     IFrameHelper.initPostMessageCommunication();
@@ -99,7 +98,7 @@ export const IFrameHelper = {
     };
   },
   initWindowSizeListener: () => {
-    wootOn(window, 'resize', () => IFrameHelper.toggleCloseButton());
+    window.addEventListener('resize', () => IFrameHelper.toggleCloseButton());
   },
   preventDefaultScroll: () => {
     widgetHolder.addEventListener('wheel', event => {
@@ -241,9 +240,9 @@ export const IFrameHelper = {
         event.unreadMessageCount > 0 &&
         !bubbleElement.classList.contains('unread-notification')
       ) {
-        addClass(bubbleElement, 'unread-notification');
+        addClasses(bubbleElement, 'unread-notification');
       } else if (event.unreadMessageCount === 0) {
-        removeClass(bubbleElement, 'unread-notification');
+        removeClasses(bubbleElement, 'unread-notification');
       }
     },
 
@@ -284,7 +283,7 @@ export const IFrameHelper = {
       target: chatBubble,
     });
 
-    addClass(closeBubble, closeBtnClassName);
+    addClasses(closeBubble, closeBtnClassName);
 
     chatIcon.style.background = widgetColor;
     closeBubble.style.background = widgetColor;

app/javascript/sdk/bubbleHelpers.js

@@ -1,4 +1,4 @@
-import { addClass, removeClass, toggleClass, wootOn } from './DOMHelpers';
+import { addClasses, removeClasses, toggleClass } from './DOMHelpers';
 import { IFrameHelper } from './IFrameHelper';
 import { isExpandedView } from './settingsHelper';
 
@@ -41,14 +41,14 @@ export const createBubbleIcon = ({ className, src, target }) => {
 
 export const createBubbleHolder = hideMessageBubble => {
   if (hideMessageBubble) {
-    addClass(bubbleHolder, 'woot-hidden');
+    addClasses(bubbleHolder, 'woot-hidden');
   }
-  addClass(bubbleHolder, 'woot--bubble-holder');
+  addClasses(bubbleHolder, 'woot--bubble-holder');
   body.appendChild(bubbleHolder);
 };
 
 export const createNotificationBubble = () => {
-  addClass(notificationBubble, 'woot--notification');
+  addClasses(notificationBubble, 'woot--notification');
   return notificationBubble;
 };
 
@@ -71,15 +71,15 @@ export const onBubbleClick = (props = {}) => {
 };
 
 export const onClickChatBubble = () => {
-  wootOn(bubbleHolder, 'click', onBubbleClick);
+  bubbleHolder.addEventListener('click', onBubbleClick);
 };
 
 export const addUnreadClass = () => {
   const holderEl = document.querySelector('.woot-widget-holder');
-  addClass(holderEl, 'has-unread-view');
+  addClasses(holderEl, 'has-unread-view');
 };
 
 export const removeUnreadClass = () => {
   const holderEl = document.querySelector('.woot-widget-holder');
-  removeClass(holderEl, 'has-unread-view');
+  removeClasses(holderEl, 'has-unread-view');
 };