Cara Membuat Menu Tindakan Mengambang Seperti Media
Popularitas menu tindakan mengambang telah meningkat, terutama sejak Medium.com membawa fitur ke mode. Secara singkat, menu tindakan mengambang muncul kapan kamu pilih beberapa teks di halaman web. Menu muncul di dekat pilihan, menunjukkan tindakan yang berbeda yang memungkinkan Anda untuk dengan cepat memformat, menyorot, atau berbagi teks yang dipilih.
Dalam tutorial ini, saya akan menunjukkan cara menampilkan menu tindakan untuk cuplikan teks yang dipilih di halaman web. Menu tindakan kami akan memungkinkan pengguna untuk tweet teks yang dipilih untuk pengikut mereka.
1. Buat HTML
Itu HTML starter sederhana, kita hanya butuh beberapa teks pengguna dapat memilih. Untuk demo, saya akan gunakan “The Hart and the Hunter” cerita pengantar tidur sebagai teks sampel.
The Hart and the Hunter
The Hart dulunya ...
...
2. Buat template menu tindakan
Saya m menambahkan kode HTML milik menu tindakan di dalam a elemen. Apa pun yang ada di dalam tag, itu tidak akan ditampilkan oleh browser hingga ditambahkan ke dokumen menggunakan JavaScript.
Jangan meninggalkan ruang yang tidak perlu di dalam tag, karena itu dapat mengganggu tata letak menu tindakan setelah dimasukkan ke dalam dokumen. jika kamu mau, tambahkan lebih banyak tombol dalam #shareBox untuk opsi lainnya.
3. Buat CSS
CSS untuk #shareBox wadah inline seperti ini:
#shareBox width: 30px; tinggi: 30px; posisi: absolut;
Itu posisi: absolut; aturan akan membiarkan kita letakkan menu dimanapun kita inginkan di halaman.
Saya juga menata tombol aksi di dalam #shareBox dengan warna latar belakang dan gambar dan di dalamnya ::setelah pseudo-element I menambahkan segitiga untuk panah ke bawah.
Tombol #shareBox> width: 100%; tinggi: 100%; warna latar: # 292A2B; perbatasan: tidak ada; border-radius: 2px; garis besar: tidak ada; kursor: pointer; background-image: url ('share.png'); background-repeat: no-repeat; posisi latar belakang: tengah; ukuran latar belakang: 70%; #shareBox> tombol :: after position: absolute; konten: "; border-top: 10px solid # 292A2B; border-kiri: 10px solid transparan; batas-kanan: 10px solid transparan; kiri: 5px; atas: 30px; 4. Tambahkan event handler dengan JS
Pindah ke JavaScript, kita perlu tambahkan penangan acara Untuk mousedown dan mouseup acara untuk tangkap awal dan akhir pemilihan teks.
Anda juga dapat melakukan riset untuk acara seleksi lainnya seperti pilih mulai dan menggunakannya bukannya acara mouse (yang ideal tetapi pada saat ini dukungan browser mereka tidak terlalu baik).
Juga tambahkan referensi ke elemen menggunakan querySelector () metode.
document.addEventListener ('mousedown', onMouseDown); document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); function onMouseDown () function onMouseUp () 5. Bersihkan pilihan sebelumnya
Dalam mousedown acara, kita akan melakukan pembersihan, yaitu menghapus semua pilihan sebelumnya dan menu tindakan yang dimiliki.
function onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); if (shareBox! == null) shareBox.remove (); Itu getSelection () metode pengembalian a Pilihan obyek mewakili rentang teks saat ini dipilih oleh pengguna dan hapusAllRange () metodemenghapus semua rentang dari sama Pilihan objek, dengan demikian menghapus semua pilihan sebelumnya.
6. Tampilkan menu tindakan
Itu selama mouseup acara, ketika kita akan konfirmasi jika pemilihan teks telah dilakukan dan mengambil tindakan lebih lanjut.
function onMouseUp () var sel = document.getSelection (), txt = sel.toString (); if (txt! == "") var range = sel.getRangeAt (0); if (range.startContainer.parentElement.parentElement.localName === "article" || range.startContainer.parentElement.localName === "article") // beberapa teks dalam artikel dipilih
Dapatkan string teks yang dipilih dengan memanggil toString () metode Pilihan obyek. Jika teks yang dipilih tidak kosong, silakan dan dapatkan rentang pertama dari Pilihan obyek.
Jarak adalah bagian yang dipilih dokumen. Biasanya, pengguna akan membuat pilihan tunggal hanya, tidak multipel (dengan menekan tombol ctrl / cmd), jadi dapatkan saja objek jangkauan pertama (pada indeks 0) dari pilihan menggunakan getRangeAt (0).
Setelah mendapatkan kisaran, lihat apakah seleksi dimulai dari tempat itu di dalam artikel. Itu startContainer properti rentang mengembalikan simpul DOM dari mana seleksi dimulai.
Terkadang (saat Anda pilih dalam satu paragraf), nilainya hanya a simpul teks, dalam hal ini elemen induk akan dan induk dari elemen akan (dalam kode contoh dalam posting ini).
Lain waktu, ketika Anda memilih di beberapa paragraf, itu startContainer akan dan simpul induknya adalah . Karena itu dua perbandingan di yang kedua jika kondisi dalam kode di atas.
Setelah itu jika kondisi berlalu, saatnya untuk ambil menu tindakan dari template dan menambahkannya ke dokumen. Tempatkan kode di bawah ini di dalam yang kedua jika pernyataan.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
Itu importNode () metode mengembalikan node dari dokumen eksternal (dalam kasus kami, node dari ). Ketika dipanggil dengan parameter kedua (benar), elemen / simpul yang diimpor akan datang dengan elemen anaknya.
Anda bisa memasukkan #shareBox di mana saja di badan dokumen, Saya telah menambahkannya sebelum elemen template.
7. Tempatkan menu tindakan
Kami ingin menempatkan menu tindakan tepat diatas & di tengah area yang dipilih. Untuk melakukannya, dapatkan nilai segi empat dari area yang dipilih menggunakan getBoundingClientRect () metode yang mengembalikan ukuran dan posisi elemen.
Kemudian, perbarui teratas dan kiri nilai dari #shareBox berdasarkan nilai-nilai persegi panjang. Dalam perhitungan yang baru teratas dan kiri nilai, saya memanfaatkan Literal template ES6.
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. Tambahkan fungsionalitas
Sekarang kita menambahkan menu tindakan di dekat teks yang dipilih, sekarang saatnya untuk membuat teks yang dipilih tersedia untuk opsi menu sehingga kita dapat melakukan beberapa tindakan di atasnya.
Tetapkan teks yang dipilih untuk a properti khusus tombol berbagi bernama 'shareTxt' dan tambahkan mousedown pendengar acara ke tombol.
var shareBtn = shareBox.querySelector ('tombol'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); Itu benar parameter dari addEventListener () mencegah mousedown acara dari menggelegak.
Di dalam onShareClick () pengendali acara, kami masukkan teks yang dipilih ke dalam tweet dengan mengakses shareTxt milik tombol.
function onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges () Setelah itu tombol diklik, ia melakukan apa yang seharusnya dilakukan, lalu menghapusnya sendiri dari halaman. Itu juga akan hapus semua pilihan dalam dokumen.
Kode sumber & demo
Dalam demo Codepen di bawah ini, Anda bisa uji cara kerja menu tindakan. Anda juga dapat menemukan kode sumber lengkap di repo Github kami.
