diff --git a/lua/wikis/commons/TeamParticipants/Controller.lua b/lua/wikis/commons/TeamParticipants/Controller.lua index dd5e8127bbd..45960bb575f 100644 --- a/lua/wikis/commons/TeamParticipants/Controller.lua +++ b/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) ) diff --git a/lua/wikis/commons/Widget/Participants/Team/CardsGroup.lua b/lua/wikis/commons/Widget/Participants/Team/CardsGroup.lua index cbcde9019ca..5525179dd8b 100644 --- a/lua/wikis/commons/Widget/Participants/Team/CardsGroup.lua +++ b/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 diff --git a/lua/wikis/commons/Widget/Participants/Team/ParticipantControls.lua b/lua/wikis/commons/Widget/Participants/Team/ParticipantControls.lua new file mode 100644 index 00000000000..da98256456a --- /dev/null +++ b/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 diff --git a/stylesheets/commons/TeamParticipantCard.scss b/stylesheets/commons/TeamParticipantCard.scss index 60b03c36ce2..c202ec485e0 100644 --- a/stylesheets/commons/TeamParticipantCard.scss +++ b/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; + } } } }