Dropdowns এবং Modals এর জন্য JavaScript ব্যবহার

Bulma ফ্রেমওয়ার্ক CSS-এ স্টাইলিং প্রদান করে, কিন্তু ইন্টারঅ্যাকটিভ উপাদানগুলো যেমন Dropdowns এবং Modals ব্যবহারের জন্য JavaScript প্রয়োজন। Bulma নিজে JavaScript প্রদান না করলেও, এগুলোকে কার্যকরী করতে আপনি সহজ JavaScript কোড ব্যবহার করতে পারেন।

এখানে আমরা Dropdowns এবং Modals কম্পোনেন্টের জন্য JavaScript ব্যবহারের বিস্তারিত আলোচনা করব।

১. Bulma এর Dropdown তৈরি করা

Dropdowns ব্যবহারকারীর জন্য একটি তালিকা প্রদান করে, যেটি সাধারণত একটি বাটন বা লিঙ্কে ক্লিক করলে প্রদর্শিত হয়। এই কম্পোনেন্টটি সাধারাণত মেনু বা অপশন বেছে নেওয়ার জন্য ব্যবহৃত হয়।

Basic Dropdown তৈরি করা

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>

  <div id="dropdown-menu" class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Action
      </a>
      <a href="#" class="dropdown-item">
        Another action
      </a>
      <a href="#" class="dropdown-item">
        Something else here
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        Separated link
      </a>
    </div>
  </div>
</div>

এখানে:

• dropdown-trigger: এই ক্লাসের মধ্যে বাটন বা ট্যাগ থাকে, যা ড্রপডাউন মেনুকে ট্রিগার করে।
• dropdown-menu: এটি ড্রপডাউন মেনুর কনটেইনার যা লুকানো থাকে এবং ব্যবহারকারী ক্লিক করলে এটি দৃশ্যমান হয়।

Dropdown এর জন্য JavaScript ব্যবহার করা

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const dropdowns = document.querySelectorAll('.dropdown');
    
    dropdowns.forEach(dropdown => {
      const trigger = dropdown.querySelector('.dropdown-trigger');
      const menu = dropdown.querySelector('.dropdown-menu');
      
      trigger.addEventListener('click', () => {
        menu.classList.toggle('is-active');
      });
      
      // Close dropdown if clicked outside
      document.addEventListener('click', (event) => {
        if (!dropdown.contains(event.target)) {
          menu.classList.remove('is-active');
        }
      });
    });
  });
</script>

এখানে:

• menu.classList.toggle('is-active'): এই কোডটি ড্রপডাউন মেনুকে টগল করতে ব্যবহৃত হয়, অর্থাৎ এটি খোলা থাকলে বন্ধ এবং বন্ধ থাকলে খোলা হয়।
• document.addEventListener('click'): যদি ড্রপডাউন বাহিরে ক্লিক করা হয়, তবে এটি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যাবে।

২. Bulma এর Modal তৈরি করা

Modals সাধারণত পপ-আপ উইন্ডো হিসেবে ব্যবহৃত হয়, যেখানে একটি নির্দিষ্ট কন্টেন্ট (যেমন একটি ফর্ম, তথ্য বা নোটিফিকেশন) ব্যবহারকারীকে প্রদর্শিত হয়। Modals সাধারণত গুরুত্বপূর্ণ বার্তা বা একশনকে অগ্রাধিকার দিতে ব্যবহৃত হয়।

Basic Modal তৈরি করা

<button class="button is-primary" id="open-modal">Open Modal</button>

<div id="modal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <h1 class="title">Hello, World!</h1>
      <p>This is a simple modal</p>
      <button class="button is-danger" id="close-modal">Close</button>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

এখানে:

• modal: মডাল উইন্ডোর প্রধান কনটেইনার।
• modal-background: মডালের ব্যাকগ্রাউন্ড যা সাধারণত অস্বচ্ছ থাকে।
• modal-content: মডাল উইন্ডোর কন্টেন্ট।
• modal-close: মডাল উইন্ডো বন্ধ করার জন্য ক্লোজ বাটন।

Modal এর জন্য JavaScript ব্যবহার করা

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Get the modal and buttons
    const openModalButton = document.getElementById('open-modal');
    const modal = document.getElementById('modal');
    const closeModalButton = document.getElementById('close-modal');
    
    // Open the modal
    openModalButton.addEventListener('click', () => {
      modal.classList.add('is-active');
    });
    
    // Close the modal
    closeModalButton.addEventListener('click', () => {
      modal.classList.remove('is-active');
    });
    
    // Close the modal when clicking on the background
    modal.querySelector('.modal-background').addEventListener('click', () => {
      modal.classList.remove('is-active');
    });
    
    // Close the modal when clicking the close button
    modal.querySelector('.modal-close').addEventListener('click', () => {
      modal.classList.remove('is-active');
    });
  });
</script>

এখানে:

• modal.classList.add('is-active'): মডালকে সক্রিয় (দৃশ্যমান) করে তোলে।
• modal.classList.remove('is-active'): মডালকে নিষ্ক্রিয় (লুকানো) করে দেয়।
• modal-background এবং modal-close তে ক্লিক করলে মডাল বন্ধ হবে।

৩. Dropdowns এবং Modals এর অ্যাক্সেসিবিলিটি

Bulma এর Dropdowns এবং Modals তে অ্যাক্সেসিবিলিটি নিশ্চিত করতে, আপনি aria-label এবং aria-expanded প্রোপার্টি ব্যবহার করতে পারেন। যেমন:

Dropdown এর জন্য অ্যাক্সেসিবিলিটি

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-expanded="false">
      <span>Dropdown</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>

  <div id="dropdown-menu" class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Action
      </a>
      <a href="#" class="dropdown-item">
        Another action
      </a>
      <a href="#" class="dropdown-item">
        Something else here
      </a>
    </div>
  </div>
</div>

JavaScript-এ aria-expanded প্রোপার্টি টগল করতে পারেন:

trigger.addEventListener('click', () => {
  const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
  trigger.setAttribute('aria-expanded', !isExpanded);
  menu.classList.toggle('is-active');
});

Modal এর জন্য অ্যাক্সেসিবিলিটি

<div id="modal" class="modal" aria-hidden="true">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <h1 class="title">Modal Title</h1>
      <p>This is a modal window with accessible features.</p>
      <button class="button" id="close-modal">Close</button>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

JavaScript-এ মডাল খোলার সময় aria-hidden প্রোপার্টি পরিবর্তন করুন:

openModalButton.addEventListener('click', () => {
  modal.classList.add('is-active');
  modal.setAttribute('aria-hidden', 'false');
});

closeModalButton.addEventListener('click', () => {
  modal.classList.remove('is-active');
  modal.setAttribute('aria-hidden', 'true');
});

এখানে, aria-hidden="true" প্রোপার্টি মডাল বন্ধ থাকলে সেট করা হয় এবং মডাল খোলার সময় false করা হয়।

সারাংশ

Dropdowns এবং Modals কম্পোনেন্টগুলি Bulma ফ্রেমওয়ার্কে অত্যন্ত কার্যকরী এবং সহজে ব্যবহৃত হয়। তবে এই উপাদানগুলোকে ইন্টারঅ্যাকটিভ করার জন্য JavaScript প্রয়োজন। Dropdowns এর জন্য ক্লিক ইভেন্টের মাধ্যমে মেনু টগল করা যায়, এবং Modals এর জন্য ব্যবহারকারীকে পপ-আপ উইন্ডো দেখানো হয়, যা ক্লোজ বাটন বা ব্যাকগ্রাউন্ডে ক্লিক করলে বন্ধ করা হয়। এগুলো ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে এবং সহজেই কাস্টমাইজ করা যায়।