[TASK] Add "select all" to EXT:recycler

Re-add the "select all" toggle to select all records on a page.
The action buttons are moved to the right to match the common style
of the backend.

Resolves: #66941
Releases: master
Change-Id: I17cf35bcc9a0c48a4df26d9c0753a80a07a11f83
Reviewed-on: http://review.typo3.org/39742


Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>

typo3/sysext/recycler/Resources/Private/Partials/RecordsTable/DeletedRecord.html

 <tr data-uid="{record.uid}" data-table="{record.table}" data-recordtitle="{record.title}">
-	<td>
+	<td nowrap="nowrap">{record.tableTitle}</td>
+	<td nowrap="nowrap"><f:format.html>{record.icon}</f:format.html> {record.title}</td>
+	<td nowrap="nowrap">{record.tstamp}</td>
+	<td nowrap="nowrap">{record.uid}</td>
+	<td nowrap="nowrap">{record.pageTitle} ({record.pid})</td>
+	<td nowrap="nowrap" class="text-right">
 		<div class="btn-group">
-			<label class="btn btn-default btn-checkbox">
-				<input type="checkbox">
-				<span class="t3-icon fa"></span>
-			</label>
 			<a class="btn btn-default" data-action="expand" data-toggle="collapse" data-target="#{record.table}_{record.uid}">
 				<f:be.buttons.icon icon="apps-pagetree-collapse" title="{f:translate(key: 'LLL:EXT:recycler/Resources/Private/Language/locallang.xlf:button.expand')}" />
 			</a>
@@ -16,13 +17,12 @@
 					<f:be.buttons.icon icon="actions-edit-delete" title="{f:translate(key: 'LLL:EXT:recycler/Resources/Private/Language/locallang.xlf:button.delete')}" />
 				</a>
 			</f:if>
+			<label class="btn btn-default btn-checkbox">
+				<input type="checkbox">
+				<span class="t3-icon fa"></span>
+			</label>
 		</div>
 	</td>
-	<td>{record.tableTitle}</td>
-	<td><f:format.html>{record.icon}</f:format.html> {record.title}</td>
-	<td>{record.tstamp}</td>
-	<td>{record.uid}</td>
-	<td>{record.pageTitle} ({record.pid})</td>
 </tr>
 <tr class="collapse" id="{record.table}_{record.uid}">
 	<td colspan="6">

typo3/sysext/recycler/Resources/Private/Templates/RecyclerModule/Index.html

@@ -23,22 +23,22 @@
 			</select>
 			<select name="pages" class="form-control"></select>
 		</form>
-		<div class="table-fit">
-			<table class="table table-hover" id="itemsInRecycler">
-				<thead>
-					<tr>
-						<th><f:translate key="table.header.actions" /></th>
-						<th><f:translate key="table.header.recordtype" /></th>
-						<th><f:translate key="table.header.record" /></th>
-						<th><f:translate key="table.header.tstamp" /></th>
-						<th><f:translate key="table.header.uid" /></th>
-						<th><f:translate key="table.header.pid" /></th>
-					</tr>
-				</thead>
-				<tbody>
-				</tbody>
-			</table>
-		</div>
+		<table class="table table-hover" id="itemsInRecycler">
+			<thead>
+				<tr>
+					<th><f:translate key="table.header.recordtype" /></th>
+					<th><f:translate key="table.header.record" /></th>
+					<th><f:translate key="table.header.tstamp" /></th>
+					<th><f:translate key="table.header.uid" /></th>
+					<th><f:translate key="table.header.pid" /></th>
+					<th class="text-right">
+						<button type="button" class="btn btn-default t3js-toggle-all"><span class="t3-icon fa fa-check-square-o"></span></button>
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+			</tbody>
+		</table>
 		<div class="text-right">
 			<button class="btn btn-success disabled" data-action="massundo"><f:translate key="button.undo" /></button>
 			<f:if condition="{allowDelete}">

typo3/sysext/recycler/Resources/Public/JavaScript/Recycler.js

@@ -26,7 +26,8 @@ define(['jquery', 'nprogress', 'TYPO3/CMS/Backend/jquery.clearable'], function($
 			paginator: '#recycler-index nav',
 			reloadAction: 'a[data-action=reload]',
 			massUndo: 'button[data-action=massundo]',
-			massDelete: 'button[data-action=massdelete]'
+			massDelete: 'button[data-action=massdelete]',
+			toggleAll: '.t3js-toggle-all'
 		},
 		elements: {}, // filled in getElements()
 		paging: {
@@ -35,7 +36,8 @@ define(['jquery', 'nprogress', 'TYPO3/CMS/Backend/jquery.clearable'], function($
 			totalItems: 0,
 			itemsPerPage: 20
 		},
-		markedRecordsForMassAction: []
+		markedRecordsForMassAction: [],
+		allToggled: false
 	};
 
 	/**
@@ -53,7 +55,8 @@ define(['jquery', 'nprogress', 'TYPO3/CMS/Backend/jquery.clearable'], function($
 			$paginator: $(Recycler.identifiers.paginator),
 			$reloadAction: $(Recycler.identifiers.reloadAction),
 			$massUndo: $(Recycler.identifiers.massUndo),
-			$massDelete: $(Recycler.identifiers.massDelete)
+			$massDelete: $(Recycler.identifiers.massDelete),
+			$toggleAll: $(Recycler.identifiers.toggleAll)
 		};
 	};
 
@@ -170,7 +173,11 @@ define(['jquery', 'nprogress', 'TYPO3/CMS/Backend/jquery.clearable'], function($
 		});
 
 		// checkboxes in the table
-		Recycler.elements.$recyclerTable.on('click', 'tr input[type=checkbox]', Recycler.handleCheckboxSelects);
+		Recycler.elements.$toggleAll.on('click', function() {
+			Recycler.allToggled = !Recycler.allToggled;
+			$('input[type="checkbox"]').prop('checked', Recycler.allToggled).trigger('change');
+		});
+		Recycler.elements.$recyclerTable.on('change', 'tr input[type=checkbox]', Recycler.handleCheckboxSelects);
 
 		Recycler.elements.$massUndo.on('click', Recycler.undoRecord);
 		Recycler.elements.$massDelete.on('click', Recycler.deleteRecord);