Este documento apresenta uma visão detalhada do componente "Modal" personalizado, desenvolvido para atender às necessidades específicas de nossa empresa. O componente foi cuidadosamente projetado para oferecer uma interface de usuário interativa e responsiva, facilitando a interação dos usuários com informações críticas e funcionalidades adicionais de nossos sistemas.

O código-fonte deste componente é composto por estruturas HTML, CSS e JavaScript. No HTML, utilizamos tags personalizadas, como <ev-modal>, <ev-modal-content>, <ev-modal-header>, entre outras, para definir a estrutura básica do modal. Cada seção do modal é estilizada de maneira flexível através de CSS, permitindo uma apresentação visual clara e atraente. Além disso, o JavaScript é empregado para adicionar dinamismo ao componente, controlando seu comportamento e interações, como a abertura, fechamento e ajustes de tamanho do modal.

Este documento abordará cada aspecto do componente, desde sua estrutura básica até detalhes de implementação e personalização, oferecendo uma compreensão abrangente de como o componente pode ser utilizado e adaptado às diversas necessidades da empresa.

O modal personalizado suporta diferentes tamanhos, que podem ser ajustados através do atributo type no elemento <ev-modal-content>. O JavaScript define a classe CSS correspondente ao tamanho especificado, aplicando estilos predefinidos para cada tamanho:

• xs (Extra Small): Define a classe ev-modal-extra-small.
• sm (Small): Utiliza a classe ev-modal-small.
• md (Medium): Aplica a classe ev-modal-medium.
• lg (Large): Atribui a classe ev-modal-large.

2. Posicionamento do Modal

No desktop, o modal é centralizado na tela, enquanto em dispositivos móveis, segue o padrão do Carbon Design System, aparecendo no final da tela. Isso proporciona uma experiência de usuário consistente e adaptável a diferentes dispositivos.

3. Personalização do Título

O conteúdo dentro de <ev-title-modal> é totalmente personalizável. Os usuários podem inserir qualquer conteúdo como título do modal. Esta área é opcional, oferecendo flexibilidade na apresentação do modal.

4. Botão de Fechamento

O modal inclui um mecanismo de fechamento padrão, representado por <ev-modal-close>. Dentro deste elemento, <ev-btn-close-modal> com um ícone específico é usado para fechar o modal. Esta estrutura é padrão e essencial para a funcionalidade de fechamento do modal.

5. Restrição de Fechamento do Modal

O modal só pode ser fechado clicando no botão de fechamento (<ev-btn-close-modal>). Não é possível fechar o modal clicando fora de sua área, garantindo que a interação do usuário com o conteúdo do modal seja intencional e controlada.

6. Conteúdo Livre no Corpo do Modal

O corpo do modal, representado por <ev-modal-body>, é um espaço flexível onde os usuários podem inserir qualquer conteúdo desejado. Isso permite uma ampla gama de usos e personalizações do modal.

7. Personalização do Rodapé e Botões

O rodapé do modal, dentro de <ev-modal-footer>, é igualmente personalizável. Por padrão, vêm botões nas cores preta e azul, mas os usuários têm total liberdade para alterar as etiquetas e as funções desses botões conforme necessário, adaptando o modal para diferentes ações ou contextos.

Inicialização e Atribuição de ID

Primeiro, o script inicia com a definição de uma variável countEvModal e a declaração da função evRunModal.

            
            var countEvModal = 0;
            function evRunModal(evModalElements){
                ...
            }
            
            

countEvModal mantém a contagem dos modais na página. evRunModal inicializa um modal. Se um modal não tem um ID, ele é atribuído um ID único baseado em countEvModal. Isso assegura a unicidade dos modais.

            
            if (!elementsEvModal.hasAttribute('ID')) {
                countEvModal++;
                elementsEvModal.id = 'ev-modal-' + countEvModal;
            }
            
            

Configuração de Classes CSS

A função então define a classe do modal e seleciona elementos internos para configuração adicional.

            
            elementsEvModal.className = 'ev-modal';
            var elementModalForId = document.getElementById(elementsEvModal.id);
            var evModalContent = elementModalForId.querySelector('ev-modal-content');
            evModalContent.className = 'ev-modal-content';
            elementModalForId.appendChild(evModalContent);
            
            

Ajuste de Tamanhos

O script então ajusta o tamanho do modal com base no atributo type.

            
            if (evModalContent.getAttribute("type") == 'xs') {
                evModalContent.className = 'ev-modal-extra-small';
            }
            if (evModalContent.getAttribute("type") == 'sm') {
                evModalContent.className = 'ev-modal-small';
            }
            ...
            
            

Construção do Modal

Os diferentes componentes do modal (cabeçalho, corpo, rodapé) são organizados:

            
            var evModalHeader = elementModalForId.querySelector('ev-modal-header');
            if (evModalHeader) {
                evModalContent.appendChild(evModalHeader);
                evModalHeader.className = 'ev-modal-header';
            }
            ...
            
            

Fechamento do Modal

Por fim, o script gerencia o fechamento do modal:

            
            var evModalClose = elementModalForId.querySelector('ev-modal-close');
            ...
            evBtnCloseModal.addEventListener('click', evCloseModal);
            ...
            function evCloseModal(){
                elementModalForId.style.display = 'none';
            }
            
            

Este código JavaScript efetivamente gerencia o comportamento do modal, garantindo a funcionalidade correta e a adaptabilidade às necessidades específicas da interface do usuário.

1. Importando os Arquivos Necessários

Primeiramente, é essencial que você tenha os arquivos default.js e default.css importados em seu projeto. Estes arquivos contêm o código JavaScript e CSS necessários para o funcionamento e a estilização do modal.

• Arquivo JavaScript (default.js): Contém a lógica de inicialização, configuração de tamanho, e os comportamentos interativos do modal.
• Arquivo CSS (default.css): Fornece os estilos necessários para a apresentação visual do modal, incluindo tamanhos, cores e posicionamento.

Inclua esses arquivos no cabeçalho do seu documento HTML ou como parte de seu processo de build, se estiver usando um sistema de build moderno como Webpack ou Gulp.

2. Inserindo o Código HTML

Após a importação dos arquivos, você pode começar a inserir o código HTML do modal em sua página. Utilize a estrutura base fornecida e faça as devidas alterações conforme sua necessidade.

            
            <ev-modal>
                <ev-modal-content type="lg"> 
                
                    <ev-modal-header>...</ev-modal-header>

                
                    <ev-modal-body>...</ev-modal-body>

                
                    <ev-modal-footer>...</ev-modal-footer>
                </ev-modal-content>
            </ev-modal>
            
            

Modifique o atributo type em <ev-modal-content> para ajustar o tamanho do modal conforme necessário (xs, sm, md, lg). Personalize o conteúdo do cabeçalho, corpo e rodapé do modal de acordo com seus requisitos.

Dicas Adicionais para Utilização:

• Personalização: Dentro de <ev-modal-header>, <ev-modal-body>, e <ev-modal-footer>, você pode adicionar qualquer conteúdo HTML que desejar. Isso inclui textos, imagens, formulários, entre outros.
• Fechamento do Modal: Lembre-se de incluir o botão de fechamento <ev-btn-close-modal> no cabeçalho do modal para permitir que os usuários fechem o modal.
• Responsividade: O modal já é configurado para ser responsivo, ajustando-se automaticamente para tamanhos de tela diferentes.
• Integração com JavaScript: Se você tiver funcionalidades adicionais ou manipulações específicas do DOM a serem implementadas, faça-o no arquivo default.js ou em outro script personalizado.

Seguindo estas etapas, você poderá implementar o componente modal personalizado em seu projeto de forma eficaz, aproveitando sua flexibilidade e funcionalidades adaptativas.

Arquivos

precisa ser importado os aquivos ev-default.js e ev-default.css, cada um se encontra dentro do projeto ux.ev.link, pasta ev-template dentro da pasta css e js

O código definido logo abaixo é fundamental. Caso não coloque um id na tag pai ev-modal, será adicionado um id automático ev-modal-X, no caso, X seria uma contagem de quantos modais tem na página, então para o primeiro modal seu id será ev-modal-1, para o segundo ev-modal-2/p>

é crucial que coloque o tamanho do modal em <ev-modal-content type="lg" >

O codigo abaixo é o necessário para funcionar o modal, junto com os arquivos ev-default.js e ev-default.css importados no projeto

                        <button> id="myBtn">Introdução</button>

                <ev-modal>
                    <ev-modal-content type="lg" >
                        <ev-modal-header>
                            <ev-title-modal>
                            <div class="ev-modal-first-title">
                                        <p> Código </p>

                                <ev-modal-close>
                                    <ev-btn-icon type="ghost" size="normal" ev-icon="32/close"
                                                 ev-icon-size="20" ev-icon-color="#161616">
                                    </ev-btn-icon>
                                </ev-modal-close>
                            </div>
                                <h2>
                                    Pegue aqui o código basico do modal
                                </h2>
                            </ev-title-modal>
                        </ev-modal-header>
                        <ev-modal-body>

                        </ev-modal-body>
                        <ev-modal-footer>
                            <ev-btn-icon type="secondary" size="extralarge" label="Cancenlar" style="width: 50%; margin: 0px 1px 0px 0px;"></ev-btn-icon>

                            <ev-btn-icon type="primary" size="extralarge" label="Ok" style="width: 50%; margin: 0px 0px 0px 1px;"></ev-btn-icon>
                        </ev-modal-footer>
                    </ev-modal-content>
                </ev-modal>

                    function openModal(){
                        var modal = document.getElementById("ev-modal-1");
                        modal.style.display = 'flex';
                    }
                    function closeModal(){
                        var modal = document.getElementById("ev-modal-1");
                        modal.style.display = 'none';
                    }
                    var btn = document.getElementById("myBtn");
                    btn.addEventListener('click', openModal)