Comment créer un menu d'action flottant de taille moyenne
La popularité de menus d'action flottants est à la hausse, surtout depuis que Medium.com a mis cette fonctionnalité en vogue. En bref, le menu d'action flottant saute vers le haut lorsque vous sélectionner du texte sur une page web. Le menu apparaît près de la sélection, montrant différentes actions qui vous permettent de formater, mettre en surbrillance ou partager rapidement le texte sélectionné.
Dans ce tutoriel, je vais vous montrer comment afficher un menu d'action pour un extrait de texte sélectionné sur une page web. Notre menu d’actions permettra aux utilisateurs de tweetez le texte sélectionné à leurs partisans.
1. Créer le HTML
le le HTML de départ est simple, nous avons seulement besoin Du texte l'utilisateur peut sélectionner. Pour la démo, je vais utiliser “Le hart et le chasseur” conte comme exemple de texte.
Le hart et le chasseur
Le Hart était autrefois…
…
2. Créez le modèle de menu d'action
je suis ajout du code HTML appartenant au menu action à l'intérieur d'un élément. Tout ce qui est à l'intérieur du tag, il ne sera pas rendu par les navigateurs jusqu'à ce qu'il soit ajouté au document en utilisant JavaScript.
Ne laissez pas d'espace inutile à l'intérieur de Cela risquerait de perturber la disposition du menu Action une fois qu’elle est insérée dans le document. Si tu veux, ajouter plus de boutons à l'intérieur #shareBox pour plus d'options.
3. Créer le CSS
Le CSS pour le #shareBox conteneur en ligne Va comme ça:
#shareBox width: 30px; hauteur: 30px; position: absolue;
le position: absolue; la règle nous laissera placer le menu où on veut sur la page.
J'ai aussi appelé le bouton d'action à l'intérieur #shareBox avec une couleur de fond et une image et dans son ::après pseudo-élément I ajout d'un triangle pour une flèche descendante.
#shareBox> bouton largeur: 100%; hauteur: 100%; couleur de fond: # 292A2B; bordure: aucune; border-radius: 2px; contour: aucun; curseur: pointeur; background-image: url ('share.png'); répétition de fond: non répétée; position de fond: centre; taille du fond: 70%; #shareBox> button :: after position: absolute; content: "; border-top: 10px solid # 292A2B; border-left: 10px solid transparent; border-right: 10px solid transparent; gauche: 5px; top: 30px; 4. Ajouter des gestionnaires d’événements avec JS
Passons maintenant à JavaScript, nous devons ajouter des gestionnaires d'événements pour le souris vers le bas et mouseup événements à capturer le début et la fin de la sélection de texte.
Vous pouvez également faire des recherches pour autres événements de sélection tel que selectstart et les utiliser au lieu d'événements de souris (ce qui serait idéal mais pour l'instant leur support de navigateur n'est pas très bon).
Également ajouter une référence au élément utilisant le querySelector () méthode.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); fonction onMouseDown () fonction onMouseUp () 5. Effacer les sélections précédentes
dans le souris vers le bas événement, nous effectuer des travaux de nettoyage, c'est-à-dire effacer toute sélection précédente et le menu d'actions appartenant.
fonction onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); if (shareBox! == null) shareBox.remove (); le getSelection () méthode retourne un Sélection objet représentant les plages de texte actuellement sélectionné par l'utilisateur et le removeAllRange () méthodesupprime toutes les gammes de la même Sélection objet, donc effacer une sélection précédente.
6. Afficher le menu d'action
C'est pendant la mouseup événement, quand nous confirmer si une sélection de texte a été faite et prendre des mesures supplémentaires.
fonction onMouseUp () var sel = document.getSelection (), txt = sel.toString (); if (txt! == "") var plage = sel.getRangeAt (0); if (range.startContainer.parentElement.parentElement.localName === "article" || range.startContainer.parentElement.localName === "article") // le texte de l'article a été sélectionné
Obtenir la chaîne de texte sélectionnée en appelant le toString () méthode du Sélection objet. Si le texte sélectionné n'est pas vide, allez-y et obtenir la première gamme du Sélection objet.
Intervalle est le partie sélectionnée du document. En règle générale, les utilisateurs feront une sélection unique seulement, pas plusieurs (en appuyant sur la touche Ctrl / cmd), il suffit donc d’obtenir le premier objet de plage (à l’index 0) de la sélection en utilisant getRangeAt (0).
Une fois que vous avez la plage, voyez si la sélection partait d'un endroit qui à l'intérieur de l'article. le startContainer propriété de la plage retourne le noeud DOM d'où la sélection a commencé.
Parfois (quand vous sélectionner dans un paragraphe), sa valeur est juste un noeud de texte, dans quel cas sa élément parent sera et le parent du l'élément sera (dans l'exemple de code dans ce post).
D'autres fois, lorsque vous sélectionnez à travers plusieurs paragraphes, la startContainer sera et son noeud parent sera . D'où le deux comparaisons dans la seconde si condition dans le code ci-dessus.
Une fois la si la condition passe, il est temps de aller chercher le menu action à partir du modèle et l'ajouter au document. Placez le code ci-dessous à l'intérieur de la seconde si déclaration.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
le importNode () méthode renvoie les nœuds de documents externes (dans notre cas, les nœuds de ). Quand on l'appelle avec le second paramètre (vrai), l'élément / noeud importé sera venir avec ses éléments enfants.
Vous pouvez insérer #shareBox n'importe où dans le corps du document, Je l'ai ajouté avant l'élément template.
7. Placez le menu d'action
Nous voulons placer le menu d'action juste au dessus Et au milieu de la zone sélectionnée. Faire cela, obtenir les valeurs du rectangle de la zone sélectionnée en utilisant le getBoundingClientRect () méthode qui renvoie la taille et la position d'un élément.
Ensuite, mettez à jour le Haut et la gauche valeurs de #shareBox basé sur les valeurs du rectangle. Dans les calculs de la nouvelle Haut et la gauche valeurs, je me suis servi de Littéraux de modèle 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) - 30px)'; 8. Ajouter des fonctionnalités
Maintenant que nous avons ajouté le menu Actions près du texte sélectionné, il est temps de créer le texte sélectionné. disponible pour les options de menu afin que nous puissions effectuer une action sur elle.
Attribuer le texte sélectionné à un propriété personnalisée du bouton de partage appelé 'shareTxt' et ajouter un souris vers le bas écouteur d'événement au bouton.
var shareBtn = shareBox.querySelector ('button'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); le vrai paramètre de addEventListener () empêche le souris vers le bas événement de bouillonnement.
À l'intérieur de onShareClick () gestionnaire d'événements, nous insérer le texte sélectionné dans un tweet en accédant au shareTxt propriété du bouton.
function onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Une fois la le bouton est cliqué, il fait ce qu'il est censé faire, puis se retire de la page. Ça va aussi effacer toute sélection dans le document.
Code source et démo
Dans la démo Codepen ci-dessous, vous pouvez tester comment fonctionne le menu action. Vous pouvez aussi trouver le code source complet dans notre repo Github.
