Como criar um menu de ação flutuante semelhante à média
A popularidade de menus de ação flutuantes tem crescido, especialmente desde que o Medium.com colocou o recurso em voga. Em resumo, o menu de ação flutuante aparece quando você selecione algum texto em uma página da web. O menu aparece perto da seleção, mostrando ações diferentes que permitem formatar, realçar ou compartilhar rapidamente o texto selecionado.
Neste tutorial, mostrarei como exibir um menu de ação para um snippet de texto selecionado em uma página da web. Nosso menu de ação permitirá que os usuários tweet o texto selecionado para seus seguidores.
1. Crie o HTML
o HTML inicial é simples, nós só precisamos algum texto o usuário pode selecionar. Para a demonstração, vou usar “O cervo e o caçador” história de ninar como texto de exemplo.
O cervo e o caçador
O Hart foi uma vez ...
…
2. Crie o modelo de menu de ação
Eu estou adicionando o código HTML pertencendo ao menu de ação dentro de um elemento. O que quer que esteja dentro do tag, não será processado por navegadores até que seja adicionado ao documento usando JavaScript.
Não deixe nenhum espaço desnecessário dentro de tag, como isso pode perturbar o layout do menu de ação uma vez que é inserido no documento. Se você quiser, adicione mais botões dentro #shareBox para mais opções.
3. Crie o CSS
O CSS para o #shareBox recipiente inline vai assim:
#shareBox width: 30px; altura: 30px; posição: absoluta;
o posição: absoluta; regra vai nos deixar coloque o menu onde quisermos na página.
Eu também estilizei o botão de ação dentro #shareBox com uma cor de fundo e imagem e na sua ::depois de pseudo-elemento I adicionou um triângulo para uma seta para baixo.
#shareBox> button width: 100%; altura: 100%; cor de fundo: # 292A2B; fronteira: nenhuma; raio de fronteira: 2px; esboço: nenhum; cursor: ponteiro; background-image: url ('share.png'); repetição de fundo: sem repetição; posição de fundo: centro; tamanho do plano de fundo: 70%; #shareBox> button :: depois de position: absolute; conteúdo: "; border-top: sólido de 10px # 292A2B; borda esquerda: 10px sólida transparente; borda direita: 10px sólida transparente; esquerda: 5px; superior: 30px; 4. Adicionar manipuladores de eventos com JS
Passando para o JavaScript, precisamos adicionar manipuladores de eventos para o mousedown e mouseup eventos para capture o começo e o fim da seleção de texto.
Você também pode fazer pesquisas para outros eventos de seleção tal como selectstart e usá-los em vez de eventos de mouse (o que seria ideal, mas até o momento o suporte do navegador não é muito bom).
Além disso adicione uma referência ao elemento usando o querySelector () método.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); function onMouseDown () function onMouseUp () 5. Limpar as seleções anteriores
No mousedown evento, nós vamos realizar alguma limpeza, ou seja, desmarque qualquer seleção anterior e o menu de ação de pertencimento.
function onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); if (shareBox! == null) shareBox.remove (); o getSelection () método retorna um Seleção objeto representando os intervalos de texto atualmente selecionado pelo usuário e pelo removeAllRange () métodoremove todos os intervalos do mesmo Seleção objeto, assim limpando qualquer seleção anterior.
6. Exibir o menu de ação
É durante o mouseup evento, quando nós vamos confirmar se uma seleção de texto foi feita e tomar outras medidas.
function onMouseUp () var sel = documento.getSelection (), txt = sel.toString (); if (txt! == "") var. range = sel.getRangeAt (0); if (range.startContainer.parentElement.parentElement.localName === "article" || range.startContainer.parentElement.localName === "article") // foi selecionado algum texto no artigo
Obter a cadeia de texto selecionada chamando o para sequenciar() método do Seleção objeto. Se o texto selecionado não estiver vazio, vá em frente e obter o primeiro intervalo de Seleção objeto.
Alcance é o porção selecionada do documento. Normalmente, os usuários farão uma seleção única apenas, não múltipla (pressionando a tecla ctrl / cmd), então é só pegar o primeiro objeto de intervalo (no índice 0) da seleção usando getRangeAt (0).
Assim que tiver o intervalo, veja se a seleção começou de um lugar que dentro do artigo. o startContainer propriedade do intervalo retorna o nó DOM de onde a seleção começou.
Às vezes (quando você selecione dentro de um parágrafo), seu valor é apenas um nó de texto, caso em que o seu elemento pai será e o pai do elemento será (no exemplo de código neste post).
Outras vezes, quando você seleciona em vários parágrafos, a startContainer será e seu nó pai será . Daí o duas comparações no segundo E se condição no código acima.
Uma vez o E se condição passa, é hora de buscar o menu de ação do modelo e adicioná-lo ao documento. Coloque o código abaixo dentro do segundo E se declaração.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
o importNode () método retorna nós de documentos externos (no nosso caso, nós de ). Quando é chamado com o segundo parâmetro (verdade), o elemento / nó importado vem com seus elementos filhos.
Você pode inserir #shareBox em qualquer lugar no corpo do documento, Eu adicionei antes do elemento template.
7. Coloque o menu de ação
Queremos colocar o menu de ação logo acima E no meio da área selecionada. Fazer isso, obter os valores do retângulo da área selecionada usando o getBoundingClientRect () método que retorna o tamanho e a posição de um elemento.
Em seguida, atualize o topo e esquerda valores de #shareBox com base nos valores do retângulo. Nos cálculos do novo topo e esquerda valores, fiz uso de Literais do modelo ES6.
var rect = range.getBoundingClientRect (); var shareBox = document.querySelector ('# shareBox'); shareBox.style.top = 'calc ($ rect.top px - 38px)'; shareBox.style.left = 'calc ($ rect.left px + calc ($ rect.width px / 2) - 30 px)'; 8. Adicionar funcionalidade
Agora que adicionamos o menu de ação próximo ao texto selecionado, é hora de fazer o texto selecionado disponível para as opções do menu para que possamos realizar alguma ação.
Atribuir o texto selecionado a um propriedade customizada do botão de compartilhamento chamado 'shareTxt' e adicione um mousedown ouvinte de eventos para o botão.
var shareBtn = shareBox.querySelector ('button'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); o verdade parâmetro de addEventListener () impede o mousedown evento de borbulhamento.
Dentro de onShareClick () manipulador de eventos, nós insira o texto selecionado em um tweet acessando o shareTxt propriedade do botão.
function onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Uma vez o o botão é clicado, Ele faz o que deve fazer e, em seguida, remove-se da página. Também vai limpe qualquer seleção no documento.
Código fonte e demonstração
Na demonstração Codepen abaixo, você pode teste como funciona o menu de ação. Você também pode encontrar o código fonte completo em nosso repositório do Github.
