Kā izveidot vidēji līdzīgu peldošu darbību izvēlni
Popularitāte peldošas darbības izvēlnes ir bijis pieaugums, jo īpaši tāpēc, ka Medium.com šo iespēju ieviesa modē. Īsi sakot, peldošās darbības izvēlne parādās kad jūs atlasiet kādu tekstu Web lapā. Izvēlne parādās netālu no atlases, parādot dažādas darbības kas ļauj ātri formatēt, izcelt vai koplietot izvēlēto tekstu.
Šajā apmācībā es jums parādīšu, kā parādīt izvēlētās teksta fragmenta darbības izvēlne Web lapā. Mūsu darbības izvēlne ļaus lietotājiem čivināt izvēlēto tekstu saviem sekotājiem.
1. Izveidojiet HTML
The starteris HTML ir vienkāršs, mums tikai vajag kādu tekstu lietotājs var izvēlēties. Par demo, es izmantot “Harts un mednieks” vakara pasaciņa kā parauga tekstu.
Harts un mednieks
Hart bija vienreiz ...
…
2. Izveidojiet darbības izvēlnes veidni
ES esmu pievienojot HTML kodu pieder pie darbības izvēlnes iekšpusē a elementu. Neatkarīgi no tā, kas atrodas tag, tas netiks sniegts pārlūkprogrammas, līdz tas tiek pievienots dokumentam izmantojot JavaScript.
Neatstājiet nevajadzīgu vietu iekšpusē tas var traucēt darbības izvēlnes izkārtojumu, kad tas ir ievietots dokumentā. Ja tu vēlies, pievienot papildu pogas iekšā #shareBox lai iegūtu vairāk iespēju.
3. Izveidojiet CSS
CSS par #shareBox Inline konteiners iet šādi:
#shareBox platums: 30px; augstums: 30px; pozīcija: absolūta;
The pozīcija: absolūta; noteikums ļaus mums novietojiet izvēlni, kur vien vēlaties lapā.
Es arī veidoju darbības poga iekšpusē #shareBox ar fona krāsu un attēlu :: pēc pseidoelements I pievienoja lejupvērstās bultiņas trijstūri.
#shareBox> poga platums: 100%; augstums: 100%; fona krāsa: # 292A2B; robeža: nav; robežu rādiuss: 2px; izklāsts: nav; kursors: rādītājs; fona attēls: url ('share.png'); fona atkārtošana: nav atkārtota; fona stāvoklis: centrs; fona izmērs: 70%; #shareBox> poga :: pēc pozīcija: absolūta; saturs: "; border-top: 10px cietais # 292A2B; no kreisās puses: 10px ciets caurspīdīgs; pierobežas labajā pusē: 10px ciets caurspīdīgs; pa kreisi: 5px; augšā: 30px; 4. Pievienojiet notikumu apstrādātājus ar JS
Pārejot uz JavaScript, mums ir nepieciešams pievienot notikumu apstrādātājus priekš mousedown un pele notikumiem uztveriet sākumu un beigas teksta atlasi.
Jūs varat arī veikt izpēti citi atlases pasākumi piemēram, atlasiet sākumu un tos izmantot peles notikumu vietā (kas būtu ideāls, bet no tā brīža viņu pārlūkprogrammas atbalsts nav ļoti labs).
Arī pievienot atsauci uz elementu, izmantojot querySelector () metodi.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); funkcija onMouseDown () funkcija onMouseUp () 5. Notīrīt iepriekšējās atlases
Iekš mousedown notikums, mēs veikt dažas tīrīšanas, t.i., izdzēsiet jebkuru iepriekšējo atlasi un piederīgo darbības izvēlni.
funkcija onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); ja (shareBox! == null) shareBox.remove (); The getSelection () metode atgriež a Izvēle objektu kas atspoguļo teksta diapazonu pašlaik izvēlējies lietotājs un removeAllRange () metodinoņem visus diapazonus no tās pašas Izvēle tādējādi objekts notīrīt jebkuru iepriekšējo atlasi.
6. Parādīt darbības izvēlni
Tas ir laikā pele notikums, kad mēs apstipriniet, vai ir veikta teksta izvēle un veikt turpmākus pasākumus.
funkcija onMouseUp () var sel = document.getSelection (), txt = sel.toString (); ja (txt! == "") var range = sel.getRangeAt (0); ja (range.startContainer.parentElement.parentElement.localName === "rakstu" || range.startContainer.parentElement.localName === "rakstu") // tika atlasīts kāds teksts tekstā
Iegūstiet atlasīto teksta virkni zvanot uz toString () metode Izvēle objektu. Ja izvēlētais teksts nav tukšs, dodieties uz priekšu un iegūt pirmo diapazonu no Izvēle objektu.
Diapazons ir izvēlētā daļa dokumenta. Parasti lietotāji veiks a viena izvēle tikai, ne vairākkārtīgi (nospiežot taustiņu ctrl / cmd), tāpēc vienkārši iegūstiet pirmo diapazona objektu (indeksā 0) no atlases, izmantojot getRangeAt (0).
Kad esat ieguvis diapazonu, skatiet, vai izvēle sākās no vietas, kas ir izstrādājuma iekšpusē. The startContainer diapazona īpašums atgriež DOM mezglu no kurienes sākās atlase.
Dažreiz (kad tu izvēlieties punktu), tā vērtība ir tikai a teksta mezgls, tādā gadījumā tā mātes elements būs un vecāku elements būs (parauga kodā šajā ziņojumā).
Citas reizes, kad izvēlaties vairākos punktos, the startContainer būs un tā vecākais mezgls būs . Līdz ar to divi salīdzinājumi otrajā ja nosacījums iepriekš minētajā kodā.
Reiz ja stāvoklis iet, ir pienācis laiks ielādējiet darbības izvēlni no veidnes un pievienojiet to dokumentam. Novietojiet kodu zemāk otrā ja paziņojums, apgalvojums.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
The importNode () metodi atgriež mezglus no ārējiem dokumentiem (mūsu gadījumā mezgli no ). Kad to sauc par otro parametru (taisnība), importētais elements / mezgls nāk ar saviem bērnu elementiem.
Jūs varat ievietot #shareBox jebkurā dokumenta korpusā, Es to pievienoju pirms veidnes elementa.
7. Ievietojiet darbības izvēlni
Mēs vēlamies izvietot darbības izvēlni tieši iepriekš & izvēlētās zonas vidū. Darīt tā, iegūt taisnstūra vērtības no izvēlētās zonas, izmantojot getBoundingClientRect () metode, kas atgriež elementa lielumu un atrašanās vietu.
Pēc tam atjauniniet tops un pa kreisi vērtības #shareBox pamatojoties uz taisnstūra vērtībām. Jaunā aprēķinos tops un pa kreisi vērtības, es izmantoju ES6 veidnes literāli.
var rect = range.getBoundingClientRect (); var shareBox = document.querySelector ('# shareBox'); shareBox.style.top = 'calc ($ rect.top px - 38px)'; shareBox.style.left = 'calc ($ rect.left px + calc ($ rect.width px / 2) - 30px)'; 8. Pievienojiet funkcionalitāti
Tagad, kad pievienojām darbības izvēlni blakus izvēlētajam tekstam, ir pienācis laiks veikt izvēlēto tekstu pieejama izvēlnes iespējām lai mēs varētu veikt dažas darbības.
Piešķirt atlasīto tekstu a koplietošanas pogas pielāgotā īpašība sauc 'shareTxt' un pievienojiet a mousedown notikuma klausītājs.
var shareBtn = shareBox.querySelector ('poga'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); The taisnība parametru addEventListener () novērš mousedown notikums no burbuļošanas.
Iekšpusē onShareClick () notikumu apstrādātājs, mēs ievietojiet izvēlēto tekstu čivinātā piekļūstot shareTxt pogas īpašums.
funkcija onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Reiz poga tiek noklikšķināta, tā dara to, ko vajadzētu darīt, tad izņemiet sevi no lapas. Tas arī būs notīriet jebkuru izvēli dokumentā.
Avota kods un demo
Tālāk redzamajā demonstrācijā "Codepen" varat pārbaude kā darbojas darbības izvēlne. Jūs varat arī atrast pilnu pirmkodu mūsu Github repo.
