Facebook
From aa, 3 Years ago, written in JavaScript.
This paste is a reply to module js from aa - go back
Embed
Viewing differences between module js and Re: module js
$(function() { //jquery ' de adsız fonksiyon sayfa açılınca çalışan fonksiyondur
// özellik-filitreleme'ye ait kodlar
    // tekrarlanacak kayıtları kaldrımak
    var tsLen = $(".tkrrSil").length; //tekrarları silmek için tanımlanan classın uzunluğunu alıyoruz
    var tkrKntrl =["marj"]; //buttondaki verileri bu dizeye atıyoruz "marj" elamnınıda ilk döngünde şaşırmasın die ekledim
    for (var a = 0; a < tsLen ; a++) { //tslene göre for döngüsünü kuruyoruz
        var value = $(".tkrrSil").eq(a).html();//buttonun içindeki html değerini alıyoruz
        value =  $.trim(value.toUpperCase()); // boşlukları silip bütün harfleri küçültüyoruz trim boşlukları siler toUpperCase ise harfleri küçültür
        for (var i = 0; i              if (tkrKntrl[i] == value){//eğer buttonun içindeki değer tkrkntrl dizesinin içinde var ise
                $(".tkrrSil").eq(a).hide();//bu buttonu  ilk for döngüsünün index ine göre sakla eq: jquery de clasın indexini alıyor
            }
        }
        tkrKntrl.push(value); // value değerini (dikkat ilk for döngüsündeyiz) tekrar kontrol için dizeye aktarıyoruz

    }//ÖZET: yani tekraralanan buttonları kaldırmak için dize kurup o dizeye verileri döngüyle atıyoruz ve alt döngüyle gelen buttonun değeri önceden dizeye atılmışmı die kontrol ediyoruz

    yorumcevir();//özellik filitrelemeye dahil değil yorumlar sayfası yüklenirken bu fonksiyonu kullansın
});

$( ".card" ).hover(function() { // hover : emlak kardlarının üzerine gelince
    $( this ).toggleClass( "activeCard" );// activeCard classını(classın özellikleri custom.css de belirlenmiş) toggleClass: yoksa ekle varsa kaldır
});
$( ".e-card" ).click(function() { // a taglarının içersinde div olması uygun değildir bu yüzden cardlara e-card classını tanımladık carda tıklıyınca
    var link = $( this ).attr("lnk");// card üstündeki lnk attribute unun değerini al
    window.location.href=link;  // tıklandığında linke yönlendiriyor
});

var fltr = []; //filitreler için bir dize oluşturuyoruz
var fiyat=[]; // fiyat filitrelemesi için ayrı bir dize oluşturuyoruz
$(".btnFltre").click(function(){ //herhangi bir filitre buttonuna tıklandığında
    var val = $(this).html(); // onun html değerini al

    var clval = $(this).attr("clval"); // buttona oluşturduğumuz clval attribute değerini al clval: emlakların veri tabanında bulunan özelliklerin ayrılması için atanan bir attributr
    // mesela kiralık-satılık durumu veritabanında 1 ve 0 şeklinde kayıtlar vardır bunu emlak kardın classına atadık
    //filtre de kiralık butonuna tıklandığındda kiralık butonun da bulunan clval değeri ile emlak kardlarının claslarında bulunan değer eşleşir ise bu kardı gösterior
    for (var j = 0; j < fltr.length ; j++) { // for döngüsünü fltr dizisinin uzunluğuna göre kuruyoruz
        if (fltr[j] == clval){ // eğer fltr dzesinde aynı değerden var ise
            return; //kod okumayı bırak
        }
    }
    fltr.push(clval); //fltr dizesine clvalı ekle

    $( "#f-etiket" ).append(' '+ val +' ' );
    // ilk başta ldığımız button html ını(yani val değişkeni) ve silince tekrar işlem yapmak için clval değişkenini etikete yerleştiriyoruz

    filter(fltr); // kendi oluşturduğumuz bir fonksiyon birden fazla yerde kullanacağımız için fonksiyon olarak kullandık ve paremetre olarak da fltr dizisini gönderdik
    // filter fonksiyonu 286. satırda
    goToByScroll("scrollDiv"); //293.satırda
}); //ÖZET: filtre butonlarına tıklanınca istenen emlakları göstermek için emlakları ayırmaya yarıyacak olan classları diziye atıp o diziyi döndürüp dizide bulunan bütün
    // emlakların gösterilmesine olanak sağlıyoruz yani birden fazla filitreleme yapabiliyoruz
$(".btnSonİlk").click(function(){ //emlakların sıralamasını baştan sona sondan başa alan buttondur
    $('#emlaklar > .emlak-cards').each(function() { //emlak kardlarını kapsıyan div i ve hemen altındaki çevirilecek divlerin classını yazıyoruz
        $(this).prependTo(this.parentNode);
    });
    //etiket işlemleri;
    var val = $(this).html();
    var clval = "btnSonİlk";
    $( "#f-etiket-siralama" ).html(' '+ val +' ' );

    if (val != "İlk Eklenen"){ //else if gibi eğer son eklenen ise ilk eklenen butonuna çevir ilk eklenen ise son eklenene çevir
        $(this).html("İlk Eklenen");
        return;
    }
    $(this).html("En Son Eklenen");
    goToByScroll("scrollDiv");
});//ÖZET: kısacası en altaklerini en üste çıkarıyor.

$(".btnEnAz").click(function(){ // gösterilecek en az fiyatını belirleyen button tıklandığında
    var val = $(this).attr("value"); // üzerinde bulunan value attribute un değerini al yani paranın value sini al
    if (fiyat[1] < val && val !== "0" ) { // kontrol; fiyat dizisinin ilk indexi(0) en az için ikinci indexi(1) en çok için kullanılıcak
        alert("En Az En Çok Dan Büyük Olamaz");// value si sıfır değilse demişiz sebebi aşağılara gidildikce anlaşılacak ama
        // spoiler vermek gerekirse btnEsil yani seçilmiş fiyat filtreleri kaldırılmak istenirse yani en az ve en çok belirlediniz
        // en çoku kaldırdığınızda jquery ile tekrar en az butonuna basıyoruz 160. satır ve 170. satırdaki gibi ve en cok sıfırlanıyor sıfır olunca koşula takılmaması
        // için öyle bişi yaptım
        return;
    }
    if (val !== "0"){
        fiyat[0] = parseInt(val); //intgere çeviriyoruz çünkü htmldeki attributte string olarak değerler kaydedilmiş
        var clval = "enaz"; //clvalı en az olarak atıyıp etiketimizi html ile basıyoruz
        $( "#fiyat-enaz" ).html(' '+ val +' ' );
    } // yukarılarda gördğümüz append ile html in farkı html komple herşeyi siler ve belirlediğmiz tagları oraya ekler
      // append ise orda bulunan html kodunu silmez belirlediğimiz html kodunu oraya ekler
    for (var i = 0; i < $(".emlak-cards").length ; i++) {
        var Cardfiyat = $(".emlak-cards").eq(i).attr("fiyat");//fiyatımızı değişkene alıyoruz
        Cardfiyat = parseInt(Cardfiyat); //integere çeviriyoruz
        if (Cardfiyat >= fiyat[0] ){ //fiyat[0] en az fiyattan büyük eşittir ise
            if ($(".emlak-cards").eq(i).hasClass("gstrl") == true){//eğer gstrl klası var ise
                $(".emlak-cards").eq(i).show();//göster
            }//bunun manası kiralık, eklenme zamanı, adres kriterlerinde seçtiğimiz kriterler var ise onlar arasında bi filtreleme yap
        }
        if (Cardfiyat <= fiyat[1] ){
            if ($(".emlak-cards").eq(i).hasClass("gstrl")){ //en cok fiyata görede  ondan küçükleri göster
                $(".emlak-cards").eq(i).show();
            }
        }
        if (Cardfiyat < fiyat[0] ){ //en az fiyatın aşağısında ne varsa gösterme
            $(".emlak-cards").eq(i).hide();
        }
        if (Cardfiyat > fiyat[1] ){//en çok fiyatın üstünde ne varsa gösterme
            $(".emlak-cards").eq(i).hide();
        }
    }
});//ÖZET: en az fiyata göre ve  zaten filitrelemiş cardları tekrar filtrelio vede en çok seçilmiş ise onuda unutmuyor.
$(".btnEnCok").click(function(){
    var val = $(this).attr("value");
    if (fiyat[0] > val && val !== "0"  ) {
        alert("En Çok En Az Dan Küçük Olamaz");
        return;
    }
    if (val !== "0"){
        fiyat[1] = parseInt(val);
        var clval = "encok";
        $( "#fiyat-encok" ).html(' '+ val +' ' );
    }// buraya kadar en az ile aynı. aslında iki buttonu birleştirmek lazım fakat sanki böyle daha sağlıklı

    for (var i = 0; i < $(".emlak-cards").length ; i++) {
        var Cardfiyat = $(".emlak-cards").eq(i).attr("fiyat");
        Cardfiyat = parseInt(Cardfiyat)
        if (Cardfiyat >= fiyat[0] ){ // enaz fiyattan büyük eşitse
            if ($(".emlak-cards").eq(i).hasClass("gstrl")){//gstrl de varsa
                $(".emlak-cards").eq(i).show();// onu bize göster
            }
        }
        if (Cardfiyat <= fiyat[1] ){// hatırlat bi ara *orno sitesi yazalım
            if ($(".emlak-cards").eq(i).hasClass("gstrl")){ // encok fiyattan küçük eşitse
                $(".emlak-cards").eq(i).show();// göster
            }
        }
        if (Cardfiyat < fiyat[0] ){//en az fiyatın aşağısında ne varsa gösterme
            $(".emlak-cards").eq(i).hide();
        }
        if (Cardfiyat > fiyat[1] ){//en çok fiyatın üstünde ne varsa gösterme
            $(".emlak-cards").eq(i).hide();
        }
    }
    goToByScroll("scrollDiv"); // bunuda en aza koymadım çünkü adam ilk en azı seçip hadi en çokuda seçeyim derse  die
});//ÖZET: en çok fiyata göre ve zaten filitrelemiş cardları tekrar filtrelio vede en az seçilmiş ise onuda unutmuyor
$("#btnTmz").click(function(){// en sağdaki temizle butonudur bütün seçimleri iptal eder
    $(".emlak-cards").show(); // herşeyi göster
    $( "#fiyat-enaz" ).html(' ');//fiyat enaz etiktinin bulunduğu html i boşalt
    $( "#fiyat-encok" ).html(' ' );//fiyat encok etiktinin bulunduğu html i boşalt
    $( "#f-etiket-siralama" ).html(' ');//sıralama etiktinin bulunduğu html i boşalt
    $( "#f-etiket" ).html(' ' );// diğer etiketlerin bulunduğu htmli boşalt
    fltr.splice(0, fltr.length);// fltr dizisindeki elamanları uçurmaya indexinden başla taki fltr ın uzunluğuna kadar
    fiyat.splice(0, fiyat.length);//fiyat dizisindeki elamanları uçurmaya indexinden başla taki fltr ın uzunluğuna kadar
});
$(document).on("click",".btnEsil",function(){ //  button etiket sil filtre seçimlerini kaldırmaya yarıyor
    var clval = $(this).attr("clval"); //clval atributun değerini tut. clval attribute unu sadece filtre buttonlarına koymadık etiketlerede koyduk
    $(this).closest('span').remove(); // this: yanı son olayı tetiklenen(burda son tıklanılan button). etiketi sil
     // en cok etiketini sildiğinde bu blok çalışır
    if (clval =="encok"){ //  eğer etiketteki clval değeri encok ise
        if (fiyat.length < 2){ // eğer sadece enaz fiyat belirlenmişse kontrol amaçlı bir if gereksiz de sayılır
            fiyat.splice(0, fiyat.length); //fiyat dizisini kaldır
            filter(fltr);//filter fonksiyonunu tekrar başlat
            return;//kod işlemeyi birak
        }
        fiyat.splice(1, 1);//fiyat dizesinde ikinci yani encok içn kullanılan bölümü sil
        $(".btnEnAz").eq(0).trigger("click");// ve tekrar en az fiyata göre cardları göstermek için btnenaz 'a tıkla
        return;//kod işlemeyi birak
    }// en az etiketini sildiğinde bu blok çalışır
    if (clval =="enaz"){
        if (fiyat.length < 2){
            fiyat.splice(0, fiyat.length);
            filter(fltr);
            return;
        }
        fiyat.splice(0, 1);
        $(".btnEnCok").eq(0).trigger("click");
        return;
    }//en cok ile aynısı
// en son eklenan veya ilk eklenen etiketini sildiğinde bu blok çalışır
    if (clval == "btnSonİlk"){
        $(".btnSonİlk").trigger("click");//tekrar tersine çevirmek için btnSonİlke tıkla
        return;
    }// en sonda sadece 1 etiket kalmışsa bu blok çalışır
    if (fltr.length < 2){ // eğer fltr dizesinde 2den küçük elaman var ise yani 1 class var ise
        $(".emlak-cards").show(); //herşeyi göster
        if (fiyat.length > 1){ //fiyat dizisi dolu ise
            $(".btnEnAz").eq(0).trigger("click"); //tekrar şekillendirmek için enaz
            $(".btnEnCok").eq(0).trigger("click");//ve encok tuşlarına tıkla
        }
        fltr.splice(0, 1);//zaten 1 eleman vardı onuda silip boşaltalım dizeyi
        return;
    }
// burası ise yani sadece 1 etiketi silmek istediğinizde bu blog çalışır
    for (var j = 0; j < fltr.length ; j++) { //  for döngüsünü kurup
        if (fltr[j] == clval){  //fltr içindeki ve silmek istediğiniz etiketi eşleştirp
            fltr.splice(j, 1);// onun indexinde bulunan elamanı siliyoruz
        }
    }
    filter(fltr);//ve tekrardan kartları filitreliyoruz
});//ÖZET: filitrelediğmiz seçenekleri kaldırdığımızda gerçekleşen olaylar burası önemli üste yazılanları okusan çok iyi olur

$("#txtAra").keyup(function() {// tuşa basılıp parmak kaldırıldığı anda gerçekleşen olay
    var deger = $(this).val().toLowerCase(); //degerin bütün harflerini küçült
    $(".emlak-cards").filter(function() { //emlak-cards yazan yere hangi divi koyarsan koy içindekileri gelen değere göre toggle gösterir veya saklar
        $(this).toggle($(this).text().toLowerCase().indexOf(deger) > -1);
    });
});
//iletisim-ajax
$(document).on("click",".btnİlGon",function(){ // veri alaçağımız inputların claslarına isim verdikten sonra class olarak seçtik başka yerlerde de kullanalım die
    var ad = $('.txtİlAd').val();//değerleri alıyoruz .val() ile input için val kullanılır bide herhangi bir div in içinde bulunan
    var mail = $('.txtİlMail').val();//html taglarını siler öyle değerini alır
    var  mesaj = $('.txtİleti').val();
    if (ad == "" || mail == "" || mesaj == "" )//boşsa geri dön
        return;
    $.ajax({ // ajax post işlemi burda başlıyor
        type: "POST", // type post olarak belirliyoruz
        url: "iletipost.ajax.php",//nereye post edilecek
        data: {name:ad, email:mail, message:mesaj}, //neler post edilecek // bide dataType die bi özeliğimizde var fakat biz sadece standart değişken post edicez ondan yazmıyoruz dataType
        success: function(x){//eğer ajax post işlemi başarıya ulaşırsa neler yapılsın //x iletipost.ajax.php den gelecek
            if (x == "yes"){ //yes gelirse
                $("#iletisonuc").fadeIn(200).addClass("alert-success").html(""); //200 salisde  alert-success clasını ata ve içini boşalt
                $("#iletisonuc").html('Başarılı! Mesajın başarıyla gönderildi.');//içine mesajımızı yaz
            }//fadein animasyondur 200 değerini 5000 yaparsan anlarsın ne işe yaradığını
            if (x == "no"){// no gelirse
                $("#iletisonuc").fadeIn(200).addClass("alert-danger").html("");//hata mesajını verecek
                $("#iletisonuc").html('Hata! Mesajınız iletilemedi!');
            }
        }
    });
});
// yorumlar-ajax
$(document).on("click","#btnYorGonder",function(){ // yorum gönder butonuna tıklandığında
    var  yorum = $('#txtYorum').val(); //yorumu al
    var  eid = $(this).attr("data-eid");//butonun üstündeki data-eid attributundan emlak id sini al
    var  kid = $(this).attr("data-kid");//butonun üstündeki data-kid attributundan kullanici id sini al


    if (yorum == "" ){ //yorum boş ise uyarı ver
        $("#yorumSonuc").html("Yorum Giriniz");
        $("#yorumSonuc").removeClass();// bütün class ları sil
        $("#yorumSonuc").addClass("alert alert-danger"); //bu classı ekle
        return;
    }
    $.ajax({
        type: "POST", // ajax type post olarak belirliyoruz
        url: "yorumpost.ajax.php", //nereye post edilecek onu yazıyoruz
        data: {yorum:yorum, emlakid:eid, uyeid: kid}, //post edilecek datalar
        success: function(x){//x i yorumpost.ajax.php den alıcaz
            if (x == "yes"){ //yes gelirse
                $("#yorumSonuc").html("Yorum Eklendi"); //htmline bunu ekle
                $("#yorumSonuc").removeClass();//bütün classları sil eğer .removeClass("herhangibirclass") yazarsan sadece o class silinir
                $("#yorumSonuc").addClass("alert alert-success");//bu classı ekle "alert alert-success" bootstrapta kayıtlıdır
                $('#txtYorum').val("");//yorum inputunu boşalt
                $.yorumGetir(eid);//yorumları günceleyecek fonksiyondur 276.satırda
            }
            if (x == "no"){// no gelirse uyarı mesajını ver
                $("#yorumSonuc").html("Yorum Eklenemedi");
                $("#yorumSonuc").removeClass();
                $("#yorumSonuc").addClass("alert alert-danger");
            }
        }
    });
});
$(document).on('click', '.btnYorumSil', function(){//yorum sil buttonuna tıklandığında
    var yId=$(this).attr("data-id");// buttonun üzerinde bulunan yorum id sini al
    var eid = $("#btnYorGonder").attr("data-eid");//btnyorumgönder in üzerinde bulunan emlak idsini al
    $.yorumSil(yId,eid); //yorum sil fonksiyonun parametrelerine gönder
});
$.yorumSil=function(yId,eid){//  id parametreli "$.degisken" jquerydeki değişken belirlemedir yani var degisken yerine $. koyuyoruz
    $.ajax({//ve isimsiz bir fonksiyonu $.yorumSil değişkenine aktarıyoruz //ajax metodumuzu kuruyoruz
        url: 'yorumsil.ajax.php',//post edilecek url i belirle
        data: {yorumId:yId},//post edilecek datayı belirle //parametre olarak gelen yorum idsini gönderiyoruz
        type: 'POST',//type post olarak belirle
        success: function () {
            $("#yorumSonuc").html("Yorum Silindi");
            $("#yorumSonuc").removeClass();
            $("#yorumSonuc").addClass("alert alert-success");
            $.yorumGetir(eid); //parametrede girilen emlak id sini yorum getir fonksiyonuyla kullan
        }
    });
}
$.yorumGetir=function(id){//  id parametreli "$.degisken" jquerydeki değişken belirlemedir yani var degisken yerine $. koyuyoruz
    $.ajax({//ve isimsiz bir fonksiyonu $.yorumGetir değişkenine aktarıyoruz //ajax metodumuzu kuruyoruz
        url: 'yorumlar.php',//url i belirliyoruz (bu özellik belirlemelerin sırası önemli değildir istersen önce type ıda belirleyebilirsin ) succes en aşağıda olsun yeter
        data: {emlakid:id},//post edilecek data yı belirliyoruz
        type: 'POST',// type belirliyoruz
        dataType: 'html',//dataType busefer belirliyip html secioruz normalde sadece object(standart değişken (nesne)) kullandığımız için belirlemeye gerek yoktu
        success: function (data) {//başarıyla post edilince yorumlarda bulunan datayı alıp
            $("#yorumlar").html(data);//yorumlar divinin içine aktarıyor
            yorumcevir();//yorumlar ilkten sona göre veritabanından geliodu yaptığımız yorumu direk göremiyoduk ondan cevirelm dedik
        }
    });
}
function yorumcevir() {
    $('#yorum-cont > .comments').each(function() { //kapsıyan bir div ve içinde bulunan divleri tersine sıralamak istediğiniz classını yazıyoruz
        $(this).prependTo(this.parentNode);// bunları açıklamaya gerek yok internetten buldum zaten bende
    });
}
function goToByScroll(id) { // internetten bulduğum bir fonksiyondur paremetre ile gönderilen dive doğru scroll yapar görsel amaçlı filtre yaptıktan sonra kardların olduğu yere atması için kullandım
    $('html,body').animate({
        scrollTop: $("#" + id).offset().top
    }, 'slow');
}
function filter(dizi) { // dizi paremetreli filter fonksiyonu
    $(".emlak-cards").hide(); // bütün emlakları sakla
    if (dizi.length < 1){ // parametrede gelen dizinin uzunluğu birden küçükse
        $(".emlak-cards").show(); //bütün emlakları göster yani, dizi boşsa emlak kardlarını göster
        return;//ve kod okumayı bırak
    }
    for (var i = 0; i < dizi.length ; i++) {  //dizinin uzunluğuna göre for döngüsü
        $('.'+dizi[i]).show(); // dizinin içindeki class değerlerinde olan emlakları tek tek gösteriyor
        $('.'+dizi[i]).addClass("gstrl");// gösterilyor manasında gstrl classını ekle
    }
}


//pagenatıon sayfalama
$(function() { //jquery ' de adsız fonksiyon sayfa açılınca çalışan fonksiyondur
    $(".emlak-cards").hide();
    $(".pag-0").show();
    for (var i = 1; i <= $(".emlak-cards").length/6; i++) { //uzunluk sıfırdan başlamaz
        $("#pagButtons").append('' + i + '');
    }
});
$(document).on('click', '.btnPag', function(){
    var index = $(this).index();
    $(".emlak-cards").hide()
    $(".pag-"+index).show();
});