feat(PrizePool): redesign table via Table2 with collapse rework

javascript/commons/Prizepooltable.js

@@ -5,6 +5,12 @@
 liquipedia.prizepooltable = {
 	init: function() {
 		document.querySelectorAll( '.prizepooltable' ).forEach( ( prizepooltable ) => {
+			// The redesigned (Table2) prize pool wraps its table in
+			// `.prizepool-table-wrapper` and collapses via general-collapsible, so it
+			// supplies its own toggle. Skip it here to avoid a duplicate legacy toggle.
+			if ( prizepooltable.closest( '.prizepool-table-wrapper' ) !== null ) {
+				return;
+			}
 			let cutAfter;
 			if ( typeof prizepooltable.dataset.cutafter !== 'undefined' ) {
 				cutAfter = parseInt( prizepooltable.dataset.cutafter );

lua/spec/prize_pool_spec.lua

@@ -67,8 +67,8 @@ describe('prize pool', function()
 						currency = 'SEK',
 					}
 				},
-				{id = 'QUALIFIES1', type = 'QUALIFIES', index = 1, data = {title = 'A Display', link = 'A_Tournament'}},
 				{id = 'POINTS1', type = 'POINTS', index = 1, data = {title = 'Points', link = 'A Page'}},
+				{id = 'QUALIFIES1', type = 'QUALIFIES', index = 1, data = {title = 'A Display', link = 'A_Tournament'}},
 				{id = 'FREETEXT1', type = 'FREETEXT', index = 1, data = {title = 'A title'}},
 			},
 			ppt.prizes

lua/wikis/commons/Placement.lua

@@ -88,7 +88,6 @@ local prizepoolClasses = {
 	'background-color-first-place',
 	'background-color-second-place',
 	'background-color-third-place',
-	'background-color-fourth-place',
 	w = 'bg-win',
 	q = 'bg-win',
 	l = 'bg-lose',

lua/wikis/commons/PrizePool.lua

@@ -10,7 +10,6 @@ local Lua = require('Module:Lua')
 local Array = Lua.import('Module:Array')
 local Class = Lua.import('Module:Class')
 local Json = Lua.import('Module:Json')
-local Operator = Lua.import('Module:Operator')
 local String = Lua.import('Module:StringUtils')
 
 local Import = Lua.import('Module:PrizePool/Import')
@@ -20,18 +19,14 @@ local Placement = Lua.import('Module:PrizePool/Placement')
 local Opponent = Lua.import('Module:Opponent/Custom')
 
 local Widgets = Lua.import('Module:Widget/All')
-local Div = Widgets.Div
-local IconFa = Lua.import('Module:Widget/Image/Icon/Fontawesome')
-local TableRow = Widgets.TableRow
-local TableCell = Widgets.TableCell
+local Span = Widgets.Span
+local TableCell = Lua.import('Module:Widget/Table2/All').Cell
 
 ---@class PrizePool: BasePrizePool
 ---@operator call(...): PrizePool
 ---@field placements PrizePoolPlacement[]
 local PrizePool = Class.new(BasePrizePool)
 
-local NON_BREAKING_SPACE = ' '
-
 ---@param args table
 function PrizePool:readPlacements(args)
 	local currentPlace = 0
@@ -52,16 +47,19 @@ function PrizePool:readPlacements(args)
 end
 
 ---@param placement PrizePoolPlacement
----@return WidgetTableCell
+---@return Renderable
 function PrizePool:placeOrAwardCell(placement)
-	local placeCell = TableCell{
-		children = {placement:getMedal() or '', NON_BREAKING_SPACE, placement:_displayPlace()},
-		css = {['font-weight'] = 'bolder'},
+	local badgeClass = placement:getBadgeClass()
+	local placeDisplay = placement:_displayPlace()
+	local content = badgeClass
+		and Span{classes = {'prizepooltable-badge', badgeClass}, children = {placeDisplay}}
+		or placeDisplay
+
+	return TableCell{
+		children = {content},
 		classes = {'prizepooltable-place'},
+		rowspan = #placement.opponents,
 	}
-	placeCell.rowSpan = #placement.opponents
-
-	return placeCell
 end
 
 ---@param placement PrizePoolPlacement
@@ -73,61 +71,23 @@ end
 ---@param placement PrizePoolPlacement
 ---@return boolean
 function PrizePool:applyCutAfter(placement)
-	if placement.placeStart > self.options.cutafter then
-		return true
-	end
-	return false
-end
-
----@param placement PrizePoolPlacement?
----@param nextPlacement PrizePoolPlacement
----@param rows WidgetTableRow[]
-function PrizePool:applyToggleExpand(placement, nextPlacement, rows)
-	if placement ~= nil
-		and placement.placeStart <= self.options.cutafter
-		and placement.placeEnd >= self.options.cutafter
-		and placement ~= self.placements[#self.placements]
-		and nextPlacement.placeStart ~= placement.placeStart
-		and nextPlacement.placeEnd ~= placement.placeEnd then
-
-		table.insert(rows, self:_toggleExpand(placement.placeEnd + 1))
-	end
+	return placement.placeStart > self.options.cutafter
 end
 
----@param placeStart number
----@return WidgetTableRow
-function PrizePool:_toggleExpand(placeStart)
-	local placeEnd = self.placements[#self.placements].placeEnd
-
-	if self.options.hideafter < math.huge then
-		local lastCut = Array.max(
-			Array.filter(self.placements, function (placement)
-				return placement.placeEnd <= self.options.hideafter
-			end),
-			Operator.property('placeEnd')
-		)
-		placeEnd = lastCut.placeEnd
+---@return {opentext: string, closetext: string}?
+function PrizePool:_collapseText()
+	local visible = Array.filter(self.placements, function(placement)
+		return placement.placeStart <= self.options.hideafter
+	end)
+	local lastVisible = visible[#visible]
+	local firstHidden = Array.find(visible, function(placement)
+		return placement.placeStart > self.options.cutafter
+	end)
+	if not firstHidden or not lastVisible then
+		return nil
 	end
-
-	local text = 'place ' .. placeStart .. ' to ' .. placeEnd
-	local expandButton = TableCell{
-		children = Div{children = {
-			text,
-			'&nbsp;',
-			IconFa{iconName = 'expand'},
-		}},
-		classes = {'general-collapsible-expand-button'},
-	}
-	local collapseButton = TableCell{
-		children = Div{children = {
-			text,
-			'&nbsp;',
-			IconFa{iconName = 'collapse'},
-		}},
-		classes = {'general-collapsible-collapse-button'},
-	}
-
-	return TableRow{classes = {'ppt-toggle-expand'}, children = {expandButton, collapseButton}}
+	local text = 'place ' .. firstHidden.placeStart .. ' to ' .. lastVisible.placeEnd
+	return {opentext = text, closetext = text}
 end
 
 -- get the lpdbObjectName depending on opponenttype

lua/wikis/commons/PrizePool/Award.lua

@@ -17,11 +17,7 @@ local Placement = Lua.import('Module:PrizePool/Award/Placement')
 
 local Opponent = Lua.import('Module:Opponent/Custom')
 
-local Widgets = Lua.import('Module:Widget/All')
-local Div = Widgets.Div
-local IconFa = Lua.import('Module:Widget/Image/Icon/Fontawesome')
-local TableRow = Widgets.TableRow
-local TableCell = Widgets.TableCell
+local TableCell = Lua.import('Module:Widget/Table2/All').Cell
 
 --- @class AwardPrizePool: BasePrizePool
 --- @operator call(...): AwardPrizePool
@@ -50,58 +46,24 @@ function AwardPrizePool:readPlacements(args)
 end
 
 ---@param placement AwardPlacement
----@return WidgetTableCell
+---@return Renderable
 function AwardPrizePool:placeOrAwardCell(placement)
-	local awardCell = TableCell{
+	return TableCell{
 		children = {placement.award},
-		css = {['font-weight'] = 'bolder'},
 		classes = {'prizepooltable-place'},
+		rowspan = #placement.opponents,
 	}
-	awardCell.rowSpan = #placement.opponents
-
-	return awardCell
 end
 
 ---@param placement AwardPlacement
 ---@return boolean
 function AwardPrizePool:applyCutAfter(placement)
-	if (placement.previousTotalNumberOfParticipants + 1) > self.options.cutafter then
-		return true
-	end
-	return false
+	return (placement.previousTotalNumberOfParticipants + 1) > self.options.cutafter
 end
 
----@param placement AwardPlacement?
----@param nextPlacement AwardPlacement
----@param rows WidgetTableRow[]
-function AwardPrizePool:applyToggleExpand(placement, nextPlacement, rows)
-	if placement ~= nil
-		and (placement.previousTotalNumberOfParticipants + 1) <= self.options.cutafter
-		and placement.currentTotalNumberOfParticipants >= self.options.cutafter
-		and placement ~= self.placements[#self.placements] then
-
-		table.insert(rows, self:_toggleExpand())
-	end
-end
-
----@return WidgetTableRow
-function AwardPrizePool:_toggleExpand()
-	local expandButton = TableCell{
-		children = Div{children = {
-			'Show more Awards&nbsp;',
-			IconFa{iconName = 'expand'},
-		}},
-		classes = {'general-collapsible-expand-button'},
-	}
-	local collapseButton = TableCell{
-		children = Div{children = {
-			'Show less Awards&nbsp;',
-			IconFa{iconName = 'collapse'},
-		}},
-		classes = {'general-collapsible-collapse-button'},
-	}
-
-	return TableRow{classes = {'ppt-toggle-expand'}, children = {expandButton, collapseButton}}
+---@return {opentext: string, closetext: string}?
+function AwardPrizePool:_collapseText()
+	return {opentext = 'Show more Awards', closetext = 'Show less Awards'}
 end
 
 -- Get the lpdbObjectName depending on opponenttype