Module:ElementHubNavigationV2

Documentation for this module may be created at Module:ElementHubNavigationV2/doc
--[[
* Name: ElementHubNavigationV2 (TEST VERSION)
* Author: Mark W. Datysgeld
* Description: Expandable hub navigation with submenus and animations
* Notes: Uses CSS backgrounds (data URI) for better animation control
* Pattern: Data-attribute driven structure for JS/CSS targeting
* Status: EXPERIMENTAL - for testing expandable menu concept
]]

local p = {}

-- Hub configuration with submenus
local hubs = {
    {
        id = 'nations',
        label = 'Nations',
        icon = 'globe',
        submenus = {
            { label = 'All Nations', url = 'Hub:Nations' },
            { label = 'ccNSO Members', url = 'Category:ccNSO Members' },
            { label = 'GAC Members', url = 'Category:GAC Members' },
            { label = 'By Region', url = 'Hub:Nations#By_Region' }
        }
    },
    {
        id = 'people',
        label = 'People',
        icon = 'user',
        submenus = {
            { label = 'All People', url = 'Hub:People' },
            { label = 'ICANN Board', url = 'Category:ICANN Board' },
            { label = 'Community Leaders', url = 'Category:Community Leaders' },
            { label = 'Ambassadors', url = 'Category:ICANNWiki Ambassadors' }
        }
    },
    {
        id = 'organizations',
        label = 'Organizations',
        icon = 'building',
        submenus = {
            { label = 'All Organizations', url = 'Hub:Organizations' },
            { label = 'Registries', url = 'Category:Registry' },
            { label = 'Registrars', url = 'Category:Registrar' },
            { label = 'Supporting Orgs', url = 'Category:Supporting Organizations' }
        }
    },
    {
        id = 'events',
        label = 'Events',
        icon = 'calendar',
        submenus = {
            { label = 'All Events', url = 'Hub:Events' },
            { label = 'ICANN Meetings', url = 'Category:ICANN Meetings' },
            { label = 'IGF Meetings', url = 'Category:IGF' },
            { label = 'Regional Events', url = 'Category:Regional Events' }
        }
    },
    {
        id = 'topics',
        label = 'Topics',
        icon = 'layers',
        submenus = {
            { label = 'All Topics', url = 'Hub:Topics' },
            { label = 'DNS', url = 'Category:DNS' },
            { label = 'gTLDs', url = 'Category:gTLD' },
            { label = 'Policy', url = 'Category:Policy' }
        }
    }
}

-- Generate submenu items for a hub
local function generateSubmenu(submenus)
    local items = {}
    for i, item in ipairs(submenus) do
        items[i] = string.format(
            '      <a href="/wiki/%s" class="hub-submenu__link">%s</a>',
            item.url,
            item.label
        )
    end
    return table.concat(items, '\n')
end

-- Generate a single expandable hub item
local function generateHubItem(hub)
    return string.format([[
  <div class="hub-item" data-hub="%s" data-state="collapsed">
    <div class="hub-item__trigger">
      <span class="hub-icon" data-icon="%s" aria-hidden="true"></span>
      <span class="hub-label">%s</span>
    </div>
    <div class="hub-item__submenu" hidden aria-label="%s submenu">
%s
    </div>
  </div>]],
        hub.id,
        hub.icon,
        hub.label,
        hub.label,
        generateSubmenu(hub.submenus)
    )
end

-- Main render function
function p.render(frame)
    -- Generate all hub items
    local hubItems = {}
    for i, hub in ipairs(hubs) do
        hubItems[i] = generateHubItem(hub)
    end
    
    -- Build complete output using MediaWiki table syntax + HTML
    local output = {
        '{| class="hub-nav-table"',
        '|- class="hub-nav-row"',
        '| colspan="2" |',
        '<div id="hub-v2" class="hub-navigation" data-active-hub="" role="navigation" aria-label="Hub Navigation V2">',
        table.concat(hubItems, '\n'),
        '</div>',
        '<div id="hub-v2-spacer" aria-hidden="true"></div>',
        '|}'
    }
    
    return table.concat(output, '\n')
end

return p