(DBR) Smart message front-end overview

The Smart Message feature is my first task after IDC Sitecore official founded. I have learned many new things through this task, in this article, I would like to have overview of each thing.

The features are mainly using for reminding user with some tips of configuration or shows some information in some specific moment, for example, the cursor has not moved for a while, the message will pop-up to show some information, this is very common feature in many website already, now innogy website  also with it!

In this task, it is included 3 pop-up rules in front-end and 1 pop-up rule in back-end Implementation, I will mainly address front-end part in this article.

#Javascript
#React

1. Leaving browser detection
When cursor move up and out of content area, the message will be triggered to pop-up, so the main thing is to know where is cursor location. As the investigation, event.clientY can make it.


function movingOut(event) {
      if(event.clientY < 0) {
         console.info("Out!");
   }
}


2. No Action Detection
This feature is commonly used in many websites, the visitors are normally can switch tabs easily in a browser or to keep the page then back to browse in couple mins, in this case, we can show user some information if the user switch back to page.

The main concept is using a function(restActive) to clearTimeout and immediately setTimeout to trigger a function in specific seconds, the restActive function must be assigned to window event, such as  onmousemove, onclick, onkeypress, or onscroll. 


function resetActive(e) {
     if (e.keyCode === 9) {
       clearTimeout(activityTimeout);
       activityTimeout = setTimeout(inActive, popUpTime);
     } else {
       clearTimeout(activityTimeout);
       activityTimeout = setTimeout(inActive, popUpTime);
     }
} 

function inActive(status) {
  openModal();
}


3. Close Form Detection
In some cases, the page will be accidentally closed, the worst thing is you fill out the most of fields in form but it is closed. The main window event of this feature is onbeforeunload.

so firstly the code will detect whether the page with form element, if it with, try to get the element of input, textarea, checkbox in form, and assign onbeforeunload to each element's onclick event.


const ipTexts = document.querySelectorAll('div[class="customForm"] input');
if (ipTexts !== null) {
   for (let i = 0; i < ipTexts.length; i += 1) {
      ipTexts[i].onkeydown = ValueChanged;
   }
}