meme events
Lazy Eye One Degree
Versões CSS/JS plug-and-play
Visualize demonstração · Relatório Bug ou Solicitação de Recurso · Página de Registro NPM
Biblioteca de interface do usuário sem dependência de estrutura-estrutura que expõe ao ambiente do navegador seus memes de vídeo favoritos, como o de JoJo para ser continuado ou conter seus títulos de entusiasmo.
Cada meme é apenas uma função que você pode vincular como manipulador a qualquer evento que desejar sem passar quaisquer argumentos em sua forma mais simples, tornando o uso dessa biblioteca fácil de arejar.
Se você vai contribuir, lembre -se de que este projeto usa:
Eventos atualmente implementados:
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'Vindo a seguir:
Talvez:
Aviso! Este projeto é extremamente divertido e fácil de contribuir. Não hesite em participar!
Existem exatamente duas maneiras recomendadas de usar os eventos de meme:
Opção 1
Para usar os meme-eventos via CDN, você deve simplesmente incluir esses links em seu <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 >ou
< 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 >Opção 2
Usar via NPM é praticamente o mesmo que em todas as outras bibliotecas, no seu tipo de diretório de projeto:
npm install --save meme-eventsou
yarn add meme-eventsObviamente, você deve iniciar seu pacote.json.
Opção 1
No seu script principal, você poderá pegar qualquer evento de meme existente diretamente do 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 ( ) )Opção 2
Em seguida, importe o que você precisa e vincule como manipulador.
Reagir
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
// @TODOTodo evento de meme segue a mesma estrutura 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 )
} Você pode aproveitar esses argumentos opcionais e aprimorar sua experiência com os eventos de meme, passando e objeto durante o manipulador de ligação a um evento que contém fnOnStart ou/e fnOnFinish :
document . body . addEventListener ( 'click' , toBeContinuedMemeEvent ( {
fnOnStart : ( ) => console . log ( 'Event has been started' ) ,
fnOnFinish : ( ) => console . log ( 'Event has just finished' )
} ) )Mesmos princípios em react/vue/o que for.
Além disso, fnOnStart também recebe o objeto event inicial e a função terminateEvent e, por caso, fnOnFinish também recebe o mesmo 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 ) )É claro que você pode usar tudo acima com ouvintes antigos e deixar funções opcionais em paz:
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 ( ) ) Atualmente, o recurso de ponta mais sangrando que é explorado na biblioteca é o elemento de áudio, o restante é o material básico do ES6+ que é tratado por Babel durante o prédio de qualquer maneira.
Portanto, de acordo com o Caniuuse, é bastante seguro pensar que a versão compilada do meme-events voará no IE8+, Edge 12+ e, portanto, quase todas as versão do Chrome & FF & Safari.
A única exceção é, é claro, a Opera Mini, mas vamos ser honestos, quem se importa.
O Meme-Events é um lugar incrível para começar a contribuir para o código aberto. Está escrito no Pure ES6+, a infraestrutura de teste está pronta, nenhum código assíncrono complicado está envolvido, nenhuma API de terceiros além de solicitar ativos da Cloudinary.
No entanto, há um monte de problemas a ser resolvido por você:
Lembre -se, mesmo que você tenha começado a codificar há duas semanas, ainda poderá corrigir erros de digitação ou melhorar a estrutura desta documentação, colocar na seção de problemas de ordem ou apenas encontrar o meme engraçado para ser incluído na biblioteca e solicitar sua implementação adicionando à lista em breve .
Ele funciona em ambos os lados, na verdade, se você super experiente, seria incrível se você pudesse revisar o código -fonte e fazer algum refator, dar alguma arquitetura ou pelo menos apontar para os gargalos serem removidos e erros óbvios a serem corrigidos.
Quaisquer contribuições que você faz são muito apreciadas .
git checkout -b feature/AmazingFeature )git commit -m 'Add some AmazingFeature' )git push origin feature/AmazingFeature ) Lista de comandos: exemplos fornecidos com yarn , mas trabalha com NPM também
yarn clean - remova dist/ diretórioyarn test - Execute todos os testes com linha e formatação.yarn coverage - Execute todos os testes com o relatório de cobertura.yarn test:unit - Execute testes de unidadeyarn test:unit:watch - o mesmo, mas reencontres em mudançasyarn test:int - Executar testes de integraçãoyarn test:int:watch - o mesmo, mas retorna sobre as mudançasyarn lint - execute eslintyarn format - Run mais bonitoyarn build - Execute o WebPack.Última nota importante nos eventos já apresentados, existem alguns ativos estáticos, como fontes e arquivos .mp3 solicitados do meu ACC em nuvem pessoal. Obviamente, não posso torná -lo público, então existem duas soluções alternativas bastante diretas: use seu próprio ACC em nuvem ou mantenha ativos localmente. Se o seu PR for fundido, moverei todos os ativos estáticos para o meu ACC de qualquer maneira.
Por favor, use os modelos de solicitação de problema e puxe que você possa encontrar neste repositório. Se você tiver alguma dúvida específica, não hesite em entrar em contato comigo.
Distribuído sob a licença do MIT. Consulte LICENSE para obter mais informações.
Kirill Bolotsky - Twitter - [email protected] - Bolotsky.dev
Link do projeto: Github
