Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. UI Design
Webdesign

Paano Lagyan ng Code ang Inline Sharing Menu

by
Difficulty:IntermediateLength:MediumLanguages:

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Sa tutoryal na ito, pag-aaralan natin kung paano gumawa ng tinatawag na “inline sharing menu”.  Gumagana ang interface na ito sa pamamagitan ng pagkakaroon ng menu na magbibigay pahintulot sa mga mambabasa na ibahagi ang page, habang ginagamit ang naka-highlight na text. Makakakita ka ng parehas na interface sa ilang mga kilalang sites tulad ng Medium.

Bago natin simulan ang paggawa ng sharing menu, titingnan natin nang malapitan kung paanong gumagana ang isang interface na tulad ng nasa Medium, gaya ng ipinapakita at kung paano ito naka-posisyon sa naka-highlight na lugar.  Ito ay nakakatulong na paraan na magbibigay sa atin ng tamang teknikal na pananaw, at sa huli matutukoy nito kung paano isusulat ang sarili nating mga code.

Halika na!

Pagsusuri ng Interface ng Medium

Sa susunod na larawan, makikita natin na ang sharing menu sa Medium ay nasa gitna ng naka-highlight na text, anuman ang haba; piliin man natin ang isang salita, isang pangungusap, o ang buong talata.

Highlighted word with the sharing button in Mediumcom
Inline Sharing UI sa Medium

Kung titingnan natin ang nasa loob ng hood sa pamamagitan ng via Chrome DevTools, makikita natin na ang posisyon ng sharing menu ay nasa itaas at kaliwang property sa estilo ng inline. Makikita din natin na ang sharing button ay binigyan ng karagdagang modifier class, highlightMenu--active, kaya naman ito ay mas kapansin-pansin.

Paalala: Kung ikaw ay hindi pamilyar sa mga terminong tulad ng Modifier, Block, at Element, nararapat lamang na panoorin mo ang naunang tutoryal na ito: Isang Introdukyon sa BEM Methodology.

Ang mga estilong nagbibigay ng posisyon sa inline sharing menu sa Medium

Sa Styles tab, makikita natin na ang unang posisyon ay nakatakda sa pamamagitan ng CSS na may tiyak na posisyon, ang z-index property para umangat sa iba pang elementong nasa page, sa itaas, at ang visibility property upang di makita ang sharing buttons.

Sa pagbubuod, kinakailangan natin na:

  1. Kuning muli ang haba ng napiling lugar upang matukoy natin ang gitna ng seleksyon.
  2. Gumawa ng isang modifier para makita ang elemento.
  3. Itakda ang posisyon ng sharing menu kasama ang nasa itaas at kaliwang property na idinagdag sa inline styles.

Gumawa ng Sharing Menu

Sa halimbawang ito, isasama namin ang mga button ng Facebook at Twitter sa loob ng sharing menu.  Ihahatid namin ang mga icon ng Facebook at Twitter kasama ng SVG, na nakapaloob sa isang button at ilang mga div element. Bukod pa dito, tulad ng makikita mula sa susunod na snippet, dinagdagan din namin ng span element  upang makabuo ng tatsulok sa ilalim ng mga menu.

Walang tiyak na patakaran sa mga kulay at hugis ng menu; malayang lagyan ng estilo ang menu para maitugma sa disenyo ng iyong site. Nararapat na bigyan ng atensiyon ang laki ng button; ang taas at lapad. Ang sharing menu namin, tulad ng nakikita sa ibaba, 84px ang lapad at 40px ang taas. Gagamitin namin ang dalawang value na ito upang iposisyon ang sharing menu sa gitna ng naka-highlight na lugar sa ibang pagkakataon.

Inline sharing menu size inspected through Chrome DevTools

Ang estilong nagtatakda ng unang posisyon at kakayahang makita.

Sa panghuli, ilalakip namin ang klase upang makita ang sharing button.

Tiyaking magagamit ang Sharing Menu

Sa puntong ito, ang inline sharing menu ay hindi dapat makita sa page. At kung i-click natin ang Facebook at Twitter button, hindi na makikita ang sharing window. Sa bahaging ito, isusulat namin ang JavaScript upang magamit ang mga buttons. At kami ay magsisimula sa mga sumusunod, getHighlight() function.

Ang function na ito ay:

  • Kuning muli ang naka-highlight na lugar gamit ang native JavaScript function, getSelection().
  • Ibalik ang isang Object na may nilalaman na napiling text, ang elementong pumapaloob sa text, at ang Rectangle Object ng napiling lugar na nagbibigay sa atin ng laki pati na rin ang posisyon nito – itaas, ibaba, kaliwa, at kanan – sa loob ng page.

Ang susunod na function ay tinatawag na showMenu().  Tulad ng ipinapahiwatig ng pangalan, ipinapakita ng function na ito ang sharing menu.

Partikular na ginagawa ng code sa function na ito ang mga sumusunod:

  1. Kunin ang Object mula sa getHighlighted() function.
  2. Itago at itakda ang sharing menu sa unang posisyon kung walang laman ang naka-higlight na lugar; ito ay walang laman na text.
  3. Iwasan na lumabas ang mga buttons kung ang naka-highlight na text ay hindi nakapaloob sa isang talata.
  4. Sa panghuli, itakda ang itaas at kaliwang posisyon, at ilakip ang sharing--shown class upang maipakita ang mga sharing buttons. Naglagay din ako ng ilang mga linya ng inline comments na naglalarawan kung saan nagmula ang ilan sa mga natukoy na numero.

Ipagpapalagay natin na ang karamihan sa mga users ay gumagamit ng mouse para i-highlight ang nilalaman ng web, kaya naman sumasaklaw ang function na ito sa mouseup event. Kadalasan ang mobile devices ay may sariling contextual menus sa text selection, kaya kami ay nakatuon sa web para sa tutoryal na ito.

safari ios
Ang text selection sa Safari iOS

Inantala namin ang pagpapatupad ng 100ms gamit ang thesetTimeout() function, upang matiyak na ang nilalaman ay maayos na mapipili.

Ang ating huling function, openShareWindow(), ay magpapakita ng sharing window kapag ang buttons sa menu ay pinindot. Sa tutoryal na ito, pangunahing gagamitin namin ito para ipakita ang Twitter sharing window dahil sa ang Facebook ay may sariling JavaScript SDK.

I-click…I-click…

Susunod, isinama namin ang sharing buttons sa click event at inilagay ang function na magbubukas sa sharing window.

Para sa Facebook sharing button, ginagamit namin ang Facebook JavaScript SDK.  Pinahihintulutan tayo ng SDK na ipasa ang text upang lumabas ang sharing window sa pamamagitan ng quote parameter.

Hindi nagbibigay ang Twitter ng JavaScript SDK sa ganitong paraan. Dito ginagamit natin ang function, openShareWindow(), at nagpapasa ng isang formatted URL na sumusunod sa mga patnubay kasama ang laki ng window.

Kapag pinindot natin ang Twitter sharing button, ito dapat ay magbubukas ng window na may sumusunod na anyo.

Ang Wrapping Up

Tayo ay handa na sa inline sharing menu! Tingnan ang demo para makita kung paano ito gumagana, o ang source code para makita ang lahat ng functions. Susunod, maaari mong mapaganda ang inline sharing menu sa pamamagitan ng mga transition o animation upang magkaroon ng mas makatawag pansin na karanasan.

Mga Iba Pang Mapagkukunan

May iba’t-ibang JavaScripts APIs na ginagamit natin upang mapagana ang sharing menu. Ang ilan sa mga ito ay nabanggit sa mga nakaraang Envato Tuts+  tutoryal, habang ang iba ay maaaring maging bago para sa iyo. Dito, nilagyan ko ng mga rekomendasyon upang umakma sa tutoryal.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.