Módulo:Teste

A documentação para este módulo pode ser criada em Módulo:Teste/doc

local p = {}

function p.render(frame)
    local args = frame:getParent().args
    local html = mw.html.create('div')
        :addClass('habilidades-container')

    -- Botões
    local botoes = html:tag('div'):addClass('habilidades-botoes')

    for i = 1, 6 do
        botoes:tag('button')
            :attr('onclick', 'mostrarHabilidade(' .. i .. ')')
            :wikitext(i)
    end

    -- Conteúdo inicial (habilidade 1)
    html:tag('h2')
        :attr('id', 'habilidade-titulo')
        :wikitext(args['titulo1'] or '')

    html:tag('div')
        :attr('id', 'habilidade-descricao')
        :wikitext(args['descricao1'] or '')

    local video = html:tag('div')
        :addClass('habilidade-video')

    video:tag('iframe')
        :attr('id', 'habilidade-video')
        :attr('src', args['video1'] or '')
        :attr('frameborder', '0')
        :attr('allowfullscreen', 'true')

    -- Dados JS
    local js = '<script>const habilidades = {'

    for i = 1, 6 do
        js = js .. i .. ':{' ..
            'titulo:`' .. (args['titulo'..i] or '') .. '`,' ..
            'descricao:`' .. (args['descricao'..i] or '') .. '`,' ..
            'video:`' .. (args['video'..i] or '') .. '`},'
    end

    js = js .. [[};

function mostrarHabilidade(n){
  document.getElementById('habilidade-titulo').innerHTML = habilidades[n].titulo;
  document.getElementById('habilidade-descricao').innerHTML = habilidades[n].descricao;
  document.getElementById('habilidade-video').src = habilidades[n].video;
}
</script>]]

    return tostring(html) .. js
end

return p