Comment créer des actions pour le texte sélectionné avec l'API de sélection

Cliquez sur, faites glisser, publiez: vous venez de sélectionner du texte sur une page Web - probablement pour le copier et le coller quelque part ou pour le partager. Ne serait-il pas cool si la sélection de ce texte révélait certaines options qui facilitent ces tâches? C'est ce que fait un menu de sélection.

Vous connaissez peut-être déjà les menus de sélection si vous avez déjà utilisé un éditeur en ligne. Lorsque vous sélectionnez du texte, les options pour formater la sélection peuvent flotter au-dessus. En fait, j'écris ce projet dans un éditeur qui fait exactement cela.

Voyons comment nous pouvons créer un menu de sélection comme celui-ci à l'aide de l'API de sélection de JavaScript. L'API nous donne accès à l'espace et au contenu de la zone sélectionnée sur une page Web. De cette façon, nous pouvons placer le menu de sélection exactement au-dessus du texte sélectionné et accéder au texte sélectionné lui-même.

Voici un extrait HTML avec un exemple de texte:

 <re article>
  <h1 id="Sélectionnez-le-texte-ci-dessous"> Sélectionnez le texte ci-dessous </h1> 
  <p> Les feuilles de style en cascade (CSS) sont une langue de feuille de style utilisée pour décrire la présentation d'un document écrit dans un langage de balisage tel que HTML. CSS est une technologie de pierre angulaire du World Wide Web, aux côtés de HTML et JavaScript. CSS est conçu pour permettre la séparation de la présentation et du contenu, y compris la disposition, les couleurs et les polices. Cette séparation peut améliorer l'accessibilité du contenu, offrir plus de flexibilité et de contrôle dans la spécification des caractéristiques de présentation. </p>

<template> <span> </span>  template></template></re>

Il y a une balise à la fin. Le à l'intérieur est notre contrôle de menu de sélection. Tout ce qui est à l'intérieur d'une balise n'est pas rendu sur la page jusqu'à ce qu'il ne soit plus ajouté à la page avec JavaScript. Nous ajouterons le contrôle du menu de sélection à la page lorsque l'utilisateur sélectionnera le texte. Et lorsque l'utilisateur sélectionne ce texte, notre menu de sélection invitera l'utilisateur à le tweeter.

Voici le CSS pour le coiffer:

 #contrôle {
    Background-Image: URL ("Data: image / svg xml, <svg xmlns=" ​​http://www.w3.org/2000/svg " width="'40px'" height="'40px'"> <foreignobject width="'40px'" height="'40px'"> <divo xmlns="'http:" style="'width:" height: line-height: text-align: centre couleur: transparent text-shadow: jaune noir police-taille:>?   forestrabject> </divo></foreignobject></svg> ");
  curseur: pointeur;
  Position: absolue;
  Largeur: 40px;
  hauteur: 40px;
}
#Control :: avant {
  Color en arrière-plan: noir;
  Couleur: blanc;
  Contenu: "Tweetez ceci!";
  Affichage: bloc;
  Police-poids: Bold;
  marge-gauche: 37px;
  marge: 6px;
  rembourrage: 2px;
  Largeur: contenu maximum;
  hauteur: 20px;
}

Consultez cet article pour savoir comment j'ai utilisé un emoji (?) Pour l'image d'arrière-plan.

Jusqu'à présent, l'exemple de texte est prêt et le contrôle du menu de sélection a été stylé. Passons au javascript. Lorsqu'une sélection est effectuée, nous obtiendrons la taille et la position de la zone sélectionnée sur la page. Nous utilisons ensuite ces mesures pour attribuer la position du contrôle du menu de sélection au niveau supérieur de la zone sélectionnée.

 var contrôle = document.importNode (document.QuerySelector ('modèle'). Contenu, true) .childNodes [0];
document.QuerySelector ('P'). OnPointerUp = () => {
  Selt Selection = Document.GetSelection (), Text = Selection.ToString ();
  if (text! == "") {
    Selt rect = Selection.GetRangeat (0) .getBoundingClientRect ();
    contrôle.style.top = `calc ($ {rect.top} px - 48px)`;
    contrôle.style.left = `calc ($ {rect.left} px calc ($ {rect.width} px / 2) - 40px)`;
    contrôle ['text'] = texte; 
    document.body.ApendChild (contrôle);
  }
}

Dans ce code, nous obtenons d'abord une copie du contrôle du menu de sélection à l'intérieur de , puis l'attribuons à la variable de contrôle.

Ensuite, nous écrivons la fonction de gestionnaire pour l'événement OnPointerUp de l'élément transportant l'exemple de texte. À l'intérieur de la fonction, nous obtenons la sélection et la chaîne sélectionnée à l'aide de document.getSelection (). Si la chaîne sélectionnée n'est pas vide, nous obtenons la taille et la position de la zone sélectionnée, via GetBoundingClientRect () et la plaçons dans la variable Rect.

En utilisant RECT, nous calculons et attribuons les positions supérieure et gauche du contrôle. De cette façon, le contrôle du menu de sélection est placé un peu au-dessus de la zone sélectionnée et centrée horizontalement. Nous attribuons également la chaîne sélectionnée à une propriété de contrôle définie par l'utilisateur. Cela sera plus tard utilisé pour partager le texte.

Et, enfin, nous ajoutons le contrôle à la page Web à l'aide d'AnnessChild (). À ce stade, si nous sélectionnons un exemple de texte de la page, le contrôle du menu de sélection apparaîtra à l'écran.

Maintenant, nous arrivons à coder ce qui se passe lorsque le contrôle du menu de sélection est cliqué. En d'autres termes, nous allons faire en sorte que le texte soit tweeté lorsque l'invite est cliquée.

 Control.AddeventListener ('Pointerdown', OnControldown, true);

fonction onControldown (événement) {
  window.open (`https://twitter.com/intent/tweet?text=$ {this.text}`)
  this.remove ();
  Document.getSelection (). RemoveallRanges ();
  event.stoppropagation ();
}

Lorsque le contrôle est cliqué, un onglet s'ouvre sur la page «Nouveau tweet» de Twitter, terminée avec le texte sélectionné prêt à l'emploi.

Après l'invite de tweet, le contrôle du menu de sélection n'est plus nécessaire et est supprimé, ainsi que toute sélection effectuée sur la page. La façon dont l'événement du pointeur est en cascades plus bas sur l'arbre Dom est également arrêté à ce stade.

Nous avons également besoin d'un gestionnaire d'événements pour l'événement OnPointerdown de la page:

 document.onpointerdown = () => {    
  LET CONTROL = Document.QuerySelector ('# Control');
  if (Control! == NULL) {Control.Remove (); document.getSelection (). RemoveallRanges ();}
}

Maintenant, le contrôle et toute sélection effectuée sur la page sont supprimés lors du clic n'importe où sur la page mais le contrôle du menu de sélection.

Démo

Voici une version plus trifiée que Chris a réunie:

Et voici un exemple montrant plus d'un contrôle dans le menu de sélection:

À propos de ce

Il n'est pas totalement nécessaire que nous l'utilisions. Au lieu de cela, vous pouvez également essayer de se cacher et d'afficher le contrôle d'une autre manière, comme l'attribut HTML caché ou l'affichage CSS. Vous pouvez également créer un contrôle de menu de sélection dans le JavaScript lui-même. Les choix de codage dépendront de l'efficacité que vous les exécutez et de leurs replies, si nécessaire, ainsi que de la façon dont ils s'adaptent à votre application.

Quelques conseils d'interface utilisateur

Bien que ce soit un bel effet, il y a quelques choses à considérer lors de l'utilisation pour assurer une bonne expérience utilisateur. Par exemple, évitez d'injecter votre propre texte dans la sélection de texte - vous savez, comme revoir un lien vers votre site dans le tweet généré automatiquement. C'est intrusif et ennuyeux. S'il y a une raison de le faire, comme l'ajout de la citation source, laissez l'utilisateur voir un aperçu du texte final avant de le publier. Sinon, l'utilisateur peut être confus ou surpris par l'ajout.

Une autre chose: il est préférable que le contrôle du menu soit à l'écart. Nous ne voulons pas qu'il couvre trop de contenu environnant. Ce genre de chose s'ajoute à la «perte de données» de CSS et nous voulons éviter cela.

Conclusion: comprenez pourquoi vos utilisateurs doivent sélectionner du texte sur votre site Web et ajouter les commandes d'une manière qui s'écarte de ce qu'ils essaient de faire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!