Jquery ile Blogger Üzerinde Facebook Benzeri Odaklanma Uygulaması - Focusing Application like on Facebook with Jquery on Blogger

Bu yazıda yenice facebook'ta karşılaştığım odaklanma uygulamasını blog sayfama nasıl uyguladığımı anlatacağım. Facebook üzerinde durum güncellemesi amacıyla ilgili yazı alanına tıkladığınızda yorum yazılacak yerin dışında kalan kısımların karardığını göreceksiniz. Bu uygulamanın odaklanmada pozitif etkisi olduğu, bu yüzden de bir blog sitesi için de gayet yararlı olacağını düşündüğüm için uygulamayı gerçekleştirme kararı aldım. Öncelikle bir CSS sınıfı tanımlaması yapmamız gerekiyor:

.onFocusMeContainer
{
     background-color:#000000;
     opacity:0.7;
     z-index:12;
     width:100%;
     height:100%;
     position:fixed;  
     top:0;
     left:0;
     display:none;
}

Bu uygulamada bize lazım olan en öncekli element siyah, saydam ve ekranı kaplayan siyah bir elementtir. Bu element bütün ekranı kaplayacak ve odaklama yapacağımız ögenin arkasında, diğer bütün sayfanın üzerinde yer alacaktır. Tabi kırmızı uçan kartalımızın üzerine siyah bir örtü örtmek istemeyeceğimizden dolayı kartalı taşıyan ögenin "z-index" CSS değerini artırdım. "onFocusMeContainer" CSS sınıfında "opacity" değeri ile elemente saydamlık kazandırdık. Elementin "display" özelliğini kullanarak elementi görünmez yapıp, bütün ekranı kaplaması ve pencereyi kaydırdığımız zaman kaymaması için "position" özelliğini "fixed" olarak belirledik. Elementin "z-index" değerini blog için uygun bir değer seçmemiz gerektiği için "12" olarak belirledik, çünkü sitemizin diğer ögelerinin "z-index" değeri 12'den küçüktür. Bu CSS sınıfını oluşturduktan sonra bu sınıfı içeren bir "div" elementini  "body" içine aşağıdaki kod ile ekliyoruz.

<div class="onFocusMeContainer"></div>

Bir sonraki aşamada gerekli fonksiyonaliteyi sağlamak amacıyla bazı javascript kodları tanımlamız gerekiyor.

$(".post-outer").click(function (event) {

   if (lastClicked == null) {

          if (!$(event.target).is("a")) {

               lastClicked = $(event.target);

               while (!$(lastClicked).hasClass("post-outer")) {

                   lastClicked = $(lastClicked).parent();
               }

               $(lastClicked).css("position", "relative");
               $(lastClicked).css("z-index", 5000);
               $(".onFocusMeContainer").show("fast");
          }
    } 
});

$(".onFocusMeContainer").click(function (event) {
   
   $(lastClicked).css("position", "relative");
   $(lastClicked).css("z-index", 0);
   $(".onFocusMeContainer").hide("fast");
   lastClicked = null;
});

Blogger'da yazdığımız makaleler "post-outer" sınıfını içeren bir taşıyıcı kontrol içinde sunulduğu için bu ögenin "click" olayını tanımlamamız gerekiyor. Burada bir döngü aralığıyla "post-outer" sınıfını içeren taşıyıcıya ulaşana kadar "parent" fonksiyonu aracılığıyla DOM üzerine yukarı doğru çıkıyoruz. Bunun sebebi daha önceki bir yazımda bahsettiğim "Event Bubbling" yani olayın yukarı doğru iletilmesi sebebiyledir. Kısaca olayı özetlemek gerekirse, bir taşıyıcı içindeki bir kontrole tıklandığında tıklama olayı en yukarıdaki taşıyıcı elemente kadar iletilmektedir.  Taşıyıcı elementi bulduktan sonra "z-index" özelliğinin çalışması için bu elementin "position" özelliğini "relative" yapmamız gerekiyor. Daha sonra "z-index" değerini büyük bir sayı yaparak elementin yukarıda kalmasını sağlıyoruz. Son aşamada siyah saydam kontrolümüzü görünür hale getiriyoruz. Link ("a") elementlerine tıklandığında ilgili özelliğimiz çalışmaması için "is" fonksiyonunu kullanarak üzerine tıklanan elementin bir "a" elementi olup olmadığını da kontrol etmemiz gerekiyor.

Siyah saydam kontrolümüzün tıklama olayı üzerinde tanımlı fonksiyon aracılığıylada yukarıda yaptığımız düzenlemeleri geri alıyoruz. "lastClicked" değişkeni global olarak tanımlanmıştır ve en son odaklanmış elementi göstermektedir.

Uygulama blog üzerinde şuan aktif olduğu için yazı üzerine tıklayarak uygulamayı deneyimleyebilirsiniz.