Ir para conteúdo

wanderval

Members
  • Total de itens

    409
  • Registro em

  • Última visita

  • Dias vencidos

    2

Posts postados por wanderval


  1. no seu CSS você vai ter que adicionar uma regra para a classe container, o motivo é que bootstrap aplica regras de @media query para essa classe e você precisa subscreve-la para que os media queries não hajam:

    linha a ser adicionada

    .container.page {min-width: 100%}

    style com linha adicionada:

     <style> 
             body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #FAFAFA; } 
            * { box-sizing: border-box; -moz-box-sizing: border-box; } 
            .page { width: 210mm; min-height: 297mm; padding: 4mm; margin: 1mm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } 
            /*.subpage { padding: 0.5cm; border: 0px red solid; height: 257mm; outline: 2cm #FFEAEA solid; }*/ 
            .cliente { margin-top: 30px; font-size: 20px; }
            th {font-size: 14px; }
            td {font-size: 12px; }
            .logo {height: 64px; margin: 20px 0px 0px 20px;}
            .font-cabecalho {font-size: 12px; margin-left: 20px; text-align: center; margin: 20px 0px 0px 20px;}
            @page { width: 100%; height: 100%; margin: 0; padding: 0; }
            @media 
                print { html, body { width: 210mm; height: 297mm; }
    			.container.page {min-width: 100%}		
                .page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; 
    			 background: initial; page-break-after: always; } 
                } 
        </style>

    codigo refatorado removendo PHP usado no test:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ficha</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" defer></script>
        <link href="https://fonts.googleapis.com/css2?family=Poppins" rel="stylesheet">
        <link href="css/ficha.css" rel="stylesheet">
        <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
        <style> 
             body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #FAFAFA; } 
            * { box-sizing: border-box; -moz-box-sizing: border-box; } 
            .page { width: 210mm; min-height: 297mm; padding: 4mm; margin: 1mm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } 
            /*.subpage { padding: 0.5cm; border: 0px red solid; height: 257mm; outline: 2cm #FFEAEA solid; }*/ 
            .cliente { margin-top: 30px; font-size: 20px; }
            th {font-size: 14px; }
            td {font-size: 12px; }
            .logo {height: 64px; margin: 20px 0px 0px 20px;}
            .font-cabecalho {font-size: 12px; margin-left: 20px; text-align: center; margin: 20px 0px 0px 20px;}
            @page { width: 100%; height: 100%; margin: 0; padding: 0; }
            @media 
                print { html, body { width: 210mm; height: 297mm; }
    			.container.page {min-width: 100%}		
                .page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; 
    			 background: initial; page-break-after: always; } 
                } 
        </style>
    </head>
      
    <body>
    <div class="container page">
        <div class="row">
            <div class="">
            <table>
            <tr>
              <td><img src="../image/logo.png" class="logo" alt="logo"></td>
              <td style="width:100%">
              <span class="font-cabecalho">
                <p><b>DCG-Info</b><br>
                00.000.000/0001-00<br>
                Rua João da Silva, 123 - Jardim Bonito - Santos - SP<br>
                E-mail: email@hotmail.com - Fone: (19)99876-5432</p>
              </span>
              </td>
            </tr>
            </table>
      
            <hr>
            
            <div style="text-align: center;">
              <p class="cliente">Fevereiro/2024</p>
            </div>
            <hr>
      
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">Data</th>
                  <th scope="col">Tipo Atendimento</th>
                  <th scope="col">Hora inicial</th>
                  <th scope="col">Hora fim</th>
                  <th scope="col">Total</th>
                  <th scope="col">AM</th>
                  <th scope="col">Observação</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>21/02/2024</td>
                  <td>Presencial</td>
                  <td>10:00</td>
                  <td>11:00</td>
                  <td>00:30</td>
                  <td>Não</td>
                  <td>Observação</td>
                </tr>
                <!-- Segunda linha de dados -->
                <tr>
                  <td>21/02/2024</td>
                  <td>Presencial</td>
                  <td>10:00</td>
                  <td>11:00</td>
                  <td>00:30</td>
                  <td>Não</td>
                  <td>Observação</td>
                </tr>
              </tbody>
            </table>
            </div>
        </div>
    </div>
    </body>
      
    </html>

     


  2. eu postei inicialmente os metodo que deveria ser adicionado e o que deveria ser modificado mas o restante dos metodos permanecem, vi que você removeu alguns metodos.

     

    1-so fiz alterações não substitui todo o script
    2-tem que rodar o projeto em um servidor local senão terá problema de cors
     

    function allowDrop(event) {
        event.preventDefault();
    }
    
    function drag(event, type) {
        event.dataTransfer.setData("text", type);
    }
    
    async function loadHtmlFile(pathFile) {
        try {
            const response = await fetch(pathFile);
            const html = await response.text();
            return html;
        } catch (error) {
            console.error('Error on load file:', error);
            return null;
        }
    }
    
    async function drop(event) {
        event.preventDefault();
        var type = event.dataTransfer.getData("text");
        var content = "";
    
        template = {
            "menu": './template/menu.html',
            "header": './template/header.html',
            "content": './template/content.html',
            "footer": './template/footer.html'
        }
    
        content = await loadHtmlFile(template[type]);
    
        var dropzone = event.target.closest('.content');
        if (dropzone) {
            var block = document.createElement("div");
            block.className = "alert alert-primary position-relative";
            block.innerHTML = content;
    
            var deleteButton = document.createElement("i");
            deleteButton.className = "fa fa-trash delete-button";
            deleteButton.onclick = function() {
                if (confirm("Tem certeza que deseja deletar este bloco?")) {
                    block.remove();
                }
            };
    
            var redButton = document.createElement("button");
            redButton.className = "red-button";
            redButton.innerHTML = "Deletar";
            redButton.onclick = function() {
                if (confirm("Tem certeza que deseja deletar este bloco?")) {
                    block.remove();
                }
            };
    
            var duplicateButton = document.createElement("button");
            duplicateButton.className = "duplicate-button";
            duplicateButton.innerHTML = "Duplicar";
            duplicateButton.onclick = function() {
                duplicateBlock(block);
            };
    
            block.appendChild(deleteButton);
            block.appendChild(redButton);
            block.appendChild(duplicateButton);
    
            dropzone.appendChild(block);
    
            tinymce.init({
                selector: '.editable',
                height: 200,
                menubar: false,
                plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace visualblocks code fullscreen',
                    'insertdatetime media table paste code help wordcount'
                ],
                toolbar: 'undo redo | formatselect | bold italic backcolor | \
                            alignleft aligncenter alignright alignjustify | \
                            bullist numlist outdent indent | removeformat | help'
            });
        }
    }
    
    function duplicateBlock(originalBlock) {
        var newBlock = originalBlock.cloneNode(true);
        var deleteButton = newBlock.querySelector('.delete-button');
        deleteButton.onclick = function() {
            if (confirm("Tem certeza que deseja deletar este bloco?")) {
                newBlock.remove();
            }
        };
        var redButton = newBlock.querySelector('.red-button');
        redButton.onclick = function() {
            if (confirm("Tem certeza que deseja deletar este bloco?")) {
                newBlock.remove();
            }
        };
        document.querySelector('.content').appendChild(newBlock);
    }

     


  3. Bom amigo, eu citei a borda pq com o css que forneceu, não fica igual ao que seria a estrutura da pagina contendo bordas, como na sua pergunta você não especificou se esta usando um css separa para mediaquery de print, eu pressuponho que esse css está sendo usado em comum tanto pela pagina quando com o que é esperado da impressão. Então ajudaria que colocasse uma estrutura básica com a estrutura inicial antes do que é esperado da impressão.

    Obs: Ao usar o seu css com uma estrutura de html feita por mim sua tabela fica conforme está sendo imprimido
    https://jsbin.com/hafecayiwi/edit?html,css,output


  4. mas pelo que vi do seu código está faltando o metodo que citei:
     

    async function loadHtmlFile(pathFile) {
        try {
            const response = await fetch(pathFile);
            const html = await response.text();
            return html;
        } catch (error) {
            console.error('Error on load file:', error);
            return null;
        }
    }

     


  5. criando um método que implement o fetch e alterando pra async/await você consegue o que quer, mas manipulando arquivo você só conseguira executar o html dentro de um servidor não vai conseguir abrindo o html direto no browser.
     

    async function loadHtmlFile(pathFile) {
        try {
            const response = await fetch(pathFile);
            const html = await response.text();
            return html;
        } catch (error) {
            console.error('Error on load file:', error);
            return null;
        }
    }

    ai você chamaria dessa forma e adicionando o async para que consiga lidar com a promise com await, nesse exemplo criei uma pasta "template" on de vai conter todos os arquivos html abstraidos desse metodo:

    async function drop(event) {
        event.preventDefault();
        var type = event.dataTransfer.getData("text");
        var content = "";
    
        if (type === "menu") {
            content = await loadHtmlFile('./template/menu.html');
        } else if (type === "header") {
            content = await loadHtmlFile('./template/header.html');
        } else if (type === "content") {
            content = await loadHtmlFile('./template/content.html');
        } else if (type === "footer") {
            content = await loadHtmlFile('./template/footer.html');
        }

    Uma sugestão de melhoria de codigo, em casos masi simples:

    async function drop(event) {
        event.preventDefault();
        var type = event.dataTransfer.getData("text");
        var content = "";
    
        /*if (type === "menu") {
            content = await loadHtmlFile('./template/menu.html');
        } else if (type === "header") {
            content = await loadHtmlFile('./template/header.html');
        } else if (type === "content") {
            content = await loadHtmlFile('./template/content.html');
        } else if (type === "footer") {
            content = await loadHtmlFile('./template/footer.html');
        }*/
    
        template = {
            "menu": './template/menu.html',
            "header": './template/header.html',
            "content": './template/content.html',
            "footer": './template/footer.html'
        }
    
        content = await loadHtmlFile(template[type]);

     


  6. você não vai conseguir alterar no documento por se tratar de um avento dinâmico, tudo acontece em memoria, a unica forma de alterar uma definição de arquivo é reescrevendo o arquivo!

    Mas dependendo do que quer implementar existe alternativas para armazenar o valor em um cachestore ou indexDB que são forma de armazenamento de dados no browser, mas como disse é algo dinâmico e só funciona localmente


  7. Seria algo dessa maneira no html tente deixar um nome comum apenas o id precisa ser um valor unico class deve ser usado para definir padrões visuais pensando em um grupo

    HTML:

    <div id="divPai">
      <div id="bannerA" class="banner">
        <a href="link1"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/225865593/rmu3bewcv3pqkzx32hjk-qe5uzhcwvt.jpg" alt="Imagem 1"></a>
        <a href="link2"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/217352435/rfl14_off_pk_1-v2ofz4r0h3.jpg" alt="Imagem 2"></a>
        <a href="link3"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/77172972/45c63850c8.jpg" alt="Imagem 3"></a>
      </div>
    
      <hr>
      <div id="bannerB" class="banner">
        <a href="link4"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/225865593/rmu3bewcv3pqkzx32hjk-qe5uzhcwvt.jpg" alt="Imagem 4"></a>
        <a href="link5"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/217352435/rfl14_off_pk_1-v2ofz4r0h3.jpg" alt="Imagem 5"></a>
        <a href="link6"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/77172972/45c63850c8.jpg" alt="Imagem 6"></a>
      </div>
    
      <hr>
      <div id="bannerC" class="banner">
        <a href="link7"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/225865593/rmu3bewcv3pqkzx32hjk-qe5uzhcwvt.jpg" alt="Imagem 7"></a>
        <a href="link8"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/217352435/rfl14_off_pk_1-v2ofz4r0h3.jpg" alt="Imagem 8"></a>
        <a href="link9"><img src="https://cdn.awsli.com.br/2500x2500/1737/1737952/produto/77172972/45c63850c8.jpg" alt="Imagem 9"></a>
      </div>
    </div>


    CSS:
     

    /* Estilos opcionais para o banner */
    #divPai {
    margin: auto;
    border: 2px solid red;
    }
    
    .banner {
      width: 240px;
      height: 480px; 
      overflow: hidden;
      position: relative;
      
    }
    .banner img {
      width: 100%;
      height: auto;
    }
    
    /*#bannerA {
    width: 240px;
    height: 480px; 
    overflow: hidden;
    position: relative;
      
    }*/
    
    .banner img {
      position: absolute;
      top: 0;
      left: 0;
      animation-name: smooth-effect;
      animation-duration: 4s;
    }
    
    /*#bannerA img.active {
      opacity: 1;
    }*/
    
    
    /* The animation code */
    @keyframes smooth-effect {
      from {opacity: 0;}
      to {opacity: 1;}
    }



    JS: foi criado a function makeSliderKind e alterado o metodo showrandomImage para uma arrow function

    function makeSliderKind(containerClass, intervalTime){
      
      var images = document.querySelectorAll(containerClass+" img");
    
      // Função para exibir uma imagem aleatória
      const showRandomImage = () => {
        // Escolhe aleatoriamente um índice de imagem
        var randomIndex = Math.floor(Math.random() * images.length);
    
        // Define todas as imagens como ocultas
        images.forEach(function(img) {
          img.style.display = "none";
        });
    
        // Exibe a imagem aleatória
        images[randomIndex].style.display = "block";
      };
    
      // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos
      showRandomImage();
      setInterval(showRandomImage, intervalTime);
    }
    
    
    makeSliderKind('#bannerA', 2000);
    makeSliderKind('#bannerB', 10000);
    makeSliderKind('#bannerC', 3000);

    Jsbin: https://jsbin.com/qimajoyuna/edit?html,css,js,output


  8. Em 23/11/2023 at 16:01, gersonab disse:

    é verdade , bem mais simples, eu só não queria mexer na tabela, porém não teve jeito, obrigado.

    Pelo que entendi da critica do tetsuo é apenas em relação a logica de business não em relação alteração da database, acredito que ele apenas se referiu a modificar a query usada pelo backend para construir um response com menor complexidade para que seja enviada ao front, pra não delegar logica de business ao front


  9. Seu problema está no javascript quando está adicionando style.display='block', "block" irá tornar os elementos em coluna neste caso poderia ser "inline-block" ou "inline-flex"

    JS:

    // Problema
    if(itemSelecionado.value == "Sim"){
       document.getElementById("divPai").style.display='block';
    }
    
    // Solução
    if(itemSelecionado.value == "Sim"){
       document.getElementById("divPai").style.display='inline-flex';
    }

    Alteração de código

    HTML - alterado nome da classe para reaproveitamento

    <!--Removido methodo de invocação onchange passado para o script-->
    <select id="itemSelecionado" required>
      <option value=""></option>
      <option value="Sim" style="font-size:18px;">Sim</option>
      <option value="Não" style="font-size:18px;">não</option>
    </select>
    
    <!--Alterado nome das classes para reaproveitamento-->
    <div id="divPai">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
      <div class="item">item4</div>
      <div class="item">item5</div>
      <div class="item">item6</div>
    </div>

    CSS:

    #divPai {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 12px;
      border: 1px solid red;
      padding: 6px;
      align-items: center;
    }
    
    #divPai .item { 
      max-width: 90px;
      border: 1px solid green;
    }

    JS:

    document.getElementById("divPai").style.display='none';
    
    // Substituido if/else por condicional ternário
    function funcAprendiz(){
      var itemSelecionado = document.getElementById("itemSelecionado");
      var elementStyle = document.getElementById("divPai").style;
      
      elementStyle.display = itemSelecionado.value == "Sim"
         ? 'inline-flex'
         : 'none';
    }
    
    // Listener
    document.getElementById('itemSelecionado').addEventListener('change', funcAprendiz);

     

    JsBin: https://jsbin.com/geyeqahuqi/edit?html,css,js,output


  10. Tá ai uma versão refatorada minha desse código, tava de bobeira achei interessante esses ifs ai, então decidi partir pra ignorancia e começar a destruir esse código kk,a constant é pq to mexendo com java ai surgiu a ideia rs.

     

    HTML modificado

    <div id="container">
      <textarea  maxlength="100"></textarea>
      <p id="idToto"></p>
    </div>

    JS modificado

    function constant() {
      return {
        COUNTER_PLURAL_MESSAGE: " caracteres digitados - máximo ",
        COUNTER_SINGLE_MESSAGE: " caracter digitado - máximo ",
        LIMIT_MESSAGE: "Limite de caracteres atingido!"
      };
    }
    
    function characterCounter() {
      const max = 100;
      const container = document.getElementById('container');
      const [textArea, inputMessage] = container.children;
      const amountCharacterTyped = textArea.value.length;
      
      const selectMessage = () => amountCharacterTyped === 1
          ? constant().COUNTER_SINGLE_MESSAGE
          : constant().COUNTER_PLURAL_MESSAGE;
    
      if (amountCharacterTyped === 0){
        inputMessage.innerHTML = '';
      } else if (amountCharacterTyped > 0 && amountCharacterTyped < max) {
        inputMessage.innerHTML = amountCharacterTyped + selectMessage() + max;
      } else {
        inputMessage.innerHTML = constant().LIMIT_MESSAGE;
      }
    }
    
    function clear() {
      document.querySelector('#container p').inputMessage.innerHTML = "";
    }
    
    document.querySelector('textarea').addEventListener("keyup", characterCounter);
    document.querySelector('textarea').addEventListener("focusout", clear);

     

    JSbin: https://jsbin.com/yaduyigomo/edit?html,js,output


  11. A funcionalidade esperada não tá muito clara! A respeito do loop está sendo feito sim um "forEach" na qual sempre quando você clica no checkbox com o id "reason_all_velongings" é executado o forEach que adiciona no mesmo select os item contidos do array "optionReason"

     

    optionsReason = ['Conferencia', 'Desobstrução', 'Entrega ao Cliente/Propr','  Inspeção', 'Manobra', 'Venda'  ];
     
    optionsReason.forEach((reason) => {
    	option = new Option(reason, reason.toLowerCase());
    	movementsSelect.options[movementsSelect.options.length] = option;
    });

     

    Possível problema:
    1- Está usando o mesmo ID "check-belongings" em diferentes checkbox


  12. Bom Biel é um pouco difícil você mudar o comportamento dos componentes nativos, tanto que o Bootstrap usa um dropdown customizado. A melhor maneira realmente e customizando um.

    Ex:

    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here Something else here Something else here Something else here Something else here Something else here Something else here</a>
      </div>
    </div>

    JsBin: https://jsbin.com/haqejeqefe/edit?html,css,output


  13. CSS

    *{ margin: 0; padding: 0; }
    .divPrincipal{ width: 200px; display: flex; flex-wrap: wrap; align-items: center; border: 2px solid blue;}
    
    .divPaiCor{ flex:1; margin-right: 10px; }
    .h1_1{ padding: 4px 4px; margin-bottom: 2px; background-color:#c1c1c1; cursor: default; }
    
    .divPaiSeta{ flex:0.5; font-size: 30px; text-align: center;}
    .b_1{ padding: 0px 4px; margin: 8px 10px; background-color:#cfcfcf; display: block; border: 1px solid green; cursor: default;  }
    
    .divPaiSeta b:hover {
      background: #000;
      color: #fff;
      cursor: pointer;
    }
    
    .divPaiSeta b:active {
      background: gray;
      color: #000;
      user-select: none;
    }
    
    .divPaiCor h1:hover{
      background: #000;
      color: #fff;
      cursor: pointer;
    }
    
    .selectedItem {
      background: #000;
      color: #fff;
    }

    JS

    let indexSelected;
    let elementSelected;
    let divPaiCor = document.querySelector(".divPaiCor");
    let arrowUp = document.querySelector("#id1");
    let arrowDown = document.querySelector("#id2");
    
    function setaPraCima(){
      let x = document.querySelectorAll(".h1_1");
      indexSelected = returnPositionIndex(indexSelected - 1);
      divPaiCor.insertBefore(elementSelected, x[indexSelected]);
    }
    
    function setaPraBaixo(){
      let y = document.querySelectorAll(".h1_1");
      indexSelected = returnPositionIndex(indexSelected + 1);
      divPaiCor.insertBefore(elementSelected, y[indexSelected].nextSibling);
    }
    
    function returnPositionIndex(index) {
      let min = 0, max = 3;
      
      if(index <= min){ return min; }
      if(index >= max){ return max; }
      if(index > min || index < max){ return index; }
    }
    
    function selectItem(refItem) {
      let allElements = [...refItem.target.parentNode.children];
      let index = allElements.indexOf(refItem.target);
      
      allElements.map(item => item.classList.remove("selectedItem"));
      refItem.target.classList.add("selectedItem");
      
      indexSelected = index;
      elementSelected = refItem.target;
    }
    
    divPaiCor.addEventListener("click", selectItem);
    arrowUp.addEventListener("click", setaPraCima);
    arrowDown.addEventListener("click", setaPraBaixo);
    
    

     

    Jsbin: https://jsbin.com/wuwusinoro/edit?html,css,js,output


  14. Biel, vou frizar mais uma vez a propriedade "id" deve ser único, por ser uma identidade, acho que você faz um copy/paste e fica duplicando essa informação, quando for usar elementos similares sempre será "class"

     

     

    Ex de código funcional

    function funcAprendiz(){
      var itemSelecionado = document.getElementById('id1');
      var ggInput  = document.querySelectorAll(".toto");
      
      const hasInputValue = () => itemSelecionado.value === "item1";
      const mapInputValue = item => hasInputValue() ? "aluno" : "";
      
      ggInput.forEach(inputItem => inputItem.value = mapInputValue(inputItem));
    }

    JS Bin - JS Bin


  15. function myFunction() {
      var textArea = document.getElementById("myDIV");
    
      //cria o elemento 
      const para = document.createElement("span");
      para.setAttribute("style", "font-size:30px");
    
      //adiciona o conteudo
      const node = document.createTextNode(textArea.value);
    
      // acrescenta nó ao elemento 
      para.appendChild(node);
    
      // anexa o elemento ao corpo
      document.querySelector("body").appendChild(para);
    }

     

    Jsbin: https://jsbin.com/rikirezage/edit?js,output


  16. Essa regra não tem sentido, o seletor deve conter apenas uma categoria, se houver outro select como dependência deve ser a lista de item dessa categoria, o que você tá tentando fazer é um malabarismo funcional, imagina quantas regras você teria que fazer pra gerar essas distinções baseadas no item! Se você está apenas se desafiando, tudo bem! Mas eu não vejo sendo uma boa usabilidade, afinal o usuário tem a experiência dele de forma progressiva, o que você está fazendo é fazer o usário escolher no primeiro seletor ir para o segundo seletor depois ele teria que voltar ao primeiro pra selecionar uma outra categoria para depois retornar para o segundo seletor e teria que analisar a cada seleção a cetegoria do item a ser selecionado.

     

    ex: pais -> produto(carro) -> marca automovel -> modelo -> ano -> cor 

     

    Pais         Produto     Marca      Modelo    Ano         Cor

    Brasil       Carro         Fiat           Uno          2008       Black

    India                           Ford                           2022       Silver

    Japão                         Wolks                                        Branco

     

    Então vamos imaginar o seguinte cenário em diferentes paises temos diferetes marcas e tipos de produtos, nesse caso temos o "Carro", na india e japão existem marcas diferentes dos que existem no Brasil, então quando você seleciona o País os outros seletores vão ter um carregamento de informação diferente, o mesmo ocorre no seletor "Ano"  afinal dependendo do modelo você terá uma lista de anos na qual o mesmo foi construido e vendido certo? por esse motivo a sepaação por categoria é util.


  17. Olha quando você diz resumir o código você deve entender que existe uma diferença entre código generico e código pequeno

     

    O codigo generico nem sempre irá ficar pequeno mas será muito mais flexivel quando seguido de divisão de responsabilidade, agora o código pequeno ele foca na sua regra atual.

     

    Codigo Generico: https://jsbin.com/yukaregole/edit?html,js,output

    function funcTete() {
      var itemSelecionado=document.getElementById('aprendiz').value;
    
      if (itemSelecionado === '') {
        enableAndDisableItems(false);
      }
    
      if (itemSelecionado === 'item1') {
        enableAndDisableItems(null, ['verde', 'amarelo'])
      }
    
      if (itemSelecionado === 'item2') {
        enableAndDisableItems(true);
      }
    }
    
    
    function enableAndDisableItems(enable, options) {
      const items = document.querySelectorAll('#aluno')[0];
      
      if(!options) {
        Array.from(items).forEach(item => setDisplayValue(item, enable));
      }
     
      if (options) {
        Array.from(items).forEach(item => {
          let isValidItem = options.includes(item.value);
          setDisplayValue(item, isValidItem);
        });
      }
    }
    
    function setDisplayValue(item, isValidItem) {
       item.style.display = isValidItem ? 'block' : 'none';
    }

    Código pequeno: https://jsbin.com/wituqihofu/1/edit?html,js,output

    function funcTete() {
      var itemSelecionado=document.getElementById('aprendiz').value;
      
      const setDisplayItems = (item1, item2, item3) => {
        document.querySelector(".verde").style.display=item1;
        document.querySelector('.amarelo').style.display=item2;
        document.querySelector('.azul').style.display=item3;
      }
    
      if (itemSelecionado === '') {
        setDisplayItems('none', 'none', 'none');
      }
    
      if (itemSelecionado === 'item1') {
        setDisplayItems('block', 'block', 'none');
      }
    
      if (itemSelecionado === 'item2') {
        setDisplayItems('block', 'block', 'block');
      }
    }

     


  18. Olha, isso depende muito da funcionalidade esperada, pelo que descreveu não é possivel definir a vontade do cliente com a necessidade para alcançar a funcionalidade.

     

    A sequencia é importante, por qual razão?

    O upload será feito em uma fila ou é esperado paralelismo? se sim, O tamanho do arquivo suportando pelo upload, pode interferir na transferencia?

    O client deseja feedback do upload individual em caso de falha ou sucesso?

     

    Mas respondendo sua pergunta, dependendo da sua lógica eu pensaria em usar esse dropzone relacionado a alguma logica de clone do input ou interação do dropzone, mas isso depente muito da usabilidade esperada, ela vai definir o que você pode ou não fazer

     

     


  19. Bom você está cometendo um equivoco entre a identificação numberInstallments e o elemento dom html essá variavel presuponho conter apenas um ID ou CLASS sendo assim não contém o mapeamento do valor do input

     

    EX:

    const numberInstallments = '#numberInstallments';
    const signalValueInstallment = '#signalValueInstallment';
    const description = '#description';
    
    $(numberInstallments).on('change', function() { // missing event variable
     
      // why is there such a dependency beetween these 2 events 'change' and 'keyup'?
      // I think it's better to uncouple!
      $(signalValueInstallment).on('keyup', function(event) {
        
        // numberInstallments is only a simple string, is not possible to handle the dom element this way.
        // That is the reason  it doesn't not work as expected
        if(numberInstallments.value <= 11){  
          $(description).html('Texto teste 1 R$ ' +signalValueInstallment.value +' .Fim test.');// same here
        }else{
          $(description).html('Texto teste 2 R$ ' +signalValueInstallment.value +' .Fim test.');// same here
        }
      })
    })

    Outra possibilidade é substituir numberInstallments.value por $(numberInstallments ).val() que é a forma especifica para recuperar valor usando o jquery, mas acredito que você consiga simplemente reutilizando as variaveis de evento assim não precisa processar a busca no dom novamente, já que essa ação já foi realizada.

     

    Ex:

    const numberInstallments = '#numberInstallments';
    const signalValueInstallment = '#signalValueInstallment';
    const description = '#description';
    
    $(numberInstallments).on('change', function(e) {// add event parameter
      const selectorValue =  e.target.value; // add variable to get select value
      
      $(signalValueInstallment).on('keyup', function(event) {
        const inputValue =  event.target.value; // add variable to get input value
        
        if(selectorValue <= 11){
          $(description).html('Texto teste 1 R$ ' +inputValue +' .Fim test.');
        }else{
          $(description).html('Texto teste 2 R$ ' +inputValue +' .Fim test.');
        }
      })
    })

    Jsbin: https://jsbin.com/hayicasoro/1/edit?html,js,output

     

    Ex código um pouco desacoplado

    const numberInstallments = '#numberInstallments';
    const signalValueInstallment = '#signalValueInstallment';
    const description = '#description';
    
    $(numberInstallments).on('change', function(event) {
      const selectorValue =  event.target.value;
      const inputValue =  $(signalValueInstallment).val();
      
      handleInstallment(selectorValue, inputValue);
    })
    
    $(signalValueInstallment).on('keyup', function(event) {
      const selectorValue =  $(numberInstallments).val();
      const inputValue =  event.target.value;
        
      handleInstallment(selectorValue, inputValue);
    })
    
    function handleInstallment(selectorValue, inputValue){  
      if(selectorValue <= 11){
        $(description).html('Texto teste 1 R$ ' +inputValue +' .Fim test.');
      }else{
        $(description).html('Texto teste 2 R$ ' +inputValue +' .Fim test.');
      } 
    }

    Jsbin: https://jsbin.com/cuwamahafo/1/edit?html,js,output

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.