Günümüzde modern web projelerinde kullanıcı etkileşimini artırmak için popover, tooltip, modal gibi UI bileşenlerine sıkça rastlıyoruz. Bu blog yazısında, jQuery ile yazılmış ve mobil uyumluluk düşünülerek tasarlanmış bir popover bileşenini inceleyeceğiz. Kod, HTML, CSS ve JavaScript’in birlikte kullanıldığı bir popover’ın nasıl tasarlandığını ve mobil cihazlara uygun şekilde nasıl optimize edildiğini detaylandıracak.

Popover Nedir?

Popover, genellikle butona veya bağlantıya tıklanarak açılan, ek bilgiler veya işlemler sunan küçük bir pencere bileşenidir. Popover’lar, kullanıcıyı sayfadan uzaklaştırmadan ek bilgi verebilir veya hızlı işlemler yapılmasına olanak tanır.

Bu yazıda yer alan örnekte, bir popover butona tıklandığında görüntüleniyor. Aynı zamanda, tarayıcı popover özelliğini desteklemiyorsa jQuery ile yazılmış fallback (yedek) bir çözüm devreye giriyor. Bu sayede, tarayıcı desteklemese dahi popover’lar kullanıcı deneyiminde bir eksiklik yaratmadan kullanılabiliyor.

HTML Yapısı

Kodumuzda popover, butona tıklanarak tetiklenen bir bileşen olarak tanımlanmış. İşte HTML kısmı:

<button popovertarget="my-popover" class="popover-button">Open Popover</button>
 
<div popover id="my-popover" class="popover-container mobilePopoverBottomSheet">
  <div class="popoverTitle">
    <span>Popup Title</span>
    <button class="closePopover">
      <i class="close-icon"></i>
    </button>
  </div>
  <div class="popoverContent">
    <span>Greetings, one and all!</span>
  </div>
</div>

Bu yapı iki ana bileşenden oluşuyor:

• Button: Popover'ın açılmasını sağlayan buton. popovertarget özelliği ile hangi popover'ın açılacağını belirtiyor.
• Popover Container: Popover'ın içeriğini barındıran konteyner. popover id’sine sahip olan bu bileşen, mobil cihazlar için de optimize edilmiştir.

CSS ile Popover Tasarımı

CSS, popover’ın görünümünü ve animasyonlarını belirler. Burada dikkat edilmesi gereken bazı noktalar var:

• Responsive Tasarım: @media sorgusu ile mobil cihazlar için özel bir tasarım yapılmış. Ekran genişliği 767px altına düştüğünde popover, tam ekran genişliğine ayarlanıyor ve aşağıdan yukarıya doğru bir animasyonla açılıyor.
• Animasyonlar: keyframes kullanılarak popover’ın açılış animasyonu tasarlanmış. Büyük ekranlarda popover, opaklığını artırarak ve ölçeklendirerek açılıyor. Mobilde ise dikey bir hareketle yukarı kayarak kullanıcıya sunuluyor.

@keyframes popOver {
    from {
      opacity: 0;
      scale: 0.8;
    }
}
 
@media(max-width: 767px) {
  @keyframes mobilePopOver {
      from {
        opacity: 0;
        transform: translateY(100%);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
  }
}

JavaScript ile Popover İşlevselliği

JavaScript kodunda iki temel işlev bulunuyor:

• Tarayıcı Uyumluluğu: Modern tarayıcılar popover API’sini desteklemiyorsa, jQuery ile yazılmış yedek bir popover oluşturuluyor. HTMLElement.prototype.hasOwnProperty("popover") ile tarayıcıda popover özelliğinin olup olmadığı kontrol ediliyor.
• Yedek Popover Çözümü: Eğer tarayıcı popover’ı desteklemiyorsa, fallback çözümü devreye giriyor. Popover gizleniyor ve popover-fallback sınıfı eklenerek fixed konumda ve merkezi yerleşimde bir pencere sunuluyor. Ayrıca, açıldığında arka plana bir karartma (backdrop) ekleniyor. Butona tıklanarak popover açılabiliyor ve kullanıcı karartmaya tıkladığında popover kapanıyor.

if(!HTMLElement.prototype.hasOwnProperty("popover")) {
  popover.hide();
  popover.addClass('popover-fallback');
  $('body').append('<div class="backdrop" style="display:none;"></div>')
 
  $(document).on('click', '[popovertarget]', function() {
    var popovertarget = $(this).attr('popovertarget');
    $('[id="'+popovertarget+'"], .backdrop').show();
  });
 
  $(document).on('click', '.backdrop', function() {
    $('.popover-fallback, .backdrop').hide();
  });
}

Sonuç

Popover’lar, kullanıcı deneyimini geliştiren ve ekran alanından tasarruf sağlayan önemli bir UI bileşenidir. Bu yazıda, jQuery ve CSS ile tarayıcı uyumluluğu gözetilerek oluşturulmuş bir popover örneğini inceledik. Özellikle mobil cihazlar için optimize edilen bu tasarım, hem masaüstü hem de mobil cihazlarda sorunsuz bir deneyim sunmayı amaçlıyor.

Popover ve benzeri bileşenleri kullanırken hem modern tarayıcıları hem de eski tarayıcıları desteklemek büyük önem taşır. Bu yazıdaki fallback çözümü sayesinde, tarayıcı desteği olmayan cihazlar için de kullanıcı dostu bir deneyim sağlanmıştır.

Daha fazla proje ve tasarım için bu yöntemi kullanarak sayfanızda etkileşimli içerikler sunabilir ve kullanıcılarınıza daha iyi bir deneyim yaşatabilirsiniz.

Konu ile alakalı kod örneği için bu URL'e gidebilirsiniz.