Share
I denne veiledningen vil vi lære å bygge en såkalt "inline sharing menu". Dette grensesnittet fungerer ved å pusse opp en meny som gjør det mulig for leserne å dele siden og citerer den merkede teksten. Du finner et lignende grensesnitt på noen få populære nettsteder som Medium.
Før vi begynner å bygge delingsmenyen, undersøker vi hvordan dette lignende grensesnittet i Medium fungerer tettere, for eksempel når det vises og hvordan det er plassert mot det uthevede området. Dette er et nyttig skritt som vil gi oss riktig teknisk innsikt, og til slutt bestemme hvordan vi skal skrive våre koder vår egen kode.
La oss gå!
I det følgende bildet kan vi se at delingsmenyen i Medium vises i midten av den merkede teksten, uavhengig av lengden; om vi bare velger et enkelt ord, en setning eller hele avsnittet.
Inline Deling brukergrensesnitt i medium Hvis vi ser under hetten via Chrome DevTools, kan vi finne delingsmenyposisjonen gitt gjennom topp og venstre eiendom i inline-stilen. Vi kan se delingsknappen er også gitt med en ekstra modifier klasse, highlightMenu - aktive, som gjør det synlig.
Merk: Hvis du ennå ikke er kjent med vilkår som modifier, Blokkere, og Element, bør du se på denne tidligere opplæringen: En introduksjon til BEM-metoden.
Stiler som plasserer Inline Sharing-menyen i MediumI Styles fanen, kan vi se at den opprinnelige posisjonen er satt gjennom CSS med absolutte posisjon, den z-indeks eiendom å øke over de andre elementene på siden, topp, og med synlighet egenskap for å sette delingsknappene ut av syne.
For å oppsummere, må vi:
Accentsconagua
topp og venstre eiendom lagt til via inline stiler.I dette eksemplet vil vi inkludere Facebook og Twitter-knapper i delingsmenyen. Vi leverer Facebook og Twitter-ikonet med SVG, pakket inn i en knapp og et par div elementer. I tillegg, som du kan se fra følgende utdrag, legger vi også til en span element for å danne trekanten nederst på menyene.
Det er ingen endelig regel i form av fargene og formen på menyen; Ta gjerne stil på menyen for å matche nettstedet ditt. Verdt å merke seg er knappestørrelsen; høyden og bredden. Vår delingsmeny er, som du kan se nedenfor, 84px bred og 40px høy. Vi bruker disse to verdiene til å plassere delingsmenyen i midten av det fremhevede området senere.
Stilene som setter utgangspunktet og synligheten.
.dele posisjon: absolutt; synlighet: skjult; topp: 0; venstre: 0; z-indeks: 500;
Og til slutt, den klassen som vi vil legge til for å gjøre delingsknappen synlig.
.deling - vist synlighet: synlig;
På dette tidspunktet bør vår inline sharing-meny ikke være synlig på siden. Også, når vi klikker på Facebook og Twitter-knappen, er delingsvinduet ingen steder å se. Så, i denne delen skriver vi JavaScript for å gjøre knappene våre funksjonelle. Og vi begynner med følgende, getHighlight () funksjon.
funksjon getHighlight () var selection = window.getSelection (); // 1. var objekt = foreldre: null, tekst: ", rekt: null; // Hvis valget ikke er tomt. Hvis (selection.rangeCount> 0) object = text: selection.toString (). Trim (), // få teksten. foreldre: selection.anchorNode.parentNode, // få elementet innpakket teksten. rect: selection.getRangeAt (0) .getBoundingClientRect () // få avgrensningsboksen.; returnere objekt ; // 2.
Denne funksjonen vil:
getSelection ().topp, bunn, venstre, og Ikke sant - innenfor siden.Vår neste funksjon kalles VisMeny (). Som navnet antyder, vil denne funksjonen vise delemenyen.
var sharing = document.querySelector ('.sharing'); funksjon showMenu () // 1. var highlight = getHighlight (); // 2. hvis (highlight.text === ") sharing.setAttribute ('class', 'sharing'); sharing.style.left = 0; sharing.style.top = 0; return; // 3 . / ** * Vis kun delingsknappen hvis den valgte er et avsnitt. * / Hvis (highlight.parent.nodeName! == 'P') return; // 4. var width = (highlight.rect.width / 2) - 42; / ** * "42" er hentet fra vår delingsknapper bredde devided av 2. * / sharing.setAttribute ('class', 'sharing sharing - shown'); sharing.style.left = (highlight.rect.left + width) + 'px'; sharing.style.top = (highlight.rect.top - 40) + 'px'; / ** * "40" er høyden på våre delingsknapper. * Her løfter vi det opp over topplyget i topplyset. * /Spesifikt gjør koden i denne funksjonen følgende:
getHighlighted () funksjon.topp og venstre posisjon, og legg til deling - vist klasse for å gjøre delingsknappene synlige. Jeg har også lagt til noen få linjer med inline-kommentarer som beskriver hvor noen av de definerte tallene er avledet fra.Vi skal anta at de fleste brukere bruker musen til å markere innholdet på nettet, slik at vi binder denne funksjonen på mouseup begivenhet. Mobile enheter vil vanligvis ha egne kontekstuelle menyer på tekstvalg, så vi fokuserer på nettet for denne opplæringen.
Tekstvalg i Safari iOSVi forsinker utførelsen skjønt av 100ms bruker setTimeout () funksjon, for å sikre at innholdet er riktig valgt.
document.body.addEventListener ('mouseup', funksjon () setTimeout (showMenu, 100););Vår siste funksjon, openShareWindow (), er å starte delingsvinduet når knappene i menyen klikkes. I denne opplæringen vil vi primært bruke den til å levere Twitter-delingsvinduet siden Facebook har sitt eget JavaScript SDK.
funksjon 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: screen.height; var igjen = ((bredde / 2) - (w / 2)) + screenLeft; var topp = ((høyde / 2) - (h / 2)) + screenTop; var newWin = window.open (url, "", scrollbars = no, width = "+ w +", høyde = "+ h +", topp = "+ topp +", venstre = "+ venstre); hvis (newWin) newWin.focus ();
Deretter binder vi delingsknappene med klikk hendelse og legg til en funksjon som vil starte delingsvinduet.
// Facebook. document.getElementById ('share') .addEventListener ('klikk', funksjon () var highlight = getHighlight (); hvis (highlight.text! == "&& highlight.parent.nodeName === 'P') FB .ui (metode: 'share', mobile_iframe: true, href: 'http://bitly.com/2aiHmCs', sitat: highlight.text // pass teksten som sitat); event.preventDefault (); ); For Facebook-delingsknappen bruker vi Facebook JavaScript SDK. SDK lar oss passere tekst som skal vises i delingsvinduet gjennom sitat parameter.
Twitter gir ikke et JavaScript SDK på denne måten. Så her bruker vi vår funksjon, openShareWindow (), og send en formatert nettadresse som overholder retningslinjene sammen med størrelsen på vinduet.
document.getElementById ('tweet') .addEventListener ('klikk', funksjon () var highlight = getHighlight (); hvis (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 ();); Når vi klikker på Twitter-delingsknappen, bør den starte et vindu som vises som følger.
Vi er alle satt sammen med vår inline sharing-meny! Gå over til demoen for å se det i aksjon, eller kildekoden for å se funksjonene i sin helhet. Deretter kan du forbedre Inline Sharing-menyen med overganger eller animasjoner for å levere en mer engasjerende opplevelse.
Det finnes flere JavaScripts-APIer som vi pleide å få delingsmenyen oppe. Noen av dem har blitt nevnt i tidligere Envato Tuts + opplæringsprogrammer, mens andre kan være helt nye for deg. Så, her har jeg tatt med referanser som utfyller denne opplæringen.
