Merge pull request #65 from ammopt/fix_spotlight_tabs

Fix spotlight tabbed display and drop down list
PTFS-Europe · Jun 5, 2024 · c346bab · c346bab
2 parents 9ef7594 + 3e75ec3
commit c346bab
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 13 deletions.
diff --git a/code/web/interface/themes/responsive/CollectionSpotlight/collectionSpotlightTabs.tpl b/code/web/interface/themes/responsive/CollectionSpotlight/collectionSpotlightTabs.tpl
@@ -28,7 +28,7 @@
 				<select class="availableLists" id="availableLists{$collectionSpotlight->id}" onchange="changeSelectedList();return false;" aria-label="{translate text="Select a list to display" isPublicFacing=true inAttribute=true}">
 					{foreach from=$collectionSpotlight->lists item=list}
 					{if $list->displayFor == 'all' || ($list->displayFor == 'loggedIn' && $loggedIn) || ($list->displayFor == 'notLoggedIn' && !$loggedIn)}
-					<option value="tab-{$list->id}">{translate text=$list->name isPublicFacing=true isAdminEnteredData=true inAttribute=true}</option>
+					<option data-carouselid="{$list->id}" value="tab-{$list->id}">{translate text=$list->name isPublicFacing=true isAdminEnteredData=true inAttribute=true}</option>
 					{/if}
 					{/foreach}
 				</select>
@@ -74,6 +74,11 @@
 					{/if}
 				{/if}
 
+				{assign var="tabClasses" value="tab-pane" }
+				{if $active}
+					{assign var="tabClasses" value="$tabClasses active" }
+				{/if}
+
 				{if $collectionSpotlight->style == 'horizontal'}
 					{include file='CollectionSpotlight/titleScroller.tpl'}
 				{elseif $collectionSpotlight->style == 'horizontal-carousel'}
@@ -107,6 +112,7 @@
 
 			$(document).ready(function(){ldelim}
 				{if count($collectionSpotlight->lists) > 1 && (!isset($collectionSpotlight->listDisplayType) || $collectionSpotlight->listDisplayType == 'tabs')}
+				applyTabsSwitcher();
 				$('#collectionSpotlight{$collectionSpotlight->id} a[data-toggle="tab"]').on('shown.bs.tab', function (e) {ldelim}
 					showList($(e.target).data('index'));
 				{rdelim});
@@ -135,7 +141,7 @@
 				var selectedOption = availableLists.options[availableLists.selectedIndex];
 
 				var selectedList = selectedOption.value;
-				$("#collectionSpotlight{$collectionSpotlight->id} .titleScroller.active").removeClass('active').hide();
+				$("#collectionSpotlight{$collectionSpotlight->id} .active").removeClass('active').hide();
 				$("#" + selectedList).addClass('active').show();
 				// update view more link with data.url for the selectedOption
 				showList(availableLists.selectedIndex);
@@ -175,22 +181,28 @@
 
 				var selectedList = selectedOption.value;
 				$("#collectionSpotlight{$collectionSpotlight->id} .titleScroller.active").removeClass('active').hide();
-				$("#" + selectedList).addClass('active').show().jcarousel('reload');
+				$("#" + selectedList).addClass('active').show();
+				$('#collectionSpotlightCarousel' + selectedOption.dataset.carouselid).jcarousel('reload');
 			{rdelim}
 
 			$(document).ready(function(){ldelim}
 				{if count($collectionSpotlight->lists) > 1 && (!isset($collectionSpotlight->listDisplayType) || $collectionSpotlight->listDisplayType == 'tabs')}
-				var tablists = document.querySelectorAll('[role=tablist]');
-                for (var i = 0; i < tablists.length; i++) {ldelim}
-                    new TabsSwitcher(tablists[i]);
-                {rdelim}
+				applyTabsSwitcher();
 				$('#collectionSpotlight{$collectionSpotlight->id} a[data-toggle="tab"]').on('shown.bs.tab', function (e) {ldelim}
 					$('#collectionSpotlightCarousel' + $(e.target).data('carouselid')).jcarousel('reload');
 				{rdelim});
 				{/if}
 			{rdelim});
 		</script>
 	{/if}
+	<script type="text/javascript">
+		function applyTabsSwitcher(){ldelim}
+			var tablists = document.querySelectorAll('[role=tablist]');
+			for (var i = 0; i < tablists.length; i++) {ldelim}
+				new TabsSwitcher(tablists[i]);
+			{rdelim}
+		{rdelim}
+	</script>
 	{strip}
 </div>
 {/strip}
diff --git a/code/web/interface/themes/responsive/CollectionSpotlight/horizontalCarousel.tpl b/code/web/interface/themes/responsive/CollectionSpotlight/horizontalCarousel.tpl
@@ -1,4 +1,4 @@
-<div role="tabpanel" aria-labelledby="spotlightTab{$list->id}" id="tab-{$wrapperId}"{if !empty($display) && $display == 'false'} style="display:none"{/if} class="titleScroller tab-pane{if !empty($active)} active{/if}{if !empty($collectionSpotlight) && $collectionSpotlight->coverSize == 'medium'} mediumScroller{/if}{if !empty($collectionSpotlight) && $collectionSpotlight->coverSize == 'small'} smallScroller{/if}{if !empty($collectionSpotlight) && $collectionSpotlight->showRatings} scrollerWithRatings{/if}">
+<div role="tabpanel" aria-labelledby="spotlightTab{$list->id}" id="tab-{$wrapperId}"{if !empty($display) && $display == 'false'} style="display:none"{/if} class="titleScroller {$tabClasses}{if !empty($collectionSpotlight) && $collectionSpotlight->coverSize == 'medium'} mediumScroller{/if}{if !empty($collectionSpotlight) && $collectionSpotlight->coverSize == 'small'} smallScroller{/if}{if !empty($collectionSpotlight) && $collectionSpotlight->showRatings} scrollerWithRatings{/if}">
 {if !empty($showCollectionSpotlightTitle)}
 	<div id="tab-{$wrapperId}Header" class="titleScrollerHeader">
 		{if !empty($showCollectionSpotlightTitle) && !empty($scrollerTitle)}

diff --git a/code/web/interface/themes/responsive/CollectionSpotlight/singleTitleSpotlight.tpl b/code/web/interface/themes/responsive/CollectionSpotlight/singleTitleSpotlight.tpl
@@ -1,5 +1,5 @@
 {strip}
-<div id="tab-{$wrapperId}" {if $display == 'false'}style="display:none"{/if} class="titleScroller singleTitleSpotlight {if $collectionSpotlight->coverSize == 'medium'}mediumScroller{/if} {if $collectionSpotlight->showRatings}scrollerWithRatings{/if}">
+<div id="tab-{$wrapperId}" {if $display == 'false'}style="display:none"{/if} class="titleScroller singleTitleSpotlight {$tabClasses} {if $collectionSpotlight->coverSize == 'medium'}mediumScroller{/if} {if $collectionSpotlight->showRatings}scrollerWithRatings{/if}">
 	<div id="{$wrapperId}" class="titleScrollerWrapper singleTitleSpotlightWrapper">
 		{if (!empty($showCollectionSpotlightTitle) && $showCollectionSpotlightTitle) || $showViewMoreLink}
 			<div id="tab-{$wrapperId}Header" class="titleScrollerHeader">

diff --git a/code/web/interface/themes/responsive/CollectionSpotlight/singleWithNextTitleSpotlight.tpl b/code/web/interface/themes/responsive/CollectionSpotlight/singleWithNextTitleSpotlight.tpl
@@ -1,5 +1,5 @@
 {strip}
-<div id="tab-{$wrapperId}" {if $display == 'false'}style="display:none"{/if} class="titleScroller singleTitleWithNextSpotlight {if $collectionSpotlight->coverSize == 'medium'}mediumScroller{/if} {if $collectionSpotlight->showRatings}scrollerWithRatings{/if}">
+<div id="tab-{$wrapperId}" {if $display == 'false'}style="display:none"{/if} class="titleScroller singleTitleWithNextSpotlight {$tabClasses} {if $collectionSpotlight->coverSize == 'medium'}mediumScroller{/if} {if $collectionSpotlight->showRatings}scrollerWithRatings{/if}">
 	<div id="{$wrapperId}" class="titleScrollerWrapper singleTitleSpotlightWrapper">
 		{if (!empty($showCollectionSpotlightTitle) && $showCollectionSpotlightTitle) || $showViewMoreLink}
 			<div id="tab-{$wrapperId}Header" class="titleScrollerHeader">

diff --git a/code/web/interface/themes/responsive/CollectionSpotlight/textCollectionSpotlight.tpl b/code/web/interface/themes/responsive/CollectionSpotlight/textCollectionSpotlight.tpl
@@ -1,5 +1,5 @@
 {strip}
-	<div id="tab-{$wrapperId}"{if $display == 'false'} style="display:none"{/if} class="textListScroller">
+	<div id="tab-{$wrapperId}"{if $display == 'false'} style="display:none"{/if} class="textListScroller {$tabClasses}">
 		<div id="{$wrapperId}" class="titleScrollerWrapper">
 			{if (!empty($showCollectionSpotlightTitle) && $showCollectionSpotlightTitle) || $showViewMoreLink}
 				<div id="tab-{$wrapperId}Header" class="titleScrollerHeader">

diff --git a/code/web/interface/themes/responsive/CollectionSpotlight/titleScroller.tpl b/code/web/interface/themes/responsive/CollectionSpotlight/titleScroller.tpl
@@ -1,5 +1,5 @@
 {strip}
-<div id="tab-{$wrapperId}"{if !empty($display) && $display == 'false'} style="display:none"{/if} class="titleScroller tab-pane{if !empty($active)} active{/if}{if !empty($collectionSpotlight) && $collectionSpotlight->coverSize == 'medium'} mediumScroller{/if}{if !empty($collectionSpotlight) && $collectionSpotlight->showRatings} scrollerWithRatings{/if}">
+<div id="tab-{$wrapperId}"{if !empty($display) && $display == 'false'} style="display:none"{/if} class="titleScroller {$tabClasses}{if !empty($collectionSpotlight) && $collectionSpotlight->coverSize == 'medium'} mediumScroller{/if}{if !empty($collectionSpotlight) && $collectionSpotlight->showRatings} scrollerWithRatings{/if}">
 	<div id="{$wrapperId}" class="titleScrollerWrapper">
 		{if (!empty($showCollectionSpotlightTitle))}
 			<div id="tab-{$wrapperId}Header" class="titleScrollerHeader">

diff --git a/code/web/interface/themes/responsive/CollectionSpotlight/verticalTitleScroller.tpl b/code/web/interface/themes/responsive/CollectionSpotlight/verticalTitleScroller.tpl
@@ -1,5 +1,5 @@
 {strip}
-<div id="tab-{$wrapperId}"{if $display == 'false'} style="display:none"{/if} class="verticalTitleScroller{if $collectionSpotlight->coverSize == 'medium'} mediumScroller{/if}">
+<div id="tab-{$wrapperId}"{if $display == 'false'} style="display:none"{/if} class="verticalTitleScroller {$tabClasses}{if $collectionSpotlight->coverSize == 'medium'} mediumScroller{/if}">
 	<div id="{$wrapperId}" class="titleScrollerWrapper">
 		{if (!empty($showCollectionSpotlightTitle) && $showCollectionSpotlightTitle) || $showViewMoreLink}
 			<div id="tab-{$wrapperId}Header" class="titleScrollerHeader">

diff --git a/code/web/release_notes/24.06.00.MD b/code/web/release_notes/24.06.00.MD
@@ -137,6 +137,9 @@
 //Pedro - PTFS
 ### Other Updates
 - Fix display of 'small' covers in collection spotlights (*PA*)
+- Fixed issue in collection spotlights 'Tabbed display' that prevented switching tabs when the display type was one of the following: 'Single Title', 'Single Title with next button' and 'Text Only List'
+- Fixed issue in collection spotlights 'Drop Down List' that prevented switching list using the dropdown list.
+- Fixed issue in collection spotlights that prevented the active tab from having the correct 'active' style appliedm in 'Tabbed display'
 
 ## This release includes code contributions from
 - ByWater Solutions