webcomment/client/js/webcomment.js

/*
CopyLeft 2022-2023 Pascal Engélibert (why copyleft? -> https://txmn.tk/blog/why-copyleft/)
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, version 3 of the License.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with this program. If not, see https://www.gnu.org/licenses/.
*/

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_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;
		
		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:
			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, success) {
		$.ajax({
			method: "POST",
			url: this.api+"/api/comments_by_topic",
			data: JSON.stringify({
				mutation_token: "",
				topic: topic,
			}),
			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, 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();
}