meme events
Lazy Eye One Degree
نسخ CSS/JS التوصيل والتشغيل من ميمات الفيديو الشهيرة
عرض العرض التوضيحي · الإبلاغ عن الأخطاء أو ميزة الطلب · صفحة التسجيل NPM
مكتبة واجهة المستخدم الخالية من التبعية الخالية من التبعية الإطارية والتي تعرض لبيئة المتصفح الميمات المفضلة لديك للفيديو ، مثل JoJo لتستمر أو كبح ألقاب الحماس الخاصة بك.
كل ميم هي مجرد وظيفة يمكنك ربطها كمعالج لأي حدث تريده مع تمرير أي وسيطات في أبسط أشكاله ، مما يجعل استخدام هذه المكتبة سهلة.
إذا كنت ستساهم ، ضع في اعتبارك أن هذا المشروع يستخدم:
الأحداث التي تم تنفيذها حاليًا:
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'القادم التالي:
ربما:
تحذير! هذا المشروع ممتع للغاية وسهل المساهمة. لا تتردد في المشاركة!
هناك طريقتان موصىانان به بالضبط لاستخدام أحداث الميم:
الخيار 1
من أجل استخدام أحداث MEME عبر 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يتبع كل حدث MEME نفس الهيكل الأساسي:
// 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 أو/و fnOnFinish :
document . body . addEventListener ( 'click' , toBeContinuedMemeEvent ( {
fnOnStart : ( ) => console . log ( 'Event has been started' ) ,
fnOnFinish : ( ) => console . log ( 'Event has just finished' )
} ) )نفس المبادئ في React/Vue/أيا كان.
علاوة على ذلك ، يتلقى 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 ( ) ) في الوقت الحالي ، فإن الميزة الأكثر حافة النزيف التي يتم استغلالها في المكتبة هي عنصر صوتي ، والباقي عبارة عن أشياء أساسية ES6+ التي يتم التعامل معها بواسطة Babel أثناء بناء Prod على أي حال.
لذلك ، وفقًا لـ Caniuse ، من الآمن جدًا التفكير في أن النسخة المترجمة من أحداث MEME ستطير على IE8+ ، Edge 12+ ، وبالتالي كل إصدار من Chrome & FF & Safari تقريبًا.
الاستثناء الوحيد ، بالطبع ، Opera Mini ، ولكن دعنا نكون صادقين ، من يهتم.
إن أحداث MEME هي مكان رائع للبدء في المساهمة في المصدر المفتوح. إنه مكتوب في Pure ES6+، البنية التحتية للاختبار جاهزة ، لا يوجد رمز غير متزامن مرهقة ، لا يوجد واجهة برمجة تطبيقات الطرف الثالث على الإطلاق إلى جانب طلب الأصول من Clobinary.
ومع ذلك ، هناك مجموعة من المشكلات التي يجب حلها من قبلك:
تذكر ، حتى لو بدأت الترميز مثل أسبوعين قبل أسبوعين ، فأنت لا تزال قادرًا على تصحيح الأخطاء المطبعية أو تحسين بنية هذه الوثائق ، أو وضعت في قسم مشكلات الطلب أو مجرد العثور على ميمي مضحك ليتم تضمينه في المكتبة وطلب تنفيذها عن طريق الإضافة إلى قائمة قريباً .
إنه يعمل في كلا الاتجاهين ، في الواقع ، إذا كنت قد خبرة فائقة ، فسيكون من المدهش أن تتمكن من مراجعة التعليمات البرمجية المصدر والقيام ببعض Refactor ، أو إعطاء بعض الهندسة المعمارية أو على الأقل تشير إلى الاختناقات لإزالة الأخطاء الواضحة.
أي مساهمات تقدمها موضع تقدير كبير .
git checkout -b feature/AmazingFeature )git commit -m 'Add some AmazingFeature' )git push origin feature/AmazingFeature ) قائمة الأوامر: أمثلة مقدمة مع yarn ، ولكنها تعمل مع NPM أيضًا
yarn clean - إزالة dist/ DIRECTORYyarn test - قم بتشغيل جميع الاختبارات مع linting والتنسيق.yarn coverage - قم بتشغيل جميع الاختبارات مع تقرير التغطية.yarn test:unit - تشغيل اختبارات الوحدةyarn test:unit:watch - نفس ولكن إعادة تشغيل التغييراتyarn test:int - اختبارات تكامل التشغيلyarn test:int:watch - نفسه ولكن يعود على التغييراتyarn lint - RUN ESLINTyarn format - تشغيل أجملyarn build - Run WebPack.آخر ملاحظة مهمة في الأحداث المقدمة بالفعل ، هناك بعض الأصول الثابتة مثل الخطوط وملفات .mp3 المطلوبة من ACC الشخصية. بالطبع ، لا أستطيع أن ألقي علنا ، لذلك هناك حلولان واضحان ومباشران: استخدم لجنة التنسيق الإدارية الخاصة بك أو الحفاظ على الأصول محليًا. إذا تم دمج العلاقات العامة الخاصة بك ، فسوف أقوم بنقل كل أصول ثابتة إلى ACC على أي حال.
من فضلك ، استخدم قوالب طلب السحب والسحب التي قد تجدها في هذا الريبو. إذا كان لديك أي أسئلة محددة ، فلا تتردد في الاتصال بي.
موزعة تحت رخصة معهد ماساتشوستس للتكنولوجيا. انظر LICENSE لمزيد من المعلومات.
Kirill Bolotsky - Twitter - [email protected] - bolotsky.dev
رابط المشروع: جيثب
