meme events
Lazy Eye One Degree
Plug-and-Play-CSS/JS-Versionen populärer Videomemes
Demo anzeigen · Fehler- oder Anforderungsfunktion · NPM -Registrierungsseite
Framework-agnostische Abhängigkeits-freie UI-Bibliothek, in der die Browser-Umgebung Ihre bevorzugten Videomemes aussetzt, wie beispielsweise Jojo, um fortgesetzt zu werden oder Ihre Begeisterungstitel einzudämmen.
Jedes Meme ist nur eine Funktion, die Sie als Handler mit jedem Ereignis binden können, das Sie möchten, wenn Sie alle Argumente in der einfachsten Form übergeben, um die Verwendung dieser Bibliothek zu einer leichten Breezy zu machen.
Wenn Sie einen Beitrag leisten, denken Sie daran, dass dieses Projekt verwendet:
Derzeit implementierte Ereignisse:
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'Als nächstes kommen:
Vielleicht:
Warnung! Dieses Projekt ist äußerst lustig und einfach zu beitragen. Zögern Sie nicht, einen Teil zu nehmen!
Es gibt genau 2 empfohlene Möglichkeiten, Meme-Events zu verwenden:
Option 1
Um Meme-Events über CDN zu verwenden, müssen Sie diese Links einfach in Ihr <head> aufnehmen:
<!-- 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 >oder
< 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
Die Verwendung von VIA NPM ist in Ihrem Projektverzeichnistyp ziemlich gleich wie in jeder anderen Bibliothek:
npm install --save meme-eventsoder
yarn add meme-eventsNatürlich sollten Sie Ihr Paket.json initiieren lassen.
Option 1
In Ihrem Hauptskript sollten Sie in der Lage sein, vorhandene Meme -Ereignisse direkt aus dem window zu greifen:
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
Importieren Sie dann, was Sie brauchen, und binden Sie als Handler.
Reagieren
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
// @TODOJedes Meme -Ereignis folgt der gleichen Grundstruktur:
// 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 )
} Sie können diese optionalen Argumente nutzen und Ihre Erfahrungen mit Meme-Events verbessern, indem Sie während des Bindung von Handler an ein Ereignis, das fnOnStart oder//und fnOnFinish enthält, übergeben und ein Objekt verabschiedet:
document . body . addEventListener ( 'click' , toBeContinuedMemeEvent ( {
fnOnStart : ( ) => console . log ( 'Event has been started' ) ,
fnOnFinish : ( ) => console . log ( 'Event has just finished' )
} ) )Gleiche Prinzipien in React/Vue/was auch immer.
Darüber hinaus erhält fnOnStart das erste event und terminateEvent -Funktion und falls fnOnFinish auch das gleiche 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 ) )Natürlich könnten Sie alles oben mit einfachen alten Zuhörern verwenden und optionale Funktionen in Ruhe lassen:
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 ( ) ) Derzeit ist das Audioelement die am stärksten blutende Funktion, die in der Bibliothek ausgenutzt werden. Der Rest ist ein grundlegendes ES6+ -Material, das Babel während des Produktgebäudes ohnehin behandelt wird.
Laut Caniuse ist es also ziemlich sicher zu glauben, dass die kompilierte Version von Meme-Events auf IE8+, Edge 12+ und daher fast jede Version von Chrome & FF & Safari fliegt.
Die einzige Ausnahme ist natürlich Opera Mini, aber wir können ehrlich sein, wen kümmert es.
Meme-Events ist ein erstaunlicher Ort, um zu Open Source beizutragen. Es ist in reinem ES6+geschrieben, die Testinfrastruktur ist fertig, es ist kein umständlicher asynchronisierter Code beteiligt, keine API von Drittanbietern, abgesehen davon, dass sie Vermögenswerte von Cloudinary anfordern.
Es gibt jedoch eine Reihe von Problemen, die von Ihnen gelöst werden müssen:
Denken Sie daran, selbst wenn Sie mit der Codierung wie vor 2 Wochen begonnen haben, können Sie Tippfehler oder die Struktur dieser Dokumentation verbessern, in der Reihenfolge in der Reihenfolge nach Abschnitt "Problemen" festlegen oder nur Funny Meme finden, die in die Bibliothek aufgenommen werden und ihre Implementierung anfordern, indem Sie in die KOMMEN -LISTE hinzufügen.
Es funktioniert in beiden Arten, wenn Sie super erfahren, wäre es erstaunlich, wenn Sie den Quellcode überprüfen und einen Refaktor durchführen, eine Architektur geben oder zumindest auf die Engpässe verweisen könnten, die entfernt werden sollen, und offensichtliche Fehler, die repariert werden sollen.
Alle Beiträge, die Sie leisten, werden sehr geschätzt .
git checkout -b feature/AmazingFeature ).git commit -m 'Add some AmazingFeature' )git push origin feature/AmazingFeature ) Liste der Befehle: Beispiele mit yarn , funktioniert aber auch mit NPM
yarn clean - dist/ Verzeichnis entfernenyarn test - Führen Sie alle Tests mit Lining und Formatierung aus.yarn coverage - Führen Sie alle Tests mit Deckungsbericht aus.yarn test:unit - Führen Sie Einheitstests ausyarn test:unit:watch - gleiche, aber erneut auf Änderungen ausgeliefertyarn test:int - Integrationstests ausführenyarn test:int:watch - gleiche, aber kehrt bei Änderungen zurückyarn lint - Rennen Sie Eslintyarn format - fettlicher laufenyarn build - WebPack ausführen.Letzter wichtiger Hinweis In bereits vorgestellten Ereignissen gibt es einige statische Assets wie Schriftarten und .mp3 -Dateien, die von meinem persönlichen Cloudyary ACC angefordert wurden. Natürlich kann ich es nicht öffentlich machen, daher gibt es zwei ziemlich einfache Problemumgehungen: Verwenden Sie Ihr eigenes Wolking -ACC oder behalten Sie die Vermögenswerte lokal. Wenn Ihre PR zusammengeführt wird, werde ich trotzdem jedes statische Kapital in mein ACC verschieben.
Bitte verwenden Sie Probleme mit Problemen und ziehen Sie Anforderungsvorlagen, die Sie in diesem Repo gefunden haben. Wenn Sie spezielle Fragen haben, können Sie mich gerne kontaktieren.
Unter der MIT -Lizenz verteilt. Weitere Informationen finden Sie LICENSE .
Kirill Bolotsky - Twitter - [email protected] - bolotsky.dev
Projektlink: GitHub
