7099db386b1f372bd2fc6db24739dcf34ec9f802 WIP: Improvements to dropdow…

…n icon to allow any button to have one Sync to source repo @7099db386b1f372bd2fc6db24739dcf34ec9f802
DataTables · Oct 10, 2024 · 26b37b0 · 26b37b0
1 parent 4f4e658
commit 26b37b0
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 21 deletions.
diff --git a/datatables.json b/datatables.json
@@ -25,5 +25,5 @@
     ],
     "src-repo": "http://github.com/DataTables/Buttons",
     "last-tag": "3.1.2",
-    "last-sync": "70c236b07d2fb7c41887b178e59c10c3258fe9ab"
+    "last-sync": "7099db386b1f372bd2fc6db24739dcf34ec9f802"
 }
diff --git a/js/dataTables.buttons.js b/js/dataTables.buttons.js
@@ -693,15 +693,20 @@ $.extend(Buttons.prototype, {
 				attachTo.push(built);
 			}
 
+			// Any button type can have a drop icon set
+			if (built.conf.dropIcon && ! built.conf.split) {
+				$(built.node)
+					.addClass(this.c.dom.button.dropClass)
+					.append(this.c.dom.button.dropHtml);
+			}
+
 			// Create the dropdown for a collection
 			if (built.conf.buttons) {
 				built.collection = $(
 					'<' + domCollection.container.content.tag + '/>'
 				);
 				built.conf._collection = built.collection;
 
-				$(built.node).append(domCollection.action.dropHtml);
-
 				this._expandButton(
 					built.buttons,
 					built.conf.buttons,
@@ -1006,7 +1011,8 @@ $.extend(Buttons.prototype, {
 					dropdownConf.dropdown.className +
 					' dt-button"></button>'
 			)
-				.html(dropdownConf.dropdown.dropHtml)
+				.html(this.c.dom.button.dropHtml)
+				.addClass(this.c.dom.button.dropClass)
 				.on('click.dtb', function (e) {
 					e.preventDefault();
 					e.stopPropagation();
@@ -2073,10 +2079,6 @@ Buttons.defaults = {
 			className: 'dt-buttons'
 		},
 		collection: {
-			action: {
-				// action button
-				dropHtml: '<span class="dt-button-down-arrow">&#x25BC;</span>'
-			},
 			container: {
 				// The element used for the dropdown
 				className: 'dt-button-collection',
@@ -2102,7 +2104,9 @@ Buttons.defaults = {
 			liner: {
 				tag: 'span',
 				className: ''
-			}
+			},
+			dropClass: '',
+			dropHtml: '<span class="dt-button-down-arrow">&#x25BC;</span>'
 		},
 		split: {
 			action: {
@@ -2114,7 +2118,6 @@ Buttons.defaults = {
 				// button to trigger the dropdown
 				align: 'split-right',
 				className: 'dt-button-split-drop',
-				dropHtml: '<span class="dt-button-down-arrow">&#x25BC;</span>',
 				splitAlignClass: 'dt-button-split-left',
 				tag: 'button'
 			},
@@ -2141,6 +2144,7 @@ $.extend(_dtButtons, {
 		},
 		className: 'buttons-collection',
 		closeButton: false,
+		dropIcon: true,
 		init: function (dt, button) {
 			button.attr('aria-expanded', false);
 		},

diff --git a/js/dataTables.buttons.min.js b/js/dataTables.buttons.min.js
diff --git a/js/dataTables.buttons.min.mjs b/js/dataTables.buttons.min.mjs
diff --git a/js/dataTables.buttons.mjs b/js/dataTables.buttons.mjs
@@ -653,15 +653,20 @@ $.extend(Buttons.prototype, {
 				attachTo.push(built);
 			}
 
+			// Any button type can have a drop icon set
+			if (built.conf.dropIcon && ! built.conf.split) {
+				$(built.node)
+					.addClass(this.c.dom.button.dropClass)
+					.append(this.c.dom.button.dropHtml);
+			}
+
 			// Create the dropdown for a collection
 			if (built.conf.buttons) {
 				built.collection = $(
 					'<' + domCollection.container.content.tag + '/>'
 				);
 				built.conf._collection = built.collection;
 
-				$(built.node).append(domCollection.action.dropHtml);
-
 				this._expandButton(
 					built.buttons,
 					built.conf.buttons,
@@ -966,7 +971,8 @@ $.extend(Buttons.prototype, {
 					dropdownConf.dropdown.className +
 					' dt-button"></button>'
 			)
-				.html(dropdownConf.dropdown.dropHtml)
+				.html(this.c.dom.button.dropHtml)
+				.addClass(this.c.dom.button.dropClass)
 				.on('click.dtb', function (e) {
 					e.preventDefault();
 					e.stopPropagation();
@@ -2033,10 +2039,6 @@ Buttons.defaults = {
 			className: 'dt-buttons'
 		},
 		collection: {
-			action: {
-				// action button
-				dropHtml: '<span class="dt-button-down-arrow">&#x25BC;</span>'
-			},
 			container: {
 				// The element used for the dropdown
 				className: 'dt-button-collection',
@@ -2062,7 +2064,9 @@ Buttons.defaults = {
 			liner: {
 				tag: 'span',
 				className: ''
-			}
+			},
+			dropClass: '',
+			dropHtml: '<span class="dt-button-down-arrow">&#x25BC;</span>'
 		},
 		split: {
 			action: {
@@ -2074,7 +2078,6 @@ Buttons.defaults = {
 				// button to trigger the dropdown
 				align: 'split-right',
 				className: 'dt-button-split-drop',
-				dropHtml: '<span class="dt-button-down-arrow">&#x25BC;</span>',
 				splitAlignClass: 'dt-button-split-left',
 				tag: 'button'
 			},
@@ -2101,6 +2104,7 @@ $.extend(_dtButtons, {
 		},
 		className: 'buttons-collection',
 		closeButton: false,
+		dropIcon: true,
 		init: function (dt, button) {
 			button.attr('aria-expanded', false);
 		},