Module:Sandbox/DarthKitty/Module cards

--

-- Describe the following module here. -- WIP

local p = {}

-- Load dependencies local checkType = require('libraryUtil').checkType local getArgs = require('Dev:Arguments').getArgs local userError = require('Dev:User error')

-- Reduce table lookups local createHtml = mw.html.create

-- Describe the following function here.

local function handleExtLinks(extSource, extDocs) if not extSource or extDocs then return end

local function formatter(url, display, paramName) if not url then return '' end

return '[' .. url .. ' ' .. display .. ']'   end

local sourceLink = formatter(extSource, 'Source', 'ext-source') local docsLink = formatter(extDocs, 'Full docs', 'ext-docs')

return sourceLink .. ' &middot; ' .. docsLink end

-- Describe the following function here.

local function buildNavLink(target, display) local wrapper = createHtml('li'):css{ ['border-left'] = '1px solid #aaa', ['margin'] = '0', ['padding'] = '0.5em 0', ['width'] = noTests and '50%' or 'calc(100% / 3)' }

return wrapper:wikitext( .. display .. ) end

-- Describe the following function here.

local function buildCard(name, desc, extSource, extDocs, noTests) local card = createHtml('div'):css{ ['background-color'] = '#f9f9f9', ['border'] = '1px solid #aaa', ['display'] = '-webkit-box', ['display'] = '-webkit-flex', ['display'] = '-ms-flexbox', ['display'] = 'flex', ['-webkit-box-orient'] = 'vertical', ['-webkit-box-direction'] = 'normal', ['-webkit-flex-direction'] = 'column', ['-ms-flex-direction'] = 'column', ['flex-direction'] = 'column', ['margin-bottom'] = '1em', ['padding'] = '1em', ['width'] = 'calc(50% - 2.5em - 2px)' }

local header = createHtml('h3'):wikitext(name):css{ ['font-size'] = '1.2em', ['font-weight'] = 'bold', ['line-height'] = '1.5', ['margin'] = '0' }

local extLinksText = handleExtLinks(extSource, extDocs) local extLinks = createHtml('small') :addClass('hidden') :css('display', 'block') :wikitext(extLinksText)

local descElement = createHtml('p'):wikitext(desc):css{ ['-webkit-box-flex'] = '1', ['-webkit-flex-grow'] = '1', ['-ms-flex-positive'] = '1', ['flex-grow'] = '1', ['margin'] = '0' }

local code = p.buildNavLink(name, 'Code') local sandbox = p.buildNavLink(name .. '/sandbox', 'Sandbox') local tests

if not noTests then tests = buildNavLink(name .. '/testcases', 'Tests') end

local nav = createHtml('ul'):node(code):node(sandbox):node(tests):css{ ['background-color'] = '#fbeecb', ['border-top'] = '1px solid #aaa', ['display'] = 'flex', ['list-style-type'] = 'none', ['margin'] = '1em -1em -1em calc(-1em - 1px)', ['text-align'] = 'center' }

return card:node(header):node(extLinks):node(descElement):node(nav) end

-- Describe the following function here.

function p.main(frame) local args = getArgs(frame)

local wrapper = createHtml('div'):css{ ['display'] = '-webkit-box', ['display'] = '-webkit-flex', ['display'] = '-ms-flexbox', ['display'] = 'flex', ['-webkit-flex-wrap'] = 'wrap', ['-ms-flex-wrap'] = 'wrap', ['flex-wrap'] = 'wrap', ['-webkit-box-pack'] = 'justify', ['-webkit-justify-content'] = 'space-between', ['-ms-flex-pack'] = 'justify', ['justify-content'] = 'space-between', ['line-height'] = '1.5' }

return wrapper end

return p

-- --