feat(participantTable): support seedlist with faction mode

javascript/commons/Miscellaneous.js

@@ -236,49 +236,6 @@ liquipedia.tournamentstable = {
 };
 liquipedia.core.modules.push( 'tournamentstable' );
 
-/*******************************************************************************
- * Template(s): Participants Tables
- * Author(s): FO-nTTaX
- ******************************************************************************/
-liquipedia.participantstable = {
-	init: function() {
-		if ( document.querySelector( '.participants-table-scroller' ) !== null ) {
-			document.querySelectorAll( '.participants-table-button-left' ).forEach( ( buttonLeft ) => {
-				buttonLeft.classList.add( 'inactive' );
-				buttonLeft.addEventListener( 'click', function() {
-					if ( window.innerWidth < 600 ) {
-						const scroller = this.closest( '.participants-table-wrapper' ).querySelector( '.participants-table-scroller' );
-						scroller.scrollLeft = scroller.scrollLeft - 0.83 * window.innerWidth;
-					}
-				} );
-			} );
-			document.querySelectorAll( '.participants-table-button-right' ).forEach( ( buttonRight ) => {
-				buttonRight.addEventListener( 'click', function() {
-					if ( window.innerWidth < 600 ) {
-						const scroller = this.closest( '.participants-table-wrapper' ).querySelector( '.participants-table-scroller' );
-						scroller.scrollLeft = scroller.scrollLeft + 0.83 * window.innerWidth;
-					}
-				} );
-			} );
-			document.querySelectorAll( '.participants-table-scroller' ).forEach( ( scroller ) => {
-				scroller.addEventListener( 'scroll', function() {
-					const buttonLeft = this.closest( '.participants-table-wrapper' ).querySelector( '.participants-table-button-left' );
-					buttonLeft.classList.remove( 'inactive' );
-					const buttonRight = this.closest( '.participants-table-wrapper' ).querySelector( '.participants-table-button-right' );
-					buttonRight.classList.remove( 'inactive' );
-					if ( this.scrollLeft === 0 ) {
-						buttonLeft.classList.add( 'inactive' );
-					}
-					if ( this.scrollLeft === this.scrollWidth - this.clientWidth ) {
-						buttonRight.classList.add( 'inactive' );
-					}
-				} );
-			} );
-		}
-	}
-};
-liquipedia.core.modules.push( 'participantstable' );
-
 /*******************************************************************************
  * Template(s): Heroes portal on the Heroes of the Storm wiki
  * Author(s): FO-nTTaX

lua/spec/participant_table_spec.lua

@@ -74,18 +74,26 @@ describe('Participant Table', function()
 			stub(mw.ext.LiquipediaDB, "lpdb_placement")
 			InfoboxLeague.run(tournamentData)
 
+			local make = function(args)
+				return tostring(ParticipantTable.run(args))
+			end
+
 			local notAsFactionTable = function(args)
-				return Table.merge(args, {soloAsFactionTable = false})
+				return make(Table.merge(args, {soloAsFactionTable = false}))
+			end
+
+			local showSeedingFirst = function(args)
+				return Table.merge(args, {showSeedingFirst = true})
 			end
 
-			GoldenTest('participant_table', tostring(ParticipantTable.run(notAsFactionTable(argsPlain))))
-			GoldenTest('participant_faction_table', tostring(ParticipantTable.run(argsPlain)))
-			GoldenTest('participant_table_with_seed', tostring(ParticipantTable.run(notAsFactionTable(argsWithSeed))))
-			-- doesn't work yet due to it not being implemented yet
-			--GoldenTest('participant_faction_table_with_seed', tostring(ParticipantTable.run(argsWithSeed)))
-			GoldenTest('participant_table_with_duo', tostring(ParticipantTable.run(argsDuoOpponent)))
-			GoldenTest('participant_table_with_section', tostring(ParticipantTable.run(notAsFactionTable(argsWithSections))))
-			GoldenTest('participant_faction_table_with_section', tostring(ParticipantTable.run(argsWithSections)))
+			GoldenTest('participant_table', notAsFactionTable(argsPlain))
+			GoldenTest('participant_faction_table', make(argsPlain))
+			GoldenTest('participant_table_with_seed', notAsFactionTable(argsWithSeed))
+			GoldenTest('participant_faction_table_with_seed', make(argsWithSeed))
+			GoldenTest('participant_table_seed_list', make(showSeedingFirst(argsWithSeed)))
+			GoldenTest('participant_table_with_duo', make(argsDuoOpponent))
+			GoldenTest('participant_table_with_section', notAsFactionTable(argsWithSections))
+			GoldenTest('participant_faction_table_with_section', make(argsWithSections))
 
 			mw.ext.LiquipediaDB.lpdb_tournament:revert()
 			---@diagnostic disable-next-line: undefined-field

lua/wikis/commons/Features/ParticipantTable/Components/FactionTable.lua

@@ -17,14 +17,15 @@ local Header = Lua.import('Module:Features/ParticipantTable/Components/FactionHe
 local Section = Lua.import('Module:Features/ParticipantTable/Components/FactionSection')
 
 ---@param props {config: ParticipantTableConfig, factionColumns: string[],
----factionNumbers: table<string, integer>, sections: ParticipantTableSection[]}
+---factionNumbers: table<string, integer>, sections: ParticipantTableSection[], hasSeed: boolean?}
 ---@return VNode
 local function ParticipantTableFactionTable(props)
 	local config = props.config
 	local colSpan = #props.factionColumns
 
 	local display = Html.Div{
 		classes = {'participantTable', 'participantTable-faction'},
+		attributes = props.hasSeed and {['data-toggle-area-content'] = 1} or nil,
 		css = {
 			['grid-template-columns'] = 'repeat(' .. colSpan .. ', 1fr)',
 			width = (colSpan * config.factionColumnWidth) .. 'px',

lua/wikis/commons/Features/ParticipantTable/Components/SeedList.lua

@@ -15,9 +15,8 @@ local Component = Lua.import('Module:Widget/Component')
 local Html = Lua.import('Module:Widget/Html')
 
 local Entry = Lua.import('Module:Features/ParticipantTable/Components/Entry')
-local Title = Lua.import('Module:Features/ParticipantTable/Components/Title')
 
----@param props {hasSeed: boolean?, config: ParticipantTableConfig, sections: ParticipantTableSection[]}
+---@param props {config: ParticipantTableConfig, sections: ParticipantTableSection[]}
 ---@return VNode[]
 local function ParticipantTableSeedList(props)
 	local width = tostring(50 + (props.config.showTeams and 242 or 186)) .. 'px'
@@ -60,11 +59,9 @@ local function ParticipantTableSeedList(props)
 			['max-width'] = '100%!important',
 		},
 		children = {
-			Title{
-				titleText = 'Seeding',
-				buttonText = props.config.title or 'Participants',
-				buttonArea = 1,
-				hasSeed = props.hasSeed,
+			Html.Div{
+				classes = {'participantTable-title'},
+				children = 'Seeding',
 			},
 			display,
 		}

lua/wikis/commons/Features/ParticipantTable/Components/Table.lua

@@ -8,31 +8,26 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
-local Table = Lua.import('Module:Table')
 
 local Component = Lua.import('Module:Widget/Component')
 local Html = Lua.import('Module:Widget/Html')
 local WidgetUtil = Lua.import('Module:Widget/Util')
 
 local Section = Lua.import('Module:Features/ParticipantTable/Components/Section')
-local Title = Lua.import('Module:Features/ParticipantTable/Components/Title')
 
 ---@param props {hasSeed: boolean?, config: ParticipantTableConfig, sections: ParticipantTableSection[]}
 ---@return VNode
 local function ParticipantTableTable(props)
+	local titleText = props.config.showTitle and (props.config.title or 'Participants') or nil
+
 	return Html.Div{
 		classes = {'participantTable'},
-		css = Table.merge({width = props.config.width}, props.hasSeed and {
-			['max-width'] = '100%!important',
-			['vertical-align'] = 'middle',
-		} or nil),
+		css = {width = props.config.width},
 		attributes = props.hasSeed and {['data-toggle-area-content'] = 1} or nil,
 		children = WidgetUtil.collect(
-			(props.hasSeed or props.config.showTitle) and Title{
-				titleText = props.config.title or 'Participants',
-				buttonText = 'Seeding',
-				buttonArea = 2,
-				hasSeed = props.hasSeed,
+			titleText and Html.Div{
+				classes = {'participantTable-title'},
+				children = titleText,
 			} or nil,
 			Array.map(props.sections, function(section)
 				return Section{

lua/wikis/commons/Features/ParticipantTable/Components/Wrapper.lua

@@ -7,25 +7,48 @@
 
 local Lua = require('Module:Lua')
 
+local Button = Lua.import('Module:Widget/Basic/Button')
 local Component = Lua.import('Module:Widget/Component')
 local Html = Lua.import('Module:Widget/Html')
 
 local SeedingList = Lua.import('Module:Features/ParticipantTable/Components/SeedList')
-local ParticipantTable = Lua.import('Module:Features/ParticipantTable/Components/Table')
 
----@param props {hasSeed: boolean?, config: ParticipantTableConfig, sections: ParticipantTableSection[]}
----@return VNode
+---@param props {displayComponent: Component, config: ParticipantTableConfig, sections: ParticipantTableSection[],
+---hasSeed: boolean?, factionColumns?: string[], factionNumbers?: table<string, integer>, showSeedingFirst: boolean?}
+---@return VNode[]
 local function ParticipantTableWrapper(props)
-	local participantTable = ParticipantTable(props)
+	---@type VNode
+	local participantTable = props.displayComponent(props)
 
 	if not props.hasSeed then
 		return participantTable
 	end
 
+	---@param buttonArea integer
+	---@param toggleArea integer
+	---@param text string
+	---@return VNode<ButtonWidgetProps>
+	local makebutton = function(buttonArea, toggleArea, text)
+		return Button{
+			size = 'sm',
+			classes = {'toggle-area-button'},
+			css = {['margin-bottom'] = '0.5rem'},
+			attributes = {
+				['data-toggle-area-btn'] = buttonArea,
+				['data-toggle-area-content'] = toggleArea,
+			},
+			children = text,
+		}
+	end
+
+	local toogleArea = props.showSeedingFirst == true and 2 or 1
+
 	return Html.Div{
-		classes = {'table-responsive', 'toggle-area toggle-area-1'},
-		attributes = {['data-toggle-area'] = 1},
+		classes = {'table-responsive', 'toggle-area toggle-area-' .. toogleArea},
+		attributes = {['data-toggle-area'] = toogleArea},
 		children = {
+			makebutton(1, 2, 'Show Participants'),
+			makebutton(2, 1, 'Show Seedings'),
 			participantTable,
 			SeedingList(props)
 		},

lua/wikis/commons/Features/ParticipantTable/Controller.lua

@@ -9,15 +9,17 @@ local Lua = require('Module:Lua')
 
 local Arguments = Lua.import('Module:Arguments')
 local Array = Lua.import('Module:Array')
+local Logic = Lua.import('Module:Logic')
 
 local Import = Lua.import('Module:Features/ParticipantTable/Api/Import')
 local ImportParser = Lua.import('Module:Features/ParticipantTable/Lib/ParseImported')
 local Parser = Lua.import('Module:Features/ParticipantTable/Lib/ParseInput')
 local Store = Lua.import('Module:Features/ParticipantTable/Api/Storage')
 local Util = Lua.import('Module:Features/ParticipantTable/Lib/Util')
 
-local Display = Lua.import('Module:Features/ParticipantTable/Components/Wrapper')
 local FactionTable = Lua.import('Module:Features/ParticipantTable/Components/FactionTable')
+local ParticipantTable = Lua.import('Module:Features/ParticipantTable/Components/Table')
+local Wrapper = Lua.import('Module:Features/ParticipantTable/Components/Wrapper')
 
 local Controller = {}
 
@@ -37,24 +39,25 @@ function Controller.execute(frame, CustomConfig)
 
 	sections = Util.filterOnlyNotables(sections)
 
-	if not Util.shouldDisplayAsFactionTable(sections, config) then
-		return Display{
-			hasSeed = Util.hasSeed(sections),
-			sections = sections,
-			config = config,
-		}
-	end
+	local shouldDisplayAsFactionTable = Util.shouldDisplayAsFactionTable(sections, config)
+
+	local displayComponent = shouldDisplayAsFactionTable and FactionTable or ParticipantTable
 
-	local factionNumbers = Util.getFactionNumbers(sections, config)
-	local factionColumns = Util.getFactionColumns(config, factionNumbers)
+	local factionNumbers
+	local factionColumns
+	if shouldDisplayAsFactionTable then
+		factionNumbers = Util.getFactionNumbers(sections, config)
+		factionColumns = Util.getFactionColumns(config, factionNumbers)
+	end
 
-	-- todo: add faction wrapper that works with seeding table
-	-- for now in factionTable mode seeding table is not supported
-	return FactionTable{
+	return Wrapper{
+		hasSeed = Util.hasSeed(sections),
+		sections = sections,
 		config = config,
+		displayComponent = displayComponent,
 		factionColumns = factionColumns,
 		factionNumbers = factionNumbers,
-		sections = sections,
+		showSeedingFirst = Logic.readBool(args.showSeedingFirst),
 	}
 end
 

lua/wikis/commons/Widget/Basic/Button.lua

@@ -58,7 +58,7 @@ local function Button(props)
 		table.insert(cssClasses, 'button--large')
 	end
 
-	local cssTable = {}
+	local cssTable = props.css or {}
 	if props.grow then
 		cssTable.width = '100%'
 	end