meme events
Lazy Eye One Degree
Versiones CSS/JS de plug-and-JS de los populares memes de video
Ver demostración · Informe de error o función de solicitud · Página de registro NPM
Biblioteca de interfaz de usuario sin dependencia del marco que expone al entorno del navegador Sus memes de video favoritos, como JoJo's para continuar o frenar sus títulos de entusiasmo.
Cada meme es solo una función que puede vincular como controlador de cualquier evento que desee sin pasar cualquier argumento en su forma más simple, lo que hace que el uso de esta biblioteca sea fácil.
Si va a contribuir, tenga en cuenta que este proyecto usa:
Eventos implementados actualmente:
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'Próximamente:
Tal vez:
¡Advertencia! Este proyecto es extremadamente divertido y fácil de contribuir. ¡No dudes en participar!
Hay exactamente 2 formas recomendadas de usar eventos de meme:
Opción 1
Para usar MEME-Events a través de CDN, simplemente debe incluir estos enlaces en su <head> :
<!-- 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 >o
< 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 >Opción 2
Usar a través de NPM es más o menos lo mismo que con cualquier otra biblioteca, en su tipo de directorio de proyecto:
npm install --save meme-eventso
yarn add meme-eventsPor supuesto, debe iniciarse su paquete. Json.
Opción 1
En su script principal, debe poder obtener cualquier evento de meme existente directamente desde el objeto 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 ( ) )Opción 2
Luego importe lo que necesita y ata como controlador.
Reaccionar
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
// @TODOCada evento de meme sigue la misma estructura básica:
// 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 )
} Puede aprovechar estos argumentos opcionales y mejorar su experiencia con eventos de memes pasando y objetar durante el controlador de enlace a un evento que contiene fnOnStart /y fnOnFinish :
document . body . addEventListener ( 'click' , toBeContinuedMemeEvent ( {
fnOnStart : ( ) => console . log ( 'Event has been started' ) ,
fnOnFinish : ( ) => console . log ( 'Event has just finished' )
} ) )Los mismos principios en React/Vue/lo que sea.
Además, fnOnStart también recibe el objeto event inicial y la función terminateEvent y, por si acaso, fnOnFinish también recibe el mismo event OBJ.
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 ) )Por supuesto, puede usar todo lo anterior con oyentes antiguos y dejar solo funciones opcionales:
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 ( ) ) Actualmente, la característica más sangrante que se explota en la biblioteca es el elemento de audio, el resto es cosas básicas de ES6+ que manejan Babel durante la construcción de productos de todos modos.
Entonces, según Caniuse, es bastante seguro pensar que la versión compilada de eventos de meme volará en IE8+, borde 12+ y, por lo tanto, casi todas las versiones de Chrome & FF & Safari.
La única excepción es, por supuesto, Opera Mini, pero seamos honestos, a quién le importa.
MEME-EVENTS es un lugar increíble para comenzar a contribuir al código abierto. Está escrito en puro ES6+, la infraestructura de prueba está lista, no hay código asíncrono engorrosos involucrados, sin API de terceros, además de solicitar activos de Cloudinary.
Sin embargo, hay un montón de problemas para resolverlo:
Recuerde, incluso si comenzó a codificar como hace 2 semanas, aún puede corregir errores tipográficos o mejorar la estructura de esta documentación, poner en orden la sección de problemas o simplemente encontrar meme divertido que se incluirá en la biblioteca y solicitar su implementación agregando a la próxima lista.
Funciona en ambos sentidos, en realidad, si tiene mucho experiencia, sería sorprendente si pudiera revisar el código fuente y hacer algún refactor, dar algo de arquitectura o al menos apuntar a los cuellos de botella que se eliminarán y los errores obvios se solucionarán.
Cualquier contribución que haga es muy apreciada .
git checkout -b feature/AmazingFeature )git commit -m 'Add some AmazingFeature' )git push origin feature/AmazingFeature ) Lista de comandos: ejemplos dados con yarn , pero también funciona con npm
yarn clean : eliminar dist/ Directorioyarn test : ejecute todas las pruebas con pelusas y formateo.yarn coverage : ejecute todas las pruebas con informe de cobertura.yarn test:unit - Ejecutar pruebas unitariasyarn test:unit:watch - Lo mismo pero las repeticiones en los cambiosyarn test:int - Ejecutar pruebas de integraciónyarn test:int:watch - lo mismo pero se devuelve los cambiosyarn lint - Ejecutar Eslintyarn format : ejecutar más bonitoyarn build - Ejecutar Webpack.Última nota importante en los eventos ya presentados Hay algunos activos estáticos como fuentes y archivos .mp3 solicitados de mi ACC nube personal. Por supuesto, no puedo hacerlo público, por lo que hay dos soluciones bastante sencillas: use su propio ACC nube o mantenga activos localmente. Si su PR se fusiona, moveré todos los activos estáticos a mi ACC de todos modos.
Por favor, use las plantillas de solicitud de problema y extracción que pueda encontrar en este repositorio. Si tiene alguna pregunta específica, no dude en contactarme.
Distribuido bajo la licencia MIT. Vea LICENSE para más información.
Kirill Bolotsky - Twitter - [email protected] - Bolotsky.dev
Enlace del proyecto: Github
