Cum să codificați un meniu de partajare în linie

În acest tutorial, vom învăța cum să construim un așa-numit "meniu de partajare inline". Această interfață funcționează prin afișarea unui meniu care permite cititorilor să partajeze pagina, citând textul evidențiat. Veți găsi o interfață similară pe câteva site-uri populare cum ar fi Medium.

Înainte de a începe să construim meniul de partajare, vom examina modul în care această interfață similară în Mediu funcționează mai atent, cum ar fi atunci când este afișată și modul în care aceasta este poziționată în funcție de zona evidențiată. Acesta este un pas util care ne va oferi o perspectivă tehnică adecvată, eventual, de asemenea, determinarea modului în care vom scrie codurile noastre propriul cod.

Sa mergem!

Examinarea interfeței medii

În următoarea imagine, vedem că meniul de distribuire în Mediu apare în centrul textului evidențiat, indiferent de lungime; dacă alegem doar un singur cuvânt, o propoziție sau întregul paragraf.

In IUI de partajare în medii 

Dacă ne uităm sub capotă prin Chrome DevTools, putem găsi că poziția din meniul de distribuire este dată top și stânga proprietate în stilul inline. Putem vedea că butonul de partajare este, de asemenea, dat cu un suplimentar modificator clasă, highlightMenu - activ, ceea ce îl face vizibil.

Notă: Dacă nu sunteți încă familiarizați cu termeni precum Modificatorul, bloc, și Element, trebuie să aruncați o privire la acest tutorial anterior: Introducere în Metodologia BEM.

Stiluri care poziționează meniul de partajare inline în Mediu

În stiluri , putem vedea că poziția sa inițială este stabilită prin CSS cu absolut poziția, z-index proprietate pentru a ridica deasupra celorlalte elemente de pe pagină, top, și cu vizibilitate proprietate pentru a pune butoanele de partajare din vedere.

Pentru a rezuma, vom fi nevoiți:

1. Returnați lungimea zonei selectate astfel încât să putem determina punctul central al selecției.
2. Creați un modificator pentru a afișa elementul.
3. Setați poziția meniului de distribuire cu top și stânga proprietate adăugată prin stiluri inline.

Creați Meniul de distribuire 

În acest exemplu, vom include butoanele Facebook și Twitter din meniul de distribuire. Livrăm pictograma Facebook și Twitter cu SVG, înfășurat într-un buton și câteva div elemente. În plus, după cum puteți vedea din fragmentul următor, adăugăm și o deschidere element pentru a forma triunghiul din partea de jos a meniurilor.

Nu există o regulă definitivă în ceea ce privește culorile și forma meniului; nu ezitați să stilizați meniul pentru a se potrivi design-ului site-ului. Merită acordată atenție dimensiunii butonului; înălțimea și lățimea. Meniul nostru de partajare este, după cum puteți vedea mai jos, 84px și 40px înalt. Vom folosi aceste două valori pentru a plasa ulterior meniul de partajare în centrul zonei evidențiate.

Stilurile care stabilesc poziția inițială și vizibilitatea.

.împărtășirea poziție: absolută; vizibilitate: ascuns; top: 0; stânga: 0; z-index: 500;  

În fine, clasa pe care o vom adăuga pentru a face vizibilă butonul de partajare.

.partajare - afișat vizibilitate: vizibil; 

Efectuați meniul de partajare funcțional

În acest moment, meniul nostru de partajare inline nu ar trebui să fie vizibil pe pagină. De asemenea, atunci când facem clic pe butonul Facebook și Twitter, fereastra de partajare nu se află în loc să fie văzută. Deci, în această secțiune, vom scrie JavaScript pentru a face butoanele noastre funcționale. Și începem cu următoarele, getHighlight () funcţie.

funcția getHighlight () var select = window.getSelection (); / Var / object = parent: null, text: ", rect: null; (), introduceți textul parent: selection.anchorNode.parentNode, // obțineți elementul care înfășoară textul rect: select.getRangeAt (0) .getBoundingClientRect () // obțineți caseta delimitare.; return object ; 2.

Această funcție va:

• Extrageți zona evidențiată utilizând funcția JavaScript nativă, getSelection ().
• Returnați un obiect care conține textul selectat, elementul care înfășoară textul și Obiectul dreptunghi al zonei selectate, care ne dă dimensiunea și poziția -top, fund, stânga, și dreapta - în cadrul paginii.

Următoarea noastră funcție este numită showMenu (). După cum sugerează și numele, această funcție va dezvălui meniul de partajare.

var partajare = document.querySelector (".sharing"); funcția showMenu () // 1. var highlight = getHighlight (); // 2. dacă (highlight.text === ") sharing.setAttribute ('class', 'sharing'); sharing.style.left = 0; sharing.style.top = 0; return; // 3 . / ** * Afișează numai butonul partajare dacă selecția este un paragraf. * / If (highlight.parent.nodeName! == 'P') return; // 4. var width = (highlight.rect.width / 2) - 42; / ** * "42" este obținută din lățimea butoanelor noastre partajate împărțită la 2. * / share.setAttribute ('class', 'share sharing - shown' (highlight.rect.left + width) + 'px'; sharing.style.top = (highlight.rect.top - 40) + 'px'; / ** * "40" În acest caz, o ridicăm deasupra poziției superioare a zonei.

În mod specific, codul din această funcție face următoarele:

1. Obțineți Obiectul de la getHighlighted () funcţie.
2. Ascundeți și setați meniul de partajare în poziția inițială atunci când zona evidențiată este goală; nu conține text.
3. Împiedicați apariția butoanelor dacă textul evidențiat nu este înfășurat într-un paragraf.
4. În cele din urmă, setați top si stânga poziție, și adăugați partajare - prezentat pentru a face vizibile butoanele de distribuire. Am adăugat, de asemenea, câteva linii de comentarii inline care descriu unde sunt derivate unele dintre numerele definite.

Vom presupune că majoritatea utilizatorilor utilizează mouse-ul pentru a evidenția conținutul de pe web, prin urmare legăm această funcție pe MouseUp eveniment. Dispozitivele mobile vor avea, de obicei, propriile meniuri contextuale pentru selectarea textului, astfel că ne concentrăm pe web pentru acest tutorial.

Selecția de text în Safari iOS

Am întârzia executarea prin intermediul 100ms folosind setTimeout () pentru a vă asigura că conținutul este selectat corespunzător.

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

Ultima noastră funcție, openShareWindow (), este să lanseze fereastra de partajare atunci când sunt apăsate butoanele din meniu. În acest tutorial, îl vom folosi în primul rând pentru a livra fereastra de partajare Twitter, deoarece Facebook are propriul SDK JavaScript.

funcția 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 înălțime = window.innerHeight? window.innerHeight: doc.documentElement.clientHeight? doc.documentElement.clientHeight: screen.height; var stânga = ((lățime / 2) - (w / 2)) + screenLeft; var var = ((înălțime / 2) - (h / 2)) + screenTop; var newWin = window.open (url, "", scrollbars = nu, width = "+ w +", înălțime = "+ h +", sus = "+ top +", stânga = "+ stânga); dacă (newWin) newWin.focus (); 

Faceți clic pe ... Faceți clic pe ...

Apoi, legăm butoanele de partajare cu clic și atașați o funcție care va lansa fereastra de partajare.

// Facebook. document.getElementById ('partajare') .addEventListener ('click', function () var highlight = getHighlight (); if (highlight.text! == "&& highlight.parent.nodeName === 'P') FB .ui (metoda: 'partajați', mobile_iframe: true, href: 'http://bitly.com/2aiHmCs', citat: highlight.text // trece textul ca Citat); event.preventDefault (); ); 

Pentru butonul de partajare Facebook, folosim SDK-ul JavaScript Facebook. SDK ne permite să transmitem textul care să apară în fereastra de partajare prin citat parametru.

Twitter nu furnizează un SDK JavaScript în acest fel. Deci, aici ne folosim funcția, openShareWindow (), și să treacă o adresă URL formatată care să respecte liniile directoare, împreună cu mărimea ferestrei.

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 ();); 

Când faceți clic pe butonul de partajare Twitter, ar trebui să lansați o fereastră care apare, după cum urmează.

Înfășurarea în sus

Suntem toți stabiliți cu meniul nostru de partajare inline! Treceți la demo pentru ao vedea în acțiune, sau codul sursă pentru a arăta funcțiile în întregime. Apoi, puteți îmbunătăți meniul de partajare în linie cu tranziții sau animație pentru a oferi o experiență mai interesantă.

Resurse suplimentare

Există mai multe API-uri JavaScript, pe care le-am folosit pentru a accesa meniul de partajare. Unele dintre ele au fost menționate în tutorialele anterioare Envato Tuts +, în timp ce altele ar putea fi complet noi pentru tine. Deci, aici am inclus referințe pentru a completa acest tutorial.

• BEM: Modificatorul elementului de bloc, Introducere
• Facebook JavaScript SDK
• Facebook Social Plugin - Citat
• URL-ul Web de intenție Twitter
• Selecție Web API
• Range API Web
• Codificați componenta URL
• "Copiați în Clipboard" Made Easy cu Clipboard.js