Module:Navpills

.template-navpills {

   display: grid;
   gap: var( --space-xs );
   grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
   grid-auto-rows: 3rem;
   font-size: var( --font-size-small );

}

.template-navpill { position: relative; border: 1px solid var( --border-color-base );

   border-radius: var( --border-radius-medium );
   font-weight: var( --font-weight-medium );
   line-height: var( --line-height-xx-small );
   overflow: hidden;

}

.template-navpill-background { position: absolute; inset: 0; pointer-events: none; }

.template-navpill-background:after { content: ;

   position: absolute;
   inset: 0;
   background: linear-gradient(to right, #000, transparent);
   transition: transform 250ms ease;

}

.template-navpill-background img { width: 100%; height: 100%; object-fit: cover; transition: var( --transition-hover );

   transition-property: transform;

}

.template-navpill:hover .template-navpill-background::after {

   transform: translateX( -100% );

}

.template-navpill:hover .template-navpill-background img { transform: scale( 1.1 ); }

.template-navpill > a { position: relative; padding: 0 var( --space-md );

   display: flex;
   align-items: center;
   color: var( --color-emphasized );
   text-decoration: none;

height: 100%; }

.template-navpill > .template-navpill-background + a { color: #fff; text-shadow: -1px 0 .2em #000, 0 1px .2em #000, 1px 0 .2em #000, 0 -1px .2em #000; }

.template-navpill:hover {

   background: var( --background-color-button-quiet--hover );

}

.template-navpill:active {

   background: var( --background-color-button-quiet--active );

}

---

local mArguments --initialize lazily
local p = {}


-- Returns a table containing the numbers of the arguments that exist
-- for the specified prefix. For example, if the prefix was 'data', and
-- 'data1', 'data2', and 'data5' exist, it would return {1, 2, 5}.
local function getArgNums(prefix, args)
	local nums = {}
	for k, v in pairs(args) do
		local num = tostring(k):match('^' .. prefix .. '([1-9]%d*)$')
		if num then table.insert(nums, tonumber(num)) end
	end
	table.sort(nums)
	return nums
end


--Implements {{Navpills}} from the frame
function p.navpills( frame )
	mArguments = require( 'Module:Arguments' )
	return p._navpills( mArguments.getArgs( frame ) )
end

function p._navpills( args )
	if not args then
		return 'Missing arguments'
	end

	local html = mw.html.create( 'div' ):addClass( 'template-navpills' ):attr( 'role', 'navigation' )
	
	for i, _ in ipairs( getArgNums( 'page', args ) ) do
		if not args[ 'page' .. i ] then return end
		local num = tostring( i )
		local navpill = mw.html.create('div'):addClass('template-navpill')

		if args[ 'image' .. i ] then
			navpill:tag('div'):addClass('template-navpill-background')
				:wikitext( string.format( '[[File:%s|x48px|link=]]', args[ 'image' .. num ] ) )
		end

		navpill:wikitext( string.format( '[[%s|%s]]', args[ 'page' .. num ], args[ 'text' .. num ] or args[ 'page' .. num ] ) )
		html:node(navpill)
	end

	return mw.getCurrentFrame():extensionTag{
		name = 'templatestyles', args = { src = 'Module:Navpills/styles.css' }
	} .. tostring( html )
end

return p