applyCustomStyle()

in src/components/Widget/index.js [387:431]


  applyCustomStyle() {
    const { domHighlight, defaultHighlightCss, defaultHighlightClassname } = this.props;
    const domHighlightJS = domHighlight.toJS() || {};
    if (domHighlightJS.selector) {
      const elements = safeQuerySelectorAll(domHighlightJS.selector);
      elements.forEach((element) => {
        switch (domHighlightJS.style) {
          case 'custom':
            element.setAttribute('style', domHighlightJS.css);
            break;
          case 'class':
            element.classList.add(domHighlightJS.css);
            break;
          default:
            if (defaultHighlightClassname !== '') {
              element.classList.add(defaultHighlightClassname);
            } else {
              element.setAttribute('style', defaultHighlightCss);
            }
        }
      });
      // We check that the method is here to prevent crashes on unsupported browsers.
      if (elements[0] && elements[0].scrollIntoView) {
        // If I don't use a timeout, the scrollToBottom in messages.jsx
        // seems to override that scrolling
        setTimeout(() => {
          if (/Mobi/.test(navigator.userAgent)) {
            elements[0].scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' });
          } else {
            const rectangle = elements[0].getBoundingClientRect();

            const ElemIsInViewPort = (
              rectangle.top >= 0 &&
                rectangle.left >= 0 &&
                rectangle.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                rectangle.right <= (window.innerWidth || document.documentElement.clientWidth)
            );
            if (!ElemIsInViewPort) {
              elements[0].scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' });
            }
          }
        }, 50);
      }
    }
  }