6
respostas

Observações sobre a retirada do botão

No exercício (não obrigatório) anterior tivemos que fazer com o que o botão fique desabilitado enquanto estamos digitando a palavra, usei o .attr("disabled", true). Mas neste exercício tivemos que retirar o button e add restore assim parou de funcionar a alteração do exercício anterior pois acredito que não conseguimos add atributo na tag (não tenho certeza, pf explique o pq parou de funcionar). Então resolvi da seguinte maneira, crie um class no css .botao-desativado{ pointer-events: none; } e usei o toggleClass("botao-desativado") para resolver o problema. Ou seja ao inves de usar um atributo eu add um class que desabilita o botão. Gostaria de saber se essa é a maneira mais correta de se resolver. Aguardo o feedback.

obs: to gostando bastante do curso! abs

6 respostas

Wesley, poderia compartilhar seu código comigo para eu dar uma olhada?

var tempoInicial = $("#tempo-digitacao").text();
var campo = $(".campo-digitacao");

$(function(){
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometros();
    $("#botao-reiniciar").click(reiniciaJogo);

});

function atualizaTamanhoFrase() {
    var frase = $(".frase").text();
    var numPalavras = frase.split(" ").length;
    var tamanhoFrase = $("#tamanho-frase").text(numPalavras);
}

function inicializaContadores() {
    campo.on("input",function(){
          var conteudo =  campo.val();

          var qtdPalavras = conteudo.split(/\S+/).length -1;
          $("#contador-palavras").text(qtdPalavras);

          var qtdCaracteres = conteudo.length;
          $("#contador-caracteres").text(qtdCaracteres);
    });
}

function inicializaCronometros() {
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus",function(){
        var cronometro = setInterval(function(){

            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);

            if(tempoRestante < 1){
               campo.attr("disabled",true);
               clearInterval(cronometro);
            }
        },1000);    
    });    
}

function reiniciaJogo() {
        campo.attr("disabled", false);
        campo.val("");
        $("#contador-palavras").text("0");
        $("#contador-caracteres").text("0");
        $("#tempo-digitacao").text(tempoInicial);
        inicializaCronometros();
}


.css

.botao-desativado{
    pointer-events: none;
}

O problemas é que o instrutor colocou o ID do botão no elemento que se referem ao ícone. Eu coloquei o ID no elemento . Assim o botão volta a ficar desabilitado enquanto o usuário está jogando.

O que ocorre aí é que a tag de âncora não possui um atributo "disabled". Se você inspecionar os elementos através do Dev Tools consegue até ver ela sendo adicionada ou removida, mas isso não tem efeito.

O que fiz aqui foi adicionar e remover a classe "disabled" (a classe, não o atributo) que é definida no Materialized e alterar ela na nossa folha de estilo (estilos.css), para que que a propriedade pointer-events seja desabilitada, fazendo com que a âncora não possa ser mais clicada. O código ficou assim:

estilos.css

.btn-floating.disabled{
    pointer-events: none;
}

main.js

function inicializaCronometro() {
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus", () => {
        $("#botao-reiniciar").toggleClass("disabled");        
        var cronometroID = setInterval(() => {
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);
            if(tempoRestante < 1) {
                campo.attr("disabled", true);
                clearInterval(cronometroID);
                $("#botao-reiniciar").toggleClass("disabled");
                campo.toggleClass("campo-desativado");
            }
        }, 1000);
    });
}

eu só troquei a tag de

<a></a>

para

<button></button>

funcionou e o materialize não bugou o icone

Eu tinha lido um pessoal do fórum apresentando essa solução, mas acho que como foge da documentação do materialize não sei se é uma boa solução.