avvo-styleguide/source/javascripts/modules/avvo_ui/components/responsive-overflow-table.js

Avvo styleguide

/* ========================================================================
 * Avvo UI - responsive-overflow-table.js
 *
 * Sets up a fixed column for overflow tables
 * ======================================================================== */

const $ = global.jQuery

const ResponsiveOverflowTable = function (element) {
  this.$element     = $(element)
  this.$table       = this.$element.find('.table').clone()
  this.$caption     = this.getCaption()
  this.$footer      = this.getFooter()
  this.$fixedColumn = this.getFixedColumn()

  this.render()
}

ResponsiveOverflowTable.prototype.getCaption = function () {
  if (!this.$table.find('caption').length) {
    return
  }

  const $caption = $('<div>')
  const $strippedTable = this.$table.clone()

  $strippedTable.children(':not(caption)').remove()

  $caption
    .append($strippedTable)
    .addClass('table-responsive-overflow-caption')
    .attr('aria-hidden', true)

  return $caption
}


ResponsiveOverflowTable.prototype.getFooter = function () {
  if (!this.$table.find('tfoot').length) {
    return
  }

  const $footer = $('<div>')
  const $strippedTable = this.$table.clone()

  $strippedTable.children(':not(tfoot)').remove()

  $footer
    .append($strippedTable)
    .addClass('table-responsive-overflow-tfoot')
    .attr('aria-hidden', true)

  return $footer
}


ResponsiveOverflowTable.prototype.getFixedColumn = function () {
  if (!this.$table.find('tbody tr th:first-child').length) {
    return
  }

  const bgColor = this.$element.closest('[class*="u-bg-"], body').css('background-color')

  const $fixedColumn = $('<div>')
    .addClass('table-responsive-overflow-fixed-column')
    .attr('aria-hidden', true)
    .css('background-color', bgColor)

  const $table = this.$table.clone()

  $table.children('caption, tfoot').remove()
  $table.find('th:not(:first-child),td:not(:first-child)').remove()

  $fixedColumn.append($table)

  return $fixedColumn
}


ResponsiveOverflowTable.prototype.render = function () {
  const $wrapper     = $('<div>').addClass('table-responsive-overflow-wrapper')
  const $scrollable  = $('<div>').addClass('table-responsive-overflow-scrollable')

  $scrollable.append(this.$table)

  // Hack to account for padding bug
  // see: http://stackoverflow.com/questions/10054870/when-a-child-element-overflows-horizontally-why-is-the-right-padding-of-the-par
  $scrollable.find('tbody tr').first()
    .append('<td class=table-responsive-overflow-spacer>&nbsp;</td>')

  $wrapper
    .append($scrollable)
    .append(this.$fixedColumn)

  this.$element.html([this.$caption, $wrapper, this.$footer])
  if (this.$fixedColumn) {
    this.$element.addClass('has-fixed-column')
  }
}

export function init() {
  $(document).on('ready.ui.responsive-overflow-table, init.ui.responsive-overflow-table', () => {
    $('.table-responsive-overflow').each((_i, table) => {
      const $table = $(table)
      const data  = $table.data('ui.responsive-overflow-table')

      if (!data) {
        $table.data('ui.responsive-overflow-table', new ResponsiveOverflowTable(table))
      }
    })
  })
}