کتابخانه
clipboard یا همون clipboard.js یه کتابخانه جاوااسکریپت سبک و متن بازه که کپی کردن متن توی کلیپ بورد رو با یه کلیک ساده می کنه. فلش نمی خواد و به jQuery هم وابسته نیست. برای دکمه «کپی کد»، کپی لینک، کد تخفیف یا شماره کارت، چه توی وردپرس چه بیرون از اون، خیلی به درد می خوره.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۴۹ کیلوبایت· ۱۵ فایل· انتشار
SHA-256: e17a1d816e13c0826e0ed7febfabc3277f45571234bde0bf9120829a7169edc9
اگه تا حالا خواسته باشی کنار یه تکه کد یا یه کد تخفیف دکمه «کپی» بذاری، می دونی نوشتنش از صفر چقدر دردسر داره. باید متن رو انتخاب کنی، دستور کپی رو اجرا کنی، رفتار مرورگرهای مختلف رو در نظر بگیری و آخرش هم به کاربر بگی کپی شد یا نه. کتابخانه clipboard همین کار رو جمع و جور برات انجام می ده. خودش رو این طوری معرفی می کنه: کپی مدرن توی کلیپ بورد، بدون فلش و خیلی سبک.
کار کردن باهاش ساده هست. به یه دکمه می گی چه متنی کپی بشه. یا خود متن رو بهش می دی، یا می گی محتوای یه المنت دیگه، مثل یه فیلد ورودی یا یه بلوک کد، رو برداره. اگه بخوای به جای کپی، «برش» هم می شه تنظیم کرد. برای موفقیت و شکست عملیات هم رویداد جدا داره، پس پیام «کپی شد» رو خودت نشون می دی. چون به jQuery یا کتابخانه دیگه ای وابسته نیست، توی هر پروژه ای فقط با اضافه کردن یه فایل جاوااسکریپت جا می افته.
بیشتر از همه به درد کسایی می خوره که سایت محتوایی یا آموزشی دارن. مثلا وبلاگ برنامه نویسی که می خواد کنار هر قطعه کد دکمه کپی بذاره، فروشگاهی که کد تخفیف نشون می ده، یا صفحه ای که شماره کارت و شناسه پرداخت رو برای کپی راحت می ذاره. توی وردپرس هم لازم نیست حتما افزونه جدا نصب کنی. با یه اسکریپت کوچیک توی قالب یا یه بلوک HTML سفارشی همین کار انجام می شه.
یه سری جاها هم نباید ازش انتظار زیادی داشته باشی. این کتابخانه برای کپی و برش متنه، نه مدیریت کامل کلیپ بورد و نه کپی تصویر و فایل. اگه دکمه ات توی یه مودال یا پنجره بازشو باشه، ممکنه مشکل فوکوس پیش بیاد و باید گزینه container رو درست تنظیم کنی. نکته دیگه اینه که رفتار کلیپ بورد توی مرورگرها به سیاست های امنیتی بستگی داره. برای همین نتیجه رو همیشه روی چند مرورگر و موبایل تست کن، مخصوصا اگه سایتت https داره.
نسخه های رسمی و بدون تغییر clipboard توی مخزن داخلی ما هم در دسترسه. پس وقتی دسترسی به منابع بین المللی کند یا قطع باشه، لازم نیست پروژه ات منتظر دانلود بمونه.
برای استفاده از clipboard لازم نیست پروژه ات رو سنگین کنی. کافیه این قدم ها رو بری:
اگه دکمه توی مودال یا پنجره بازشو باشه و کپی کار نکرد، گزینه container رو روی خود مودال تنظیم کن. اگه صفحه ها رو با جاوااسکریپت می سازی و حذف می کنی، بعد از حذف دکمه ها نمونه رو با destroy پاک کن تا چیز اضافه ای توی حافظه باقی نمونه. آخرش هم روی چند مرورگر و موبایل امتحانش کن.
clipboard یه کتابخانه جاوااسکریپت برای کپی و برش متن توی کلیپ بورده. با کلیک روی یه المنت، معمولا یه دکمه، کار می کنه. متن رو یا مستقیم بهش می دی یا از محتوای یه المنت دیگه برمی داره. فلش نمی خواد و روی سایت های معمولی هم کار می کنه، برای همین برای دکمه کپی کد و لینک خیلی کاربردیه.
نه. این کتابخانه مستقل از jQuery کار می کنه و فقط یه فایل جاوااسکریپت توی صفحه لازم داره. اگه سایتت jQuery داشته باشه هم مشکلی پیش نمیاد. فقط باید دکمه ها رو با سلکتور درست به نمونه ClipboardJS معرفی کنی تا کلیکشون رو بشناسه.
ساده ترین راه اینه که فایل رو توی پوشه قالب یا قالب فرزند بذاری و با enqueue توی وردپرس لودش کنی. بعد دکمه رو توی یه بلوک HTML سفارشی یا فایل قالب بذار. اگه فقط یکی دو صفحه بهش نیاز داری، می تونی اسکریپت رو فقط همون صفحه ها بارگذاری کنی.
معمولا مشکل از مدیریت فوکوس مودال هاست، چون بعضی هاشون فوکوس رو داخل خودشون نگه می دارن. راه حل رایجش اینه که گزینه container رو روی خود المنت مودال تنظیم کنی. اگه باز هم کار نکرد، مطمئن شو دکمه موقع ساخت نمونه توی صفحه وجود داشته.
مجوز این کتابخانه MIT هست که یکی از آزادترین مجوزهاست و استفاده توی پروژه های شخصی و تجاری رو اجازه می ده. فقط باید اعلان کپی رایت و متن مجوز رو توی فایل هایی که پخش می کنی نگه داری. اگه پروژه ات حساسیت حقوقی خاصی داره، متن کامل مجوز رو یه بار خودت بخون.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.