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);
}
}
}