[BUGFIX] Refactoring of CardLayout.js 62/53762/3
authorFrank Naegler <frank.naegler@typo3.org>
Mon, 21 Aug 2017 20:35:34 +0000 (22:35 +0200)
committerAndreas Fernandez <typo3@scripting-base.de>
Tue, 22 Aug 2017 10:39:06 +0000 (12:39 +0200)
This patch refactors the CardLayput.js to prevent some trouble with
the navigation icons in the doc header.

Resolves: #82151
Releases: master
Change-Id: I6739de816b458a7b8c85c519d46664831dfa070c
Reviewed-on: https://review.typo3.org/53762
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Mona Muzaffar <mona.muzaffar@gmx.de>
Tested-by: Mona Muzaffar <mona.muzaffar@gmx.de>
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
typo3/sysext/install/Resources/Public/JavaScript/Modules/CardLayout.js

index f1e703e..964ee2c 100644 (file)
 define(['jquery', 'bootstrap'], function ($) {
        'use strict';
 
-       return {
-               initialize: function() {
-                       // Card expand / collapse handling
-                       $(document).on('click', '.gridder-list', function(e) {
-                               e.preventDefault();
-                               var $element = $(this);
-                               var $contentContainer = $element.next();
-                               if (!$element.hasClass('selectedItem')) {
-                                       // Find possible current open one and close it
-                                       $('.gridder-list').removeClass('selectedItem');
-                                       $('.gridder-content.gridder-show').slideUp(function() {
-                                               $(this).removeClass('gridder-show');
-                                       });
-                                       // Open clicked one in parallel
-                                       $element.addClass('selectedItem');
-                                       $contentContainer.addClass('gridder-show').slideDown();
-                               } else {
-                                       // Collapse this currently open grid
-                                       $contentContainer.slideUp(function() {
-                                               $contentContainer.removeClass('gridder-show');
-                                       });
-                                       $element.removeClass('selectedItem');
-                               }
-                       });
+       /**
+        *
+        * @type {{transitionInProgress: boolean}}
+        */
+       var CardLayout = {
+               transitionInProgress: false
+       };
 
-                       // Close current and open previous card
-                       $(document).on('click', '.gridder-nav-prev', function() {
-                               var $currentOpenContent = $('.gridder-content.gridder-show');
-                               if ($currentOpenContent.length > 0) {
-                                       var $currentOpenCard = $currentOpenContent.prev();
-                                       var $previousCardContent = $currentOpenCard.prev();
-                                       var $previousCard = $previousCardContent.prev();
-                                       if ($previousCard.length > 0) {
-                                               $currentOpenCard.removeClass('selectedItem');
-                                               $currentOpenContent.slideUp(function() {
-                                                       $(this).removeClass('gridder-show');
-                                               });
-                                               $previousCard.addClass('selectedItem');
-                                               $previousCardContent.addClass('gridder-show').slideDown();
-                                       }
-                               }
-                       });
+       /**
+        * Initialize the CardLayout, bind events
+        */
+       CardLayout.initialize = function() {
+               $(document).on('click', '.gridder-list', function(e) {
+                       e.preventDefault();
+                       var $element = $(this);
+                       if (!$element.hasClass('selectedItem')) {
+                               CardLayout.openCard($element);
+                       } else {
+                               CardLayout.closeCard($element);
+                       }
+               });
+
+               // Close current and open previous card
+               $(document).on('click', '.gridder-nav-prev', function(e) {
+                       e.preventDefault();
+                       CardLayout.openPrevCard();
+               });
+
+               // Close current and open next card
+               $(document).on('click', '.gridder-nav-next', function(e) {
+                       e.preventDefault();
+                       CardLayout.openNextCard();
+               });
+
+               // Close current open card
+               $(document).on('click', '.gridder-close', function(e) {
+                       e.preventDefault();
+                       CardLayout.closeCurrentCard();
+               });
+
+               CardLayout.checkNavigationButtons();
+       };
+
+       /**
+        * Find and return the current open card
+        *
+        * @returns {jQuery}
+        */
+       CardLayout.getCurrentOpenCard = function() {
+               return $('.gridder-content.gridder-show').prev();
+       };
+
+       /**
+        * Find and close the current open card
+        */
+       CardLayout.closeCurrentCard = function() {
+               CardLayout.closeCard(CardLayout.getCurrentOpenCard());
+               CardLayout.checkNavigationButtons();
+       };
+
+       /**
+        * Open the given card and call the callback function
+        *
+        * @param {jQuery} $element
+        * @param {function} callback
+        * @returns {boolean}
+        */
+       CardLayout.openCard = function($element, callback) {
+               if (CardLayout.transitionInProgress) {
+                       return false;
+               }
+               CardLayout.transitionInProgress = true;
+               $('.gridder-list').removeClass('selectedItem');
+               $('.gridder-content.gridder-show').slideUp(function() {
+                       $(this).removeClass('gridder-show');
+               });
+               $element.addClass('selectedItem');
+               $element.next().addClass('gridder-show').slideDown(function() {
+                       CardLayout.transitionInProgress = false;
+                       if (typeof callback === 'function') {
+                               callback();
+                       }
+                       CardLayout.checkNavigationButtons();
+               });
+       };
 
-                       // Close current and open next card
-                       $(document).on('click', '.gridder-nav-next', function() {
-                               var $currentOpenContent = $('.gridder-content.gridder-show');
-                               if ($currentOpenContent.length > 0) {
-                                       var $currentOpenCard = $currentOpenContent.prev();
-                                       var $nextCard = $currentOpenContent.next();
-                                       var $nextCardContent = $nextCard.next();
-                                       if ($nextCardContent.length > 0) {
-                                               $currentOpenCard.removeClass('selectedItem');
-                                               $currentOpenContent.slideUp(function() {
-                                                       $(this).removeClass('gridder-show');
-                                               });
-                                               $nextCard.addClass('selectedItem');
-                                               $nextCardContent.addClass('gridder-show').slideDown();
-                                       }
-                               }
+       /**
+        * Close the given card and call the callback function
+        *
+        * @param {jQuery} $element
+        * @param {function} callback
+        * @returns {boolean}
+        */
+       CardLayout.closeCard = function($element, callback) {
+               if (CardLayout.transitionInProgress) {
+                       return false;
+               }
+               CardLayout.transitionInProgress = true;
+               var $contentContainer = $element.next();
+               $element.removeClass('selectedItem');
+               $contentContainer.slideUp(function() {
+                       $contentContainer.removeClass('gridder-show');
+                       CardLayout.transitionInProgress = false;
+                       if (typeof callback === 'function') {
+                               callback();
+                       }
+                       CardLayout.checkNavigationButtons();
+               });
+       };
+
+       /**
+        * Find the next card and open it, if it exists
+        */
+       CardLayout.openNextCard = function() {
+               var $currentOpenCard = CardLayout.getCurrentOpenCard();
+               var $nextCard = $currentOpenCard.next().next();
+               if ($nextCard.length) {
+                       CardLayout.closeCard($currentOpenCard, function() {
+                               CardLayout.openCard($nextCard);
                        });
+               }
+       };
 
-                       // Close current open card
-                       $(document).on('click', '.gridder-close', function() {
-                               var $currentOpenContent = $('.gridder-content.gridder-show');
-                               if ($currentOpenContent.length > 0) {
-                                       var $currentOpenCard = $currentOpenContent.prev();
-                                       $currentOpenCard.removeClass('selectedItem');
-                                       $currentOpenContent.slideUp(function() {
-                                               $(this).removeClass('gridder-show');
-                                       });
-                               }
+       /**
+        * Find the previous card and open it, if it exists
+        */
+       CardLayout.openPrevCard = function() {
+               var $currentOpenCard = CardLayout.getCurrentOpenCard();
+               var $nextCard = $currentOpenCard.prev().prev();
+               if ($nextCard.length) {
+                       CardLayout.closeCard($currentOpenCard, function() {
+                               CardLayout.openCard($nextCard);
                        });
                }
        };
+
+       /**
+        * Check the navigation icons and enable/disable the buttons
+        */
+       CardLayout.checkNavigationButtons = function() {
+               var $currentOpenCard = CardLayout.getCurrentOpenCard();
+               if ($currentOpenCard.length === 0) {
+                       $('.gridder-close').addClass('disabled');
+               } else {
+                       $('.gridder-close').removeClass('disabled');
+               }
+               if ($currentOpenCard.prev().prev().length === 0) {
+                       $('.gridder-nav-prev').addClass('disabled')
+               } else {
+                       $('.gridder-nav-prev').removeClass('disabled')
+               }
+               if ($currentOpenCard.next().next().length === 0) {
+                       $('.gridder-nav-next').addClass('disabled')
+               } else {
+                       $('.gridder-nav-next').removeClass('disabled')
+               }
+       };
+
+       return CardLayout;
 });