Publicado em por Paulo Künzel

Módulo para criação de tags e componentes

[download id=”390″]

Introdução

Nesse artigo serão mostradas funções que podem ser utilizadas para a criação de componentes HTML. O projeto será uma versão simplificada de uma biblioteca que estou montando para agilizar o desenvolvimento e gerenciamento de objetos criados dinamicamente.

Como requisito, você precisa ter conhecimentos básicos de JavaScript e HTML5, acesso a biblioteca CSS w3.css e um navegador atualizado que aceite o básico do ES6.

  • Criando as Tags básicas

    Como você deve saber, o JavaScript oferece uma função que permite a criação de qualquer tag. Basta fornecer corretamente o nome da tag como uma string por parâmetro que a função retornará o elemento para que você possa manipulá-lo. Segue abaixo um exemplo:

    document.createElement("p");

    O código acima retorna um elemento do tipo paragrafo. Ele pode ser manipulado (adicionadas, classes, estilo, texto, etc..) da mesma maneira que os elementos da função getElementById() também podem ser manipulados. Mas ele é simples e dependendo das necessidades, você acabará tendo diversos trechos de código onde cria uma tag, adiciona classes e adiciona conteúdo. Para nos ajudar com isso, teremos as duas seguintes funções:

    function CriarElementoComClasse(nomeTag, listaDeClasses) {
    let element = document.createElement(nomeTag);
    if (listaDeClasses) {
        listaDeClasses.forEach(classe => {
            element.classList.add(classe);
        });
    }
    return element;
}

function CriarElementoComClasseTexto(nomeTag, listaDeClasses, texto) {
    let element = CriarElementoComClasse(nomeTag, listaDeClasses);
    element.innerHTML = texto;
    return element;
}

     

    A primeira função recebe uma string com o nome da tag e uma lista de strings com o nome das classes que serão adicionadas. Ela cria o elemento, confere se a lista não é nula ou indefinida e a percorre adicionando as classes uma a uma.

    A segunda função faz o mesmo que a primeira, mas também adiciona texto dentro da tag. É importante notar que esta função depende da anterior e que texto talvez seja uma definição muito ampla pois foi utilizado a propriedade innerHTML que permite que sejam adicionadas mais coisas. Por enquanto vamos com a ideia de adicionar texto, isso a torna uma boa candidata para criar <span>, <p>, <strong>, stc…

  • Criando Links e Imagens

    Como a parte simples e mais abstrata já foi feita, agora iremos implementar funções que nos auxiliaram a criar mais rapidamente tags de imagens e para links de hipertexto. Segue abaixo o código de implementação de ambas funções

    function CriarImagemCompleta(src, imgClasses, imgAlt = "imagem") {
    let element = CriarElementoComClasse("img", imgClasses);
    element.alt = imgAlt;
    element.src = src;
    return element;
}

function CriarLinkCompleto(link, linkClasses, texto) {
    let element = CriarElementoComClasseTexto("a", linkClasses, texto);
    element.href = link;
    return element;
}

    Após analisar o código você poderá notar que ambas funções reutilizam as rotinas que criamos anteriormente, sendo que apenas implementamos o código que falta para que a criação de tag de imagem e link possam ser implementadas sem precisarmos ficar repetindo o código adicional que cada uma precisa toda vez que precisarmos cria-las.

  • Anexando diversos elementos juntos

    Até agora vimos 4 funções que nos permitem criar alguns componentes que podem ser bem úteis. No entanto, se você trabalha com códigos mais extensos, coisas parecidas ou piores que o código abaixo podem aparecer

    let umaDiv = CriarElementoComClasse("div", ["classe1","classe2","classe3"]);
let umaDiv2 = CriarElementoComClasse("div",["classe1","classe2","classe3"]);
let umSpan = CriarElementoComClasseTexto("span", ["classe2","classe2","classe3"],"Lorem Ipsum"); 
let umSpan2 = CriarElementoComClasseTexto("span", ["classe2","classe2","classe3"],"Lorem Ipsum dolor"); 
let umaImagem = CriarImagemCompleta("https://mundojs.com.br/images/logo.png", ["classe1","classe2","classe3"], "Logo MundoJS"); 
let umLink = CriarLinkCompleto("https://mundojs.com.br", ["classe1","classe2","classe3"], "MundoJS"); 
let umLink2 = CriarLinkCompleto("https://mundojs.com.br/artigos/index.html", ["classe1","classe2","classe3"], "MundoJS - artigos");

umaDiv.appendChild(umSpan); 
umaDiv.appendChild(umaImagem);
umaDiv.appendChild(umLink); 
umaDiv.appendChild(umaDiv2); 

umaDiv2.appendChild(umSpan2); 
umaDiv2.appendChild(umLink2);

    E quanto mais elementos tivermos, maior será o comprimento de código repetido. Por isso, iremos criar uma função ao qual passamos o elemento onde será feito o append e uma lista dos arquivos que serão adicionados a ele.

    function AppendElementos(pai, filhos) {
    filhos.forEach(element => {
        pai.appendChild(element);
    });
}

    E isso nos permite transformar os diversos append anteriores em 2 linhas de código

    AppendElementos(umaDiv, [umSpan, umaImagem, umLink, umaDiv2]); 
AppendElementos(umaDiv2, [umSpan2, umLink2]);

  • Criação de Thumbnail

    Por padrão, um thumbnail é uma área com uma imagem no topo seguida de um titulo e/ou texto descritivo. O interessante deste tipo de componente o fato que ele pode ser facilmente incorporado em páginas responsivas devido ao seu formato. Antes de continuarmos, no seu arquivo CSS será necessário adicionar as seguintes classes:

    .mundojs-media{
    overflow: hidden;
    display: block;
    text-decoration: none;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}

    Segue abaixo o código para implementarmos thumbnails utilizando nossas funções já criadas e a formatação fornecida pelo w3.css:

    function CriarThumbnail(linkArquivo, titulo, descricao, imagem) {
    let linkThumbnail = CriarLinkCompleto(linkArquivo, ["w3-third", "w3-margin-bottom", "mundojs-media"]);
    let divCard = CriarElementoComClasse("div", ["w3-card-4"]);
    linkThumbnail.appendChild(divCard);

    let imgThumbnail = CriarImagemCompleta(imagem, ["w3-image"]);

    let divConteudo = CriarElementoComClasse("div", ["w3-container", "w3-center"]);
    let h4Titulo = CriarElementoComClasseTexto("h4", null, titulo);
    let pDescricao = CriarElementoComClasseTexto("p", ["w3-small"], descricao);

    AppendElementos(divConteudo, [h4Titulo, pDescricao]);
    AppendElementos(linkThumbnail, [imgThumbnail, divConteudo]);

    return linkThumbnail;
}

    Você poderá ver pelo código que ele sempre terá 1/3 do comprimento do container dele em telas maiores e 100% em telas de smartphones. Isso pode ser adaptado simplesmente trocando as classes fornecidas no elemento linkThumbnail.

  • Criado um Media Card

    Por último criaremos o media card, uma espécie de cartão que possui uma imagem em sua lateral. Ele é um estilo bem utilizado para a criação de objetos representando notícias, lista de notícias ou posts com o gravatar.

    function CriarMedia(linkArquivo, titulo, descricao, imagem) {
    function AreaImagem() {
        let divImagem = CriarElementoComClasse("div", ["w3-quarter"]);
        divImagem.appendChild(CriarImagemCompleta(imagem, ["w3-image"]));

        return divImagem;
    }

    function AreaConteudo() {
        let divConteudo = CriarElementoComClasse("div", ["w3-threequarter", "w3-container", "w3-margin-bottom"])
        let h2Titulo = CriarElementoComClasseTexto("h2", ["w3-xlarge"], titulo);
        let pDescricao = CriarElementoComClasseTexto("p", null, descricao);
        let linkArquivo = CriarLinkCompleto(linkArquivo, ["w3-btn", "w3-theme-l4", "w3-border", "w3-border-theme", "w3-round-large"], "Saiba Mais");

        AppendElementos(divConteudo, [h2Titulo, pDescricao, linkArquivo]);

        return divConteudo;
    }

    let divMedia = CriarElementoComClasse("div", ["w3-row", "w3-margin", "w3-border-bottom", "w3-border-theme-l4", "mundojs-media"]);

    AppendElementos(divMedia, [AreaImagem(), AreaConteudo()]);

    return divMedia;
}

    Apesar de ser um pouco mais extenso que as funções anteriores, o resultado fica bem legal e pode ser utilizado facilmente para gerar uma lista de newsfeed, comentários de posts entre outras opções.

Conclusão

Como você pode ver, foi possível criar diversas ferramentas para auxiliar na montagem de itens na tela. Na minha experiência pessoal, eles não auxiliam muito se você utiliza um site estático. No entanto, caso você esteja trabalhando com dados dinâmicos ou simplesmente informações que se repetem muito, este tipo de técnica auxilia muita a reduzir o HTML e o JS comparado a criação manual sob demanda.

Deixe um comentário