Web Development Framework7 এর Touch এবং Gesture Handling গাইড ও নোট

Framework7 মোবাইল ডিভাইসের জন্য তৈরি হওয়ায় এতে Touch Events এবং Gesture Handling সহজে পরিচালনা করা যায়। এতে অন্তর্নির্মিত টাচ ইন্টারঅ্যাকশন, স্ক্রলিং, সোয়াইপ এবং অন্যান্য জেশ্চার সাপোর্ট রয়েছে। এছাড়া ব্যবহারকারী ইন্টারফেসকে আরও প্রাণবন্ত করতে কাস্টম টাচ ইভেন্ট ও জেশ্চার যুক্ত করা সম্ভব।

টাচ ইভেন্ট (Touch Events) ব্যবহারের পদ্ধতি

Framework7 ডিফল্টভাবে টাচ ইভেন্ট সাপোর্ট করে, যেমন touchstart, touchmove, touchend ইত্যাদি। এই ইভেন্টগুলো ব্যবহার করে স্ক্রিনে স্পর্শ বা সোয়াইপ ডিটেক্ট করা যায়। উদাহরণস্বরূপ, ইউজার যখন স্ক্রিনে আঙুল রাখে তখন touchstart ইভেন্ট, আঙুল সরানোর সময় touchmove এবং আঙুল তুললে touchend ইভেন্ট ফায়ার হয়।

var app = new Framework7();
var $= Dom7;$('.touch-area').on('touchstart', function (e) {
  console.log('Touch started');
});

$('.touch-area').on('touchmove', function (e) {
  console.log('Finger is moving on the screen');
});$('.touch-area').on('touchend', function (e) {
  console.log('Touch ended');
});

এই ইভেন্টগুলোর মাধ্যমে আপনি টাচ গেস্টারের উপর ভিত্তি করে কাস্টম অ্যাকশন নিতে পারবেন, যেমন সোয়াইপ ডিটেক্ট করে পেজ নেভিগেট করা অথবা স্ক্রোলিং ইফেক্ট কাস্টমাইজ করা।

Gesture Handling এবং কাস্টম জেশ্চার

Gesture Handling Framework7 এর মাধ্যমে আরও উচ্চস্তরের ইন্টারঅ্যাকশন দেয়। সোয়াইপ, পিঞ্চ, ড্র্যাগ-ড্রপ ইত্যাদি জেশ্চার ডিটেক্ট করতে আপনি কাস্টম কোড বা থার্ড-পার্টি লাইব্রেরি ব্যবহার করতে পারেন। Framework7 এর রেসপন্সিভ কম্পোনেন্ট এবং রাউটারের সঙ্গে এই জেশ্চার ইভেন্ট ইন্টিগ্রেট করা সহজ।

সোয়াইপ ইভেন্ট ডিটেক্ট করার জন্য touchmove এবং touchend ইভেন্টের মধ্যে ফিঙ্গারের স্টার্ট এবং এন্ড পজিশন তুলনা করা হয়। এভাবে আপনি সোয়াইপ ডিরেকশন নির্ণয় করে পেজ স্লাইড বা সাইড প্যানেল ওপেন করতে পারেন।

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

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) পরিচালনা করা যায়। কাস্টম লজিক প্রয়োগ করে সোয়াইপ ডিরেকশন, ড্র্যাগিং বা অন্যান্য টাচ নির্ভর ইন্টারঅ্যাকশন সহজে ইমপ্লিমেন্ট করা সম্ভব। এটি মোবাইল ভিত্তিক অ্যাপ্লিকেশন উন্নয়নে একটি ব্যবহারবান্ধব সমাধান।

Framework7 ব্যবহার করে অ্যাপ্লিকেশনে সহজে Swipeable Panels এবং Swipe Actions যুক্ত করা যায়। Swipeable Panels এর মাধ্যমে সাইড প্যানেলগুলো (Sidebar Panels) ইউজার অ্যাকশনের ভিত্তিতে স্ক্রিনের পাশ থেকে স্লাইড করে আনা যায়। অন্যদিকে Swipe Actions ব্যবহার করে লিস্ট আইটেমের উপর সোয়াইপ করে অতিরিক্ত অপশন দেখানোর সুযোগ থাকে।

Swipeable Panels কী

Swipeable Panels (সোয়াইপেবল প্যানেল) হল এমন একটি ইউআই এলিমেন্ট যা স্ক্রিনের বাঁ বা ডান দিক থেকে সোয়াইপ করে টেনে বের করা যায়। এতে ইউজাররা সহজে নেভিগেশন ড্রয়ার, সেটিংস প্যানেল, বা অন্যান্য অতিরিক্ত কন্টেন্ট অ্যাক্সেস করতে পারে।

Swipeable Panels এর বৈশিষ্ট্য (Features)

• প্যানেল খোলা (Open) এবং বন্ধ (Close) করার জন্য সোয়াইপ অ্যাকশন সমর্থন।
• iOS এবং Material Design থিমের সাথে সামঞ্জস্যপূর্ণ।
• সহজেই কাস্টমাইজযোগ্য স্টাইল এবং অ্যানিমেশন।

Swipeable Panels তৈরি করা

Framework7 এ প্যানেল সাধারণত .panel ক্লাস ব্যবহার করে তৈরি করা হয়। প্যানেলকে সোয়াইপেবল করতে panel: { swipe: 'left' } অথবা panel: { swipe: 'right' } কনফিগারেশন ব্যবহার করা হয়।

উদাহরণ (HTML):

<div class="panel panel-left panel-cover">
  <div class="view">
    <div class="page">
      <div class="page-content">
        <p>Left Panel Content</p>
      </div>
    </div>
  </div>
</div>

<div class="view view-main">
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">Swipeable Panel Example</div>
      </div>
    </div>
    <div class="page-content">
      <p>Swipe from left edge to open the panel.</p>
    </div>
  </div>
</div>

প্যানেল ইনিশিয়ালাইজেশন (JavaScript):

var app = new Framework7({
  root: '#app',
  panel: {
    swipe: 'left', // বাম পাশ থেকে সোয়াইপ করে প্যানেল খোলার জন্য
  },
});

উপরের কোডে panel: { swipe: 'left' } কনফিগার করা হলে ইউজার স্ক্রিনের বাম দিক থেকে সোয়াইপ করে প্যানেলটি খুলতে পারবে।

Swipe Actions কী

Swipe Actions (সোয়াইপ অ্যাকশন) হল লিস্ট আইটেমগুলোর উপর সোয়াইপ করে অতিরিক্ত অপশন দেখানোর একটি ইউআই প্যাটার্ন। এটি সাধারণত iOS মেইল অ্যাপের মতো ইন্টারফেসে দেখা যায়। Framework7 এই ফিচারটি সহজে ইমপ্লিমেন্ট করার সুবিধা দেয়।

Swipe Actions এর বৈশিষ্ট্য (Features)

• লিস্ট আইটেমের উপর সোয়াইপ করে অ্যাকশন বাটনগুলো দেখানো।
• অতিরিক্ত অপশন যেমন Edit, Delete, Share ইত্যাদি অ্যাক্সেসযোগ্য করা।
• কাস্টম স্টাইল এবং আইকন ব্যবহার করে অ্যাকশনগুলোকে আরও ইউজার-ফ্রেন্ডলি করা।

Swipe Actions তৈরি করা

উদাহরণ (HTML):

<div class="list simple-list">
  <ul>
    <li class="swipeout">
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title">Swipe me left</div>
        </div>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="swipeout-delete">Delete</a>
      </div>
    </li>
  </ul>
</div>

উপরের উদাহরণে .swipeout ক্লাস যুক্ত করা লিস্ট আইটেমটি সোয়াইপ করা যাবে। swipeout-actions-right ক্লাস সম্বলিত ডিভের ভিতরে Delete অ্যাকশন বাটন দেওয়া হয়েছে।

Swipe Actions এর কাস্টমাইজেশন

আপনি চাইলে একাধিক অ্যাকশন বাটন যুক্ত করতে পারেন এবং বাটনে আইকন, টেক্সট, বা উভয়ই ব্যবহার করতে পারেন।

<div class="swipeout-actions-right">
  <a href="#" class="swipeout-close">Close</a>
  <a href="#" class="swipeout-delete">Delete</a>
</div>

এভাবে একাধিক অ্যাকশন বাটন যুক্ত করলে সোয়াইপ করার পর সেগুলো একসাথে প্রদর্শিত হবে।

ইভেন্ট হ্যান্ডলিং (Event Handling)

Swipeable Panels এবং Swipe Actions এর ইভেন্ট শোনার (listen) মাধ্যমে অ্যাপের লজিক নিয়ন্ত্রণ করা যায়।

উদাহরণ (Panel ইভেন্ট):

app.on('panelOpen', function (panel) {
  console.log('Panel opened:', panel);
});

উদাহরণ (Swipeout ইভেন্ট):

$$(document).on('swipeout:deleted', '.swipeout', function () {
  console.log('Item deleted');
});

উপরের ইভেন্ট শোনার মাধ্যমে আপনি সোয়াইপ আ্যাকশন সম্পন্ন হওয়ার পর নির্দিষ্ট কাজ করতে পারেন।

সারাংশ: Framework7 দিয়ে Swipeable Panels এবং Swipe Actions ইমপ্লিমেন্ট করা সহজ। প্যানেল সোয়াইপ করে নেভিগেশন ড্রয়ার দেখানো কিংবা লিস্ট আইটেম সোয়াইপ করে অতিরিক্ত অ্যাকশন দেখানো ইউজার অভিজ্ঞতাকে আরও উন্নত করে। এগুলো কাস্টমাইজ করে আপনার অ্যাপকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করা সম্ভব।

Framework7 মোবাইল এবং ওয়েব অ্যাপ্লিকেশনে Pull-to-Refresh এবং Infinite Scroll ফিচার সমর্থন করে। এগুলো সাধারণত ডেটা রিফ্রেশ এবং স্ক্রল করার সময় নতুন ডেটা লোড করতে ব্যবহৃত হয়।

Pull-to-Refresh কনফিগারেশন

Pull-to-Refresh ফিচার ব্যবহারকারীদের স্ক্রিন টেনে (pull) ডেটা রিফ্রেশ করার সুযোগ দেয়। এটি Framework7 এর বিল্ট-ইন ফিচার এবং সহজেই ব্যবহার করা যায়।

১. HTML স্ট্রাকচার

Pull-to-Refresh ফিচার যুক্ত করতে পৃষ্ঠার HTML এ .ptr-content ক্লাস যোগ করতে হবে।

<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Pull-to-Refresh Example</div>
    </div>
  </div>
  <div class="page-content ptr-content">
    <!-- Pull-to-Refresh loader -->
    <div class="ptr-preloader">
      <div class="preloader"></div>
      <div class="ptr-arrow"></div>
    </div>
    <div class="list">
      <ul id="data-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </div>
</div>

২. JavaScript ইভেন্ট হ্যান্ডলিং

Pull-to-Refresh ইভেন্ট পরিচালনা করতে Framework7 এর ptr:refresh ইভেন্ট ব্যবহার করা হয়।

var app = new Framework7();

var $= Dom7;

// Pull-to-Refresh ইভেন্ট হ্যান্ডলিং$('.ptr-content').on('ptr:refresh', function (e) {
  // নতুন ডেটা লোড করুন
  setTimeout(function () {
    var itemNumber = document.querySelectorAll('#data-list li').length + 1;
    $('#data-list').prepend('<li>Item ' + itemNumber + '</li>');

    // Refresh সম্পন্ন করুন
    app.ptr.done('.ptr-content');
  }, 1500); // ১.৫ সেকেন্ড পরে নতুন ডেটা যুক্ত হবে
});
</code></pre><hr><h3>Infinite Scroll কনফিগারেশন</h3><p><strong>Infinite Scroll</strong> ব্যবহারকারীরা যখন পৃষ্ঠার নিচে স্ক্রল করে তখন স্বয়ংক্রিয়ভাবে নতুন ডেটা লোড করার জন্য ব্যবহৃত হয়।</p><h4>১. HTML স্ট্রাকচার</h4><p>Infinite Scroll ফিচার যোগ করতে <code inline="">.infinite-scroll-content</code> এবং <code inline="">.infinite-scroll-preloader</code> ক্লাস ব্যবহার করতে হবে।</p><pre><code class="language-html"><div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Infinite Scroll Example</div>
    </div>
  </div>
  <div class="page-content infinite-scroll-content" data-infinite-distance="50">
    <div class="list">
      <ul id="infinite-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
    <!-- Preloader -->
    <div class="infinite-scroll-preloader">
      <div class="preloader"></div>
    </div>
  </div>
</div>
</code></pre><h4>২. JavaScript ইভেন্ট হ্যান্ডলিং</h4><p>Infinite Scroll পরিচালনা করতে Framework7 এর <code inline="">infinite</code> ইভেন্ট ব্যবহার করা হয়।</p><pre><code class="language-javascript">var app = new Framework7();

var$ = Dom7;

var loading = false; // ডেটা লোড হচ্ছে কিনা তা চেক করার জন্য

// Infinite Scroll ইভেন্ট হ্যান্ডলিং
$('.infinite-scroll-content').on('infinite', function () {
  if (loading) return; // যদি ইতিমধ্যে লোড হচ্ছে, তাহলে কিছু করবেন না
  loading = true;

  // নতুন ডেটা লোড করুন
  setTimeout(function () {
    var list =$('#infinite-list');
    for (var i = 0; i < 5; i++) {
      var itemNumber = list.find('li').length + 1;
      list.append('<li>Item ' + itemNumber + '</li>');
    }

    // লোডিং শেষ হলে স্টেট আপডেট করুন
    loading = false;
  }, 1500); // ১.৫ সেকেন্ড পরে নতুন ডেটা যুক্ত হবে
});

Pull-to-Refresh এবং Infinite Scroll একসঙ্গে ব্যবহার

Pull-to-Refresh এবং Infinite Scroll একসঙ্গে একটি পৃষ্ঠায় ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:

HTML

<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Pull-to-Refresh & Infinite Scroll</div>
    </div>
  </div>
  <div class="page-content ptr-content infinite-scroll-content" data-infinite-distance="50">
    <!-- Pull-to-Refresh loader -->
    <div class="ptr-preloader">
      <div class="preloader"></div>
      <div class="ptr-arrow"></div>
    </div>
    <div class="list">
      <ul id="combined-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
    <!-- Infinite Scroll loader -->
    <div class="infinite-scroll-preloader">
      <div class="preloader"></div>
    </div>
  </div>
</div>

JavaScript

var app = new Framework7();
var $= Dom7;

// Pull-to-Refresh হ্যান্ডলিং$('.ptr-content').on('ptr:refresh', function () {
  setTimeout(function () {
    var itemNumber = document.querySelectorAll('#combined-list li').length + 1;
    $('#combined-list').prepend('<li>New Item ' + itemNumber + '</li>');
    app.ptr.done('.ptr-content');
  }, 1500);
});

// Infinite Scroll হ্যান্ডলিং
var loading = false;$('.infinite-scroll-content').on('infinite', function () {
  if (loading) return;
  loading = true;

  setTimeout(function () {
    var list = $$('#combined-list');
    for (var i = 0; i < 5; i++) {
      var itemNumber = list.find('li').length + 1;
      list.append('<li>Item ' + itemNumber + '</li>');
    }
    loading = false;
  }, 1500);
});

গুরুত্বপূর্ণ টিপস

1. Pull-to-Refresh এবং Infinite Scroll-এর মধ্যে পার্থক্য:
   • Pull-to-Refresh: ব্যবহারকারী স্ক্রিন টেনে ডেটা রিফ্রেশ করে।
   • Infinite Scroll: ব্যবহারকারী যখন স্ক্রল করে তখন স্বয়ংক্রিয়ভাবে নতুন ডেটা লোড হয়।
2. UX উন্নয়ন: ডেটা লোডিং এর সময় ব্যবহারকারীদের ভিজ্যুয়াল ইঙ্গিত দিন (যেমন প্রিলোডার)।
3. ডেটা সীমাবদ্ধ করা: Infinite Scroll ব্যবহার করার সময় ডেটার পরিমাণ সীমিত রাখুন। অনেক ডেটা লোড হলে পেজ স্লো হয়ে যেতে পারে।
4. লজি কন্ট্রোল: Pull-to-Refresh এবং Infinite Scroll-এর লজিক আলাদা রাখুন, যাতে কোনো একটির প্রভাব অন্যটিতে না পড়ে।

সারাংশ

Framework7 এ Pull-to-Refresh এবং Infinite Scroll ফিচার সহজেই কনফিগার করা যায় এবং এটি অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে। এই ফিচারগুলো ডেটা লোড এবং রিফ্রেশ করার জন্য গুরুত্বপূর্ণ। উদাহরণ এবং টিপস অনুসরণ করে আপনি সহজেই আপনার অ্যাপ্লিকেশনে এই ফিচারগুলো যুক্ত করতে পারবেন।

Framework7 টাচ-ভিত্তিক ইন্টারফেস ডিজাইন করার জন্য একটি আদর্শ ফ্রেমওয়ার্ক, যা মোবাইল ডিভাইস ও টাচস্ক্রিনে ইউজার ইন্টারঅ্যাকশন সহজ করে। Gesture Detection বলতে বোঝায় ব্যবহারকারীর টাচ ইনপুট (যেমন সোয়াইপ, ড্র্যাগ, পিঞ্চ, লং-প্রেস) শনাক্ত করে সেই অনুসারে অ্যাপ্লিকেশনে রেসপন্স করা। Framework7 ডিফল্ট টাচ ইভেন্টগুলো ব্যবহার করে Custom Gesture তৈরি করাও সম্ভব।

Gesture Detection কী?

Gesture Detection হলো ব্যবহারকারীর আঙুলের স্পর্শ, মুভমেন্ট, প্রেসার ইত্যাদি নির্ণয় করে সেগুলোকে নির্দিষ্ট Gesture হিসেবে রূপান্তর করা। উদাহরণ:

• ট্যাপ (Tap): হালকা স্পর্শ
• লং-প্রেস (Long Press/Taphold): কিছুক্ষণ স্পর্শ ধরে রাখা
• সোয়াইপ (Swipe): আড়াআড়ি বা লম্বাভাবে আঙুল সরানো
• পিঞ্চ (Pinch): দুই আঙুল একত্রে আনানো বা দূরে সরানো

Framework7 এর বিল্ট-ইন Gesture সমর্থন

Framework7 কিছু বিল্ট-ইন টাচ ইভেন্ট সমর্থন করে, যেমন:

• tap: ট্যাপ ইভেন্ট
• taphold: দীর্ঘক্ষণ ট্যাপ ধরে রাখা
• swipe: সোয়াইপ ইভেন্ট
• swipeout: লিস্ট আইটেম সোয়াইপ করা
• pull-to-refresh: স্ক্রল করে পুল ডাউন করে রিফ্রেশ করা

এছাড়া Dom7 (Framework7 এর ডম লাইব্রেরি) এর মাধ্যমে লো-লেভেল টাচ ইভেন্ট (touchstart, touchmove, touchend) ব্যবহার করে কাস্টম Gesture ডিটেক্ট করা যায়।

ট্যাপ এবং লং-প্রেস ইভেন্ট উদাহরণ

$('.my-element').on('tap', function() {
  console.log('Element tapped!');
});$('.my-element').on('taphold', function() {
  console.log('Element long pressed!');
});

উপরের উদাহরণে .my-element এ ট্যাপ বা লং-প্রেস করলে কনসোলে মেসেজ প্রদর্শিত হবে।

সোয়াইপ ইভেন্ট উদাহরণ

সোয়াইপ ইভেন্ট ডিটেক্ট করতে লো-লেভেল টাচ ইভেন্ট ব্যবহার করা যায়। নীচে একটি সাধারণ সোয়াইপ ডিটেক্টর উদাহরণ দেওয়া হলো:

var xStart = null;
var yStart = null;

$('.my-swipe-area').on('touchstart', function(e) {
  xStart = e.touches[0].clientX;
  yStart = e.touches[0].clientY;
});$('.my-swipe-area').on('touchmove', function(e) {
  if (!xStart || !yStart) return;

  var xEnd = e.touches[0].clientX;
  var yEnd = e.touches[0].clientY;

  var xDiff = xStart - xEnd;
  var yDiff = yStart - yEnd;

  if (Math.abs(xDiff) > Math.abs(yDiff)) {
    if (xDiff > 0) {
      console.log('Swiped left!');
    } else {
      console.log('Swiped right!');
    }
  } else {
    if (yDiff > 0) {
      console.log('Swiped up!');
    } else {
      console.log('Swiped down!');
    }
  }

  // Gesture ডিটেক্ট করার পর ভ্যারিয়েবল রিসেট করা
  xStart = null;
  yStart = null;
});

এখানে touchstart ইভেন্টে ইনিশিয়াল টাচ পজিশন সংরক্ষণ করে touchmove এ শেষ পজিশনের সাথে তুলনা করা হয়। এর ভিত্তিতে সোয়াইপ ডিরেকশন নির্ণয় করা হয়।

Custom Gesture তৈরি

Custom Gesture তৈরি করতে আপনাকে লো-লেভেল টাচ ইভেন্ট (touchstart, touchmove, touchend) ব্যবহার করে জেশ্চার যুক্তি (logic) লিখতে হবে। উদাহরণস্বরূপ, পিঞ্চ জেশ্চার ডিটেক্ট করতে আপনাকে একাধিক আঙুলের পজিশন নির্ণয় করে দূরত্বের পরিবর্তন হিসাব করতে হবে।

ধাপগুলো:

1. touchstart ইভেন্টে আঙুলের প্রাথমিক পজিশন (finger positions) সংরক্ষণ।
2. touchmove এ আঙুলগুলোর বর্তমান পজিশন মাপা, এবং প্রাথমিক পজিশনের সাথে তুলনা করা।
3. দূরত্ব বা কোণ নির্ণয় করে নির্দিষ্ট নিয়ম অনুযায়ী Gesture শনাক্ত করা (যেমন যদি দুই আঙুলের দূরত্ব কমছে মানে পিঞ্চ ইন, দূরত্ব বাড়ছে মানে পিঞ্চ আউট)।
4. Gesture ডিটেক্ট হলে উপযোগী অ্যাকশন নেওয়া।

Gesture Detection এর সুবিধা

1. উন্নত ইউজার এক্সপেরিয়েন্স: Gesture ব্যবহারের মাধ্যমে ব্যবহারকারী অ্যাপকে আরও স্বাভাবিকভাবে ব্যবহার করতে পারে।
2. কাস্টম জেশ্চার: আপনার অ্যাপের প্রয়োজন অনুযায়ী ইউনিক Gesture তৈরি করা যায়।
3. মোবাইল-ফ্রেন্ডলি ইন্টারঅ্যাকশন: সোয়াইপ, পিঞ্চ, লং-প্রেস ইত্যাদি ব্যবহার করে মোবাইল এবং ট্যাবলেটের জন্য অ্যানিমেশন এবং নেভিগেশন সহজ হয়।

Framework7 টাচ ইভেন্ট এবং Dom7 API ব্যবহার করে Gesture Detection অত্যন্ত সহজ করে তোলে। বিল্ট-ইন ইভেন্টগুলি ব্যবহারের পাশাপাশি কাস্টম Gesture যুক্ত করে আপনার অ্যাপকে আরও ইন্টারঅ্যাকটিভ ও ব্যবহারবান্ধব করে তুলতে পারবেন।