Digg Style Pagination - Javascript ES6

digg-style-pagination.js

const pagination = (currentPage = 1, totalPages = 0, customEtc = '...') => {

  const pages = [];


  //Verificar se há páginas
  if (totalPages <= 0)
    return pages;

  //1 Botão
  pages.push({
    item: 1,
    role: totalPages > 0
  });

  //2 Botão
  pages.push({
    item: totalPages <= 9 ? 2 : currentPage <= 5 ? 2 : customEtc,
    role: totalPages > 2
  });

  //3 Botão
  pages.push({
    item: totalPages <= 9 || currentPage <= 5 ? 3 : currentPage + 5 >= totalPages ? totalPages - 6 : currentPage - 2,
    role: totalPages > 3
  });

  //4 Botão
  pages.push({
    item: totalPages <= 9 || currentPage <= 5 ? 4 : currentPage + 5 >= totalPages ? totalPages - 5 : currentPage - 1,
    role: totalPages > 4
  });

  //5 Botão
  pages.push({
    item: totalPages <= 9 || currentPage <= 5 ? 5 : currentPage + 5 >= totalPages ? totalPages - 4 : currentPage,
    role: totalPages > 5
  });

  //6 Botão
  pages.push({
    item: totalPages <= 9 || currentPage <= 5 ? 6 : currentPage + 5 >= totalPages ? totalPages - 3 : currentPage + 1,
    role: totalPages > 6
  });

  //7 Botão
  pages.push({
    item: totalPages <= 9 || currentPage <= 5 ? 7 : currentPage + 5 >= totalPages ? totalPages - 2 : currentPage + 2,
    role: totalPages > 7
  });

  //8 Botão
  pages.push({
    item: totalPages <= 9 ? 8 : totalPages === 10 && currentPage === 5 ? customEtc : currentPage + 5 >= totalPages ? totalPages - 1 : customEtc,
    role: totalPages > 8
  });

  //9 Botão
  pages.push({
    item: totalPages,
    role: totalPages > 1
  });

  return pages.filter((page) => page.role).map(({role, ...page}) => {
    return {
      is_active: currentPage === page.item,
      is_interactive: page.item !== customEtc,
      ...page
    }
  });

};

console.log(pagination(17, 100));