[TASK] Rewrite "Show hidden content elements" to JavaScript 40/40740/12
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Tue, 30 Jun 2015 06:25:20 +0000 (08:25 +0200)
committerMarkus Klein <markus.klein@typo3.org>
Mon, 6 Jul 2015 18:49:03 +0000 (20:49 +0200)
This patch refactors the "Page" module to always render hidden records.
If the "Show hidden content elements" checkbox is set,
the hidden elements are removed by JavaScript.

This functionality is NOT ported to QuickEdit, as this part needs
further refactoring.

Resolves: #67831
Releases: master
Change-Id: I5396a8c3ef8b3b11220c168c38aadf326bea38a8
Reviewed-on: http://review.typo3.org/40740
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>
typo3/sysext/backend/Classes/Controller/PageLayoutController.php
typo3/sysext/backend/Classes/View/PageLayoutView.php
typo3/sysext/backend/Resources/Public/JavaScript/PageActions.js
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_spinner.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index cd03409..5528164 100644 (file)
@@ -911,11 +911,11 @@ class PageLayoutController {
                $q_count = $this->getNumberOfHiddenElements();
 
                $h_func_b = '<div class="checkbox">' .
-                       '<label for="checkTt_content_showHidden">' .
-                       BackendUtility::getFuncCheck($this->id, 'SET[tt_content_showHidden]', $this->MOD_SETTINGS['tt_content_showHidden'], '', '', 'id="checkTt_content_showHidden"') .
-                       (!$q_count ? ('<span class="text-muted">' . $lang->getLL('hiddenCE', TRUE) . '</span>') : $lang->getLL('hiddenCE', TRUE) . ' (' . $q_count . ')') .
-                       '</label>' .
-                       '</div>';
+                                       '<label for="checkTt_content_showHidden">' .
+                                       BackendUtility::getFuncCheck($this->id, 'SET[tt_content_showHidden]', $this->MOD_SETTINGS['tt_content_showHidden'], '', '', 'id="checkTt_content_showHidden"') .
+                                       (!$q_count ? ('<span class="text-muted">' . $lang->getLL('hiddenCE', TRUE) . '</span>') : $lang->getLL('hiddenCE', TRUE) . ' (' . $q_count . ')') .
+                                       '</label>' .
+                                       '</div>';
 
                // Add the function menus to bottom:
                $content .= $this->doc->section('', $h_func_b, 0, 0);
@@ -980,12 +980,13 @@ class PageLayoutController {
                        if (!isset($dbList->externalTables[$table])) {
                                $q_count = $this->getNumberOfHiddenElements();
 
-                               $h_func_b = '<div class="checkbox">' .
-                                       '<label for="checkTt_content_showHidden">' .
-                                       BackendUtility::getFuncCheck($this->id, 'SET[tt_content_showHidden]', $this->MOD_SETTINGS['tt_content_showHidden'], '', '', 'id="checkTt_content_showHidden"') .
-                                       (!$q_count ? ('<span class="text-muted">' . $this->getLanguageService()->getLL('hiddenCE') . '</span>') : $this->getLanguageService()->getLL('hiddenCE') . ' (' . $q_count . ')') .
-                                       '</label>' .
-                                       '</div>';
+                               $h_func_b =
+                                       '<div class="checkbox">'
+                                               . '<label for="checkTt_content_showHidden">'
+                                                       . '<input type="checkbox" id="checkTt_content_showHidden" class="checkbox" name="SET[tt_content_showHidden]" value="1" ' . ($this->MOD_SETTINGS['tt_content_showHidden'] ? 'checked="checked"' : '') . ' />'
+                                                       . $this->getLanguageService()->getLL('hiddenCE', TRUE) . ' (<span class="t3js-hidden-counter">' . $q_count . '</span>)'
+                                               . '</label>'
+                                       . '</div>';
 
                                // Boolean: Display up/down arrows and edit icons for tt_content records
                                $dbList->tt_contentConfig['showCommands'] = 1;
index d5fe12f..42d746d 100644 (file)
@@ -391,7 +391,6 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                // Initialize:
                $RTE = $this->getBackendUser()->isRTE();
                $lMarg = 1;
-               $showHidden = $this->tt_contentConfig['showHidden'] ? '' : BackendUtility::BEenableFields('tt_content');
                $pageTitleParamForAltDoc = '&recTitle=' . rawurlencode(BackendUtility::getRecordTitle('pages', BackendUtility::getRecordWSOL('pages', $id), TRUE));
                /** @var $pageRenderer \TYPO3\CMS\Core\Page\PageRenderer */
                $pageRenderer = $this->getPageLayoutController()->doc->getPageRenderer();
@@ -447,7 +446,7 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                $head = array();
 
                                // Select content records per column
-                               $contentRecordsPerColumn = $this->getContentRecordsPerColumn('table', $id, array_values($cList), $showHidden . $showLanguage);
+                               $contentRecordsPerColumn = $this->getContentRecordsPerColumn('table', $id, array_values($cList), $showLanguage);
                                // For each column, render the content into a variable:
                                foreach ($cList as $key) {
                                        if (!$lP) {
@@ -507,9 +506,12 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                                                . $this->tt_content_drawItem($row, $isRTE) . '</div>';
                                                        $singleElementHTML .= '<div class="t3-page-ce-body-inner">' . $innerContent . '</div>'
                                                                . $this->tt_content_drawFooter($row);
-                                                       $statusHidden = $this->isDisabled('tt_content', $row) ? ' t3-page-ce-hidden' : '';
+                                                       $isDisabled = $this->isDisabled('tt_content', $row);
+                                                       $statusHidden = $isDisabled ? ' t3-page-ce-hidden t3js-hidden-record' : '';
+                                                       $displayNone = !$this->tt_contentConfig['showHidden'] && $isDisabled ? ' style="display: none;"' : '';
                                                        $singleElementHTML = '<div class="t3-page-ce t3js-page-ce t3js-page-ce-sortable ' . $statusHidden . '" id="element-tt_content-'
-                                                               . $row['uid'] . '" data-table="tt_content" data-uid="' . $row['uid'] . '">' . $singleElementHTML . '</div>';
+                                                               . $row['uid'] . '" data-table="tt_content" data-uid="' . $row['uid'] . '"' . $displayNone . '>' . $singleElementHTML . '</div>';
+
                                                        if ($this->tt_contentConfig['languageMode']) {
                                                                $singleElementHTML .= '<div class="t3-page-ce t3js-page-ce">';
                                                        }
@@ -757,7 +759,7 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                        </tr>';
 
                                // Select content records per column
-                               $contentRecordsPerColumn = $this->getContentRecordsPerColumn('tt_content', $id, array_values($cList), $showHidden . $showLanguage);
+                               $contentRecordsPerColumn = $this->getContentRecordsPerColumn('tt_content', $id, array_values($cList), $showLanguage);
                                // Traverse columns to display top-on-top
                                foreach ($cList as $counter => $key) {
                                        $c = 0;
index fe7c3a4..7f7cfc1 100644 (file)
@@ -24,7 +24,11 @@ define('TYPO3/CMS/Backend/PageActions', ['jquery'], function($) {
                        }
                },
                identifier: {
-                       $pageTitle: $('h1')
+                       hiddenElements: '.t3js-hidden-record'
+               },
+               elements: {
+                       $pageTitle: null,
+                       $showHiddenElementsCheckbox: null
                }
        };
 
@@ -41,13 +45,48 @@ define('TYPO3/CMS/Backend/PageActions', ['jquery'], function($) {
                        e.preventDefault();
                        PageActions.editPageTitle();
                });
-               PageActions.identifier.$pageTitle
+               PageActions.elements.$pageTitle
                        .on('dblclick', PageActions.editPageTitle)
                        .on('mouseover', function() { $editActionLink.removeClass('hidden'); })
                        .on('mouseout', function() { $editActionLink.addClass('hidden'); })
                        .append($editActionLink);
        };
 
+       PageActions.initializeElements = function() {
+               PageActions.elements.$pageTitle = $('h1');
+               PageActions.elements.$showHiddenElementsCheckbox = $('#checkTt_content_showHidden');
+       };
+
+       /**
+        * Initialize events
+        */
+       PageActions.initializeEvents = function() {
+               PageActions.elements.$showHiddenElementsCheckbox.on('change', PageActions.toggleContentElementVisibility);
+       };
+
+       /**
+        * Toggles the "Show hidden content elements" checkbox
+        */
+       PageActions.toggleContentElementVisibility = function() {
+               var $me = $(this),
+                       $hiddenElements = $(PageActions.identifier.hiddenElements);
+
+               // show a spinner to show activity
+               var $spinner = $('<span />', {class: 'checkbox-spinner fa fa-circle-o-notch fa-spin'});
+               $me.hide().after($spinner);
+
+               if ($me.prop('checked')) {
+                       $hiddenElements.slideDown();
+               } else {
+                       $hiddenElements.slideUp();
+               }
+
+               top.TYPO3.Storage.Persistent.set('moduleData.web_layout.tt_content_showHidden', $me.prop('checked') ? 1 : 0).done(function() {
+                       $spinner.remove();
+                       $me.show();
+               });
+       };
+
        /**
         * Changes the h1 to an edit form
         */
@@ -70,13 +109,13 @@ define('TYPO3/CMS/Backend/PageActions', ['jquery'], function($) {
                        $inputField = $inputFieldWrap.find('input');
 
                $inputFieldWrap.find('[data-action=cancel]').on('click', function() {
-                       $inputFieldWrap.replaceWith(PageActions.identifier.$pageTitle);
+                       $inputFieldWrap.replaceWith(PageActions.elements.$pageTitle);
                        PageActions.initializePageTitleRenaming();
                });
 
                $inputFieldWrap.find('[data-action=submit]').on('click', function() {
                        var newPageTitle = $.trim($inputField.val());
-                       if (newPageTitle !== '' && PageActions.identifier.$pageTitle.text() !== newPageTitle) {
+                       if (newPageTitle !== '' && PageActions.elements.$pageTitle.text() !== newPageTitle) {
                                PageActions.saveChanges($inputField);
                        } else {
                                $inputFieldWrap.find('[data-action=cancel]').trigger('click');
@@ -89,7 +128,7 @@ define('TYPO3/CMS/Backend/PageActions', ['jquery'], function($) {
                        return false;
                });
 
-               var $h1 = PageActions.identifier.$pageTitle;
+               var $h1 = PageActions.elements.$pageTitle;
                $h1.children().last().remove();
                $h1.replaceWith($inputFieldWrap);
                $inputField.val($h1.text()).focus();
@@ -153,7 +192,7 @@ define('TYPO3/CMS/Backend/PageActions', ['jquery'], function($) {
                require(['TYPO3/CMS/Backend/AjaxDataHandler'], function(DataHandler) {
                        DataHandler.process(parameters).done(function(result) {
                                $inputFieldWrap.find('[data-action=cancel]').trigger('click');
-                               PageActions.identifier.$pageTitle.text($field.val());
+                               PageActions.elements.$pageTitle.text($field.val());
                                PageActions.initializePageTitleRenaming();
                                top.TYPO3.Backend.NavigationContainer.PageTree.refreshTree();
                        }).fail(function() {
@@ -162,8 +201,10 @@ define('TYPO3/CMS/Backend/PageActions', ['jquery'], function($) {
                });
        };
 
-       return function() {
-               TYPO3.PageActions = PageActions;
-               return PageActions;
-       }();
+       $(document).ready(function() {
+               PageActions.initializeElements();
+               PageActions.initializeEvents();
+       });
+
+       return PageActions;
 });
index 108d074..876bd1c 100644 (file)
@@ -8,3 +8,10 @@ span.spinner {
        height: 16px;
        background-image: url('../../../../images/spinner/f1f1f1.gif');
 }
+
+// definition is taken from forms.less of Bootstrap
+span.checkbox-spinner {
+       position: absolute;
+       margin-left: -20px;
+       margin-top: 4px;
+}
\ No newline at end of file
index 7c8c333..a6e62ec 100644 (file)
@@ -9976,6 +9976,11 @@ span.spinner {
   height: 16px;
   background-image: url('../../../../images/spinner/f1f1f1.gif');
 }
+span.checkbox-spinner {
+  position: absolute;
+  margin-left: -20px;
+  margin-top: 4px;
+}
 .nav-tabs {
   border-radius: 2px 2px 0 0;
   background-color: #ededed;