With x-comment, users' comments can be displayed hierarchically and users can respond to each other. There is no level limit while answering. x-comment allows adding new comments, reply to comments, and runs entirely on json and javascript objects.
Github:
https://github.com/vyigity/x-comment
Dependency
- Jquery
- Bootstrap
- Fontawesome
- Globalize
Configuration- Plugin
- mode: Can be set as "array" or "remote". With "array" value, data is processed locally by using the javascript array given to the plugin. This method can be used for batch input and output operations. The data is accessed by running the function that returns Jquery Deferred in the dataSource field with "remote" value. (required)
- items: In "array" mode, data is given to the plugin here. Also, after the data is loaded in "remote" mode, it can be read as a javascript array.(required in array mode)
- dataSource: Can be set as a function that returns a jquery Deferred object. Data is obtained by running this function by the plugin. Data must be sent as parameter to promise resolve function.(required in remote mode)
- authorName: The name written here is used by the plugin when responding. (required)
- width: It allows the size of the plugin to be set to px. (optional)
- allowInsert: Can be set as "true/false". It allows to show the form that enables inserting. (optional - Default:true)
- allowReply: Can be set as "true/false". Ensures that comments can be answered or not. (optional - Default:true)
- allowDelete: Can be set as "true/false". Ensures that comments can be deleted or not. (optional - Default:true)
- onInserting: Can be set as a function that returns a jquery Deferred object. Is triggered when adding a new record.
- Parameters:
- instance: Instance of plugin. For example, it can be used to access the items or the plugin can be refreshed.
- value: Value that is typed by user.
- onReplied: Can be set as a function that returns a jquery Deferred object. Is triggered when replying to a comment.
- Parameters:
- instance: Instance of plugin. For example, it can be used to access the items or the plugin can be refreshed.
- value: Value that is typed by user.
- item: Comment that is answered to.
- onDeleting: Can be set as a function that returns a jquery Deferred object. Is triggered when deleting a comment.
- Parameters:
- instance: Instance of plugin. For example, it can be used to access the items or the plugin can be refreshed.
- item: Comment about to be deleted.
- onError: Is triggered on error that occurs in functions that return a jquery Deferred object. Deferred object must be used with reject function.
- Parameters:
- data: The value sent through the reject function of the Deferred object.
- texts: Can be configured text in plugin. A javascript object. (optional)
Configuration - texts (optional)
- sendButtonText: Determines the text on the button in the new comment creation section.
- inputTextAreaPlaceHolder: Allows editing of placeholder that appears in comment text area.
- sendReplyButtonText: Determines the text on the reply send button.
- cancelButtonText: Determines the text on the button that enables the cancellation of the response..
- replyButtonText: Determines the text on the button that enables the answering process.
- deleteButtonText: Determines the text on the button that allows the comments to be deleted.
Configuration - items
- id: A unique value of a comment item.
- parent: Parent value of a comment item.
- deletable: Can be set as "true/false". The value that indicates the comment that can be deleted or not.
- content: Content of a comment item.
- created: Creation date time of a comment item. Value must be formatted as JSON. For example, "2020-12-31T20:52:00Z"
- fullName: User name of owner of comment item.
Example (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"
}
];Example (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>
