tuxmain/webcomment
1
0
Fork 0
Code Issues 20 Pull requests Projects Releases Packages Wiki Activity

Api & JS client

Browse source
This commit is contained in:
Pascal Engélibert 2023-01-11 22:56:32 +01:00
commit 5deba2fdb1
Signed by: tuxmain
GPG key ID: 3504BC6D362F7DCA
10 changed files with 399 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

128
client/js/webcomment.js
View file

@ -8,27 +8,68 @@ You should have received a copy of the GNU Affero General Public License along w
var webcomments = {};
const MODE_TOPIC = 1;// param: {topic:str}
const ORDER_BY_DATE_ASC = 1;
const ORDER_BY_DATE_DESC = 2;
const DEFAULT_CONFIG = {
default_order: ORDER_BY_DATE_ASC,
/*template_comment: `
<div class="comment" id="{{root.id}}-{{comment.id}}">
<p class="comment-meta">{{comment.author}} {{comment.post_time}}</p>
<p class="comment-text">{{comment.text}}</p>
</div>`,*/
template_comment: `
<div class="comment" id="{{root.id}}-{{comment.id}}">
<p class="comment-meta">
<a class="comment-post_time" aria-label="Permalink" title="Permalink" href="#{{root.id}}-{{comment.id}}">{{comment.post_time}}</a>
<span class="comment-author"></span></p>
<p class="comment-text"></p>
</div>`,
template_widget: `
<div class="comments"></div>
<form class="comment-new-form" action="#" onsubmit="event.preventDefault();post_new_comment('{{root.id}}')">
<fieldset>
<legend>New comment</legend>
<label>
Your name:
<input type="text" name="author" class="comment-form-author"/>
</label><br/>
<label>
Your email:
<input type="email" name="email" class="comment-form-email"/>
</label><br/>
<textarea class="comment-form-text" name="text"></textarea><br/>
<input type="submit" value="Post"/>
</fieldset>
</form>
`,
};
class Webcomment {
constructor(root, api, mode, mode_param) {
this.root = root;
constructor(root_id, api, mode, mode_param, config) {
this.root_id = root_id;
this.api = api;
this.mode = mode;
this.mode_param = mode_param;
this.config = config;
console.log("constr");
this.root = document.getElementById(root_id);
this.root.innerHTML = config.template_widget.replaceAll("{{root.id}}", this.root_id);;
this.elem_comments = this.root.getElementsByClassName("comments")[0];
switch(mode) {
case MODE_TOPIC:
this.query_comments_by_topic(mode_param.topic);
var this_ = this;
this.query_comments_by_topic(mode_param.topic, function(resp) {
this_.append_comments(resp.comments);
});
break;
default:
console.log("Webcomment: invalid mode");
}
}
query_comments_by_topic(topic) {
console.log("query");
query_comments_by_topic(topic, success) {
$.ajax({
method: "POST",
url: this.api+"/api/comments_by_topic",
@ -36,15 +77,80 @@ class Webcomment {
mutation_token: "",
topic: topic,
}),
success: function(resp) {
console.log(resp);
},
success: success,
dataType: "json",
contentType: "application/json; charset=utf-8",
});
}
query_new_comment(topic, author, email, text, success) {
$.ajax({
method: "POST",
url: this.api+"/api/new_comment",
data: JSON.stringify({
author: author,
email: email,
text: text,
topic: topic,
}),
success: success,
dataType: "json",
contentType: "application/json; charset=utf-8",
});
}
post_new_comment() {
var elem_author = $("#comments .comment-new-form [name=author]")[0];
var elem_email = $("#comments .comment-new-form [name=email]")[0];
var elem_text = $("#comments .comment-new-form [name=text]")[0];
switch(this.mode) {
case MODE_TOPIC:
var comment = {
topic: this.mode_param.topic,
author: elem_author.value,
email: elem_email.value,
text: elem_text.value,
};
var this_ = this;
this.query_new_comment(comment.topic, comment.author, comment.email, comment.text, function(resp) {
if(resp.id) {
comment.id = resp.id;
comment.post_time = resp.post_time;
this_.append_comments([comment]);
elem_text.value = "";
}
});
break;
default:
console.log("Webcomment: invalid mode");
}
}
append_comments(comments) {
for(var i in comments) {
var comment = comments[i];
var post_time = new Date(comment.post_time*1000);
var comment_html = this.config.template_comment;
comment_html = comment_html.replaceAll("{{root.id}}", this.root_id);
comment_html = comment_html.replaceAll("{{comment.id}}", comment.id);
//comment_html = comment_html.replaceAll("{{comment.author}}", comment.author);
comment_html = comment_html.replaceAll("{{comment.post_time}}", post_time.toLocaleDateString()+" "+post_time.toLocaleTimeString());
//comment_html = comment_html.replaceAll("{{comment.text}}", comment.text);
$(this.elem_comments).append(comment_html);
var elem = document.getElementById(this.root_id+"-"+comment.id);
elem.getElementsByClassName("comment-author")[0].innerHTML = comment.author;
elem.getElementsByClassName("comment-text")[0].innerHTML = comment.text;
}
}
}
function webcomment_topic(root_id, api, topic) {
webcomments[root_id] = (new Webcomment(document.getElementById(root_id), api, MODE_TOPIC, {topic: topic}));
function webcomment_topic(root_id, api, topic, config=DEFAULT_CONFIG) {
webcomments[root_id] = (new Webcomment(root_id, api, MODE_TOPIC, {topic: topic}, config));
}
function post_new_comment(root_id) {
webcomments[root_id].post_new_comment();
}