meme events
Lazy Eye One Degree
人気のあるビデオミームのプラグアンドプレイCSS/JSバージョン
デモを表示・バグまたはリクエスト機能をレポート・NPMレジストリページ
ブラウザ環境にさらされるフレームワークに依存しない依存関係のないUIライブラリは、Jojo'sを継続したり、熱意のタイトルを抑えたりするなど、お気に入りのビデオミームを環境にします。
すべてのミームは、最も単純な形式で引数を渡すことで、あらゆるイベントにハンドラーとしてバインドできる関数にすぎないため、このライブラリの使用が簡単になります。
貢献する場合は、このプロジェクトが次のことを使用していることに留意してください。
現在実装されているイベント：
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'次に来る：
多分：
警告！このプロジェクトは非常に楽しく、貢献しやすいです。お気軽に参加することを躊躇しないでください！
ミームイベントを使用するための2つの推奨方法が正確にあります。
オプション1
CDNを介してミームイベントを使用するには、これらのリンクを<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 >または
< 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 >オプション2
NPM経由の使用は、プロジェクトディレクトリタイプで、他のすべてのライブラリとほぼ同じです。
npm install --save meme-eventsまたは
yarn add meme-eventsもちろん、Jsonを開始する必要があります。
オプション1
メインスクリプトでは、 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 ( ) )オプション2
次に、必要なものをインポートし、ハンドラーとしてバインドします。
反応します
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
// @TODOすべてのミームイベントは、同じ基本構造に従います。
// 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 )
}これらのオプションの引数を活用し、 fnOnStartまたは/and fnOnFinish含むイベントにバインディングされたハンドラーに合格してオブジェクトを渡すことにより、ミームイベントでの経験を高めることができます。
document . body . addEventListener ( 'click' , toBeContinuedMemeEvent ( {
fnOnStart : ( ) => console . log ( 'Event has been started' ) ,
fnOnFinish : ( ) => console . log ( 'Event has just finished' )
} ) )React/Vue/Whatingで同じ原則。
さらに、 fnOnStart初期eventオブジェクトとterminateEvent関数も受信し、念のため、 fnOnFinishも同じ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 ) )もちろん、上記のすべてを普通のリスナーで使用して、オプションの機能を単独で残すことができます。
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 ( ) ) 現在、ライブラリで悪用される最も出血エッジの機能はオーディオ要素です。
そのため、Caniuseによると、Meme-EventsのコンパイルされたバージョンがIE8+、Edge 12+、したがってChrome＆FF＆Safariのほぼすべてのバージョンで飛ぶと考えるのはかなり安全です。
もちろん、唯一の例外はオペラミニですが、正直に言って、気にします。
Meme-Eventsは、オープンソースに貢献するのに驚くべき場所です。純粋なES6+で記述されており、テストインフラストラクチャの準備ができており、扱いにくい非同期コードは関係ありません。Cludinaryから資産を要求する以外に、サードパーティAPIはありません。
しかし、あなたによって解決すべき問題がたくさんあります：
2週間前にコーディングを開始したとしても、このドキュメントのタイプミスを修正したり、順序の問題セクションにしたり、Funny Memeを見つけてライブラリに含めたり、次のリストに追加して実装を要求したりすることができます。
両方の方法で動作します。実際、あなたが超経験した場合、ソースコードを確認してリファクタリングを行う、アーキテクチャを提供するか、少なくとも削除するボトルネックを指し示し、明らかな間違いを修正することができれば驚くべきことです。
あなたがする貢献はどんな貢献も大歓迎です。
git checkout -b feature/AmazingFeature ）git commit -m 'Add some AmazingFeature' ）git push origin feature/AmazingFeature ）コマンドのリスト： yarnで与えられた例ですが、NPMでも動作します
yarn clean dist/ディレクトリを削除しますyarn test - 糸くずとフォーマットですべてのテストを実行します。yarn coverage - カバレッジレポートですべてのテストを実行します。yarn test:unit - ユニットテストを実行しますyarn test:unit:watch - 同じですが、変更について再実行しますyarn test:int統合テストを実行しますyarn test:int:watch同じですが、変更のリターンyarn lint -Run Eslintyarn format - きれいに実行しますyarn build - Webpackを実行します。既に提示されたイベントで最後の重要なメモは、私の個人的なCloudinary ACCから要求されたフォントや.mp3ファイルなどの静的資産がいくつかあります。もちろん、私はそれを公開することはできませんので、2つの非常に簡単な回避策があります。独自の雲のようなACCを使用するか、地元の資産を保持します。 PRがマージされた場合、とにかくすべての静的資産をACCに移動します。
このリポジトリで見つかった問題のリクエストテンプレートを使用して、プルリクエストテンプレートを使用してください。具体的な質問がある場合は、お気軽にご連絡ください。
MITライセンスの下で配布されます。詳細については、 LICENSE参照してください。
Kirill Bolotsky -Twitter [email protected] -bolotsky.dev
プロジェクトリンク：Github
