meme events
Lazy Eye One Degree
Plug-and-Play CSS/JS Versi meme video populer
Lihat Demo · Laporkan Bug atau Fitur Permintaan · Halaman Registri NPM
Perpustakaan UI Kerangka Kerja Agnostik-Bebas-bebas yang memaparkan ke lingkungan browser meme video favorit Anda, seperti JoJo untuk dilanjutkan atau mengekang judul antusiasme Anda.
Setiap meme hanyalah fungsi yang dapat Anda ikat sebagai penangan untuk acara apa pun yang Anda inginkan tanpa memberikan argumen dalam bentuk yang paling sederhana, membuat penggunaan perpustakaan ini mudah berangin.
Jika Anda akan berkontribusi, perlu diingat bahwa proyek ini menggunakan:
Acara yang sedang diimplementasikan saat ini:
import { toBeContinuedMemeEvent } from 'meme-events'
import 'meme-events/src/events/toBeContinuedMemeEvent/toBeContinuedMemeEvent.css' import { creditsMemeEvent } from 'meme-events'
import 'meme-events/src/events/creditsMemeEvent/creditsMemeEvent.css'Datang Berikutnya:
Mungkin:
Peringatan! Proyek ini sangat menyenangkan dan mudah dikontribusikan. Jangan ragu untuk mengambil bagian!
Tepatnya ada 2 cara yang disarankan untuk menggunakan even meme:
Opsi 1
Untuk menggunakan Events meme melalui CDN, Anda harus memasukkan tautan ini di <head> Anda:
<!-- Add the requiring meme-events.css for styling -->
< link rel =" stylesheet " type =" text/css " href =" https://cdn.jsdelivr.net/npm/meme-events@latest/dist/meme-event.min.css " />
<!-- Add the requiring meme-events.js (keep in mind the script queue though) -->
< script defer src =" //cdn.jsdelivr.net/npm/meme-events@latest/dist/meme-events.min.js " > </ script >atau
< link rel =" stylesheet " type =" text/css " href =" https://unpkg.com/meme-events@latest/dist/meme-event.min.css " />
< script defer src =" https://unpkg.com/meme-events@latest/dist/meme-event.min.js " > </ script >Opsi 2
Menggunakan melalui NPM hampir sama dengan setiap perpustakaan lainnya, dalam jenis direktori proyek Anda:
npm install --save meme-eventsatau
yarn add meme-eventsTentu saja, Anda harus memulai paket.json Anda.
Opsi 1
Dalam skrip utama Anda, Anda harus dapat mengambil acara meme yang ada langsung dari objek window :
const { toBeContinuedMemeEvent } = window
// yes, it is meant to be invoked there - every event
// uses currying to deliver optional args (none this time)
document . body . addEventListener ( 'click' , toBeContinuedMemeEvent ( ) )Opsi 2
Kemudian impor apa yang Anda butuhkan dan ikat sebagai penangan.
Bereaksi
import React from 'react'
import ReactDOM from 'react-dom'
import { toBeContinuedMemeEvent , creditsMemeEvent } from 'meme-events'
// import css files of chosen events
import 'meme-events/src/events/toBeContinuedMemeEvent/toBeContinuedMemeEvent.css'
import 'meme-events/src/events/creditsMemeEvent/creditsMemeEvent.css'
const MemeEventsBtnsRow = props => {
return (
< >
// setting first imported event as click handler for the first btn
< button onClick = { toBeContinuedMemeEvent ( ) } > Click Me! </ button >
// setting second imported event as click handler for the second btn
< button onClick = { creditsMemeEvent ( ) } > Click Me Too! </ button >
</ >
)
}
ReactDOM . render ( < MemeEventsBtnsRow /> , document . getElementById ( 'root' ) ) Vue
// @TODOSetiap acara meme mengikuti struktur dasar yang sama:
// pseudocode
const DefaultMemeEvent = ( { fnOnStart = ( ) => { } , fnOnFinish = ( ) => { } = { } ) => event => {
// checks if this event is already running to prevent multuple activation
eventIsRunning ( )
// dispatch custom event on body element whose name is consisted of
// part that goes before 'MemeEvent', in this case 'Default' + 'OnStart'
document . body . dispatchEvent ( 'DefaultOnStart' )
// runs fnOnStart if exists, standard event object passed as an arg
fnOnStart && fnOnStart ( event , terminate )
// inner stuff that renders UI so on...
innerStuff ( )
//dispatch another custom event instance but with 'OnFinish' postfix
document . body . dispatchEvent ( 'DefaultOnFinish' )
//runs fnOnFinish if exists, standard event obj passed as an arg
fnOnFinish && fnOnFinish ( event )
} Anda dapat memanfaatkan argumen opsional ini dan meningkatkan pengalaman Anda dengan meme-even dengan lewat dan objek selama pengikat pawang ke suatu peristiwa yang berisi fnOnStart atau/dan fnOnFinish :
document . body . addEventListener ( 'click' , toBeContinuedMemeEvent ( {
fnOnStart : ( ) => console . log ( 'Event has been started' ) ,
fnOnFinish : ( ) => console . log ( 'Event has just finished' )
} ) )Prinsip yang sama dalam reaksi/vue/apa pun.
Selain itu, fnOnStart juga menerima objek event awal dan fungsi terminateEvent dan, untuk berjaga -jaga, fnOnFinish menerima event yang sama OBJ juga.
const customFnObj = {
fnOnStart : ( event , terminateEvent ) => {
console . log ( event . target ) // -> outputs event src element
document . body . onclick = function clickHandler ( ) {
terminateEvent ( ) // -> immediately interrupts active event after any
// user click on the page and clears prints
document . body . removeEventListener ( clickHandler ) // -> prevent
// future illegal terminateEvent invocations
} ,
fnOnFinish : event => {
...
}
}
document . body . addEventListener ( 'click' , toBeContinuedMemeEvent ( customFnObj ) )Tentu saja Anda bisa menggunakan semuanya di atas dengan pendengar tua yang sederhana dan meninggalkan fungsi opsional saja:
document . body . addEventListener ( 'MemeNameOnStart' , e => {
console . log ( e . target ) - > outputs same element
document . body . onclick = function clickHandler ( ) {
e . detail . terminateEvent ( ) // -> termination fn available in detail prop
document . body . removeEventListener ( clickHandler )
} ,
} )
document . body . addEventListener ( 'MemeNameOnFinish' , e => {
console . log ( e . target )
} )
document . body . addEventListener ( 'click' , MemeNameMemeEvent ( ) ) Saat ini fitur yang paling berdarah yang dieksploitasi di perpustakaan adalah elemen audio, sisanya adalah hal-hal dasar ES6+ yang ditangani oleh Babel selama pembangunan prod.
Jadi, menurut Caniuse, cukup aman untuk berpikir bahwa versi yang dikompilasi dari Events meme akan terbang di IE8+, Edge 12+ dan oleh karena itu hampir setiap versi Chrome & FF & Safari.
Satu -satunya pengecualiannya, tentu saja, opera mini, tetapi jujur saja, siapa yang peduli.
Meme-events adalah tempat yang luar biasa untuk mulai berkontribusi pada open source. Ini ditulis dalam ES6+murni, pengujian infrastruktur sudah siap, tidak ada kode async rumit yang terlibat, tidak ada API pihak ke -3 sama sekali selain meminta aset dari cloudinary.
Namun, ada banyak masalah yang harus diselesaikan oleh Anda:
Ingat, bahkan jika Anda mulai mengkode seperti 2 minggu yang lalu Anda masih dapat memperbaiki kesalahan ketik atau meningkatkan struktur dokumentasi ini, dimasukkan ke dalam bagian masalah atau hanya menemukan meme lucu untuk dimasukkan dalam perpustakaan dan meminta implementasinya dengan menambahkan daftar segera .
Ini bekerja dalam kedua cara, sebenarnya, jika Anda sangat berpengalaman, akan luar biasa jika Anda dapat meninjau kode sumber dan melakukan beberapa refactor, memberikan beberapa arsitektur atau setidaknya menunjukkan kemacetan untuk dihapus dan kesalahan yang jelas untuk diperbaiki.
Kontribusi apa pun yang Anda buat sangat dihargai .
git checkout -b feature/AmazingFeature )git commit -m 'Add some AmazingFeature' )git push origin feature/AmazingFeature ) Daftar Perintah: Contoh yang diberikan dengan yarn , tetapi juga berfungsi dengan NPM
yarn clean - Lepaskan dist/ Direktoriyarn test - Jalankan semua tes dengan serat dan format.yarn coverage - Jalankan semua tes dengan laporan cakupan.yarn test:unityarn test:unit:watch - Sama Tapi Rerun pada Perubahanyarn test:int - Jalankan tes integrasiyarn test:int:watch - Sama tetapi Kembali pada Perubahanyarn lint - Jalankan Eslintyarn format - Jalankan lebih cantikyarn build - Jalankan Webpack.Catatan penting terakhir dalam acara yang sudah disajikan ada beberapa aset statis seperti font dan file .mp3 yang diminta dari ACC cloudinary pribadi saya. Tentu saja, saya tidak dapat mempublikasikannya, jadi ada dua solusi yang cukup mudah: gunakan ACC cloudinary Anda sendiri atau simpan aset secara lokal. Jika PR Anda digabungkan, saya akan memindahkan setiap aset statis ke ACC saya.
Harap, gunakan Template Masalah dan Tarik Permintaan yang mungkin Anda temukan dalam repo ini. Jika Anda memiliki pertanyaan spesifik, jangan ragu untuk menghubungi saya.
Didistribusikan di bawah lisensi MIT. Lihat LICENSE untuk informasi lebih lanjut.
Kirill Bolotsky - Twitter - [email protected] - bolotsky.dev
Tautan Proyek: GitHub
