feat: enable Team Participant controls to be used separately

lua/wikis/commons/TeamParticipants/Controller.lua

@@ -14,6 +14,7 @@ local Info = Lua.import('Module:Info', {loadData = true})
 local Json = Lua.import('Module:Json')
 local Logic = Lua.import('Module:Logic')
 local Lpdb = Lua.import('Module:Lpdb')
+local PageVariableNamespace = Lua.import('Module:PageVariableNamespace')
 local Table = Lua.import('Module:Table')
 
 local TeamParticipantsWikiParser = Lua.import('Module:TeamParticipants/Parse/Wiki')
@@ -22,6 +23,8 @@ local TeamService = Lua.import('Module:Service/Team')
 
 local TeamParticipantsDisplay = Lua.import('Module:Widget/Participants/Team/CardsGroup')
 
+local teamParticipantsVars = PageVariableNamespace('TeamParticipants')
+
 local TeamParticipantsController = {}
 
 local AUTO_IMPORTED_STAFF_ROLES = {
@@ -46,8 +49,13 @@ function TeamParticipantsController.fromTemplate(frame)
 		Array.forEach(parsedData.participants, TeamParticipantsRepository.save)
 	end
 	Array.forEach(parsedData.participants, TeamParticipantsRepository.setPageVars)
+
+	local showControls = not teamParticipantsVars:get('externalControlsRendered')
+
 	return TeamParticipantsDisplay{
 		participants = parsedData.participants,
+		showPlayerInfo = Logic.readBool(args.showplayerinfo),
+		showControls = showControls,
 		mergeStaffTabIfOnlyOneStaff = Logic.nilOr(
 			Logic.readBoolOrNil(args.mergeStaffTabIfOnlyOneStaff), Logic.readBool(Config.mergeStaffTabIfOnlyOneStaff)
 		)

lua/wikis/commons/Widget/Participants/Team/CardsGroup.lua

@@ -15,10 +15,18 @@ local AnalyticsWidget = Lua.import('Module:Widget/Analytics')
 local HtmlWidgets = Lua.import('Module:Widget/Html/All')
 local Div = HtmlWidgets.Div
 local ParticipantsTeamCard = Lua.import('Module:Widget/Participants/Team/Card')
-local Switch = Lua.import('Module:Widget/Switch')
+local ParticipantControls = Lua.import('Module:Widget/Participants/Team/ParticipantControls')
+local WidgetUtil = Lua.import('Module:Widget/Util')
+
+---@class ParticipantsTeamCardsGroupProps
+---@field participants TeamParticipant[]|nil
+---@field showPlayerInfo boolean
+---@field showControls boolean
+---@field mergeStaffTabIfOnlyOneStaff boolean|nil
 
 ---@class ParticipantsTeamCardsGroup: Widget
----@operator call(table): ParticipantsTeamCardsGroup
+---@operator call(ParticipantsTeamCardsGroupProps): ParticipantsTeamCardsGroup
+---@field props ParticipantsTeamCardsGroupProps
 local ParticipantsTeamCardsGroup = Class.new(Widget)
 
 ---@return Widget?
@@ -28,49 +36,26 @@ function ParticipantsTeamCardsGroup:render()
 		return
 	end
 
-	return Div{
-		classes = { 'team-participant' },
-		children = {
-			Div{
-				classes = { 'team-participant__switches' },
-				children = {
-					AnalyticsWidget{
-						analyticsName = 'ParticipantsShowRostersSwitch',
-						analyticsProperties = {
-							['track-value-as'] = 'participants show rosters',
-						},
-						children = Switch{
-							label = 'Show rosters',
-							switchGroup = 'team-cards-show-rosters',
-							defaultActive = false,
-							collapsibleSelector = '.team-participant-card',
-						},
-					},
-					AnalyticsWidget{
-						analyticsName = 'ParticipantsCompactSwitch',
-						analyticsProperties = {
-							['track-value-as'] = 'participants compact',
-						},
-						children = Switch{
-							label = 'Compact view',
-							switchGroup = 'team-cards-compact',
-							defaultActive = true,
-						},
+	local showControls = self.props.showControls
+
+	local children = WidgetUtil.collect(
+		showControls and ParticipantControls{showPlayerInfo = self.props.showPlayerInfo} or nil,
+		AnalyticsWidget{
+			analyticsName = 'Team participants card',
+			children = Div{
+				classes = { 'team-participant__grid' },
+				children = Array.map(participants, function(participant)
+					return ParticipantsTeamCard{
+						participant = participant,
 					}
-				}
-			},
-			AnalyticsWidget{
-				analyticsName = 'Team participants card',
-				children = Div{
-					classes = { 'team-participant__grid' },
-					children = Array.map(participants, function(participant)
-						return ParticipantsTeamCard{
-							participant = participant,
-						}
-					end),
-				}
+				end),
 			}
 		}
+	)
+
+	return Div{
+		classes = { 'team-participant' },
+		children = children
 	}
 end
 

lua/wikis/commons/Widget/Participants/Team/ParticipantControls.lua

@@ -0,0 +1,102 @@
+---
+-- @Liquipedia
+-- page=Module:Widget/Participants/Team/ParticipantControls
+--
+-- Please see https://github.com/Liquipedia/Lua-Modules to contribute
+--
+
+local Lua = require('Module:Lua')
+
+local Class = Lua.import('Module:Class')
+local Logic = Lua.import('Module:Logic')
+local PageVariableNamespace = Lua.import('Module:PageVariableNamespace')
+
+local Widget = Lua.import('Module:Widget')
+local AnalyticsWidget = Lua.import('Module:Widget/Analytics')
+local Button = Lua.import('Module:Widget/Basic/Button')
+local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local Div = HtmlWidgets.Div
+local Icon = Lua.import('Module:Widget/Image/Icon/Fontawesome')
+local Switch = Lua.import('Module:Widget/Switch')
+local WidgetUtil = Lua.import('Module:Widget/Util')
+
+local teamParticipantsVars = PageVariableNamespace('TeamParticipants')
+
+---@class ParticipantsTeamParticipantControlsProps
+---@field showPlayerInfo boolean
+---@field externalUsage boolean
+
+---@class ParticipantsTeamParticipantControls: Widget
+---@operator call(ParticipantsTeamParticipantControlsProps): ParticipantsTeamParticipantControls
+---@field props ParticipantsTeamParticipantControlsProps
+local ParticipantsTeamParticipantControls = Class.new(Widget, function(self, props)
+	if Logic.readBool(props.externalUsage) then
+		teamParticipantsVars:set('externalControlsRendered', 'true')
+	end
+	self.props.showPlayerInfo = Logic.readBool(self.props.showPlayerInfo or self.props.showplayerinfo)
+end)
+
+ParticipantsTeamParticipantControls.defaultProps = {
+	showPlayerInfo = false,
+	externalUsage = false,
+}
+
+---@return Widget?
+function ParticipantsTeamParticipantControls:_buildPlayerInfoButton()
+	if not Logic.readBool(self.props.showPlayerInfo) then
+		return nil
+	end
+
+	local pageName = mw.title.getCurrentTitle().fullText
+	local link = tostring(mw.uri.fullUrl('Special:RunQuery/Tournament_player_information', {
+		pfRunQueryFormName = 'Tournament player information',
+		['TPI[page]'] = pageName,
+		wpRunQuery = 'Run query'
+	}))
+
+	return Button{
+		title = 'Click for additional player information',
+		variant = 'secondary',
+		size = 'sm',
+		linktype = 'external',
+		link = link,
+		children = { Icon{iconName = 'internal_link'}, 'Player Info' }
+	}
+end
+
+---@return Widget?
+function ParticipantsTeamParticipantControls:render()
+	local children = WidgetUtil.collect(
+		self:_buildPlayerInfoButton(),
+		AnalyticsWidget{
+			analyticsName = 'ParticipantsShowRostersSwitch',
+			analyticsProperties = {
+				['track-value-as'] = 'participants show rosters',
+			},
+			children = Switch{
+				label = 'Show rosters',
+				switchGroup = 'team-cards-show-rosters',
+				defaultActive = false,
+				collapsibleSelector = '.team-participant-card',
+			},
+		},
+		AnalyticsWidget{
+			analyticsName = 'ParticipantsCompactSwitch',
+			analyticsProperties = {
+				['track-value-as'] = 'participants compact',
+			},
+			children = Switch{
+				label = 'Compact view',
+				switchGroup = 'team-cards-compact',
+				defaultActive = true,
+			},
+		}
+	)
+
+	return Div{
+		classes = { 'team-participant__controls' },
+		children = children
+	}
+end
+
+return ParticipantsTeamParticipantControls

stylesheets/commons/TeamParticipantCard.scss

@@ -43,9 +43,10 @@ $compact-selector: '[data-switch-group="team-cards-compact"]';
 	gap: 0.5rem;
 }
 
-.team-participant__switches {
+.team-participant__controls {
 	display: flex;
 	gap: 0.5rem;
+	align-items: center;
 }
 
 .team-participant__grid {
@@ -468,65 +469,67 @@ $compact-selector: '[data-switch-group="team-cards-compact"]';
 	}
 }
 
-.team-participant:has( .switch-toggle-active#{ $compact-selector } ) {
-	.team-participant-card {
-		&__opponent--square-icon {
-			.team-template-image-icon,
-			.league-icon-small-image {
-				@include set-participant-icon-size(
-					$participant-icon-wrapper-size-compact,
-					$participant-icon-size-compact
-				);
-
-				@media ( max-width: 767px ) {
+body:has( .switch-toggle-active#{ $compact-selector } ) {
+	.team-participant {
+		.team-participant-card {
+			&__opponent--square-icon {
+				.team-template-image-icon,
+				.league-icon-small-image {
 					@include set-participant-icon-size(
-						$participant-icon-wrapper-size-mobile,
-						$participant-icon-size-mobile
+						$participant-icon-wrapper-size-compact,
+						$participant-icon-size-compact
 					);
+
+					@media ( max-width: 767px ) {
+						@include set-participant-icon-size(
+							$participant-icon-wrapper-size-mobile,
+							$participant-icon-size-mobile
+						);
+					}
 				}
 			}
-		}
-
-		&__opponent-compact {
-			display: flex;
-		}
 
-		&__opponent-full {
-			display: none;
-		}
+			&__opponent-compact {
+				display: flex;
+			}
 
-		&__header {
-			position: static;
-			flex-direction: row;
-			width: auto;
+			&__opponent-full {
+				display: none;
+			}
 
-			.general-collapsible-default-toggle {
+			&__header {
 				position: static;
-				top: initial;
-				right: initial;
-				transform: none;
+				flex-direction: row;
+				width: auto;
+
+				.general-collapsible-default-toggle {
+					position: static;
+					top: initial;
+					right: initial;
+					transform: none;
+				}
 			}
-		}
 
-		&__header-main {
-			display: contents;
-		}
+			&__header-main {
+				display: contents;
+			}
 
-		&__opponent {
-			flex-direction: row;
-			gap: 0.5rem;
+			&__opponent {
+				flex-direction: row;
+				gap: 0.5rem;
 
-			.team-template-text {
-				font-size: initial;
+				.team-template-text {
+					font-size: initial;
+				}
 			}
-		}
 
-		&__qualifier--header {
-			display: none;
-		}
+			&__qualifier--header {
+				display: none;
+			}
 
-		&__qualifier--content {
-			display: flex;
+			&__qualifier--content {
+				display: flex;
+			}
 		}
 	}
 }