TrestleAdmin/trestle

View on GitHub
frontend/js/components/pagination.js

Summary

Maintainability
A
1 hr
Test Coverage
/* global history */

import $ from 'jquery'

import { triggerInit } from '../core/events'

const REMOTE_PAGINATION_SELECTOR = '.page-link[data-remote]'

$(document)
  .on('ajax:send', function (e) {
    const $context = $(e.target).closest('[data-context]')
    const $table = $context.find('.table-container')
    $table.addClass('loading')
  })

  .on('ajax:complete', function (e) {
    const $context = $(e.target).closest('[data-context]')
    const $table = $context.find('.table-container')
    $table.removeClass('loading')
  })

  .on('ajax:success', REMOTE_PAGINATION_SELECTOR, function (e) {
    const $link = $(e.target)
    const $context = $link.closest('[data-context]')

    // Update table and pagination
    const $doc = $(e.detail[0])

    const $table = $doc.find('.table-container')
    $context.find('.table-container').replaceWith($table)

    triggerInit($table)

    const $pagination = $doc.find('.pagination-container')
    $context.find('.pagination-container').replaceWith($pagination)

    // Update the URL in the browser and context
    const location = $link.attr('href')

    if (location) {
      // TODO: Implement URL updating with back button support
      // if ($context.hasClass('app-main')) {
      //   history.pushState({}, '', location)
      // }

      $context.data('context', location)
    }

    // Scroll to top of table
    $table[0].scrollIntoView(true)
  })