Share
Dans ce didacticiel, nous allons apprendre à créer un "menu de partage en ligne". Cette interface fonctionne en ouvrant un menu permettant aux lecteurs de partager la page en citant le texte en surbrillance. Vous trouverez une interface similaire sur quelques sites populaires comme Medium.
Avant de commencer à créer notre menu de partage, nous allons examiner comment cette interface similaire dans Medium fonctionne plus étroitement, par exemple, quand elle est affichée et comment elle est positionnée par rapport à la zone mise en surbrillance. Il s’agit là d’une étape utile qui nous fournira les connaissances techniques appropriées et, éventuellement, déterminera également comment nous allons écrire nos codes avec notre propre code..
Allons-y!
Dans l'image suivante, nous pouvons voir que le menu de partage dans Moyen apparaît au centre du texte en surbrillance, quelle que soit sa longueur. si nous sélectionnons un seul mot, une phrase ou tout le paragraphe.
Interface de partage en ligne en moyen Si nous regardons sous le capot via Chrome DevTools, nous pouvons trouver la position du menu de partage à travers Haut et la gauche propriété dans le style en ligne. Nous pouvons voir le bouton de partage est également donné avec un supplément modificateur classe, highlightMenu - actif, ce qui le rend visible.
Remarque: Si vous ne connaissez pas encore des termes tels que Modificateur, Bloc, et Élément, vous devriez jeter un coup d’œil à ce didacticiel précédent: Introduction à la méthodologie BEM.
Styles qui positionnent le menu de partage intégré dans Moyendans le modes onglet, nous pouvons voir que sa position initiale est définie par CSS avec le absolu la position, la z-index propriété à élever au-dessus des autres éléments de la page, la Haut, et avec le visibilité propriété de mettre les boutons de partage hors de vue.
Pour résumer, nous devrons:
Accentsconagua
Haut et la gauche propriété ajoutée par les styles en ligne.Dans cet exemple, nous allons inclure les boutons Facebook et Twitter dans le menu de partage. Nous livrons l’icône Facebook et Twitter avec SVG, enveloppée dans un bouton et un couple de div éléments. De plus, comme vous pouvez le voir dans l'extrait suivant, nous ajoutons également un envergure élément pour former le triangle au bas des menus.
Il n'y a pas de règle définitive en termes de couleurs et de forme du menu; n'hésitez pas à personnaliser le menu en fonction de la conception de votre site. Il convient de prêter attention à la taille du bouton; la hauteur et la largeur. Notre menu de partage est, comme vous pouvez le voir ci-dessous, 84px large et 40px grand. Nous utiliserons ces deux valeurs pour positionner le menu de partage au centre de la zone en surbrillance plus tard..
Les styles qui définissent la position initiale et la visibilité.
.partage position: absolue; visibilité: cachée; en haut: 0; gauche: 0; z-index: 500;
Et enfin, la classe que nous allons ajouter pour rendre le bouton de partage visible.
.partage - montré visibilité: visible;
À ce stade, notre menu de partage en ligne ne doit pas être visible sur la page. De plus, lorsque nous cliquons sur les boutons Facebook et Twitter, la fenêtre de partage est introuvable. Donc, dans cette section, nous allons écrire le code JavaScript pour rendre nos boutons fonctionnels. Et nous commençons par ce qui suit, getHighlight () une fonction.
fonction getHighlight () var selection = window.getSelection (); // 1. var objet = parent: null, texte: ", rect: null; // Si la sélection n'est pas vide. If (selection.rangeCount> 0) object = text: selection.toString (). Trim (), // récupère le texte parent: selection.anchorNode.parentNode, // récupère l'élément qui entoure le texte rect: selection.getRangeAt (0) .getBoundingClientRect () // récupère le cadre de sélection.; return object ; // 2.
Cette fonction va:
getSelection ().Haut, bas, la gauche, et droite - dans la page.Notre prochaine fonction s'appelle Afficher le menu(). Comme son nom l'indique, cette fonction permet d'afficher le menu de partage..
var sharing = document.querySelector ('.sharing'); function showMenu () // 1. var surbrillance = getHighlight (); // 2. if (highlight.text === ") sharing.setAttribute ('class', 'sharing'); sharing.style.left = 0; sharing.style.top = 0; return; // 3 . / ** * N'afficher le bouton de partage que si le paragraphe sélectionné est un paragraphe. * / If (highlight.parent.nodeName! == 'P') return; // 4. var width = (highlight.rect.width / 2) - 42; / ** * Le "42" est acquis à partir de la largeur de nos boutons de partage divisée par 2. * / sharing.setAttribute ('class', 'sharing sharing - montré'); sharing.style.left = (highlight.rect.left + width) + 'px'; sharing.style.top = (highlight.rect.top - 40) + 'px'; / ** * "40" est la hauteur de nos boutons de partage. * Ici, nous le soulevons au-dessus de la position haute de la zone illuminée. * /Plus précisément, le code dans cette fonction effectue les opérations suivantes:
getHighlighted () une fonction.Haut et le la gauche position, et ajouter le partage - montré classe pour rendre les boutons de partage visibles. J'ai également ajouté quelques lignes de commentaires en ligne décrivant la provenance de certains des nombres définis..Nous allons supposer que la plupart des utilisateurs utilisent la souris pour mettre en surbrillance le contenu sur le Web, ainsi nous lions cette fonction sur le Web. mouseup un événement. Les appareils mobiles ont généralement leurs propres menus contextuels pour la sélection de texte. Nous nous concentrons donc sur le Web pour ce didacticiel..
Sélection de texte dans Safari iOSNous retardons l'exécution si par 100ms en utilisant le setTimeout () fonction, pour s'assurer que le contenu est correctement sélectionné.
document.body.addEventListener ('mouseup', function () setTimeout (showMenu, 100););Notre dernière fonction, openShareWindow (), est de lancer la fenêtre de partage lorsque vous cliquez sur les boutons du menu. Dans ce didacticiel, nous allons principalement l’utiliser pour créer la fenêtre de partage Twitter car Facebook possède son propre SDK JavaScript..
fonction openShareWindow (url, w, h) var screenLeft = window.screenLeft! == undefined? window.screenLeft: screen.left; var screenTop = window.screenTop! == non défini? window.screenTop: screen.top; var width = window.innerWidth? window.innerWidth: doc.documentElement.clientWidth? doc.documentElement.clientWidth: screen.width; var height = window.innerHeight? window.innerHeight: doc.documentElement.clientHeight? doc.documentElement.clientHeight: screen.height; var left = ((width / 2) - (w / 2)) + screenLeft; var top = ((height / 2) - (h / 2)) + screenTop; var newWin = window.open (url, "", "scrollbars = no, width =" + w + ", height =" + h + ", top =" + top + ", left =" + left); if (newWin) newWin.focus ();
Ensuite, nous lions les boutons de partage avec le Cliquez sur événement et attacher une fonction qui va lancer la fenêtre de partage.
// Facebook. document.getElementById ('share') .addEventListener ('click', function () var surligner = getHighlight (); if (surligner.text! == "&& souligner.parent.nodeName === 'P') FB .ui (méthode: 'share', mobile_iframe: true, href: 'http://bitly.com/2aiHmCs', quote: highlight.text // passe le texte sous forme Quote); event.preventDefault (); ); Pour le bouton de partage de Facebook, nous utilisons le SDK JavaScript de Facebook. Le SDK nous permet de transmettre du texte à afficher dans la fenêtre de partage à travers le citation paramètre.
Twitter ne fournit pas de SDK JavaScript de cette manière. Nous utilisons donc ici notre fonction, openShareWindow (), et passez une URL formatée conforme à leurs consignes et à la taille de la fenêtre.
document.getElementById ('tweet') .addEventListener ('click', function () var surligner = getHighlight (); if (surligner.text! == "&& highlight.parent.nodeName === 'P') var docURL = encodeURIComponent ('http://bitly.com/2aiHmCs'); var tweetText = encodeURIComponent (highlight.text); var tweetURL = 'https://twitter.com/intent/tweet?via=wdtuts&url=' + docURL + '& text =' + tweetText; openShareWindow (tweetURL, 600, 420); event.preventDefault ();); Lorsque nous cliquons sur le bouton de partage Twitter, une fenêtre s’affiche, comme suit:.
Nous sommes tous ensemble avec notre menu de partage en ligne! Rendez-vous sur la démo pour la voir en action ou sur le code source pour consulter toutes les fonctions. Ensuite, vous pouvez améliorer le menu de partage en ligne avec des transitions ou des animations pour offrir une expérience plus attrayante..
Nous avons utilisé plusieurs API JavaScripts pour lancer le menu de partage. Certains d'entre eux ont déjà été mentionnés dans les didacticiels Envato Tuts + précédents, tandis que d'autres pourraient être complètement nouveaux pour vous. Donc, ici j'ai inclus des références pour compléter ce tutoriel.
