Suporte a c-remove e melhoria do c-remove-closest em cru.js

[Tiago-Daniel-Guerreiro]

Adicionação de um novo atributo c-remove para remover elementos e melhoria do c-remove-closest para formulários.

Mudanças:

1. c-remove: Remove seletores especificados

   Novo atributo que permite remover um ou múltiplos elementos, listando os identificadores, separados por espaço.

   const remove = el.getAttribute('c-remove') || false
   if (remove) remove.split(' ').forEach(sel => $crus(sel).forEach(e => e.remove()))

   Exemplos:

   • <button c-remove=".notification">Remove notificação</button>
   • <button c-remove="#temp .item">Remove múltiplos</button> - remove #temp E .item

2. c-remove-closest: Agora funciona em formulários (Como o c-remove)

   const removeClosest = form.getAttribute('c-remove-closest') || false
   if (removeClosest) form.closest(removeClosest).remove()

   Exemplo:

   • <form c-remove-closest="#modal-wrapper">...enviar fecha modal</form>

[Iazzetta]

Olá @Tiago-Daniel-Guerreiro , obrigado pela primeira contribuição do cru.js!

Tenho alguns pontos que vou comentar, me diz o que você acha.

c-remove

Eu gostei da ideia do c-remove, pode ser uma boa adição no cru.js. O unico problema seria a forma que você fez a remoção multipla, pois veja o exemplo:

<div class="menu-teste">
    <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
    </ul>
</div>

<button c-remove=".menu-teste ul li:first-child">remover primeiro li</button>

Se o usuário fizer uma query mais complexa o seu remove.split(' ') pode quebrar essa lógica.
É um exemplo tosco, mas vai acontecer quando o cara quiser navegar nos elementos por css.
So funcionaria se ele colocasse um id/classe única no elemento (como no seu exemplo).

Teria que fazer algo diferente, talvez um c-remove="['.menu-teste ul li:first-child', '#outro-elemento']"? Não sei, não achei muito bonito mas não consegui pensar em outra coisa no momento.

c-remove-closest

Sobre o c-remove-closest também ficou bacana colocando ele no intercept do evento de envio do formulario. Realmente tava faltando.

Porem você colocou uma inicialização na função $cruLoadRequests (linha 131) que vai criar um evento de click ao carregar a pagina. Então se o usuario clicar no formulário vai remover o modal (seguindo seu exemplo). Não cheguei a testar, mas acredito que é isso que vai acontecer. O $cruLoadRequests busca todos elementos com c-get/c-post/c-put e cria os eventos. Ele vai fazer o mesmo com o c-remove-closest. Se você colocar isso no formulario, ao clicar no formulario ele executa o evento.

Fora que a função $cruLoadRequests é responsável por carregar as interações de request, o c-remove-closest não tem esse proposito, teria que tirar dai de qualquer jeito.

ajustes para aprovar a PR

Se você remover a inicialização do c-remove-closest da funcao $cruLoadRequests e ajustar o sistema de multiplos elementos do c-remove da pra aprovar seu PR!

Tamo junto!

[Tiago-Daniel-Guerreiro]

Obrigado @Iazzetta pela resposta, quanto ao problema da inicialização do c-remove-closest, corrigi adicionando :not(.c-form) no inicializador, também reparei que faltava adicionar o inicializador do novo atributo c-remove, e quanto ao problema do remove.split(' ') acho que a solução mais simples é trocar por remove.split(';') mas não estou tão habituado a usar classes dessa forma, tanto que nem pensei no uso de .menu-teste ul li:first-child.

[Iazzetta]

Boa @Tiago-Daniel-Guerreiro , porem você não removeu o evento do c-remove-closest do $cruLoadRequests e adicionou o do c-remove. Teria que remover os 2 dessa função pois ela é responsavel apenas por inicializar eventos relacionados a requisicao (get/post/put/delete).

Acho que entendi sua ideia, de poder adicionar um c-remove e um c-remove-closest sem precisar depender de formularios. Talvez o ideal seria criar uma função especifica para carregar eventos de interação de elemento.

Por exemplo, da para criar uma função só pra adicionar eventos de elementos:

const $cruLoadElementEvents = () => {

    // aqui você coloca a inicialização do c-remove.
    // não coloque o c-remove-closest 
    
}

E ai chamamos essa função no inicializador:

const $cruLoadEvents = () => {
    $cruLoadRequests()
    $cruLoadFormIntercept()
    $cruLoadAllContainers()

    // aqui
    $cruLoadElementEvents()
}

O c-remove-closest não seria interessante colocar dentro dessa função $cruLoadElementEvents, pois se ele estiver em um elemento form e alguem clicar no form, ele remove o parent. O c-remove faz sentido pois ele realmente foi feito para deletar algo ao clicar. O c-remove-closest é um evento para remover algo após certa ação (form submit, requisições, etc). Então ele é chamado apenas após esses eventos (igual tu fez, colocando dentro do intercept de form e dentro do intercept de request que ja tinha).

só pra resumir:

• precisa remover o evento do c-remove-closest e o c-remove da funcao $cruLoadRequests pois essa funcao é só responsavel por requests
• crie uma função para adicionar eventos relacionados a elementos exclusivamente (como o c-remove que voce fez) e chame essa função no $cruLoadEvents.
• Sobre o c-remove separando com ; achei interessante e simples. Da pra seguir assim.

[Tiago-Daniel-Guerreiro]

Olá @Iazzetta, obrigado pelo feedback! Já corrigi o problema, não tinha percebido, mas a separação faz sentido, e fiz mais algumas mudanças.
Ainda não tenho 100% de certeza sobre todas as alterações, mas pelo que estive a ver acho que estão a funcionar bem. Fiz alguns ajustes gerais e acho que se poderia adicionar uma verificação de sucesso na requisição do form, mas isso deixo para ti, caso queiras fazer.
Tive dificuldades para organizar as branches e por isso tive que remover os commits do pull, mas agora está corrigido.

Resumo das alterações:

• Nova função: Criei a $cruLoadElementEvents para separar a lógica do c-remove.
• Limpeza no $cruLoadContainer: Simplifiquei a verificação de inserção. Como o $target já tem um valor padrão (o próprio container), acho que aquela verificação extra era redundante, então deixei apenas a verificar se não é off.
• Remoção do async: Tirei o async dos loops forEach. Pelo que pesquisei, o forEach não espera as promessas de qualquer forma, então achei melhor remover para não confundir.
• Formatação: Dei uma limpada no código removendo os ; do final das linhas para manter o padrão, já que estava meio misturado.
• Correção no cruRequest: Como el.innerHTML = content nunca era executado, pois se if ($target) fosse verdadeiro no primeiro if ele sempre seria verdadeiro no segundo if.
• Loop nos Requests: Juntei a criação dos eventos (get, post, etc.) num loop só para evitar repetir o mesmo código 4 vezes.
• c-remove-closest nos Forms: Adicionei o atributo c-remove-closest nos formulários.
• Ordem de remoção: Coloquei a lógica de remoção remove() para rodar depois que a requisição dá certo. Parece fazer mais sentido garantir o sucesso antes de apagar o elemento.
• Estilo dos if: Removi as chaves {} dos ifs de uma linha só para deixar o código visualmente mais consistente.