[BUGFIX] Refactoring of CardLayout.js

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

@@ -17,78 +17,163 @@
 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;
 });