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 taches? 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> 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!