نمایش کیبورد و منو در MathLive تنها زمانی که عنصر فوکوس شده است

اگر با MathLive کار کرده باشید، میدانید که این کتابخانه بسیار مفید و قدرتمند است برای اضافه کردن قابلیت های ریاضیاتی به ویرایشگرهای متنی. اما شاید بخواهید امکانات خاصی از آن تنها زمانی نمایش داده شود که عنصر مورد نظر شما در فوکوس قرار دارد. وقتی که از ویرایشگرهای ریاضی استفاده میکنید، ممکن است کیبورد یا منوها فورا قابل دسترس نباشند و کاربر نیاز داشته باشد برای دسترسی به آنها تمرکز بیشتری کند. در چنین شرایطی، داشتن رفتارهای اختصاصی برای نشان دادن منوها و کیبورد تنها در صورت فوکوس بودن عنصر می‌تواند UX کاربر را بهبود بخشد.

در حالت عادی، MathLive به شما اجازه می‌دهد کیبورد و منوهای مختلف را با استفاده از یک API ساده فعال یا غیرفعال کنید. با این حال، نیاز است که بدانید چگونه این عملکرد را به روشی پیاده‌سازی کنید که مطابق با نیازهای شما باشد و در عین حال به کاربران تجربه خوبی ارائه دهد. به‌طور کلی، این امکان در دسترس است اما بهتر است که با کدهای مرتبط به خوبی آشنا باشید تا خودتان بتوانید چیدمان و رفتار مناسب را به سیستم‌تان بدهید.

پیاده‌سازی چنین ویژگی‌ای نیازمند مقداری JavaScript است که با رویدادهای فوکوس و بلور (blur) کار می‌کند. در ادامه یک نمونه کد آورده شده که نشان می‌دهد چگونه می‌توانید این کار را در ویرایشگر خود انجام دهید. ما از اصول پایه‌ای استفاده خواهیم کرد تا خیالتان راحت باشد که پیاده‌سازی شما تمیز و بهینه است.

در اینجا نحوه پیاده سازی آمده است. اول نیاز دارید که رویدادهای HTML و JavaScript را هم برای کیبورد و هم برای منوها مدیریت کنید. سپس مطمئن شوید که API های MathLive را به درستی استفاده می کنید تا فوکوس و بلور به راحتی روی این کامپوننت ها تاثیر بگذارد. بیایید به کد زیر نگاهی بیاندازیم:

<!-- HTML Structure -->
<div id="math-editor"></div>

<script>
  const mathfieldElement = document.getElementById('math-editor');
  const mf = new MathfieldElement(mathfieldElement);

  // Add Event Listeners
  mf.addEventListener('focus', () => {
      mf.setOptions({virtualKeyboardMode: 'on'});
  });

  mf.addEventListener('blur', () => {
      mf.setOptions({virtualKeyboardMode: 'off'});
  });
</script>