effective_datatables 4.2.0 → 4.3.0

data/app/assets/javascripts/dataTables/responsive/dataTables.responsive.js

@@ -1,15 +1,15 @@
-/*! Responsive 2.2.1
- * 2014-2017 SpryMedia Ltd - datatables.net/license
+/*! Responsive 2.2.2
+ * 2014-2018 SpryMedia Ltd - datatables.net/license
  */
 
 /**
  * @summary     Responsive
  * @description Responsive tables plug-in for DataTables
- * @version     2.2.1
+ * @version     2.2.2
  * @file        dataTables.responsive.js
  * @author      SpryMedia Ltd (www.sprymedia.co.uk)
  * @contact     www.sprymedia.co.uk/contact
- * @copyright   Copyright 2014-2017 SpryMedia Ltd.
+ * @copyright   Copyright 2014-2018 SpryMedia Ltd.
  *
  * This source file is free software, available under the following license:
  *   MIT license - http://datatables.net/license/mit
@@ -208,12 +208,21 @@ $.extend( Responsive.prototype, {
 
 			// DataTables will trigger this event on every column it shows and
 			// hides individually
-			dt.on( 'column-visibility.dtr', function (e, ctx, col, vis, recalc) {
-				if ( recalc ) {
+			dt.on( 'column-visibility.dtr', function () {
+				// Use a small debounce to allow multiple columns to be set together
+				if ( that._timer ) {
+					clearTimeout( that._timer );
+				}
+
+				that._timer = setTimeout( function () {
+					that._timer = null;
+
 					that._classLogic();
 					that._resizeAuto();
 					that._resize();
-				}
+
+					that._redrawChildren();
+				}, 100 );
 			} );
 
 			// Redraw the details box on each draw which will happen if the data
@@ -316,7 +325,10 @@ $.extend( Responsive.prototype, {
 		// Class logic - determine which columns are in this breakpoint based
 		// on the classes. If no class control (i.e. `auto`) then `-` is used
 		// to indicate this to the rest of the function
-		var display = $.map( columns, function ( col ) {
+		var display = $.map( columns, function ( col, i ) {
+			if ( dt.column(i).visible() === false ) {
+				return 'not-visible';
+			}
 			return col.auto && col.minWidth === null ?
 				false :
 				col.auto === true ?
@@ -384,7 +396,7 @@ $.extend( Responsive.prototype, {
 		var showControl = false;
 
 		for ( i=0, ien=columns.length ; i<ien ; i++ ) {
-			if ( ! columns[i].control && ! columns[i].never && ! display[i] ) {
+			if ( ! columns[i].control && ! columns[i].never && display[i] === false ) {
 				showControl = true;
 				break;
 			}
@@ -394,6 +406,11 @@ $.extend( Responsive.prototype, {
 			if ( columns[i].control ) {
 				display[i] = showControl;
 			}
+
+			// Replace not visible string with false from the control column detection above
+			if ( display[i] === 'not-visible' ) {
+				display[i] = false;
+			}
 		}
 
 		// Finally we need to make sure that there is at least one column that
@@ -758,7 +775,7 @@ $.extend( Responsive.prototype, {
 		// any columns that are not visible but can be shown
 		var collapsedClass = false;
 		for ( i=0, ien=columns.length ; i<ien ; i++ ) {
-			if ( columnsVis[i] === false && ! columns[i].never && ! columns[i].control ) {
+			if ( columnsVis[i] === false && ! columns[i].never && ! columns[i].control && ! dt.column(i).visible() === false ) {
 				collapsedClass = true;
 				break;
 			}
@@ -885,6 +902,10 @@ $.extend( Responsive.prototype, {
 		// clears the chcecked state of the original radio.
 		$( clonedTable ).find( '[name]' ).removeAttr( 'name' );
 
+		// A position absolute table would take the table out of the flow of
+		// our container element, bypassing the height and width (Scroller)
+		$( clonedTable ).css( 'position', 'relative' )
+
 		var inserted = $('<div/>')
 			.css( {
 				width: 1,
@@ -953,19 +974,22 @@ $.extend( Responsive.prototype, {
 
 		cells.filter( '[data-dtr-keyboard]' ).removeData( '[data-dtr-keyboard]' );
 
-		var selector = typeof target === 'number' ?
-			':eq('+target+')' :
-			target;
-
-		// This is a bit of a hack - we need to limit the selected nodes to just
-		// those of this table
-		if ( selector === 'td:first-child, th:first-child' ) {
-			selector = '>td:first-child, >th:first-child';
+		if ( typeof target === 'number' ) {
+			dt.cells( null, target, { page: 'current' } ).nodes().to$()
+				.attr( 'tabIndex', ctx.iTabIndex )
+				.data( 'dtr-keyboard', 1 );
 		}
+		else {
+			// This is a bit of a hack - we need to limit the selected nodes to just
+			// those of this table
+			if ( target === 'td:first-child, th:first-child' ) {
+				target = '>td:first-child, >th:first-child';
+			}
 
-		$( selector, dt.rows( { page: 'current' } ).nodes() )
-			.attr( 'tabIndex', ctx.iTabIndex )
-			.data( 'dtr-keyboard', 1 );
+			$( target, dt.rows( { page: 'current' } ).nodes() )
+				.attr( 'tabIndex', ctx.iTabIndex )
+				.data( 'dtr-keyboard', 1 );
+		}
 	}
 } );
 
@@ -1338,7 +1362,7 @@ Api.registerPlural( 'columns().responsiveHidden()', 'column().responsiveHidden()
  * @name Responsive.version
  * @static
  */
-Responsive.version = '2.2.1';
+Responsive.version = '2.2.2';
 
 
 $.fn.dataTable.Responsive = Responsive;

data/app/assets/javascripts/effective_datatables.js

@@ -15,6 +15,7 @@
 //= require effective_datatables/bulk_actions
 //= require effective_datatables/events
 //= require effective_datatables/filters
+//= require effective_datatables/inline_crud
 //= require effective_datatables/reset
 //= require effective_datatables/responsive
 //= require effective_datatables/overrides

data/app/assets/javascripts/effective_datatables/bulk_actions.js.coffee

@@ -1,50 +1,65 @@
 #### Checkbox toggling and Bulk Actions dropdown disabling
 
-$(document).on 'change', "input[data-role='bulk-actions-resource']", (event) ->
+$(document).on 'change', ".dataTables_wrapper input[data-role='bulk-action']", (event) ->
   $wrapper = $(event.currentTarget).closest('.dataTables_wrapper')
 
-  $wrapper.find("input[data-role='bulk-actions-all']").prop('checked', false)
-  toggleClosestBulkActionsButton($wrapper)
+  $wrapper.find("input[data-role='bulk-actions']").prop('checked', false)
+  toggleDropdown($wrapper)
 
-$(document).on 'change', "input[data-role='bulk-actions-all']", (event) ->
+$(document).on 'change', ".dataTables_wrapper input[data-role='bulk-actions']", (event) ->
   $wrapper = $(event.currentTarget).closest('.dataTables_wrapper')
-  $resources = $wrapper.find("input[data-role='bulk-actions-resource']")
+  $resources = $wrapper.find("input[data-role='bulk-action']")
 
   if $(event.currentTarget).is(':checked')
     $resources.prop('checked', true)
   else
     $resources.prop('checked', false)
 
-  toggleClosestBulkActionsButton($wrapper)
+  toggleDropdown($wrapper)
 
-toggleClosestBulkActionsButton = ($wrapper) ->
+toggleDropdown = ($wrapper) ->
   $bulkActions = $wrapper.children().first().find('.buttons-bulk-actions').children('button')
 
-  if $wrapper.find("input[data-role='bulk-actions-resource']:checked").length > 0
+  if $wrapper.find("input[data-role='bulk-action']:checked").length > 0
     $bulkActions.removeAttr('disabled')
   else
     $bulkActions.attr('disabled', 'disabled')
 
+restoreSelected = ($table, selected) ->
+  $bulkActions = $table.closest('.dataTables_wrapper').children().first().find('.buttons-bulk-actions').children('button')
+  present = false
+
+  if selected && selected.length > 0
+    $table.find("input[data-role='bulk-action']").each (_, input) ->
+      $input = $(input)
+
+      if selected.indexOf($input.val()) > -1
+        $input.prop('checked', true)
+        present = true
+      else
+        $input.prop('checked', false)
+
+  if present then $bulkActions.removeAttr('disabled') else $bulkActions.attr('disabled', 'disabled')
 
 #### Bulk Action link behaviour
-$(document).on 'click', '.buttons-bulk-actions a', (event) ->
+$(document).on 'click', '.dataTables_wrapper .buttons-bulk-actions a', (event) ->
   event.preventDefault() # prevent the click
 
   $bulkAction = $(event.currentTarget)  # This is a regular <a href=...> tag
   $wrapper = $bulkAction.closest('.dataTables_wrapper')
   $table = $wrapper.find('table.dataTable').first()
   $processing = $table.siblings('.dataTables_processing').first()
-  $selected = $table.find("input[data-role='bulk-actions-resource']:checked")
+  $selected = $table.find("input[data-role='bulk-action']:checked")
 
   url = $bulkAction.attr('href')
   title = $bulkAction.text()
   token = $bulkAction.parent('li').data('authenticity-token')
   values = $.map($selected, (input) -> input.getAttribute('value'))
-  get_link = $bulkAction.data('bulk-actions-get')
+  method = $bulkAction.data('ajax-method')
 
   return unless url && values
 
-  if get_link
+  if method == 'GET'
     if url.includes('?')
       window.location.assign(url + '&' + $.param({ids: values}))
     else
@@ -55,8 +70,7 @@ $(document).on 'click', '.buttons-bulk-actions a', (event) ->
   # Disable the Bulk Actions dropdown, so only one can be run at a time
   $bulkAction.closest('button').attr('disabled', 'disabled')
 
-  # Show Processing...
-  $processing.show().data('bulk-actions-processing', true)
+  $table.dataTable().data('bulk-actions-restore-selected-values', values)
 
   if token # This is a file download
     $.fileDownload(url,
@@ -64,43 +78,28 @@ $(document).on 'click', '.buttons-bulk-actions a', (event) ->
       data: { ids: values, authenticity_token: token }
       successCallback: ->
         success = "Successfully completed #{title} bulk action"
-        $processing.html(success)
-        $table.dataTable().data('bulk-actions-restore-selected-values', values)
+        $table.one 'draw.dt', (e) -> $(e.target).DataTable().flash(success)
         $table.DataTable().draw()
       failCallback: ->
         error = "An error occured while attempting #{title} bulk action"
-        $processing.html(error)
-        alert(error)
-        $table.dataTable().data('bulk-actions-restore-selected-values', values)
+        $table.one 'draw.dt', (e) -> $(e.target).DataTable().flash(error)
         $table.DataTable().draw()
     )
   else # Normal AJAX post
-    $.post(
-      url, { ids: values }
+    $table.dataTable().data('bulk-actions-restore-selected-values', values)
+
+    $.ajax(
+      method: method,
+      url: url,
+      data: { ids: values }
     ).done((response) ->
       success = response['message'] || "Successfully completed #{title} bulk action"
-      $processing.html(success)
+      $table.one 'draw.dt', (e) -> $(e.target).DataTable().flash(success) and restoreSelected($(e.target), values)
+
     ).fail((response) ->
       error = response['message'] || "An error occured while attempting #{title} bulk action: #{response.statusText}"
-      $processing.html(error)
-      alert(error)
+      $table.one 'draw.dt', (e) -> $(e.target).DataTable().flash(error) and restoreSelected($(e.target), values)
+
     ).always((response) ->
-      $table.dataTable().data('bulk-actions-restore-selected-values', values)
       $table.DataTable().draw()
     )
-
-# We borrow the Processing div for our bulk action success/error messages
-# This makes sure that the message is displayed for 1500ms
-$(document).on 'processing.dt', (event, settings, visible) ->
-  return if settings.bDestroying
-
-  $processing = $(event.target).siblings('.dataTables_processing').first()
-  return unless $processing.data('bulk-actions-processing')
-
-  timeout = $processing.show().data('timeout')
-  clearTimeout(timeout) if timeout
-  $processing.data('timeout', setTimeout( =>
-      $processing.html('Processing...').hide()
-      $processing.data('bulk-actions-processing', null)
-    , 1500)
-  )

data/app/assets/javascripts/effective_datatables/events.js.coffee

@@ -14,7 +14,7 @@ $(document).on 'column-visibility.dt', (event, settings, index, state) ->
   true
 
 # Remove empty label (bulk actions) from ColVis dropdown
-$(document).on 'click', 'a.buttons-colvis:not(.initialized)', (event) ->
+$(document).on 'click', '.dataTables_wrapper a.buttons-colvis:not(.initialized)', (event) ->
   $colvis = $('.dt-button-collection')
   return if $colvis.length == 0
 

data/app/assets/javascripts/effective_datatables/filters.js.coffee

@@ -1,4 +1,4 @@
-$(document).on 'click', 'a[data-apply-effective-datatables-filters]', (event) ->
+$(document).on 'click', '.dataTables_wrapper a[data-apply-effective-datatables-filters]', (event) ->
   event.preventDefault()
   $form = $(event.currentTarget).closest('.effective-datatables-filters')
   $table = $('#' + $form.attr('aria-controls'))

data/app/assets/javascripts/effective_datatables/initialize.js.coffee

@@ -1,7 +1,5 @@
 initializeDataTables = ->
-  $('table.effective-datatable').each ->
-    return if $.fn.DataTable.fnIsDataTable(this)
-
+  $('table.effective-datatable:not(.initialized)').each ->
     datatable = $(this)
     options = datatable.data('options') || {}
     buttons_export_columns = options['buttons_export_columns'] || ':not(.col-actions)'
@@ -78,8 +76,7 @@ initializeDataTables = ->
       scrollCollapse: true
       pagingType: 'simple_numbers'
       initComplete: (settings) ->
-        initializeReset(this.api())
-        initializeBulkActions(this.api())
+        initializeButtons(this.api())
         initializeSearch(this.api())
       drawCallback: (settings) ->
         $table = $(this.api().table().node())
@@ -95,36 +92,16 @@ initializeDataTables = ->
           if settings['json']['charts']
             drawCharts($table, settings['json']['charts'])
 
-        drawBulkActions($table)
-
     # Copies the bulk actions html, stored in a data attribute on the table, into the buttons area
-    initializeBulkActions = (api) ->
-      $table = $(api.table().node())
-
-      if $table.data('bulk-actions')
-        $table.closest('.dataTables_wrapper').children().first().find('.dt-buttons').prepend($table.data('bulk-actions'))
-
-    initializeReset = (api) ->
+    initializeButtons = (api) ->
       $table = $(api.table().node())
+      $buttons = $table.closest('.dataTables_wrapper').children().first().find('.dt-buttons')
 
       if $table.data('reset')
-        $table.closest('.dataTables_wrapper').children().first().find('.dt-buttons').prepend($table.data('reset'))
+        $buttons.prepend($table.data('reset'))
 
-    # After we perform a bulk action, we have to re-select the checkboxes manually and do a bit of house keeping
-    drawBulkActions = ($table) ->
-      selected = $table.data('bulk-actions-restore-selected-values')
-
-      $bulkActions = $table.closest('.dataTables_wrapper').children().first().find('.buttons-bulk-actions').children('button')
-
-      if selected && selected.length > 0
-        $table.find("input[data-role='bulk-actions-resource']").each (_, input) ->
-          $input = $(input)
-          $input.prop('checked', selected.indexOf($input.val()) > -1)
-
-        $bulkActions.removeAttr('disabled')
-        $table.data('bulk-actions-restore-selected-values', [])
-      else
-        $bulkActions.attr('disabled', 'disabled')
+      if $table.data('bulk-actions')
+        $buttons.prepend($table.data('bulk-actions'))
 
     drawAggregates = ($table, aggregates) ->
       $tfoot = $table.find('tfoot').first()
@@ -187,10 +164,11 @@ initializeDataTables = ->
     # Apply EffectiveFormInputs to the Show x per page dropdown
     try table.closest('.dataTables_wrapper').find('.dataTables_length select').removeAttr('name').select2(minimumResultsForSearch: 100)
 
+    table.addClass('initialized')
+
 destroyDataTables = ->
-  $('table.effective-datatable').each ->
-    if $.fn.DataTable.fnIsDataTable(this)
-      $(this).DataTable().destroy()
+  $('.effective-datatables-inline-expanded').removeClass('effective-datatables-inline-expanded')
+  $('table.effective-datatable').each -> $(this).DataTable().turboDestroy()
 
 $ -> initializeDataTables()
 $(document).on 'page:change', -> initializeDataTables()

data/app/assets/javascripts/effective_datatables/inline_crud.js.coffee

@@ -0,0 +1,158 @@
+# To achieve inline crud, we use rails' data-remote links, and override their behaviour when inside a datatable
+# This works with EffectiveForm.remote_form which is part of the effective_bootstrap gem.
+
+# About to do a resource action, or fetch a partial. Show loading.
+$(document).on 'ajax:beforeSend', '.dataTables_wrapper', (e) ->
+  $action = $(e.target)
+
+  if $action.closest('.effective-datatables-inline-row').length > 0
+    # Nothing. This is a save action from within the inline form.
+  else if $action.closest('tr').parent().prop('tagName') == 'THEAD'
+    beforeNew($action)
+  else
+    beforeEdit($action)
+
+  true
+
+# We have either completed the resource action, or fetched the inline form to load.
+$(document).on 'ajax:success', '.dataTables_wrapper', (e) ->
+  $action = $(e.target)
+
+  if ($action.data('method') || 'get') == 'get'
+    if $action.closest('tr').parent().prop('tagName') == 'THEAD' then afterNew($action) else afterEdit($action)
+  else
+    afterAction($action)
+
+  EffectiveForm.remote_form_payload = ''
+  EffectiveForm.remote_form_flash = ''
+  true
+
+# The inline form has been submitted successfully
+$(document).on '.dataTables_wrapper effective-form:success', (event, flash) ->
+  $tr = $(event.target).closest('tr')
+  $table = $tr.closest('table')
+
+  if $tr.hasClass('effective-datatables-new-resource')
+    $table.DataTable().flash(flash || 'Item created').draw()
+    $tr.fadeOut('slow')
+
+    $actions = $table.children('thead').find('th.col-actions')
+    $actions.children('svg').remove()
+    $actions.children('a').fadeIn()
+  else
+    $table.DataTable().flash(flash || 'Item updated').draw()
+    $tr.fadeOut('slow')
+
+# There was an error completing something
+$(document).on 'ajax:error', '.dataTables_wrapper', (e) ->
+  $action = $(e.target)
+  $table = $action.closest('table')
+  $table.DataTable().flash('Error: unable to ' + ($action.attr('title') || 'complete action')).draw()
+
+beforeNew = ($action) ->
+  $table = $action.closest('table')
+  $th = $action.closest('th')
+
+  # Hide New Button
+  $th.children('a').hide()
+
+  # Append spinner and show Processing
+  $th.append($table.data('spinner'))
+  $table.DataTable().flash()
+  $table.one 'draw.dt', (event) -> $th.find('a').show().siblings('svg').remove()
+
+afterNew = ($action) ->
+  $tr = $action.closest('tr')
+  $table = $tr.closest('table')
+  $action.siblings('svg').remove()
+
+  html = buildRow($tr.children('th').length, EffectiveForm.remote_form_payload)
+
+  $tr = $("<tr class='effective-datatables-inline-row effective-datatables-new-resource' role='row'>#{html}</tr>")
+  $table.children('tbody').prepend($tr)
+
+  expand($table)
+  $tr.find('form').attr('data-remote', true).trigger('effective-bootstrap:initialize')
+  $tr.hide().fadeIn()
+
+beforeEdit = ($action) ->
+  $table = $action.closest('table')
+  $td = $action.closest('td')
+
+  # Hide dropdown
+  $td.find('.dropdown-toggle').dropdown('toggle')
+  $td.children('.btn-group').hide()
+  $td.children('a').hide()
+
+  # Append spinner and show Processing
+  $td.append($table.data('spinner'))
+  $table.DataTable().flash()
+
+afterEdit = ($action) ->
+  $tr = $action.closest('tr')
+  $table = $tr.closest('table')
+  $tr.data('inline-form-original-html', $tr.html())
+
+  html = buildRow($tr.children('td').length, EffectiveForm.remote_form_payload)
+
+  $tr.html(html)
+  $tr.addClass('effective-datatables-inline-row')
+
+  expand($table)
+  $tr.find('form').attr('data-remote', true).trigger('effective-bootstrap:initialize')
+  $tr.hide().fadeIn()
+
+# This is when one of the resource actions completes
+afterAction = ($action) ->
+  $table = $action.closest('table')
+  $table.DataTable().flash('Successful ' + $action.attr('title')).draw()
+
+buildRow = (length, payload) ->
+  "<td class='col-inline-form' colspan='#{length-1}'><div class='container'>#{payload}</div></td>" +
+  "<td class='col-actions col-actions-inline-form'>" +
+    "<a href='#' class='btn btn-outline-primary' title='Cancel' data-role='inline-form-cancel'>Cancel</a>" +
+  "</td>"
+
+expand = ($table) ->
+  $wrapper = $table.closest('.dataTables_wrapper').addClass('effective-datatables-inline-expanded')
+  $table.one 'draw.dt', (event) -> $wrapper.removeClass('effective-datatables-inline-expanded')
+
+cancel = ($table) ->
+  $wrapper = $table.closest('.dataTables_wrapper')
+  $wrapper.removeClass('effective-datatables-inline-expanded') if $wrapper.find('.effective-datatables-inline-row').length == 0
+
+# Cancel button clicked. Blow away new tr, or restore edit tr
+# No data will have changed at this point
+$(document).on 'click', ".dataTables_wrapper a[data-role='inline-form-cancel']", (event) ->
+  $tr = $(event.currentTarget).closest('tr')
+
+  if $tr.hasClass('effective-datatables-new-resource')
+    $tr.fadeOut('slow', ->
+      $table = $(this).closest('table')
+
+      $actions = $table.children('thead').find('th.col-actions')
+      $actions.children('svg').remove()
+      $actions.children('a').fadeIn()
+
+      $(this).remove()
+      cancel($table)
+    )
+  else
+    $tr.fadeOut('slow', ->
+      $table = $(this).closest('table')
+      $tr.html($tr.data('inline-form-original-html'))
+
+      $td = $tr.children('.col-actions').first()
+      $td.children('svg').remove()
+
+      $td.find('.dropdown-toggle').dropdown('toggle')
+      $td.children('.btn-group').show()
+      $td.children('a').show()
+
+      $tr.removeClass('effective-datatables-inline-row').fadeIn()
+      cancel($table)
+    )
+
+  false
+
+