Module:ElementHubNavigation: Difference between revisions
// via Wikitext Extension for VSCode |
// via Wikitext Extension for VSCode |
||
| Line 1: | Line 1: | ||
--[[ | --[[ | ||
* Name: ElementHubNavigation | * Name: ElementHubNavigation | ||
* Version: 2. | * Version: 2.1 | ||
* Author: Mark W. Datysgeld | * Author: Mark W. Datysgeld | ||
* Description: Hub navigation module for Main Page with responsive design | * Description: Hub navigation module for Main Page with responsive design | ||
* Notes: v2. | * Notes: v2.1 fixes MediaWiki <pre> tag wrapping by removing leading whitespace | ||
* Pattern: MediaWiki table syntax + string concatenation (like ElementNavigation) | * Pattern: MediaWiki table syntax + string concatenation (like ElementNavigation) | ||
* Icon Data: CSS backgrounds defined in Hubs.css - see :root custom properties | * Icon Data: CSS backgrounds defined in Hubs.css - see :root custom properties | ||
| Line 85: | Line 85: | ||
local items = {} | local items = {} | ||
for _, item in ipairs(submenu) do | for _, item in ipairs(submenu) do | ||
-- Generate wikilink: [[url|label]] | -- Generate wikilink: [[url|label]] (no leading whitespace to prevent <pre> wrapping) | ||
table.insert(items, string.format( | table.insert(items, string.format( | ||
' | '<div class="hub-submenu__item">[[%s|%s]]</div>', | ||
item.url, | item.url, | ||
item.label | item.label | ||
| Line 94: | Line 94: | ||
return string.format( | return string.format( | ||
' | '<div class="hub-item__submenu" hidden>%s</div>', | ||
table.concat(items, ' | table.concat(items, '') | ||
) | ) | ||
end | end | ||
| Line 108: | Line 108: | ||
local submenuHtml = generateSubmenu(hub.submenu) | local submenuHtml = generateSubmenu(hub.submenu) | ||
-- Hub item with expandable structure | -- Hub item with expandable structure (no leading whitespace to prevent <pre> wrapping) | ||
-- data-hub: identifier for JS targeting | -- data-hub: identifier for JS targeting | ||
-- data-state: collapsed/expanded state for CSS animations | -- data-state: collapsed/expanded state for CSS animations | ||
return string.format( | return string.format( | ||
' | '<div class="hub-item" data-hub="%s" data-state="collapsed">' .. | ||
' | '<div class="hub-item__trigger">' .. | ||
' | '%s' .. | ||
' | '<span class="hub-label">[[%s|%s]]</span>' .. | ||
' | '</div>%s' .. | ||
' | '</div>', | ||
hub.id, | hub.id, | ||
iconHtml, | iconHtml, | ||