$(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 <tkrKntrl.length; i++) { // yukardaki for döngüsünün içine tkrKntrl dizesinin uzunluğuna göre for döngüsünü kuruyoruz
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('<span style="margin-left: 5px" class="badge badge-pill badge-primary"> <span>'+ val +'</span> <button type="button" clval="' + clval + '" class="btn btn-sm btn-danger btnEsil"><i class="fas fa-times"></i></button></span>' );
// 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('<span style="margin-left: 5px" class="badge badge-pill badge-primary"> <span>'+ val +'</span> <button type="button" clval="' + clval + '" class="btn btn-sm btn-danger btnEsil"><i class="fas fa-times"></i></button></span>' );
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('<span style="margin-left: 5px" class="badge badge-pill badge-primary"> <span>'+ val +'</span> <button type="button" clval="'+ clval + '" class="btn btn-sm btn-danger btnEsil"><i class="fas fa-times"></i></button></span>' );
} // 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('<span style="margin-left: 5px" class="badge badge-pill badge-primary"> <span>'+ val +'</span> <button type="button" clval="'+ clval + '" class="btn btn-sm btn-danger btnEsil"><i class="fas fa-times"></i></button></span>' );
}// 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('<strong>Başarılı!</strong> 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('<strong>Hata!</strong> 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('<li class="page-item btnPag"><button class="page-link">' + i + '</button></li>');
}
});
$(document).on('click', '.btnPag', function(){
var index = $(this).index();
$(".emlak-cards").hide()
$(".pag-"+index).show();
});
