Share
In deze tutorial leren we hoe we een zogenaamd "inline sharing menu" kunnen bouwen. Deze interface werkt door een menu op te schuiven waarmee lezers de pagina kunnen delen en de gemarkeerde tekst citeren. Je vindt een vergelijkbare interface op een paar populaire sites zoals Medium.
Voordat we beginnen met het bouwen van ons deelmenu, zullen we onderzoeken hoe deze vergelijkbare interface in Medium nauwer werkt, zoals wanneer deze wordt weergegeven en hoe deze wordt geplaatst tegen het gemarkeerde gebied. Dit is een nuttige stap die ons technisch inzicht verschaft, en uiteindelijk ook bepaalt hoe we onze codes onze eigen code zullen schrijven.
Laten we gaan!
In de volgende afbeelding kunnen we zien dat het deelmenu in het midden in het midden van de gemarkeerde tekst staat, ongeacht de lengte; of we alleen een enkel woord, een zin of de hele alinea selecteren.
Inline Sharing UI in medium Als we via Chrome DevTools onder de motorkap kijken, kunnen we vinden dat de positie van het deelmenu wordt doorgegeven top en links eigendom in de inline-stijl. We kunnen zien dat de knop Delen ook wordt weergegeven met een extra wijziger klasse, highlightMenu - actief, waardoor het zichtbaar wordt.
Notitie: Als u nog niet bekend bent met termen als wijziger, Blok, en Element, je zou eens naar deze eerdere tutorial moeten kijken: An Introduction to the BEM Methodology.
Stijlen die het menu voor inline delen in Medium positionerenIn de stijlen tab, we kunnen zien dat de beginpositie wordt bepaald door CSS met de absoluut positie, de z-index eigenschap om boven de andere elementen op de pagina te plaatsen, de top, en met de zichtbaarheid eigenschap om de deelknoppen uit het zicht te verwijderen.
Om samen te vatten, moeten we:
Accentsconagua
top en links eigenschap toegevoegd via inline stijlen.In dit voorbeeld nemen we de Facebook- en Twitter-knoppen op in het deelmenu. We leveren het Facebook- en Twitter-pictogram met SVG, verpakt in een knop en een paar div elementen. Bovendien, zoals u kunt zien in het volgende fragment, voegen we ook een span element om de driehoek onder aan de menu's te vormen.
Er is geen definitieve regel in termen van kleuren en de vorm van het menu; voel je vrij om het menu te stylen naar jouw site-ontwerp. Het vermelden waard is de knopgrootte; de hoogte en de breedte. Ons deelmenu is, zoals u hieronder kunt zien, 84px breed en 40px lang. We zullen deze twee waarden gebruiken om het deelmenu later in het midden van het gemarkeerde gebied te plaatsen.
De stijlen die de beginpositie en zichtbaarheid bepalen.
.delen positie: absoluut; zichtbaarheid: verborgen; boven: 0; links: 0; z-index: 500;
En als laatste de klasse die we zullen toevoegen om de knop Delen zichtbaar te maken.
.delen - getoond visibility: visible;
Op dit moment zou ons menu voor inline delen niet zichtbaar moeten zijn op de pagina. Ook wanneer we op Facebook en Twitter klikken, is het deelvenster niet zichtbaar. Dus, in deze sectie zullen we het JavaScript schrijven om onze knoppen functioneel te maken. En we beginnen met het volgende, getHighlight () functie.
function getHighlight () var selection = window.getSelection (); // 1. var-object = parent: null, text: ", rect: null; // Als selectie niet leeg is. If (selection.rangeCount> 0) object = text: selection.toString (). Trim (), // zorg voor de tekst parent: selection.anchorNode.parentNode, // zorg dat het element de tekst omwikkelt. rect: selection.getRangeAt (0) .getBoundingClientRect () // haal het selectiekader.; return object ; // 2.
Deze functie zal:
getSelection ().top, bodem, links, en rechts - binnen de pagina.Onze volgende functie wordt genoemd laat het menu zien(). Zoals de naam al aangeeft, onthult deze functie het deelmenu.
var sharing = document.querySelector ('.sharing'); function showMenu () // 1. var highlight = getHighlight (); // 2. if (highlight.text === ") sharing.setAttribute ('class', 'sharing'); sharing.style.left = 0; sharing.style.top = 0; return; // 3 . / ** * Laat de knop Delen alleen zien als de geselecteerde alinea een alinea is. * / If (highlight.parent.nodeName! == 'P') return; // 4. var width = (highlight.rect.width / 2) - 42; / ** * De "42" is verkregen van onze deelknoppen breedte gedeeld door 2. * / sharing.setAttribute ('class', 'sharing sharing - shown'); sharing.style.left = (highlight.rect.left + width) + 'px'; sharing.style.top = (highlight.rect.top - 40) + 'px'; / ** * "40" is de hoogte van onze knoppen voor delen. * Hierin heffen we hem boven de bovenpositie van het higlighted gebied. * /In het bijzonder doet de code in deze functie het volgende:
getHighlighted () functie.top en de links positie, en voeg het toe sharing - getoond klasse om de knoppen voor delen zichtbaar te maken. Ik heb ook een paar regels inline opmerkingen toegevoegd waarin wordt beschreven waar sommige gedefinieerde getallen van zijn afgeleid.We gaan ervan uit dat de meeste gebruikers muis gebruiken om de inhoud op het web te markeren, daarom binden we deze functie op de mouseUp evenement. Mobiele apparaten hebben meestal hun eigen contextuele menu's over tekstselectie, dus we richten ons op het web voor deze zelfstudie.
Tekstselectie in Safari iOSWe vertragen de uitvoering echter door 100ms de ... gebruiken setTimeout () functie, om ervoor te zorgen dat de inhoud correct is geselecteerd.
document.body.addEventListener ('mouseup', function () setTimeout (showMenu, 100););Onze laatste functie, openShareWindow (), is om het deelvenster te openen wanneer op de knoppen in het menu wordt geklikt. In deze zelfstudie gebruiken we deze in de eerste plaats om het venster voor het delen van Twitter te leveren, aangezien Facebook een eigen JavaScript SDK heeft.
function openShareWindow (url, w, h) var screenLeft = window.screenLeft! == undefined? window.screenLeft: screen.left; var screenTop = window.screenTop! == undefined? 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: schermhoogte; var left = ((width / 2) - (w / 2)) + screenLeft; var top = ((hoogte / 2) - (h / 2)) + schermTop; var newWin = window.open (url, "", "scrollbars = nee, width =" + w + ", height =" + h + ", top =" + top + ", left =" + left); if (newWin) newWin.focus ();
Vervolgens binden we de deelknoppen met de Klik gebeurtenis en bevestig een functie waarmee het deelvenster wordt geopend.
// Facebook. document.getElementById ('delen') .addEventListener ('klik', functie () var highlight = getHighlight (); if (highlight.text! == "&& highlight.parent.nodeName === 'P') FB .ui (methode: 'share', mobile_iframe: true, href: 'http://bitly.com/2aiHmCs', quote: highlight.text // geeft de tekst door als Quote); event.preventDefault (); ); Voor de Facebook-knop delen gebruiken we de JavaScript-SDK voor Facebook. Met de SDK kunnen we tekst doorgeven om in het deelvenster te verschijnen via de citaat parameter.
Twitter biedt op deze manier geen JavaScript SDK. Dus hier gebruiken we onze functie, openShareWindow (), en geef een opgemaakte URL door die voldoet aan hun richtlijnen samen met de grootte van het venster.
document.getElementById ('tweet') .addEventListener ('klik', functie () var highlight = getHighlight (); if (highlight.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 ();); Wanneer we op de knop Twitter delen klikken, zou het als volgt een venster moeten openen dat verschijnt.
We zijn helemaal klaar met ons inline deelmenu! Ga naar de demo om deze in actie te zien of de broncode om de functies volledig te bekijken. Vervolgens kunt u het inline deelmenu verbeteren met overgangen of animaties om een boeiender ervaring te bieden.
Er zijn verschillende JavaScript-API's die we hebben gebruikt om het deelmenu te activeren. Sommigen van hen zijn genoemd in eerdere Envato Tuts + tutorials, terwijl anderen misschien helemaal nieuw voor je zijn. Dus hier heb ik verwijzingen opgenomen om deze tutorial aan te vullen.
