So programmieren Sie ein Inline-Freigabemenü

In diesem Lernprogramm erfahren Sie, wie Sie ein sogenanntes "Inline-Sharing-Menü" erstellen. Diese Schnittstelle funktioniert, indem ein Menü geöffnet wird, in dem Leser die Seite freigeben können, wobei der hervorgehobene Text zitiert wird. Eine ähnliche Benutzeroberfläche finden Sie auf einigen beliebten Websites wie Medium.

Bevor wir mit dem Erstellen unseres Freigabemenüs beginnen, werden wir untersuchen, wie diese ähnliche Schnittstelle in Medium genauer funktioniert, z. B. wann sie angezeigt wird und wie sie gegenüber dem hervorgehobenen Bereich positioniert wird. Dies ist ein hilfreicher Schritt, der uns einen guten technischen Einblick verschafft und letztendlich auch bestimmt, wie wir unseren Code in unseren eigenen Code schreiben.

Lass uns gehen!

Untersuchen der Medium-Schnittstelle

In der folgenden Abbildung sehen Sie, dass das Freigabemenü in Medium unabhängig von der Länge in der Mitte des hervorgehobenen Texts angezeigt wird. ob wir nur ein einzelnes Wort, einen Satz oder den ganzen Absatz auswählen.

Inline-Sharing-Benutzeroberfläche in Medium 

Wenn wir mit Chrome DevTools unter die Haube schauen, können wir feststellen, dass die Freigabemenüposition durchgegeben wird oben und links Eigenschaft im Inline-Stil. Wir können sehen, dass der Freigabeknopf auch mit einem Zusatz versehen ist Modifikator Klasse, highlightMenu - aktiv, das macht es sichtbar.

Hinweis: Wenn Sie mit Begriffen wie noch nicht vertraut sind Modifikator, Block, und Element, Sie sollten einen Blick auf dieses frühere Tutorial werfen: Eine Einführung in die BEM-Methode.

Stile, die das Inline-Sharing-Menü in Medium positionieren

In dem Styles Tab, können wir sehen, dass seine Anfangsposition durch CSS mit der absolut Position, die z-index Eigenschaft, die über den anderen Elementen auf der Seite angezeigt wird, die oben, und mit dem Sichtweite Eigenschaft, um die Freigabe-Schaltflächen außer Sicht zu setzen.

Zusammenfassend müssen wir:

1. Rufen Sie die Länge des ausgewählten Bereichs ab, damit wir den Mittelpunkt der Auswahl bestimmen können.
2. Erstellen Sie einen Modifikator, um das Element anzuzeigen.
3. Stellen Sie die Position des Freigabemenüs mit ein oben und links Eigenschaft hinzugefügt durch Inline-Stile.

Erstellen Sie das Freigabemenü 

In diesem Beispiel werden Facebook- und Twitter-Schaltflächen in das Freigabemenü aufgenommen. Wir liefern das Facebook- und Twitter-Symbol mit SVG, verpackt in einem Taste und ein paar div Elemente. Wie Sie dem folgenden Snippet entnehmen können, fügen wir außerdem ein Spanne Element, um das Dreieck am unteren Rand der Menüs zu bilden.

Es gibt keine definitive Regel bezüglich der Farben und der Form des Menüs. Fühlen Sie sich frei, das Menü an Ihr Website-Design anzupassen. Es lohnt sich, auf die Tastengröße zu achten; die Höhe und die Breite. Unser Freigabemenü ist, wie Sie unten sehen können, 84px breit und 40px hoch. Wir werden diese beiden Werte verwenden, um das Freigabemenü später in der Mitte des hervorgehobenen Bereichs zu positionieren.

Die Stile legen die Ausgangsposition und Sichtbarkeit fest.

.teilen position: absolut; Sichtbarkeit: versteckt; oben: 0; links: 0; z-Index: 500;  

Zum Schluss noch die Klasse, die wir anhängen, um die Freigabe-Schaltfläche sichtbar zu machen.

.Sharing - gezeigt Sichtbarkeit: sichtbar; 

Machen Sie das Freigabemenü funktionsfähig

Zu diesem Zeitpunkt sollte unser Inline-Sharing-Menü auf der Seite nicht sichtbar sein. Wenn Sie auf Facebook und Twitter klicken, ist das Freigabefenster nirgends zu sehen. In diesem Abschnitt schreiben wir das JavaScript, damit unsere Buttons funktionieren. Und wir beginnen mit dem Folgenden, getHighlight () Funktion.

function getHighlight () var selection = window.getSelection (); // 1. var object = parent: null, text: ", rect: null; // Wenn die Auswahl nicht leer ist. If (selection.rangeCount> 0) object = text: selection.toString (). Trim (), // Abrufen des Textes parent: selection.anchorNode.parentNode, // Abrufen des Elements um den Text. rect: selection.getRangeAt (0) .getBoundingClientRect () // Liefert den Begrenzungsrahmen.; return object ; // 2.

Diese Funktion wird:

• Rufen Sie den hervorgehobenen Bereich mithilfe der nativen JavaScript-Funktion ab, getSelection ().
• Gibt ein Objekt zurück, das den ausgewählten Text enthält, das Element, das den Text umschließt, und das Rechteckobjekt des ausgewählten Bereichs, das uns die Größe sowie die Position angibt -oben, Unterseite, links, und Recht - innerhalb der Seite.

Unsere nächste Funktion heißt zeige das Menü(). Wie der Name schon sagt, wird diese Funktion das Freigabemenü anzeigen.

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 . / ** * Zeigt die Freigabe-Schaltfläche nur an, wenn der ausgewählte Absatz ein Absatz ist. * / If (highlight.parent.nodeName! == 'P') return; // 4. var width = (highlight.rect.width / 2) - 42; / ** * Die "42" wird aus unserer Breite der gemeinsamen Schaltflächen erhalten, die durch 2. geteilt wird. * / Sharing.setAttribute ('class', 'sharing sharing - shown'); sharing.style.left = (highlight.rect.left + width) + 'px'; sharing.style.top = (highlight.rect.top - 40) + 'px'; / ** * "40" ist die Höhe unserer Share-Buttons. * Hier heben wir es über die oberste Position des hervorgehobenen Bereichs. * /

Im Einzelnen führt der Code in dieser Funktion Folgendes aus:

1. Holen Sie sich das Objekt von getHighlighted () Funktion.
2. Verstecken Sie das Freigabemenü und stellen Sie es auf seine Ausgangsposition ein, wenn der hervorgehobene Bereich leer ist. Es enthält keinen Text.
3. Verhindern Sie, dass die Schaltflächen angezeigt werden, wenn der hervorgehobene Text nicht in einen Absatz eingebettet ist.
4. Zum Schluss stellen Sie das ein oben und das links Position und fügen Sie die teilen - gezeigt Klasse, um die Freigabe-Schaltflächen sichtbar zu machen. Ich habe auch ein paar Zeilen Inline-Kommentare hinzugefügt, in denen beschrieben wird, woher einige der definierten Zahlen abgeleitet werden.

Wir gehen davon aus, dass die meisten Benutzer den Inhalt im Web mit der Maus markieren. Daher binden wir diese Funktion an die Mouseup Veranstaltung. Mobile Geräte verfügen normalerweise über eigene Kontextmenüs für die Textauswahl. Daher konzentrieren wir uns bei diesem Lernprogramm auf das Web.

Textauswahl in Safari iOS

Wir verzögern die Hinrichtung jedoch um 100 ms Verwendung der setTimeout () Funktion, um sicherzustellen, dass der Inhalt richtig ausgewählt ist.

document.body.addEventListener ('mouseup', function () setTimeout (showMenu, 100););

Unsere letzte Funktion, openShareWindow (), Startet das Freigabefenster, wenn auf die Schaltflächen im Menü geklickt wird. In diesem Tutorial werden wir es in erster Linie zur Bereitstellung des Twitter-Freigabefensters verwenden, da Facebook ein eigenes JavaScript-SDK hat.

Funktion openShareWindow (url, w, h) var screenLeft = window.screenLeft! == undefined? window.screenLeft: screen.left; var screenTop = window.screenTop! == undefiniert? 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 (); 

Klick klick…

Als nächstes binden wir die Freigabe-Buttons mit der klicken Ereignis und fügen Sie eine Funktion hinzu, die das Freigabefenster öffnet.

// Facebook. document.getElementById ('share') .addEventListener ('click', function () var highlight = getHighlight (); if (highlight.text! == "&& highlight.parent.nodeName === 'P') FB .ui (Methode: 'share', mobile_iframe: true, href: 'http://bitly.com/2aiHmCs', Zitat: highlight.text // übergeben Sie den Text als Zitat); event.preventDefault (); ); 

Für die Facebook-Weitergabe-Schaltfläche verwenden wir das Facebook JavaScript SDK. Mit dem SDK können wir Text übergeben, der im Freigabefenster durch das Fenster angezeigt wird Zitat Parameter.

Twitter stellt auf diese Weise kein JavaScript-SDK zur Verfügung. Hier nutzen wir unsere Funktion, openShareWindow (), und übergeben Sie eine formatierte URL, die ihren Richtlinien und der Größe des Fensters entspricht.

document.getElementById ('tweet') .addEventListener ('click', function () 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 ();); 

Wenn Sie auf die Freigabeschaltfläche von Twitter klicken, sollte ein Fenster wie folgt geöffnet werden.

Einpacken

Wir sind alle mit unserem Inline-Menü ausgestattet! Gehen Sie zur Demo, um sie in Aktion zu sehen, oder den Quellcode, um die Funktionen vollständig anzuzeigen. Als Nächstes können Sie das Inline-Sharing-Menü mit Übergängen oder Animationen verbessern, um eine ansprechende Erfahrung zu bieten.

Weitere Ressourcen

Es gibt verschiedene JavaScripts-APIs, mit denen wir das Freigabemenü zum Laufen bringen. Einige davon wurden bereits in früheren Envato Tuts + -Tutorials erwähnt, während andere möglicherweise für Sie völlig neu sind. Daher habe ich hier Verweise hinzugefügt, die dieses Tutorial ergänzen.

• BEM: Block Element Modifier, Einführung
• Facebook JavaScript SDK
• Facebook Social Plugin - Zitat
• Twitter Web Intent URL
• Auswahl-Web-API
• Range Web API
• URL-Komponente kodieren
• "In Zwischenablage kopieren" leicht gemacht mit Clipboard.js