meme events
Lazy Eye One Degree
Versions CSS / JS plug-and-play de mèmes vidéo populaires
Afficher la démo · Rapport Bogue ou fonctionnalité de demande · Page de registre NPM
Bibliothèque d'interface utilisateur sans dépendance à l'abandon de framework qui expose à l'environnement de navigateur vos mèmes vidéo préférés, tels que JoJo pour poursuivre ou limiter vos titres d'enthousiasme.
Chaque mème est juste une fonction que vous pouvez lier en tant que gestionnaire à tout événement que vous voulez sans faire passer tous les arguments sous sa forme la plus simple, ce qui rend l'utilisation de cette bibliothèque facile.
Si vous allez contribuer, gardez à l'esprit que ce projet utilise:
Événements actuellement mis en œuvre:
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'À venir:
Peut être:
Avertissement! Ce projet est extrêmement amusant et facile à contribuer. N'hésitez pas à participer!
Il existe exactement 2 façons recommandées d'utiliser des événements meme:
Option 1
Afin d'utiliser des événements MEME via CDN, vous devez simplement inclure ces liens dans votre <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 >Option 2
L'utilisation de NPM est à peu près la même que dans toutes les autres bibliothèques, dans votre type de répertoire de projet:
npm install --save meme-eventsou
yarn add meme-eventsBien sûr, vous devriez avoir votre colis.json initié.
Option 1
Dans votre script principal, vous devriez pouvoir saisir tous les événements de mèmes existants directement à partir de l'objet 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 ( ) )Option 2
Importez ensuite ce dont vous avez besoin et liez en tant que gestionnaire.
Réagir
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
// @TODOChaque événement MEME suit la même structure de base:
// 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 )
} Vous pouvez tirer parti de ces arguments facultatifs et améliorer votre expérience avec des événements de mèmes en passant et en objet pendant le gestionnaire de liaison à un événement qui contient fnOnStart ou / et fnOnFinish :
document . body . addEventListener ( 'click' , toBeContinuedMemeEvent ( {
fnOnStart : ( ) => console . log ( 'Event has been started' ) ,
fnOnFinish : ( ) => console . log ( 'Event has just finished' )
} ) )Même principes dans React / Vue / Quoi qu'il en soit.
De plus, fnOnStart reçoit également l'objet initial event et la fonction terminateEvent et, juste au cas où, fnOnFinish reçoit également le même 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 ) )Bien sûr, vous pouvez utiliser tout ci-dessus avec de vieux auditeurs simples et laisser seuls les fonctions facultatives:
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 ( ) ) Actuellement, la fonctionnalité la plus saignante qui est exploitée dans la bibliothèque est l'élément audio, le reste est des trucs ES6 + de base qui sont gérés par Babel pendant la construction de Prod.
Ainsi, selon Caniuse, il est assez sûr de penser que la version compilée des événements meme volera sur IE8 +, Edge 12+ et donc presque toutes les versions de Chrome & FF & Safari.
La seule exception, bien sûr, l'opéra mini, mais soyons honnêtes, qui s'en soucie.
Meme-Events est un endroit incroyable pour commencer à contribuer à l'open source. Il est écrit en pur es6 +, l'infrastructure de test est prête, aucun code asynchrone lourd n'est impliqué, aucune API tiers en plus de demander des actifs à Cloudinary.
Cependant, il y a un tas de problèmes à résoudre par vous:
N'oubliez pas que même si vous avez commencé à coder comme il y a 2 semaines, vous êtes toujours en mesure de corriger les fautes de frappe ou d'améliorer la structure de cette documentation, de mettre dans la section des problèmes d'ordre ou simplement de trouver un mème amusant à inclure dans la bibliothèque et à demander sa mise en œuvre en ajoutant à la liste à venir .
Cela fonctionne dans les deux sens, en fait, si vous êtes super expérimenté, il serait incroyable que vous puissiez passer en revue le code source et faire du refactor, donner une architecture ou au moins pointer des goulots d'étranglement à supprimer et des erreurs évidentes à corriger.
Toutes les contributions que vous faites sont grandement appréciées .
git checkout -b feature/AmazingFeature )git commit -m 'Add some AmazingFeature' )git push origin feature/AmazingFeature ) Liste des commandes: Exemples donnés avec yarn , mais fonctionne également avec NPM
yarn clean - Retirez dist/ répertoireyarn test - Exécutez tous les tests avec libellé et formatage.yarn coverage - Exécutez tous les tests avec le rapport de couverture.yarn test:unit - Exécutez des tests unitairesyarn test:unit:watch - même mais relâche les modificationsyarn test:int - Exécuter les tests d'intégrationyarn test:int:watch - Idem mais revient sur les modificationsyarn lint - Exécutez Eslintyarn format - courez plus joliyarn build - Exécutez WebPack.Dernière note importante Dans les événements déjà présentés, il y a des actifs statiques comme les polices et les fichiers .mp3 demandés à mon Clounary ACC personnel. Bien sûr, je ne peux pas le rendre public, il y a donc deux solutions de contournement assez simples: utilisez votre propre ACC cloudinary ou gardez les actifs localement. Si votre PR est fusionné, je déplacerai chaque atout statique vers mon ACC de toute façon.
S'il vous plaît, utilisez des modèles de demande et de demande que vous pouvez trouver dans ce dépôt. Si vous avez des questions spécifiques, n'hésitez pas à me contacter.
Distribué sous la licence du MIT. Voir LICENSE pour plus d'informations.
Kirill Bolotsky - Twitter - [email protected] - bolotsky.dev
Lien du projet: github
