Highlight only new items with jQuery

by Luiz Silva

HTML

<div id="items"><strong>Items:</strong></div>

CSS

.item {
    indent: 5px;
    padding: 2px;
}
.new {
    background-color: #ACE;
    color: #FFF;
    margin: 2px;
    padding: 2px;
}

JavaScript

//armazena hora de atualização da página
var updateTimestamp = Date.now();

//inicializa teste
var itemCount = 0;
$(function() {
    //timer para adicionar itens aleatoriamente
    setInterval(function() {
        var qtd = 2 + Math.round(Math.random() * 3);
        for (var i = 0; i < qtd; i++) {
            itemCount++;
            $('#items').append('<div class="item">Item ' + itemCount + '</div>');
        }
    }, 5000);
    
    //lembra se a janela recebeu o foco
    var janelaTemFoco = false;
    
    //timer para atualizar a página
    var refreshInterval = setInterval(function() {
        //executa ação apenas se o usuário estiver vendo a janela
        if (janelaTemFoco) {
            highlightItems();
        }
    }, 1000);
    
    //eventos de foco da janela
    $(window).focus(function() {
        console.log('--- focus ---');
        janelaTemFoco = true;
        highlightItems();
    });
    $(window).blur(function() {
        console.log('--- blur ---');
        janelaTemFoco = false;
    });
    //se o usuário parar o mouse, também mostra
    var mouseInterval = 0;
    $(window).mousemove(function() {
        console.log('--- mousemove ---');
        if (mouseInterval == 0) {
            clearInterval(mouseInterval);
            mouseInterval = setTimeout(highlightItems, 1000);
        }
    });
    $(window).mouseout(function() {
        console.log('--- mouseout ---');
        clearInterval(mouseInterval);
        mouseInterval = 0;
    });
});

//marca itens novos
function highlightItems() {
    console.log('--- highlightItems ---');
    //percorre todos os itens
    $('.item').each(function() {
        console.log($(this).text());
        //verifica se o item é recente
        var adicionado = $(this).data('adicionado');
        if (!adicionado || adicionado > updateTimestamp) {
            //cria marcador
            var marcador = $('<span class="new">novo!</span>');
            //adiciona ao item
            $(this).append(marcador);
  ...