unactivity pop-up

by avgustre

HTML

<body id='body'>

  <div class="top">
  </div>

  <div class="btn btn1">
    1

    <div class="popup1">
      <p>
        hello
      </p>
    </div>

  </div>

  <div class="btn btn2">
    2

    <div class="popup2">
      <p>
        hello
      </p>
    </div>


  </div>


</body>

SCSS

.top {
  width: 300px;
  height: 150px;
  background: black;
}

.popup1 {
  position: absolute;
  top: 0;
  display: none;
  width: 200px;
  height: 100px;
  background: yellow;
}

.popup2 {
  position: absolute;
  top: 0;
  display: none;
  width: 200px;
  height: 100px;
  background: red;
}

.btn1 {
  margin: 10px;
  padding: 10px;
  width: 20px;
  height: 20px;
  background: blue;
  &:hover .popup1 {
    display: block;
  }
}

.btn2 {
  margin: 10px;
  padding: 10px;
  width: 20px;
  height: 20px;
  background: blue;
  &:hover .popup2 {
    display: block;
  }
}

JavaScript

// создаем глобальные переменные
var blnk;
var blink_plus1;
var blink_plus2;

function blink_plus() {
  blink_plus1 = setTimeout(function() {
    // имитируем hover
    $('.btn1').mouseenter();
    setTimeout(function() {
      $('.btn1').mouseleave();
    }, 1000);
  }, 0);
  blink_plus2 = setTimeout(function() {
    $('.btn2').mouseenter();
    setTimeout(function() {
      $('.btn2').mouseleave();
    }, 1000);
  }, 1000);
}

// отслеживаем движения польз-ля
idleTimer = null;
idleState = false; // состояние отсутствия
idleWait = 5000; // время ожидания в мс. (1/1000 секунды)

$(document).bind('mousemove keydown scroll', function() {
 // if (Block3InVision()) { // проверяем что блок в поле видимости
    clearTimeout(idleTimer); // отменяем прежний временной отрезок
    if (idleState == true) {
      // Действия на возвращение пользователя
      $('#body').removeClass('userwatchingus'); // убираем контрольный класс
    }
    idleState = false;
    idleTimer = setTimeout(function() {
      // Действия на отсутствие пользователя                
      $('#body').addClass('userwatchingus'); // добавляем контрольный класс    
      blnk = setTimeout(function bilnk() { // запускаем эмуляцию наведения
        if ($('#body').hasClass('userwatchingus')) {
          blink_plus();
          setTimeout(bilnk, 3000);	// выставляем время повторения анимации hover'a
        }
      }, 0);
      idleState = true;
    }, idleWait);
 // }
});
// обнуляем таймеры, если пользователь ожил
$(document).bind('mousemove keydown scroll', function() {
  if (!$('#body').hasClass('userwatchingus')) {
    clearTimeout(blnk);
    clearTimeout(blink_plus1);
    clearTimeout(blink_plus2);
  }
});