easyShortcut.js کتابخانه جاوااسکریپتی است که برای پیاده سازی Shortcut ها در صفحات وب است ......

به نام خالق هستی

میانبر (Shortcut) ها، نقش مهمی در دسترسی راحت و سریع در نرم افزار ها، مخصوصا برای برنامه نویسان و توسعه دهندگان که با انواع نرم افزار ها و IDE ها کار میکنند، دارند.

اما این امکان فقط برای توسعه دهندگان طراحی نشده است، میتوانیم ببینیم که در اکثر نرم افزار ها که عموم مردم از آنها استفاده میکنند، میانبر ها نقش مهمی را ایفا میکنند.

اما در دنیای وب و صفحات وب، کمتر دیده ایم که برنامه نویسان برای آن صفحه میانبر تعریف کرده باشند.

ولی این به این معنا نیست که آنها کم کاری کرده اند یا....

بلکه در خیلی از صفحات وب اصلا نیازی به میانبرها نیست، و همچنین میتوانیم ببینیم در بعضی سایتهای مهم مانند Github و... ، از میانبر ها استفاده شده است.

کتابخانه easyShortcut.js ، کتابخانه جاوااسکریپتی است که به ما کمک میکند میانبرها را به راحتی در صفحات وب پیاده کنیم.

این لایبراری توسط نویسنده همین مقاله توسعه داده شده است

میتوانید برای مطالعه داکیومنتیشن در گیتهاب به این لینک مراجعه کنید.

نحوه استفاده :

ابتدا فایل کتابخانه را از گیتهاب دانلود میکنیم و در فایل پروژه خودمان قرار میدهیم.

سپس کتابخانه را به فایل Html پروژه خودمان لینک میکنیم

<script src="easyShortcut.min.js"></script>

حالا برای هر میانبری که بخواهیم ایجاد کنیم، باید کلاس shortcut را فراخوانی کنیم و و بعنوان آرگومان ورودی، یک شئ به آن بدهیم که حاوی اطلاعات و تنظیمات میانبری که میخواهیم ایجاد شود است

new shortcut({
  ctrl: false, //deafult
  alt: false, //deafult
  shift: false, //deafult
  meta: false, //deafult
  key: "A", //مثال
  fn: ()=>{
    alert("Hello World") //مثال
  }
})

پارامتر هایی که وارد کردیم، به 6 قسمت تقسیم میشوند. در اینجا ما 4 پارامتر اصلی که شامل کلید های مهم (ctrl, alt, shift, meta) میباشند داریم که مقدار پیش فرض آنها false است. اگر مقدار هرکدام از آنها را true کنیم، وقتی آن کلید با مقدار پارامتر key ترکیب شود، تابعی که به fn پاس داده ایم اجرا میشود.

حالا key و fn چیستند؟

مقداری که به key میدهیم، همان کلیدی است که میخواهیم وقتی با یک یا چندتا از کلید های اصلی ترکیب شد میانبر اجرا شود.

پارامتر fn ، مقداری که میگیرد باید یک تابع باشد، این تابع زمانی اجرا میشود که میانبر اجرا شود.

مثال : 

میخواهیم میانبری بسازیم به این شکل که وقتی میانبر Ctrl + Alt + B اجرا و صدا زده شد، کاربر پیغام Hello My Friend ! را دریافت کند.

پس باید به این صورت عمل کنیم:

new shortcut({
  ctrl: true,
  alt: true,

  key: "b",
  fn: ()=>{
    alert("Hello My Friend !")
  }
})

یک مثال دیگر :

یک تابع داریم بنام closeAllTabs که وقتی اجرا میشود، همه تب های popup باز در صفحه را میبندد.

حالا میخواهیم یک میانبری به این شکل: Alt + C داشته باشیم که وقتی اجرا میشود، تابع closeAllTabs هم اجرا شود

پس باید همچنین کدی را بنویسیم:

new shortcut({

  alt: true,

  key: "c",
  fn: closeAllTabs
})

همانطور که مشاهده میکنید، نیازی نیست وقتی از ctrl و کلید های اصلی دیگر استفاده نمیکنیم، آنها را قرار دهیم و مقدار آنها را false کنیم، زیرا همه کلید های اصلی بصورت پیشفرض false هستند

نکته:  بعضی از میانبر ها توسط خود مرورگرها و سیستم عامل ها رزرو شده هستند و  ما باید از میانبر هایی که رزرو نشدند استفاده کنیم، در غیر این صورت با مشکلاتی روبرو خواهیم شد. برای اینکه بدانیم میانبری که میخواهیم استفاده کنیم رزرو شده است یا خیر، بهتر از قبل از تعریف آن، یکبار آنرا در صفحه خود امتحان کنیم.

تابع کمکی

همانطور که گفتیم، مقداری که key میگیرد، همان کلیدی است که میخواهیم وقتی با کلید های اصلی ترکیب شد، میانبر اجرا شود. حالا، کلید هایی در کیبورد هستند که ممکن است ندانیم مقدار key مخصوص آنها چیستند.

برای این منظور، تابعی در کتابخانه easyShortcut قرار داده شده است که وقتی آنرا فعال کنیم، هر کلیدی از کیبوردمان که در صفحه وبمان فشار دهیم، اطلاعات آن در console مرورگر log خواهد شد.

نام این تابع ، showKeyInfo است و در صورت نیاز میتوانیم آنرا فراخوانی کنیم

showKeyInfo()

موفق و موید باشید

پایان