diff --git a/javascript/commons/Miscellaneous.js b/javascript/commons/Miscellaneous.js index eae5d88d974..bf8567aff72 100644 --- a/javascript/commons/Miscellaneous.js +++ b/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 diff --git a/lua/spec/participant_table_spec.lua b/lua/spec/participant_table_spec.lua index 38ea3a6bb22..aefe084d201 100644 --- a/lua/spec/participant_table_spec.lua +++ b/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 diff --git a/lua/spec/snapshots/participant_faction_table.png b/lua/spec/snapshots/participant_faction_table.png index e71d8dcfa62..c4f00debaec 100644 Binary files a/lua/spec/snapshots/participant_faction_table.png and b/lua/spec/snapshots/participant_faction_table.png differ diff --git a/lua/spec/snapshots/participant_faction_table_with_section.png b/lua/spec/snapshots/participant_faction_table_with_section.png index 09f3ce0b6aa..a36a22140e5 100644 Binary files a/lua/spec/snapshots/participant_faction_table_with_section.png and b/lua/spec/snapshots/participant_faction_table_with_section.png differ diff --git a/lua/spec/snapshots/participant_faction_table_with_seed.png b/lua/spec/snapshots/participant_faction_table_with_seed.png new file mode 100644 index 00000000000..02424f011fe Binary files /dev/null and b/lua/spec/snapshots/participant_faction_table_with_seed.png differ diff --git a/lua/spec/snapshots/participant_table.png b/lua/spec/snapshots/participant_table.png index 162e96c0c80..a68014d12f6 100644 Binary files a/lua/spec/snapshots/participant_table.png and b/lua/spec/snapshots/participant_table.png differ diff --git a/lua/spec/snapshots/participant_table_seed_list.png b/lua/spec/snapshots/participant_table_seed_list.png new file mode 100644 index 00000000000..ba552f7f087 Binary files /dev/null and b/lua/spec/snapshots/participant_table_seed_list.png differ diff --git a/lua/spec/snapshots/participant_table_with_duo.png b/lua/spec/snapshots/participant_table_with_duo.png index fe9cd8400b9..7798e55c891 100644 Binary files a/lua/spec/snapshots/participant_table_with_duo.png and b/lua/spec/snapshots/participant_table_with_duo.png differ diff --git a/lua/spec/snapshots/participant_table_with_section.png b/lua/spec/snapshots/participant_table_with_section.png index 81c493c0032..84d9bba3949 100644 Binary files a/lua/spec/snapshots/participant_table_with_section.png and b/lua/spec/snapshots/participant_table_with_section.png differ diff --git a/lua/spec/snapshots/participant_table_with_seed.png b/lua/spec/snapshots/participant_table_with_seed.png index 2ce0392bd17..81928e34c27 100644 Binary files a/lua/spec/snapshots/participant_table_with_seed.png and b/lua/spec/snapshots/participant_table_with_seed.png differ diff --git a/lua/wikis/commons/Features/ParticipantTable/Components/FactionTable.lua b/lua/wikis/commons/Features/ParticipantTable/Components/FactionTable.lua index f7a80f33876..c9f4538ffd8 100644 --- a/lua/wikis/commons/Features/ParticipantTable/Components/FactionTable.lua +++ b/lua/wikis/commons/Features/ParticipantTable/Components/FactionTable.lua @@ -17,7 +17,7 @@ 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, sections: ParticipantTableSection[]} +---factionNumbers: table, sections: ParticipantTableSection[], hasSeed: boolean?} ---@return VNode local function ParticipantTableFactionTable(props) local config = props.config @@ -25,6 +25,7 @@ local function ParticipantTableFactionTable(props) 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', diff --git a/lua/wikis/commons/Features/ParticipantTable/Components/SeedList.lua b/lua/wikis/commons/Features/ParticipantTable/Components/SeedList.lua index 7b2b3ce5839..32eead38ffc 100644 --- a/lua/wikis/commons/Features/ParticipantTable/Components/SeedList.lua +++ b/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, } diff --git a/lua/wikis/commons/Features/ParticipantTable/Components/Table.lua b/lua/wikis/commons/Features/ParticipantTable/Components/Table.lua index 22b1ed61f79..b23e2c22444 100644 --- a/lua/wikis/commons/Features/ParticipantTable/Components/Table.lua +++ b/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{ diff --git a/lua/wikis/commons/Features/ParticipantTable/Components/Title.lua b/lua/wikis/commons/Features/ParticipantTable/Components/Title.lua deleted file mode 100644 index b1e3499301d..00000000000 --- a/lua/wikis/commons/Features/ParticipantTable/Components/Title.lua +++ /dev/null @@ -1,31 +0,0 @@ ---- --- @Liquipedia --- page=Module:Features/ParticipantTable/Components/Title --- --- Please see https://github.com/Liquipedia/Lua-Modules to contribute --- - -local Lua = require('Module:Lua') - -local Component = Lua.import('Module:Widget/Component') -local Html = Lua.import('Module:Widget/Html') -local WidgetUtil = Lua.import('Module:Widget/Util') - ----@param props {titleText: string, buttonText: string?, buttonArea: integer?, hasSeed: boolean} ----@return VNode[] -local function ParticipantTableTitle(props) - return WidgetUtil.collect( - props.hasSeed and Html.Span{ - classes = {'toggle-area-button', 'button', 'button--small', 'button--primary'}, - css = {position = 'absolute'}, - attributes = {['data-toggle-area-btn'] = props.buttonArea}, - children = props.buttonText, - } or nil, - Html.Div{ - classes = {'participantTable-title'}, - children = props.titleText, - } - ) -end - -return Component.component(ParticipantTableTitle) diff --git a/lua/wikis/commons/Features/ParticipantTable/Components/Wrapper.lua b/lua/wikis/commons/Features/ParticipantTable/Components/Wrapper.lua index b48f82e6c8c..c47920f9d11 100644 --- a/lua/wikis/commons/Features/ParticipantTable/Components/Wrapper.lua +++ b/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, 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 + 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) }, diff --git a/lua/wikis/commons/Features/ParticipantTable/Controller.lua b/lua/wikis/commons/Features/ParticipantTable/Controller.lua index a167ecdfb5a..8fd887956ff 100644 --- a/lua/wikis/commons/Features/ParticipantTable/Controller.lua +++ b/lua/wikis/commons/Features/ParticipantTable/Controller.lua @@ -9,6 +9,7 @@ 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') @@ -16,8 +17,9 @@ 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 diff --git a/lua/wikis/commons/Widget/Basic/Button.lua b/lua/wikis/commons/Widget/Basic/Button.lua index 84ae807d744..61c1037486c 100644 --- a/lua/wikis/commons/Widget/Basic/Button.lua +++ b/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 diff --git a/stylesheets/commons/OpponentList.scss b/stylesheets/commons/OpponentList.scss index 51b872b4c22..27723d6d590 100644 --- a/stylesheets/commons/OpponentList.scss +++ b/stylesheets/commons/OpponentList.scss @@ -1,14 +1,17 @@ /******************************************************************************* -Modules: ParticipantTable/Base, ParticipantTable/Custom, ParticipantTable/Starcraft -Author: hjpalpha +Modules: Features/ParticipantTable/* *******************************************************************************/ .participantTable { - border-top: 1px solid var( --table-border-color, #bbbbbb ); - border-left: 1px solid var( --table-border-color, #bbbbbb ); + border: 1px solid var( --clr-on-surface-light-primary-12 ); + border-radius: 0.5rem; margin-bottom: 8px; overflow-x: auto; + .theme--dark & { + border: 1px solid var( --clr-on-surface-dark-primary-12 ); + } + @media ( max-width: 900px ) { min-width: 100% !important; } @@ -24,12 +27,19 @@ Author: hjpalpha .participantTable-title { padding: 4px; - background-color: var( --table-header-variant-background-color, #eaecf0 ); - border-bottom: 1px solid var( --table-border-color, #bbbbbb ); - border-right: 1px solid var( --table-border-color, #bbbbbb ); + background-color: var( --clr-on-surface-light-primary-4 ); + outline-color: var( --clr-on-surface-light-primary-12 ); + color: var( --clr-secondary-25 ); + border: 1px solid var( --clr-on-surface-light-primary-12 ); font-weight: bold; width: 100%; - text-align: center; + + .theme--dark & { + background-color: var( --clr-on-surface-dark-primary-8 ); + outline-color: var( --clr-on-surface-dark-primary-12 ); + color: var( --clr-secondary-85 ); + border: 1px solid var( --clr-on-surface-dark-primary-12 ); + } } .participantTable-row { @@ -48,14 +58,17 @@ Author: hjpalpha } .participantTable-entry { - background-color: inherit; - border-bottom: 1px solid var( --table-border-color, #bbbbbb ); - border-right: 1px solid var( --table-border-color, #bbbbbb ); + background-color: var( --clr-background ); + border: 1px solid var( --clr-on-surface-light-primary-12 ); padding: 4px; text-align: left; transition: 0.5s; transition-property: border-color; + .theme--dark & { + border: 1px solid var( --clr-on-surface-dark-primary-12 ); + } + @media ( max-width: 900px ) { &:not( .participantTable-faction ) { flex: 1 0 auto; @@ -110,8 +123,6 @@ Author: hjpalpha } .brkts-opponent-hover-active > & { - border-color: transparent; - &::after { box-shadow: -1px 0 2px rgba( 0, 0, 0, 0.7 ) inset, 1px 0 2px rgba( 0, 0, 0, 0.7 ) inset, 0 -1px 2px rgba( 0, 0, 0, 0.7 ) inset, 0 1px 2px rgba( 0, 0, 0, 0.7 ) inset; @@ -123,21 +134,27 @@ Author: hjpalpha } .participantTable-tbd { - border-bottom: 1px solid var( --table-border-color, #bbbbbb ); - border-right: 1px solid var( --table-border-color, #bbbbbb ); + border: 1px solid var( --clr-on-surface-light-primary-12 ); padding: 4px; font-style: italic; text-align: center; width: 100%; + + .theme--dark & { + border: 1px solid var( --clr-on-surface-dark-primary-12 ); + } } .participantTable-seed { - background-color: inherit; - border-bottom: 1px solid var( --table-border-color, #bbbbbb ); - border-right: 1px solid var( --table-border-color, #bbbbbb ); + background-color: var( --clr-background ); + border: 1px solid var( --clr-on-surface-light-primary-12 ); padding: 8px 4px 4px; text-align: center; width: 100%; + + .theme--dark & { + border: 1px solid var( --clr-on-surface-dark-primary-12 ); + } } .participantTable-empty { @@ -164,102 +181,4 @@ Author: hjpalpha .participantTable-faction-header { font-weight: bold; - text-align: center; -} - -/******************************************************************************* -Template(s): Participants Tables -Author(s): FO-nTTaX -*******************************************************************************/ -.participants-table-scroller { - overflow: auto; -} - -.participants-table .participants-row .participants-cell { - width: 200px; -} - -.participants-table-buttons { - display: none; - font-size: 200%; - - &::after { - clear: both; - content: " "; - display: block; - } -} - -.participants-table-button-left { - float: left; - cursor: pointer; -} - -.participants-table-button-right { - float: right; - cursor: pointer; -} - -.participants-table-button-left.inactive, -.participants-table-button-right.inactive { - opacity: 0.5; - cursor: initial; -} - -@media ( max-width: 600px ) { - .participants-table .participants-row .participants-cell { - min-width: 200px; - } - - .participants-table-columns-2 .participants-row .participants-cell { - width: 50%; - } - - .participants-table-columns-3 .participants-row .participants-cell { - width: 33%; - } - - .participants-table-columns-4 .participants-row .participants-cell { - width: 25%; - } - - .participants-table-columns-2 { - width: 180% !important; - } - - .participants-table-columns-3 { - width: 270% !important; - } - - .participants-table-columns-4 { - width: 360% !important; - } - - .participants-table-buttons { - display: block; - } -} - -/******************************************************************************* -Template(s): Module:ParticipantTable -Author(s): Rapture -*******************************************************************************/ -.participanttable .team-template-image img { - height: 20px; - width: 48px; -} - -@media ( max-width: 767px ) { - .wiki-ageofempires .participanttable .player-row { - display: flex; - flex-wrap: wrap; - - > td { - flex: 1 0 auto; - width: unset !important; - min-width: 50%; - min-height: 35px; - border-width: 1px 1px 0 0 !important; - } - } }