Framework7 এর Touch Events ব্যবস্থাপনা

Framework7 মোবাইল ডিভাইস ফ্রেন্ডলি একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা স্বয়ংক্রিয়ভাবে Touch Events (টাচ ইভেন্ট) সমর্থন করে। ডিভাইস স্ক্রিনে আঙ্গুলের স্পর্শ, ড্র্যাগ, সোয়াইপ ইত্যাদি বিভিন্ন ধরণের টাচ-ভিত্তিক ইউজার ইন্টারঅ্যাকশন সহজে হ্যান্ডল করা যায়। এর ফলে মোবাইল অ্যাপ বা মোবাইল রেসপন্সিভ ওয়েব অ্যাপ তৈরিতে Framework7 অত্যন্ত কার্যকর।

Touch Events এবং Dom7

Framework7 ডিফল্টভাবে Dom7 (একটি লাইটওয়েট jQuery-সদৃশ লাইব্রেরি) ব্যবহার করে DOM ইভেন্ট হ্যান্ডল করতে। Dom7 এর মাধ্যমে Touch Events এর Listener যোগ করা, অপসারণ করা ইত্যাদি করা যায়।

সাধারণ Touch Events

• touchstart: ইউজার স্ক্রিনে আঙ্গুল স্পর্শ করা মাত্র ট্রিগার হয়।
• touchmove: আঙ্গুল স্ক্রিনের ওপর ড্র্যাগ করার সময় ক্রমাগত ট্রিগার হয়।
• touchend: আঙ্গুল স্ক্রিন থেকে তুলে নেওয়ার সময় ট্রিগার হয়।
• touchcancel: সিস্টেম বা ব্রাউজার টাচ ইভেন্ট বাতিল করলে ট্রিগার হয়।

উদাহরণ: Touchstart ইভেন্ট Listener

<div class="block">
  <div class="touch-area" style="height:100px; background:#f0f0f0; text-align:center; line-height:100px;">
    Touch Here
  </div>
</div>

$('.touch-area').on('touchstart', function(e) {
  console.log('Touch started');
});
</code></pre><p>উপরের কোডে <code inline="">touchstart</code> ইভেন্টটি যখন <code inline="">.touch-area</code> এলিমেন্টে আঙ্গুল স্পর্শ করা হবে তখন ট্রিগার হবে।</p><hr><h3>উদাহরণ: Touchmove ইভেন্ট দিয়ে ড্র্যাগ ডিটেক্ট করা</h3><pre><code class="language-javascript">var startX, startY;$('.touch-area').on('touchstart', function(e) {
  var touch = e.targetTouches[0];
  startX = touch.pageX;
  startY = touch.pageY;
});

$('.touch-area').on('touchmove', function(e) {
  var touch = e.targetTouches[0];
  var diffX = touch.pageX - startX;
  var diffY = touch.pageY - startY;
  console.log('Dragging - X: ' + diffX + ', Y: ' + diffY);
});
</code></pre><p>এখানে <code inline="">touchstart</code> ইভেন্টে প্রাথমিক টাচ পজিশন (<code inline="">startX</code>, <code inline="">startY</code>) ধারণ করা হচ্ছে। <code inline="">touchmove</code> ইভেন্টে চলমান পজিশনের সাথে তুলনা করে ড্র্যাগ পরিমাণ বের করা হচ্ছে।</p><hr><h3>Swipe Events</h3><p>Framework7 দিয়ে সরাসরি Swipe Events শুনতে চাইলে আপনাকে নিজের লজিক তৈরি করতে হবে, যেমন <code inline="">touchstart</code>, <code inline="">touchmove</code>, এবং <code inline="">touchend</code> ইভেন্ট একত্রে ব্যবহার করে সোয়াইপ ডিরেকশন বের করা যায়।</p><h4>সোয়াইপ ডিটেকশনের সাধারণ কৌশল:</h4><ol><li><strong>touchstart</strong>-এ প্রথম স্পর্শ পয়েন্ট (<code inline="">startX</code>, <code inline="">startY</code>) ধারণ।</li><li><strong>touchend</strong>-এ শেষ স্পর্শ পয়েন্ট (<code inline="">endX</code>, <code inline="">endY</code>) ধারণ।</li><li>শেষ এবং শুরু পয়েন্টের পার্থক্য বিশ্লেষণ করে সোয়াইপ ডিরেকশন বের করা (যেমন <code inline="">endX - startX</code> যদি ধনাত্মক এবং বড় হয় তবে সোয়াইপ ডান দিকে, অন্যথায় বাঁ দিকে)।</li></ol><pre><code class="language-javascript">var startX, startY, endX, endY;$('.touch-area').on('touchstart', function(e) {
  var touch = e.targetTouches[0];
  startX = touch.pageX;
  startY = touch.pageY;
});

$('.touch-area').on('touchend', function(e) {
  var touch = e.changedTouches[0];
  endX = touch.pageX;
  endY = touch.pageY;

  var diffX = endX - startX;
  var diffY = endY - startY;

  if(Math.abs(diffX) > Math.abs(diffY)) {
    if(diffX > 0) {
      console.log('Swiped Right');
    } else {
      console.log('Swiped Left');
    }
  } else {
    if(diffY > 0) {
      console.log('Swiped Down');
    } else {
      console.log('Swiped Up');
    }
  }
});
</code></pre><hr><h3>Prevent Default Behavior</h3><p>Touch Events এর ক্ষেত্রে অনেক সময় ব্রাউজারের ডিফল্ট স্ক্রল আচরণ বন্ধ করতে হয়। <code inline="">e.preventDefault()</code> ব্যবহার করে এটি করা যায়।</p><pre><code class="language-javascript">$('.touch-area').on('touchmove', function(e) {
  e.preventDefault(); // স্ক্রল বন্ধ
});

Passive Event Listener

পারফরম্যান্সের উন্নতির জন্য ব্রাউজারের Passive Event Listener ব্যবহার করতে পারেন। Framework7 স্বয়ংক্রিয়ভাবে কিছু ইভেন্ট প্যাসিভ হিসেবে নিবে, কিন্তু আপনি নিজেও কনফিগার করতে পারেন।

$$('.touch-area').on('touchmove', function(e) {
  // Without calling preventDefault() for passive listener
  console.log('Touch moving with passive listener');
}, { passive: true });

সারাংশ

Framework7 এর মাধ্যমে Touch Events হ্যান্ডল করা সহজ। Dom7 সিলেক্টর এবং ইভেন্ট Listener ব্যবহার করে টাচ অ্যাকশন (touchstart, touchmove, touchend) পরিচালনা করা যায়। কাস্টম লজিক প্রয়োগ করে সোয়াইপ ডিরেকশন, ড্র্যাগিং বা অন্যান্য টাচ নির্ভর ইন্টারঅ্যাকশন সহজে ইমপ্লিমেন্ট করা সম্ভব। এটি মোবাইল ভিত্তিক অ্যাপ্লিকেশন উন্নয়নে একটি ব্যবহারবান্ধব সমাধান।