Cara Menambahkan Salinan Clipboard di Website AMP

Anda mungkin sedang mencari cara mengimplementasikan salinan clipboard di AMP, karena AMP seperti lingkungan sandbox. tidak semua kode javascript diperbolehkan untuk diimplementasikan menggunakan jvascript seperti window.navigator.clipboard.writeCopy atau document.execCommand (copy). Anda juga mungkin telah mengetahui cara cepat meretas Tombol Salin di situs web AMP, tetapi ini memiliki kelemahan karena Anda perlu menggunakan iframe untuk menerapkan salinan clipboard dan bagaimana jika Anda memiliki banyak tombol salin pada satu halaman, maka banyak iframe.

Karena frustrasi dengan hal ini, saya menjelajahi repositori AMP, dan menemukan banyak diskusi mengenai masalah ini yang belum terselesaikan atau ditinggalkan. Saya hampir menyerah pada kemungkinan itu, tetapi kemudian saya menemukan contoh folder bernama amp-copy-action.amp.html. Yang mengejutkan saya, itu berisi semua fungsi fungsi clipboard, meskipun tidak ditampilkan disitus resmi AMP.

Jadi, jawaban singkatnya adalah, ya, penerapan salinan clipboard disitus web AMP dapat dilakukan! Begini caranya:

Tap Event, Salin-Sukses, dan Salin-Kesalahan

Anda memerlukan ketiga peristiwa ini untuk mencapai fungsi salin clipboard diAMP. Peristiwa Tap akan memicu perintah salin ditempat Anda ingin menyalin teks, sedangkan keberhasilan penyalinan dan kesalahan penyalinan terpicu setelah perintah clipboard dijalankan.

Menyalin Konten

Anda dapat menyalin konten dengan dua cara, baik dari teks elemen, nilai input, atau melalui teks statis (dimana variabel dapat ditetapkan).

Anda dapat mengambil nilai-nilai ini menggunakan event Tap.

Teks Elemen dan Nilai Input

Untuk menyalin teks dari elemen seperti div, tetapkan ID ke elemen tersebut dan gunakan fungsi copy () untuk mendapatkan teks dari elemen tersebut.

<div id=\"divTarget\">This is a text</div>

<button on=\"tap:divTarget.copy()\"></button>

Ini akan bekerja pada innerText dan nilai suatu elemen.

Teks Statis
Anda juga dapat menetapkan teks hard-code atau variabel kesalinan, menggunakan AMP.copy fungsi tersebut.

<button on=\"tap:AMP.copy(text=\'Your string or variables\')\">

Callback Sukses dan Error

Setelah salinan dibuat, Anda dapat melakukan panggilan balik menggunakan copy-success dan copy-error event. Anda hanya dapat menggunakan show () and hide (), dan Anda hanya perlu memanggil nama ID melalui fungsi event.

Berikut ini contohnya:

<div id=\"divTarget\">This is a text</div>

<div id=\"divSuccess\">Wow!</div>

<button on=\"tap:divTarget.copy();copy-success:divSuccess.show();\"></button> 

Jika terjadi kesalahan, Anda juga dapat melakukan hal seperti:

<div id=\"divTarget\">This is a text</div>

<div id=\"divSuccess\">Wow!</div>

<div id=\"divError\">Somethign went wrong</div>

<button on=\"tap:divTarget.copy();copy-error:divError.show();\"></button> 

Anda bahkan dapat menjalankan beberapa perintah hide () dan show () untuk mengubah tampilan secara dinamis:

<div id=\"divTarget\">This is a text</div>

<div id=\"divSuccess\">Wow!</div>

<button on=\"tap:divTarget.copy();copy-success:divTarget.hide(),divSuccess.show();\"></button> 

Pendengar Hasil event

Listener eventResult memungkinkan Anda mengubah nilai kelas, teks, atau atribut tersembunyi secara real time ketika salinan telah dieksekusi, menggunakan AMP.setStatefungsi tersebut.

<div id=\"divTarget\" 
   [hidden]=\"false\"
   [class]=\"(eventResult != \'error\')\'success-class\':\'error-class\'\"
   [text]=\"(eventResult != \'error\')\'Copied!\':\'Error\'\">
      This is a text
</div>

<div id=\"divSuccess\"
   [hidden]=\"false\"
   >
      Wow!
</div>

<button on=\"tap:divTarget.copy();copy-success:AMP.setState({eventResult:event.data.type})\"></button> 

Atribut [hidden] dapat ditetapkan benar atau salah untuk menampilkan atau menyembunyikan elemen.class akan menetapkan teks ke nilai kelas, sementara[text] akan menerapkan nilai hasil ke teks bagian dalam elemen. Satu-satunya keuntungan dari hal ini adalah, Anda hanya dapat menggunakan satu pendengar, artinya hanya cocok untuk penggunaan tunggal per halaman.

Dengan mengikuti langkah-langkah ini, Anda dapat menerapkan fungsi clipboard salinan secara efisien di situs web AMP Anda. Jika menurut Anda tutorial ini bermanfaat, silakan tinggalkan komentar di bawah dan bagikan kepada orang lain yang mungkin bermanfaat. Selamat membuat kode!