Module:Timeline

Implements Template:Timeline

---

local mArguments --initialize lazily
local floatingui = require( 'Module:FloatingUI' )
local getArgNums = require( 'Module:Common' ).getArgNums
local p = {}


--- Create the HTML for timeline section label
--- @param label string - Label for the section
--- @param labelShort string - Optional shorten label for the section, used in small viewport
--- @return mw.html
local function createLabel( label, labelShort )
	labelShort = labelShort or label

	local html = mw.html.create( 'div' ):addClass( 'template-timeline-section-label' )
	html:tag( 'div' ):addClass( 'template-timeline-section-label-long' )
		:wikitext( label )
		:done()
		:tag( 'div' ):addClass( 'template-timeline-section-label-short' )
		:wikitext( labelShort )
		:allDone()
	return html
end


--- Create the HTML for timeline period
--- @param args table - Arguments
--- @param key string - Prefix for the arg name
--- @return mw.html
local function createPeriod( args, key )
	local label = args[key]
	local desc = args[key .. 'desc']
	local pStart = args[key .. 'start']
	local pEnd = args[key .. 'end']
	local pStartUncertain = args[key .. 'startuncertain']
	local pEndUncertain = args[key .. 'enduncertain']
	local pColor = args[key .. 'color']

	local html = mw.html.create( 'div' ):addClass( 'template-timeline-period' )
		:css( '--template-timeline-start', pStart )
		:css( '--template-timeline-end', pEnd )
		:css( '--template-timeline-start-uncertain', pStartUncertain )
		:css( '--template-timeline-end-uncertain', pEndUncertain )
		:css( '--template-timeline-color', pColor )
		:allDone()

	local content
	if desc then
		content = mw.html.create('div')
			:tag( 'div' )
			:addClass( 'template-timeline-tooltip-title' )
			:wikitext( label )
			:done()
			:tag( 'div' )
			:addClass( 'template-timeline-tooltip-desc' )
			:wikitext( desc )
			:done()
	else
		content = label
	end

	html = floatingui.render( {
		reference = html,
		content = content
	} )
	return html
end

--Implements {{timeline}} from the frame
function p.timeline( frame )
	mArguments = require( 'Module:Arguments' )
	return p._timeline( mArguments.getArgs( frame ), frame )
end

function p._timeline( args, frame )
	if not args then
		return 'Missing arguments'
	end

	local html = mw.html.create( 'div' ):addClass( 'template-timeline' )

	for i, _ in ipairs( getArgNums( 'section', args ) ) do
		local num = tostring( i )
		local key = 'section' .. num
		local label = args[key]
		local length = args[key .. 'length']
		if not label or not length then return end

		local section = mw.html.create( 'div' ):addClass( 'template-timeline-section' )
		section:node( createLabel( label, args[key .. 'short'] ) )
		section:css( '--template-timeline-length', length )

		local periodKey = key .. 'period'
		for j, _ in ipairs( getArgNums( periodKey, args ) ) do
			local pNum = tostring( j )
			section:node( createPeriod( args, periodKey .. pNum ) )
		end

		html:node( section )
	end

	return table.concat( {
		frame:extensionTag {
			name = 'templatestyles', args = { src = 'Module:Timeline/styles.css' }
		},
		floatingui.load(),
		tostring( html )
	} )
end

-- Debug function
function p.test()
	return p._timeline(
		{
			['section1'] = '[[Years of the Trees]]',
			['section1short'] = 'Y.T.',
			['section1length'] = '1500',
			['section2'] = '[[First Age]]',
			['section2short'] = 'I',
			['section2length'] = '590',
			['section3'] = '[[Second Age]]',
			['section3short'] = 'II',
			['section3length'] = '3441',
			['section3period1'] = 'Existence of Númenor, from year 32 spanning to year 3319.',
			['section3period1start'] = '32',
			['section3period1end'] = '3319',
			['section3period1color'] = 'orange',
			['section4'] = '[[Third Age]]',
			['section4short'] = 'III',
			['section4length'] = '3021',
			['section5'] = '[[Fourth Age]]',
			['section5short'] = 'IV',
			['section5length'] = '1000'
		},
		mw.getCurrentFrame()
	)
end

return p