For english:
x-comment ile kullanıcıların yorumları birbirlerine yanıt verecek şekilde hiyerarşik olarak gösterilebilmektedir. Yanıtlamada seviye sınırı yoktur. x-comment yeni yorum eklenmesine, yorumların yanıtlanmasına olanak verir ve tamamen json ve javascript nesneleri üzerinden çalışır. Aşağıdaki GitHub bağlantısından kodlara erişilebilir.
GitHub:
Bağımlılıklar
- Jquery
- Bootstrap
- Fontawesome
- Globalize
Ayarlar - Eklenti
- mode: "array" veya "remote" değerlerini alabilir. "array" değerinde eklentiye verilen javascript array kullanılarak lokal olarak işlem yapılır. Toplu giriş çıkış işlemler için bu yöntem kullanılabilir. "remote" değerinde dataSource alanındaki Jquery Deferred döndüren fonksiyon çalıştırılarak veriye ulaşılır. (Zorunlu)
- items: "array" modda eklentiye veri buradan verilir. Ayrıca "remote" modda veri yüklendikten sonra buradan javascript array olarak okunabilir.(Array modda zorunlu)
- dataSource: Jquery Deffered nesnesi döndüren bir fonksiyon içerebilir. Eklenti tarafından bu fonksiyon çalıştırılarak veri elde edilir. Veri promise nesnesinin resolve fonksiyonuna parametre olarak gönderilmelidir. (Remote modda zorunlu)
- authorName: Yanıtlama yapılırken eklenti tarafından burada yazan isim kullanılır. (Zorunlu)
- width: Eklentinin boyutunun px olarak ayarlanması sağlar. (Zorunlu değil)
- allowInsert: "true/false" değeri alabilir. Giriş yapılmasını sağlayan formun gösterilmesini sağlar. (Zorunlu değil - Default:true)
- allowReply: "true/false" değeri alabilir. Yorumların yanıtlanabilir veya yanıtlamaz olmasını sağlar. (Zorunlu değil - Default:true)
- allowDelete: "true/false" değeri alabilir. Yorumların silinebilir veya silinemez olmasını sağlar. (Zorunlu değil - Default:true)
- onInserting: Jquery Deffered nesnesi döndüren bir fonksiyon içerebilir. Yeni kayıt eklenirken tetiklenir.
- Parametreler:
- instance: Yorum eklentisinin instance değeridir. Örn. items alanına ulaşmak için kullanılabilir veya eklenti buradan yenilenebilir.
- value: Kullanıcı tarafından girilen değerdir.
- onReplied: Jquery Deffered nesnesi döndüren bir fonksiyon içerebilir. Bir yoruma cevap verildiğine tetiklenir.
- Parametreler:
- instance: Yorum eklentisinin instance değeridir. Örn. items alanına ulaşmak için kullanılabilir veya eklenti buradan yenilenebilir.
- value: Kullanıcı tarafından girilen değerdir.
- item: Yanıt verilen yorumdur.
- onDeleting: Jquery Deffered nesnesi döndüren bir fonksiyon içerebilir. Bir yorum silinirken tetiklenir.
- Parametreler:
- instance: Yorum eklentisinin instance değeridir. Örn. items alanına ulaşmak için kullanılabilir veya eklenti buradan yenilenebilir.
- item: Silinmek istenen yorumdur.
- onError: Jquery Deffered nesnesi döndüren fonksiyonlar içinde hata olması durumunda tetiklenir. Deferred nesnesi reject fonksiyonu ile kullanılmalıdır.
- Parametreler:
- data: Deferred nesnesinin reject fonksiyonu aracılığıyla gönderilen değerdir.
- texts: Eklenti içindeki nesneler üzerinde yazıların ayarlanmasını sağlayan javascript nesnesini içerebilir. (Zorunlu değil)
Ayarlar - texts (Zorunlu değil)
- sendButtonText: Yeni yorum oluşturma kısmında yer alan tuş üzerindeki yazıyı belirler.
- inputTextAreaPlaceHolder: Yorum girilen yazı alanının üzerinde beliren yazının düzenlenmesini sağlar.
- sendReplyButtonText: Yanıt gönderme tuşunun üzerindeki yazıyı belirler.
- cancelButtonText: Yanıt verilme işleminin iptal edilmesini sağlayan tuş üzerindeki yazıyı belirler.
- replyButtonText: Yanıtlama işleminin yapılmasını sağlayan tuş üzerindeki yazıyı belirler.
- deleteButtonText: Yorumların silinmesini sağlayan tuş üzerindeki yazıyı belirler.
Ayarlar - items
- id: Yoruma ait eşsiz bir değerdir.
- parent: Hangi yorumun alt yorumu (yanıtı) olduğunu belirten değerdir.
- deletable: "true/false" değeri alabilir. Yorumun silinebilir olmasını veya olmamasını sağlayan değerdir.
- content: Yorumun içeriğini belirtir.
- created: Yorumun oluşturulma zamanını belirtir. JSON formatlı tarih değeri içermelidir. Örn. "2020-12-31T20:52:00Z"
- fullName: Yorumu yapan kullanıcının adını içerir.
Örnek (data.js):
var comments = [
{
id: 1,
parent: null,
deletable: true,
content: "1. yorum",
created: "2020-12-31T20:52:00Z",
fullName: "Veli Yigit Yolcu"
},
{
id: 2,
parent: null,
deletable: true,
content: "2. yorum",
created: "2020-12-31T21:52:00Z",
fullName: "Veli Yigit Yolcu"
},
{
id: 3,
parent: 2,
deletable: true,
content: "2. yoruma cevap",
created: "2020-12-31T22:52:00Z",
fullName: "Veli Yigit Yolcu"
}
];Örnek (index.html):<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/comment.css" rel="stylesheet" />
<link href="css/fontawesome.min.css" rel="stylesheet" />
<link href="css/brands.css" rel="stylesheet" />
<link href="css/solid.css" rel="stylesheet" />
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/x-comment.js"></script>
<script src="cldr/cldr.js"></script>
<script src="cldr/event.js"></script>
<script src="cldr/supplemental.js"></script>
<script src="globalize/globalize.js"></script>
<script src="globalize/message.js"></script>
<script src="globalize/number.js"></script>
<script src="globalize/currency.js"></script>
<script src="globalize/date.js"></script>
<script src="cldr-data/supplemental.js"></script>
<script src="cldr-data/tr.js"></script>
<script src="data/data.js"></script>
</head>
<body>
<script>
Globalize.locale("tr");
var currentId = 100;
$(document).ready(function () {
$("#xcomment").xcomment({
mode: "array",
items: comments,
allowInsert: true,
authorName: "Veli Yigit Yolcu",
width: 600,
onInserting: function (instance, value) {
let def = $.Deferred();
instance.items.splice(0, 0,
{
id: currentId,
parent: null,
deletable: true,
content: value,
created: new Date().toJSON(),
fullName: "Veli Yigit Yolcu"
});
currentId++;
def.resolve();
return def;
},
onReplied: function (instance, item, value) {
let def = $.Deferred();
instance.items.push(
{
id: currentId,
parent: item.id,
deletable: true,
content: value,
created: new Date().toJSON(),
fullName: "Veli Yigit Yolcu"
}
);
currentId++;
def.resolve();
return def;
},
onDeleting: function (instance, item) {
let def = $.Deferred();
for (var i = 0; i < instance.items.length; i++) {
if (instance.items[i].id === item.id) {
instance.items.splice(i, 1);
}
}
def.resolve();
return def;
}
});
});
</script>
<div id="xcomment" ></div>
</body>
</html>
tt
ReplyDelete