bootstrap-table/src/extensions/mobile/bootstrap-table-mobile.js

An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation)

/**
 * @author: Dennis Hernández
 * @webSite: http://djhvscf.github.io/Blog
 * @update zhixin wen <wenzhixin2010@gmail.com>
 */

const debounce = (func, wait) => {
  let timeout = 0
  return (...args) => {
    const later = () => {
      timeout = 0
      func(...args)
    }
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
  }
}

$.extend($.fn.bootstrapTable.defaults, {
  mobileResponsive: false,
  minWidth: 562,
  minHeight: undefined,
  heightThreshold: 100, // just slightly larger than mobile chrome's auto-hiding toolbar
  checkOnInit: true,
  columnsHidden: []
})

$.BootstrapTable = class extends $.BootstrapTable {
  init (...args) {
    super.init(...args)

    if (!this.options.mobileResponsive || !this.options.minWidth) {
      return
    }

    if (this.options.minWidth < 100 && this.options.resizable) {
      console.info('The minWidth when the resizable extension is active should be greater or equal than 100')
      this.options.minWidth = 100
    }

    let old = {
      width: $(window).width(),
      height: $(window).height()
    }

    $(window).on('resize orientationchange', debounce(() => {
      // reset view if height has only changed by at least the threshold.
      const width = $(window).width()
      const height = $(window).height()
      const $activeElement = $(document.activeElement)

      if ($activeElement.length && ['INPUT', 'SELECT', 'TEXTAREA'].includes($activeElement.prop('nodeName'))) {
        return
      }

      if (
        Math.abs(old.height - height) > this.options.heightThreshold ||
        old.width !== width
      ) {
        this.changeView(width, height)
        old = {
          width,
          height
        }
      }
    }, 200))

    if (this.options.checkOnInit) {
      const width = $(window).width()
      const height = $(window).height()
      this.changeView(width, height)
      old = {
        width,
        height
      }
    }
  }

  conditionCardView () {
    this.changeTableView(false)
    this.showHideColumns(false)
  }

  conditionFullView () {
    this.changeTableView(true)
    this.showHideColumns(true)
  }

  changeTableView (cardViewState) {
    this.options.cardView = cardViewState
    this.toggleView()
  }

  showHideColumns (checked) {
    if (this.options.columnsHidden.length > 0) {
      this.columns.forEach(column => {
        if (this.options.columnsHidden.includes(column.field)) {
          if (column.visible !== checked) {
            this._toggleColumn(this.fieldsColumnsIndex[column.field], checked, true)
          }
        }
      })
    }
  }

  changeView (width, height) {
    if (this.options.minHeight) {
      if ((width <= this.options.minWidth) && (height <= this.options.minHeight)) {
        this.conditionCardView()
      } else if ((width > this.options.minWidth) && (height > this.options.minHeight)) {
        this.conditionFullView()
      }
    } else {
      if (width <= this.options.minWidth) {
        this.conditionCardView()
      } else if (width > this.options.minWidth) {
        this.conditionFullView()
      }
    }

    this.resetView()
  }
}