Como o Discourse detecta/infere teclados virtuais?

Tenho um projeto não relacionado ao Discourse em que eu realmente gostaria de poder detectar se o teclado virtual de um navegador móvel está ativo ou não. Percebi, depois de dias pensando e procurando por soluções, que o fórum Discourse que visito todos os dias tem uma interface muito suave para teclados virtuais móveis. É ótimo como ele detecta o teclado de forma confiável e muda a caixa de resposta para preencher o espaço restante, apenas para voltar ao modo normal se você fechar o teclado.

Não encontrei outras soluções fáceis para detectar o teclado virtual (a maior parte do Stack Overflow apenas diz para não tentar), mas o que quer que o Discourse faça parece funcionar bem. O código-fonte é grande e complexo, no entanto, e eu não sei onde procurar nele o código relevante. Então, eu esperava que alguém familiarizado com a interface móvel do Discourse pudesse me indicar o código, ou dar uma explicação sobre quais heurísticas o Discourse usa?

2 curtidas

Usamos a API Visual Viewport: Visual Viewport API - Web APIs | MDN.

Você pode pesquisar nos arquivos JS em nosso código de repositório por visualViewport. Existem algumas peculiaridades no iOS devido à colocação do compositor, então usamos algumas substituições mais complexas lá, o arquivo relevante é app/assets/javascripts/discourse/app/lib/safari-hacks.js.

5 curtidas

Obrigado por essas dicas!

2 curtidas