effective_datatables 4.17.4 → 4.19.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '06189b222bdbaf62e5b823c4f2a86fad63f0864590edde7dad41e1d8c72b7eac'
-  data.tar.gz: 352172976389234dd13d08e6822ef18438683e08dbda77f0f30f57288c173090
+  metadata.gz: d9a3cae1554f2bcf9b6d73f51972eb1f8bc00c38a30d160c7f8910bf6e339a99
+  data.tar.gz: 72193d4f4895fa60a933c6be50d2d5d6a9d32d5d09a7f60558b130c2042eee1a
 SHA512:
-  metadata.gz: 953eb5f1cba86efab0fdcd8ba34de7253a8095dd9481e694eee5399931020b9d026a45066bd9497d07f665db48ae95df67e6859184af557d8fdc4341bd3ca27a
-  data.tar.gz: bf80a017f52a9073f755256bfaf88ba80ce8907a71377625021e16400d2cac1ff3cc1bdc85007ca7678e039506a5b59c168b36df6d377487bd89c61e132e6fd8
+  metadata.gz: 321d799d2a21d4e3d19523ef8ae24d8ae62649bd1656afcc90223b26a77409d00dd8bd80a8f15bd40eb07476ea2b1f4a3eb7500f0f44a4a6b0b98553c873ba1d
+  data.tar.gz: f35dc8eeabe695ded08c56d80d1f09cfb18ac1e9925cf55d43870ac121d357543e085e9fdeb14020f92a52f6419de45712a0a663cb4429029ee3edcd9f29e9b4

data/README.md

@@ -1131,6 +1131,27 @@ Above we have `resources :things` for the 7 crud actions. And we add two more me
 
 Your datatable should now have New, Show, Edit, Approve and Reject buttons. Click them for inline functionality.
 
+## Adding an Ajax member action
+
+To render a member action with an inline datatable:
+
+- Create a "cool_things.html" template and a "_cool_things.html" partial file. Need both.
+
+- The links must be inside an `actions_col` or a `col(:thing, col_class: 'col-actions')` for the javascript to work.
+
+- The action itself just needs to be `data-remote=true`. Try `link_to('Show Cool Things', thing_cool_things_path(thing), 'data-remote': true)`
+
+Make sure the route and permissions are working:
+
+```
+resources :things do
+  get :cool_things, on: :member
+```
+
+and `can?(:cool_things, Thing)`
+
+Good luck.
+
 ## Troubleshooting Inline
 
 If things aren't working, try the following:

data/app/assets/javascripts/dataTables/UPGRADE.md

@@ -0,0 +1,17 @@
+# Upgrade
+
+To upgrade the datatables.net source code:
+
+Visit https://datatables.net/download/
+
+Step 1: Choose Bootstrap4
+Step 2: 
+  Packages: Just DataTables
+  Extensions: Buttons, Column visibility, HTML5 export, Print view, Responsive, RowReorder
+Step 3: Download do not minify or concatenate
+Step 4: Replace existing javascript and css with downloaded
+
+After replacing the existing JS/CSS:
+
+- Consider the buttons.colVis.js and add back the custom sorted functionality
+- Consider the stylesheets/effective_datatables/overrides.bootstrap4.scss

data/app/assets/javascripts/dataTables/buttons/buttons.bootstrap4.js

@@ -1,5 +1,5 @@
 /*! Bootstrap integration for DataTables' Buttons
- * ©2016 SpryMedia Ltd - datatables.net/license
+ * © SpryMedia Ltd - datatables.net/license
  */
 
 (function( factory ){
@@ -11,21 +11,37 @@
 	}
 	else if ( typeof exports === 'object' ) {
 		// CommonJS
-		module.exports = function (root, $) {
-			if ( ! root ) {
-				root = window;
-			}
-
-			if ( ! $ || ! $.fn.dataTable ) {
-				$ = require('datatables.net-bs4')(root, $).$;
+		var jq = require('jquery');
+		var cjsRequires = function (root, $) {
+			if ( ! $.fn.dataTable ) {
+				require('datatables.net-bs4')(root, $);
 			}
 
 			if ( ! $.fn.dataTable.Buttons ) {
 				require('datatables.net-buttons')(root, $);
 			}
-
-			return factory( $, root, root.document );
 		};
+
+		if (typeof window === 'undefined') {
+			module.exports = function (root, $) {
+				if ( ! root ) {
+					// CommonJS environments without a window global must pass a
+					// root. This will give an error otherwise
+					root = window;
+				}
+
+				if ( ! $ ) {
+					$ = jq( root );
+				}
+
+				cjsRequires( root, $ );
+				return factory( $, root, root.document );
+			};
+		}
+		else {
+			cjsRequires( window, jq );
+			module.exports = factory( jq, window, window.document );
+		}
 	}
 	else {
 		// Browser
@@ -35,29 +51,67 @@
 'use strict';
 var DataTable = $.fn.dataTable;
 
-$.extend( true, DataTable.Buttons.defaults, {
+
+
+$.extend(true, DataTable.Buttons.defaults, {
 	dom: {
 		container: {
-			className: 'dt-buttons btn-group'
+			className: 'dt-buttons btn-group flex-wrap'
 		},
 		button: {
-			className: 'btn btn-secondary'
+			className: 'btn btn-secondary',
+			active: 'active'
 		},
 		collection: {
-			tag: 'div',
-			className: 'dt-button-collection dropdown-menu',
+			action: {
+				dropHtml: ''
+			},
+			container: {
+				tag: 'div',
+				className: 'dropdown-menu dt-button-collection'
+			},
+			closeButton: false,
 			button: {
 				tag: 'a',
 				className: 'dt-button dropdown-item',
-				active: 'active',
-				disabled: 'disabled'
+				active: 'dt-button-active',
+				disabled: 'disabled',
+				spacer: {
+					className: 'dropdown-divider',
+					tag: 'hr'
+				}
+			}
+		},
+		split: {
+			action: {
+				tag: 'a',
+				className: 'btn btn-secondary dt-button-split-drop-button',
+				closeButton: false
+			},
+			dropdown: {
+				tag: 'button',
+				dropHtml: '',
+				className:
+					'btn btn-secondary dt-button-split-drop dropdown-toggle dropdown-toggle-split',
+				closeButton: false,
+				align: 'split-left',
+				splitAlignClass: 'dt-button-split-left'
+			},
+			wrapper: {
+				tag: 'div',
+				className: 'dt-button-split btn-group',
+				closeButton: false
 			}
 		}
+	},
+	buttonCreated: function (config, button) {
+		return config.buttons ? $('<div class="btn-group"/>').append(button) : button;
 	}
-} );
+});
 
 DataTable.ext.buttons.collection.className += ' dropdown-toggle';
 DataTable.ext.buttons.collection.rightAlignClassName = 'dropdown-menu-right';
 
-return DataTable.Buttons;
+
+return DataTable;
 }));

data/app/assets/javascripts/dataTables/buttons/buttons.colVis.js

@@ -1,6 +1,6 @@
 /*!
  * Column visibility buttons for Buttons and DataTables.
- * 2016 SpryMedia Ltd - datatables.net/license
+ * © SpryMedia Ltd - datatables.net/license
  */
 
 (function( factory ){
@@ -12,21 +12,37 @@
 	}
 	else if ( typeof exports === 'object' ) {
 		// CommonJS
-		module.exports = function (root, $) {
-			if ( ! root ) {
-				root = window;
-			}
-
-			if ( ! $ || ! $.fn.dataTable ) {
-				$ = require('datatables.net')(root, $).$;
+		var jq = require('jquery');
+		var cjsRequires = function (root, $) {
+			if ( ! $.fn.dataTable ) {
+				require('datatables.net')(root, $);
 			}
 
 			if ( ! $.fn.dataTable.Buttons ) {
 				require('datatables.net-buttons')(root, $);
 			}
-
-			return factory( $, root, root.document );
 		};
+
+		if (typeof window === 'undefined') {
+			module.exports = function (root, $) {
+				if ( ! root ) {
+					// CommonJS environments without a window global must pass a
+					// root. This will give an error otherwise
+					root = window;
+				}
+
+				if ( ! $ ) {
+					$ = jq( root );
+				}
+
+				cjsRequires( root, $ );
+				return factory( $, root, root.document );
+			};
+		}
+		else {
+			cjsRequires( window, jq );
+			module.exports = factory( jq, window, window.document );
+		}
 	}
 	else {
 		// Browser
@@ -37,44 +53,68 @@
 var DataTable = $.fn.dataTable;
 
 
-$.extend( DataTable.ext.buttons, {
+
+$.extend(DataTable.ext.buttons, {
 	// A collection of column visibility buttons
-	colvis: function ( dt, conf ) {
-		return {
+	colvis: function (dt, conf) {
+		var node = null;
+		var buttonConf = {
 			extend: 'collection',
-			text: function ( dt ) {
-				return dt.i18n( 'buttons.colvis', 'Column visibility' );
+			init: function (dt, n) {
+				node = n;
+			},
+			text: function (dt) {
+				return dt.i18n('buttons.colvis', 'Column visibility');
 			},
 			className: 'buttons-colvis',
-			buttons: [ {
-				extend: 'columnsToggle',
-				columns: conf.columns,
-				columnText: conf.columnText
-			} ]
+			closeButton: false,
+			buttons: [
+				{
+					extend: 'columnsToggle',
+					columns: conf.columns,
+					columnText: conf.columnText
+				}
+			]
 		};
+
+		// Rebuild the collection with the new column structure if columns are reordered
+		dt.on('column-reorder.dt' + conf.namespace, function (e, settings, details) {
+			dt.button(null, dt.button(null, node).node()).collectionRebuild([
+				{
+					extend: 'columnsToggle',
+					columns: conf.columns,
+					columnText: conf.columnText
+				}
+			]);
+		});
+
+		return buttonConf;
 	},
 
 	// Selected columns with individual buttons - toggle column visibility
-	columnsToggle: function ( dt, conf ) {
-		var columns = dt.columns( conf.columns ).indexes().map( function ( idx ) {
-			return {
-				extend: 'columnToggle',
-				columns: idx,
-				columnText: conf.columnText
-			};
-		})
-
-    var sorted = columns.sort(function (a, b) {
-      var a = dt.settings()[0].aoColumns[a.columns].sTitle;
-      var b = dt.settings()[0].aoColumns[b.columns].sTitle;
-      return a.localeCompare(b)
-    }).toArray();
-
-    return sorted;
+	columnsToggle: function (dt, conf) {
+		var columns = dt
+			.columns(conf.columns)
+			.indexes()
+			.map(function (idx) {
+				return {
+					extend: 'columnToggle',
+					columns: idx,
+					columnText: conf.columnText
+				};
+			})
+
+		var sorted = columns.sort(function (a, b) {
+			var a = dt.settings()[0].aoColumns[a.columns].sTitle;
+			var b = dt.settings()[0].aoColumns[b.columns].sTitle;
+			return a.localeCompare(b)
+		}).toArray();
+	
+		return sorted;
 	},
 
 	// Single button to toggle column visibility
-	columnToggle: function ( dt, conf ) {
+	columnToggle: function (dt, conf) {
 		return {
 			extend: 'columnVisibility',
 			columns: conf.columns,
@@ -83,15 +123,19 @@ $.extend( DataTable.ext.buttons, {
 	},
 
 	// Selected columns with individual buttons - set column visibility
-	columnsVisibility: function ( dt, conf ) {
-		var columns = dt.columns( conf.columns ).indexes().map( function ( idx ) {
-			return {
-				extend: 'columnVisibility',
-				columns: idx,
-				visibility: conf.visibility,
-				columnText: conf.columnText
-			};
-		} ).toArray();
+	columnsVisibility: function (dt, conf) {
+		var columns = dt
+			.columns(conf.columns)
+			.indexes()
+			.map(function (idx) {
+				return {
+					extend: 'columnVisibility',
+					columns: idx,
+					visibility: conf.visibility,
+					columnText: conf.columnText
+				};
+			})
+			.toArray();
 
 		return columns;
 	},
@@ -99,111 +143,113 @@ $.extend( DataTable.ext.buttons, {
 	// Single button to set column visibility
 	columnVisibility: {
 		columns: undefined, // column selector
-		text: function ( dt, button, conf ) {
-			return conf._columnText( dt, conf );
+		text: function (dt, button, conf) {
+			return conf._columnText(dt, conf);
 		},
 		className: 'buttons-columnVisibility',
-		action: function ( e, dt, button, conf ) {
-			var col = dt.columns( conf.columns );
+		action: function (e, dt, button, conf) {
+			var col = dt.columns(conf.columns);
 			var curr = col.visible();
 
-			col.visible( conf.visibility !== undefined ?
-				conf.visibility :
-				! (curr.length ? curr[0] : false )
+			col.visible(
+				conf.visibility !== undefined ? conf.visibility : !(curr.length ? curr[0] : false)
 			);
 		},
-		init: function ( dt, button, conf ) {
+		init: function (dt, button, conf) {
 			var that = this;
-			button.attr( 'data-cv-idx', conf.columns );
-
-			dt
-				.on( 'column-visibility.dt'+conf.namespace, function (e, settings) {
-					if ( ! settings.bDestroying && settings.nTable == dt.settings()[0].nTable ) {
-						that.active( dt.column( conf.columns ).visible() );
-					}
-				} )
-				.on( 'column-reorder.dt'+conf.namespace, function (e, settings, details) {
-					// Don't rename buttons based on column name if the button
-					// controls more than one column!
-					if ( dt.columns( conf.columns ).count() !== 1 ) {
-						return;
-					}
-
-					conf.columns = $.inArray( conf.columns, details.mapping );
-					button.attr( 'data-cv-idx', conf.columns );
-
-					// Reorder buttons for new table order
-					button
-						.parent()
-						.children('[data-cv-idx]')
-						.sort( function (a, b) {
-							return (a.getAttribute('data-cv-idx')*1) - (b.getAttribute('data-cv-idx')*1);
-						} )
-						.appendTo(button.parent());
-				} );
-
-			this.active( dt.column( conf.columns ).visible() );
+			button.attr('data-cv-idx', conf.columns);
+
+			dt.on('column-visibility.dt' + conf.namespace, function (e, settings) {
+				if (!settings.bDestroying && settings.nTable == dt.settings()[0].nTable) {
+					that.active(dt.column(conf.columns).visible());
+				}
+			}).on('column-reorder.dt' + conf.namespace, function (e, settings, details) {
+				// Button has been removed from the DOM
+				if (conf.destroying) {
+					return;
+				}
+
+				if (dt.columns(conf.columns).count() !== 1) {
+					return;
+				}
+
+				// This button controls the same column index but the text for the column has
+				// changed
+				that.text(conf._columnText(dt, conf));
+
+				// Since its a different column, we need to check its visibility
+				that.active(dt.column(conf.columns).visible());
+			});
+
+			this.active(dt.column(conf.columns).visible());
 		},
-		destroy: function ( dt, button, conf ) {
-			dt
-				.off( 'column-visibility.dt'+conf.namespace )
-				.off( 'column-reorder.dt'+conf.namespace );
+		destroy: function (dt, button, conf) {
+			dt.off('column-visibility.dt' + conf.namespace).off(
+				'column-reorder.dt' + conf.namespace
+			);
 		},
 
-		_columnText: function ( dt, conf ) {
+		_columnText: function (dt, conf) {
 			// Use DataTables' internal data structure until this is presented
 			// is a public API. The other option is to use
 			// `$( column(col).node() ).text()` but the node might not have been
 			// populated when Buttons is constructed.
-			var idx = dt.column( conf.columns ).index();
-			var title = dt.settings()[0].aoColumns[ idx ].sTitle
-				.replace(/\n/g," ")        // remove new lines
-				.replace(/<br\s*\/?>/gi, " ")  // replace line breaks with spaces
-				.replace(/<select(.*?)<\/select>/g, "") // remove select tags, including options text
-				.replace(/<!\-\-.*?\-\->/g, "") // strip HTML comments
-				.replace(/<.*?>/g, "")   // strip HTML
-				.replace(/^\s+|\s+$/g,""); // trim
-
-			return conf.columnText ?
-				conf.columnText( dt, idx, title ) :
-				title;
+			var idx = dt.column(conf.columns).index();
+			var title = dt.settings()[0].aoColumns[idx].sTitle;
+
+			if (!title) {
+				title = dt.column(idx).header().innerHTML;
+			}
+
+			title = title
+				.replace(/\n/g, ' ') // remove new lines
+				.replace(/<br\s*\/?>/gi, ' ') // replace line breaks with spaces
+				.replace(/<select(.*?)<\/select>/g, '') // remove select tags, including options text
+				.replace(/<!\-\-.*?\-\->/g, '') // strip HTML comments
+				.replace(/<.*?>/g, '') // strip HTML
+				.replace(/^\s+|\s+$/g, ''); // trim
+
+			return conf.columnText ? conf.columnText(dt, idx, title) : title;
 		}
 	},
 
-
 	colvisRestore: {
 		className: 'buttons-colvisRestore',
 
-		text: function ( dt ) {
-			return dt.i18n( 'buttons.colvisRestore', 'Restore visibility' );
+		text: function (dt) {
+			return dt.i18n('buttons.colvisRestore', 'Restore visibility');
 		},
 
-		init: function ( dt, button, conf ) {
-			conf._visOriginal = dt.columns().indexes().map( function ( idx ) {
-				return dt.column( idx ).visible();
-			} ).toArray();
+		init: function (dt, button, conf) {
+			conf._visOriginal = dt
+				.columns()
+				.indexes()
+				.map(function (idx) {
+					return dt.column(idx).visible();
+				})
+				.toArray();
 		},
 
-		action: function ( e, dt, button, conf ) {
-			dt.columns().every( function ( i ) {
+		action: function (e, dt, button, conf) {
+			dt.columns().every(function (i) {
 				// Take into account that ColReorder might have disrupted our
 				// indexes
-				var idx = dt.colReorder && dt.colReorder.transpose ?
-					dt.colReorder.transpose( i, 'toOriginal' ) :
-					i;
+				var idx =
+					dt.colReorder && dt.colReorder.transpose
+						? dt.colReorder.transpose(i, 'toOriginal')
+						: i;
 
-				this.visible( conf._visOriginal[ idx ] );
-			} );
+				this.visible(conf._visOriginal[idx]);
+			});
 		}
 	},
 
-
 	colvisGroup: {
 		className: 'buttons-colvisGroup',
 
-		action: function ( e, dt, button, conf ) {
-			dt.columns( conf.show ).visible( true, false );
-			dt.columns( conf.hide ).visible( false, false );
+		action: function (e, dt, button, conf) {
+			dt.columns(conf.show).visible(true, false);
+			dt.columns(conf.hide).visible(false, false);
 
 			dt.columns.adjust();
 		},
@@ -212,8 +258,8 @@ $.extend( DataTable.ext.buttons, {
 
 		hide: []
 	}
-} );
+});
 
 
-return DataTable.Buttons;
+return DataTable;
 }));