کتابخانه
emoji-picker-element یه کتابخانه سبک جاوااسکریپته که پنل انتخاب ایموجی رو به صفحه اضافه می کنه و به شکل وب کامپوننت عرضه می شه. با یه تگ ساده کنار فیلد کامنت، چت یا ویرایشگر می ذاریش و کاربر بین دسته ها می گرده و ایموجی دلخواهش رو انتخاب می کنه، بدون وابستگی به هیچ فریم ورکی.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز Apache-2.0؛ هش هر فایل با منبع بررسی شده است.
۱۵۵ کیلوبایت· ۲۹ فایل· انتشار
SHA-256: 7138d5c683bba03d3987d242b11b6eb53356b25581bb4f2f5e139e1d92e91bc1
اگه تا حالا خواستی کنار فرم کامنت، تیکت پشتیبانی یا چت سایتت یه دکمه ایموجی بذاری، می دونی ساختنش از صفر چقدر دردسر داره. باید دسته بندی داشته باشه، جست وجو کنه، رنگ پوست ایموجی ها رو پشتیبانی کنه و ایموجی های اخیر رو یادش بمونه. emoji-picker-element همه اینا رو یه جا انجام می ده. چون وب کامپوننته، توی HTML ساده، قالب وردپرس و پروژه های ری اکت و ویو کار می کنه.
کار باهاش ساده است. یه تگ emoji-picker توی صفحه می ذاری. هر وقت کاربر روی یه ایموجی کلیک کنه، رویداد emoji-click اجرا می شه و ایموجی انتخاب شده توش هست. تو فقط همون رو برمی داری و توی فیلد متن می ذاری. ظاهرش با متغیرهای CSS قابل تنظیمه، حالت تاریک و روشن داره، چند زبان و ایموجی سفارشی رو پشتیبانی می کنه و با کیبورد هم می شه ازش استفاده کرد. اطلاعات ایموجی ها توی IndexedDB مرورگر کاربر ذخیره می شه تا دفعه بعد سریع تر بالا بیاد.
یه نکته رو برای سایت های ایرانی جدی بگیر. به طور پیش فرض داده ایموجی ها موقع اجرا از یه CDN بیرونی گرفته می شه. وقتی اینترنت بین الملل محدوده، ممکنه پنل خالی بمونه یا دیر بالا بیاد. راهش اینه که فایل داده رو هم روی هاست خودت بذاری و تنظیم dataSource رو به همون مسیر بدی. این کار رو قبل از انتشار روی سایت اصلی تست کن.
محدودیت ها رو هم بدون. ایموجی ها با فونت خود دستگاه نمایش داده می شن، پس شکلشون روی اندروید، ویندوز و آیفون یکسان نیست. بعضی ایموجی های جدید یا پرچم ها هم روی سیستم های قدیمی ممکنه درست دیده نشن. اگه ظاهر یکدست روی همه دستگاه ها برات مهمه، این کتابخونه تنها انتخابت نیست. اگه هم فقط چهار پنج ایموجی ثابت لازم داری، یه لیست دستی کافیه و کتابخونه نمی خواد. مجوزش Apache و متن بازه و استفاده تجاری معمولا مشکلی نداره، ولی متن مجوز رو یه بار بخون. نسخه های رسمی و بدون تغییر emoji-picker-element توی مخزن داخلی ما هم هست و با قطع اینترنت بین الملل هم می تونی بگیریش.
برای اضافه کردن emoji-picker-element به صفحه، کد آماده پایین همین صفحه رو ببین. قدم های کلی کار اینه:
توی وردپرس هم همین مسیر جواب می ده. اسکریپت رو از طریق functions.php قالب یا یه افزونه کوچک خودت لود کن و به فیلد کامنت یا فرم مورد نظرت وصلش کن. آخرش یه بار هم روی موبایل و هم روی دسکتاپ امتحانش کن.
یه کتابخانه جاوااسکریپت به شکل وب کامپوننته که پنل انتخاب ایموجی رو به صفحه اضافه می کنه. کاربر می تونه بین دسته ها بگرده، جست وجو کنه و ایموجی دلخواهش رو انتخاب کنه. بیشتر برای فرم کامنت، چت، تیکت و ویرایشگرها به کار می ره و به هیچ فریم ورک خاصی وابسته نیست.
خود کتابخانه رو می تونی روی هاست خودت بذاری، ولی داده ایموجی ها به طور پیش فرض از یه CDN بیرونی گرفته می شه. برای اینکه همیشه کار کنه، فایل داده رو هم روی هاست خودت بذار و با تنظیم dataSource بهش اشاره کن. قبل از انتشار روی سایت اصلی حتما تستش کن.
بله، ولی افزونه آماده ای نیست که با یه کلیک نصب بشه. باید اسکریپت رو توی قالب یا یه افزونه کوچک لود کنی، تگ emoji-picker رو کنار فیلد مورد نظرت، مثلا کامنت، بذاری و با رویداد emoji-click ایموجی رو توی متن بنویسی. یه مقدار جاوااسکریپت پایه لازم داری.
چون یه وب کامپوننت استاندارده، توی پروژه های ری اکت، ویو و بقیه فریم ورک ها هم می شه ازش استفاده کرد. فقط شنونده رویداد emoji-click رو به روشی که اون فریم ورک پیشنهاد می کنه وصل می کنی. اگه کاربرهات مرورگرهای خیلی قدیمی دارن، سازگاری رو جدا بررسی کن.
چون ایموجی ها با فونت خود دستگاه نمایش داده می شن، نه با تصویر ثابت. برای همین ظاهرشون روی اندروید، ویندوز و آیفون فرق داره. بعضی ایموجی های جدید یا پرچم ها هم روی سیستم های قدیمی ممکنه درست نشون داده نشن.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.