ICANNWiki

Module:ElementHubNavigation: Difference between revisions

← Older edit
MarkWD (talk | contribs)
Bureaucrats, Check users, Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), steward, Suppressors, Administrators, Temporary account IP viewers
25,069 edits
// via Wikitext Extension for VSCode
// via Wikitext Extension for VSCode
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
--[[
--[[
* Name: ElementHubNavigation
* Name: ElementHubNavigation
* Version: 2.1
* Author: Mark W. Datysgeld
* Author: Mark W. Datysgeld
* Description: Hub navigation module for Main Page with zero-CLS responsive design
* Description: Hub navigation module for Main Page with responsive design
* Notes: Single SSR block with data-URI icons; mobile sticky bottom bar; desktop inline grid
* Notes: v2.1 fixes MediaWiki <pre> tag wrapping by removing leading whitespace
* Uses MediaWiki table syntax + string concatenation (like ElementNavigation pattern)
* Pattern: MediaWiki table syntax + string concatenation (like ElementNavigation)
* Icon Data: CSS backgrounds defined in Hubs.css - see :root custom properties
]]
]]


local p = {}
local p = {}


-- Icon data URIs (URL-encoded SVGs with currentColor for CSS theming)
-- Hub configuration with CSS background icon identifiers and submenu items
local icons = {
-- Icon backgrounds defined in Hubs.css :root custom properties (--icon-*)
     nations = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 aria-hidden=%22true%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3 12h18%22/%3E%3Cpath d=%22M12 3c3.5 3.5 3.5 14.5 0 18M12 3c-3.5 3.5-3.5 14.5 0 18%22/%3E%3C/svg%3E',
-- Submenu URLs cross-reference: Special:Ask queries and Category pages
     people = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 aria-hidden=%22true%22%3E%3Cpath d=%22M20 21a8 8 0 0 0-16 0%22/%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%224%22/%3E%3C/svg%3E',
local hubs = {
     organizations = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 aria-hidden=%22true%22%3E%3Crect x=%224%22 y=%223%22 width=%2216%22 height=%2218%22 rx=%221%22/%3E%3Cpath d=%22M9 7h6M9 11h6M9 15h6M12 21v-4%22/%3E%3C/svg%3E',
     {
     events = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 aria-hidden=%22true%22%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2216%22 rx=%222%22/%3E%3Cpath d=%22M16 3v4M8 3v4M3 9h18%22/%3E%3C/svg%3E',
        id = 'nations',
     topics = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 aria-hidden=%22true%22%3E%3Cpath d=%22M12 3 3 8l9 5 9-5-9-5z%22/%3E%3Cpath d=%22m3 13 9 5 9-5%22/%3E%3C/svg%3E'
        label = 'Nations',
        url = 'Hub:Nations',
        icon = 'globe',
        submenu = {
            { label = 'All Nations', url = 'Special:Ask/-5B-5BCategory:Countries-5D-5D' },
            { label = 'ccNSO Members', url = 'Category:ccNSO_Members' },
            { label = 'GAC Representatives', url = 'Category:GAC' },
            { label = 'Regional Groups', url = 'Category:Regional_Internet_Registries' }
        }
    },
     {
        id = 'people',
        label = 'People',
        url = 'Hub:People',
        icon = 'user',
        submenu = {
            { label = 'All People', url = 'Special:Ask/-5B-5BCategory:People-5D-5D' },
            { label = 'ICANN Board', url = 'Category:ICANN_Board' },
            { label = 'Executives', url = 'Category:Executives' },
            { label = 'Authors', url = 'Category:Authors' }
        }
    },
     {
        id = 'organizations',
        label = 'Organizations',
        url = 'Hub:Organizations',
        icon = 'building',
        submenu = {
            { label = 'All Organizations', url = 'Special:Ask/-5B-5BCategory:Organizations-5D-5D' },
            { label = 'Supporting Organizations', url = 'Category:Supporting_Organizations' },
            { label = 'Advisory Committees', url = 'Category:Advisory_Committees' },
            { label = 'Registries', url = 'Category:Registries' }
        }
    },
     {
        id = 'events',
        label = 'Events',
        url = 'Hub:Events',
        icon = 'calendar',
        submenu = {
            { label = 'All Events', url = 'Special:Ask/-5B-5BCategory:Events-5D-5D' },
            { label = 'ICANN Meetings', url = 'Category:ICANN_Meetings' },
            { label = 'Regional Events', url = 'Category:Regional_Events' },
            { label = 'Upcoming', url = 'Special:Ask/-5B-5BHas-20start-20date::-3E{{CURRENTTIMESTAMP}}-5D-5D' }
        }
    },
     {
        id = 'topics',
        label = 'Topics',
        url = 'Hub:Topics',
        icon = 'layers',
        submenu = {
            { label = 'All Topics', url = 'Special:Ask/-5B-5BCategory:Topics-5D-5D' },
            { label = 'DNS', url = 'Category:DNS' },
            { label = 'Policy', url = 'Category:Policy' },
            { label = 'Technical', url = 'Category:Technical' }
        }
    }
}
}


-- Hub configuration
-- Generate submenu HTML from submenu items
local hubs = {
local function generateSubmenu(submenu)
     { id = 'nations', label = 'Nations', url = 'Hub:Nations', icon = icons.nations },
     if not submenu or #submenu == 0 then
     { id = 'people', label = 'People', url = 'Hub:People', icon = icons.people },
        return ''
    { id = 'organizations', label = 'Organizations', url = 'Hub:Organizations', icon = icons.organizations },
    end
     { id = 'events', label = 'Events', url = 'Hub:Events', icon = icons.events },
   
     { id = 'topics', label = 'Topics', url = 'Hub:Topics', icon = icons.topics }
    local items = {}
}
     for _, item in ipairs(submenu) do
        -- Generate wikilink: [[url|label]] (no leading whitespace to prevent <pre> wrapping)
        table.insert(items, string.format(
            '<div class="hub-submenu__item">[[%s|%s]]</div>',
            item.url,
            item.label
        ))
    end
   
     return string.format(
        '<div class="hub-item__submenu" hidden>%s</div>',
        table.concat(items, '')
     )
end


-- Generate a single hub link item as HTML string
-- Generate a single hub item with expandable structure
local function generateHubLink(hub)
local function generateHubItem(hub)
    -- Icon as CSS background via data-icon attribute
    -- CSS: .hub-icon[data-icon="globe"] { background-image: var(--icon-globe); }
    local iconHtml = string.format('<span class="hub-icon" data-icon="%s" aria-hidden="true"></span>', hub.icon)
   
    -- Generate submenu markup
    local submenuHtml = generateSubmenu(hub.submenu)
   
    -- Hub item with expandable structure (no leading whitespace to prevent <pre> wrapping)
    -- data-hub: identifier for JS targeting
    -- data-state: collapsed/expanded state for CSS animations
     return string.format(
     return string.format(
         '<li class="cdx-hub__item"><a href="/wiki/%s" class="cdx-hub__link" data-hub="%s"><span class="cdx-hub__icon"><img src="%s" alt="" width="24" height="24" aria-hidden="true"></span><span class="cdx-hub__label">%s</span></a></li>',
         '<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,
        iconHtml,
         hub.url,
         hub.url,
         hub.id,
         hub.label,
         hub.icon,
         submenuHtml
        hub.label
     )
     )
end
end
Line 40: Line 128:
-- Main render function
-- Main render function
function p.render(frame)
function p.render(frame)
     -- Generate all hub links
     -- Generate all hub items
     local hubLinks = {}
     local hubItems = {}
     for i, hub in ipairs(hubs) do
     for i, hub in ipairs(hubs) do
         hubLinks[i] = generateHubLink(hub)
         hubItems[i] = generateHubItem(hub)
     end
     end
      
      
     -- Build complete output using MediaWiki table syntax + HTML
     -- Build complete output using MediaWiki table syntax + HTML
    -- data-active-hub: tracks which hub is expanded (for CSS sibling effects)
    -- hub-drawer-overlay: dimmed background for mobile drawer
     local output = {
     local output = {
         '{| class="hub-nav-table"',
         '{| class="hub-nav-table"',
         '|- class="hub-nav-row"',
         '|- class="hub-nav-row"',
         '| colspan="2" |',
         '| colspan="2" |',
         '<div id="hub" class="cdx-hub" role="navigation" aria-label="Hub Navigation">',
         '<div id="hub" class="hub-navigation" role="navigation" aria-label="Hub Navigation" data-active-hub="">',
         '  <ul class="cdx-hub__list">',
         '  <div class="hub-bar">',
         '    ' .. table.concat(hubLinks, '\n   '),
         table.concat(hubItems, '\n'),
         '  </ul>',
         '  </div>',
         '  <div class="cdx-hub__panel" aria-hidden="true"></div>',
         '  <div class="hub-drawer-overlay" hidden></div>',
         '</div>',
         '</div>',
         '<div id="hub-spacer" aria-hidden="true"></div>',
         '<div id="hub-spacer" aria-hidden="true"></div>',
Retrieved from "https://staging.icannwiki.org/Module:ElementHubNavigation"