Tentativa de menu colapsável

[HermesPasser]

Então, recentemente eu resolvi tentar criar um meno colapsável como o do FF, já que não defini a arquitetura do menu bem e o código ta bem bagunçado (preciso refatorar) e para instancia-lo é mais um boilerplate. Ele ainda ta incompleto e bastante quebrado mas ainda acho legal compartilhar com vocês o meu progresso enquanto faço ele de alguma forma funcional.

Fiz ele baseado em windowskin igual o RM:

A windowskin
​

O menu
​

A próxima coisa que irei fazer é colocar uma seta indicando que uma opção tem submenus e refatorar (para me guiar vou ver como o RM implementa o dele)

Aqui você pode brincar com o menu, AWSD move o cursor, Q seleciona e E cancela. Note que tem algum bug na implementação (ou na engine, how knows) que faz com que você tenha que apertar o botão duas vezes para pressionar o botão.

Por sinal, eu absolutamente não planejo usar esse menu em absolutamente nenhum lugar e nem acredito que alguém (com bom senso) vá usá-lo, o que faz todo o meu esforço puro masoquismo

 

[Eliyud]

Acho que levei o verbo BRINCAR muito a sério e sai apertando quase tudo aqui. Descobri que quando presisono o Q, o navegador mostra um popup com o nome do comando e pressiono E, o menu some para nowhere!! Hahahahaha

Achei bacana você estar se guiando pelo funcionamento dos menus do RM!

 

[HermesPasser]

Descobri que quando presisono o Q, o navegador mostra um popup com o nome do comando e pressiono E, o menu some para nowhere!! Hahahahaha

É que setei E para acionar o evento de cancelamento, e isso fecha o menu atualmente aberto, deixando vazio hehe



Dei uma mexida, melhorei um pouco a base de código e adicionei o indicador de que uma opção tem um sub menu.

​

Para a próxima mexida quero adicionar alguma animação para o menu e para o indicador, mais opções de customização na windowskin e suporte ao mouse também

 

[Eliyud]

Confesso que eu, curiosamente, tentei clicar nos comandos com o mouse! HAHAHAHA

Esse menu vai ser utilizado em algum software ou você só está praticando?

 

[Eranot]

Não tá rodando no meu navegador ._.

 

[HermesPasser]

Confesso que eu, curiosamente, tentei clicar nos comandos com o mouse! HAHAHAHA

Esse menu vai ser utilizado em algum software ou você só está praticando?

Não, eu absolutamente não tenho nenhum plano de usar ele. Comecei a faze-lo pois tenho muito tempo livre na faculdade (além de que ser pego codando algo não relacionado a matéria é muito melhor do que  jogando brutal doom).

Mas se o resultado acabar sendo muito bom posso acabar incorporando esse menu no ApathyCloud (este), mesmo que ache que o estilos de menu que programei para ele seja muito mais apelativo mesmo que mais simplista.



[member=1324]Eranot[/member]

O eranão poderia me dizer qual o seu navegador? Nesse projeto em especifico usei e abusei de funções novas do js que talvez não estejam disponíveis na versão atual do seu navegador. Via de regra sempre acabo escrevendo códigos chrome-first e se realmente quero distribuí-lo passo em um babel mas esse aqui foi só algo que fiz para matar o tempo.

 

[Eranot]

Acabei de atualizar meu Chrome pra versão 80.algumacoisa, mas tô rodando ele no Debian, então talvez seja isso (mas não deveria ._.)

 

[HermesPasser]

Acabei de atualizar meu Chrome pra versão 80.algumacoisa, mas tô rodando ele no Debian, então talvez seja isso (mas não deveria ._.)

Pior que não é a primeira vez que você me relata de minhas demos não funcionando. Poderia mostrar o stacktrace na próxima vez?



EDIT: Adicionado suporte ao mouse!

Adicionar suporte ao mouse foi relativamente fácil já que eu já tinha uma interface para isso porém eu to começando a ter que estender a arquitetura da ramu para ela se adequar a forma que quero manter o menu e isso ta virando um boilerplate. Só faltou adicionar a opção de cancelar ao clicar com o botão direito que só esqueci que existia.

Por sinal, aqui está o source

 

[HermesPasser]

Atualizei o menu, agora
-  Se pode definir o bg pela windowskin
- O menu não seleciona "opções vazias"

Ele está assim agora:

E a windowskin assim:

Coisas que eu gostaria de fazer:
- Fazer o botão direito do mouse cancelar assim como acontece com o botão E
-  Arrumar o bug que não permite que você selecione a opção pré selecionada com o mouse até você move-lo para outra e voltar
- Desenhar as bordas das opções individualmente e não por windowskin (para elas não esticarem)
- Melhorar a base de código e arranjar uma forma mais prática de criar os botões

Dificilmente vou fazer qualquer uma dessas coisas anyway já que estou meio satisfeito com o resultado

 

[Eranot]

Opa, agora sim tá funcionando aqui, sendo que não mudei nada no navegador ._.
Achei bacana, só tive um bugzinho que as vezes o Voltar no submenu não tava funcionando.

 

[HermesPasser]

Opa, agora sim tá funcionando aqui, sendo que não mudei nada no navegador ._.
Achei bacana, só tive um bugzinho que as vezes o Voltar no submenu não tava funcionando.

É, vi que ele ta bugando com o mouse.  Provavelmente é alguma coisa estupida que deixei passar (se pá fiz algo de errado no calculo que encontra a área clicada no canvas).

Agora o do porque de estar funcionando é um dos grandes mistérios do mundo. Vou dar um diff no que mudou desde o último post para ver se acho alguma pista.

 

[HermesPasser]

Voltei \o/

Algo que totalmente faltou e só percebi recentemente foi... o áudio. Afinal, um menu sem áudio não tem graça. A implementação do áudio foi a coisa mais desgraçado que fiz em muito tempo e tenho que dar meus obrigados ao @Masked por ter solucionado o problema.

Também adicionei uma opção que impede de fechar a janela root

__

fora o problema que é implementar esse grande boilerplate acho que ja até da para mim usar isso em algum projeto.