[TASK] Record List: Change toggle state with AJAX 52/42952/4
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Tue, 1 Sep 2015 03:52:58 +0000 (05:52 +0200)
committerWouter Wolters <typo3@wouterwolters.nl>
Tue, 1 Sep 2015 15:32:38 +0000 (17:32 +0200)
The tables in the Record List are now toggled by an AJAX call.

Resolves: #69446
Releases: master
Change-Id: I507e0945dc3dc8e8658ae769afedcb9d64a92d26
Reviewed-on: http://review.typo3.org/42952
Reviewed-by: Alexander Opitz <opitz.alexander@googlemail.com>
Tested-by: Alexander Opitz <opitz.alexander@googlemail.com>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
typo3/sysext/recordlist/Classes/RecordList.php
typo3/sysext/recordlist/Classes/RecordList/DatabaseRecordList.php
typo3/sysext/recordlist/Resources/Public/JavaScript/Recordlist.js [new file with mode: 0644]

index 029ab34..7e209f0 100644 (file)
@@ -193,6 +193,7 @@ class RecordList {
                $this->pageRenderer = GeneralUtility::makeInstance(PageRenderer::class);
                $this->pageRenderer->loadJquery();
                $this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Recordlist/FieldSelectBox');
+               $this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Recordlist/Recordlist');
        }
 
        /**
index 16d943b..588967a 100644 (file)
@@ -503,9 +503,8 @@ class DatabaseRecordList extends AbstractDatabaseRecordList {
                // If the count query returned any number of records, we perform the real query,
                // selecting records.
                if ($this->totalItems) {
-                       // Fetch records only if not in single table mode or if in multi table mode and
-                       // not collapsed
-                       if ($listOnlyInSingleTableMode || !$this->table && $tableCollapsed) {
+                       // Fetch records only if not in single table mode
+                       if ($listOnlyInSingleTableMode) {
                                $dbCount = $this->totalItems;
                        } else {
                                // Set the showLimit to the number of records when outputting as CSV
@@ -547,14 +546,13 @@ class DatabaseRecordList extends AbstractDatabaseRecordList {
                                        $icon = $tableCollapsed
                                                ? IconUtility::getSpriteIcon('actions-view-list-expand', array('class' => 'collapseIcon'))
                                                : IconUtility::getSpriteIcon('actions-view-list-collapse', array('class' => 'collapseIcon'));
-                                       $collapseIcon = '<a href="' . $href . '" title="' . $title . '" class="pull-right">' . $icon . '</a>';
+                                       $collapseIcon = '<a href="' . $href . '" title="' . $title . '" class="pull-right t3js-toggle-recordlist" data-table="' . htmlspecialchars($table) . '" data-toggle="collapse" data-target="#recordlist-' . htmlspecialchars($table) . '">' . $icon . '</a>';
                                }
                                $tableHeader .= $theData[$titleCol] . $collapseIcon;
                        }
-                       // Render table rows only if in multi table view and not collapsed or if in
-                       // single table view
+                       // Render table rows only if in multi table view or if in single table view
                        $rowOutput = '';
-                       if (!$listOnlyInSingleTableMode && (!$tableCollapsed || $this->table)) {
+                       if (!$listOnlyInSingleTableMode || $this->table) {
                                // Fixing an order table for sortby tables
                                $this->currentTable = array();
                                $currentIdList = array();
@@ -654,6 +652,10 @@ class DatabaseRecordList extends AbstractDatabaseRecordList {
                                // The header row for the table is now created:
                                $out .= $this->renderListHeader($table, $currentIdList);
                        }
+
+                       $collapseClass = $tableCollapsed && !$this->table ? 'collapse' : 'collapse in';
+                       $dataState = $tableCollapsed && !$this->table ? 'collapsed' : 'expanded';
+
                        // The list of records is added after the header:
                        $out .= $rowOutput;
                        // ... and it is all wrapped in a table:
@@ -668,7 +670,7 @@ class DatabaseRecordList extends AbstractDatabaseRecordList {
                                        <div class="panel-heading">
                                        ' . $tableHeader . '
                                        </div>
-                                       <div class="table-fit">
+                                       <div class="table-fit ' . $collapseClass . '" id="recordlist-' . htmlspecialchars($table) . '" data-state="' . $dataState . '">
                                                <table data-table="' . htmlspecialchars($table) . '" class="table table-striped table-hover' . ($listOnlyInSingleTableMode ? ' typo3-dblist-overview' : '') . '">
                                                        ' . $out . '
                                                </table>
diff --git a/typo3/sysext/recordlist/Resources/Public/JavaScript/Recordlist.js b/typo3/sysext/recordlist/Resources/Public/JavaScript/Recordlist.js
new file mode 100644 (file)
index 0000000..6405161
--- /dev/null
@@ -0,0 +1,61 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+/**
+ * Usability improvements for the record list
+ */
+define('TYPO3/CMS/Recordlist/Recordlist', ['jquery', 'TYPO3/CMS/Backend/Storage'], function($, Storage) {
+       var Recordlist = {
+               identifier: {
+                       toggle: '.t3js-toggle-recordlist'
+               },
+               classes: {
+                       toggleIconState: {
+                               collapsed: 'fa-chevron-down',
+                               expanded: 'fa-chevron-up'
+                       }
+               }
+       };
+
+       Recordlist.initialize = function() {
+               $(document).on('click', Recordlist.identifier.toggle, function(e) {
+                       e.preventDefault();
+
+                       var $me = $(this),
+                               table = $me.data('table'),
+                               $target = $($me.data('target')),
+                               isExpanded = $target.data('state') === 'expanded';
+
+                       $me.find('.t3-icon').toggleClass(Recordlist.classes.toggleIconState.collapsed).toggleClass(Recordlist.classes.toggleIconState.expanded);
+
+                       // Store collapse state in UC
+                       var storedModuleDataList = {};
+
+                       if (Storage.Persistent.isset('moduleData.list')) {
+                               storedModuleDataList = Storage.Persistent.get('moduleData.list');
+                       }
+
+                       var collapseConfig = {};
+                       collapseConfig[table] = isExpanded ? 1 : 0;
+
+                       $.extend(true, storedModuleDataList, collapseConfig);
+                       Storage.Persistent.set('moduleData.list', storedModuleDataList).done(function() {
+                               $target.data('state', isExpanded ? 'collapsed' : 'expanded');
+                       });
+               });
+       };
+
+       $(document).ready(function() {
+               Recordlist.initialize();
+       });
+});
\ No newline at end of file