Skip to content

Commit

Permalink
goodbye shit code, hello less shit code
Browse files Browse the repository at this point in the history
  • Loading branch information
NdT3Development committed Aug 17, 2020
1 parent 7953fbc commit cd15d13
Showing 1 changed file with 93 additions and 141 deletions.
234 changes: 93 additions & 141 deletions _layouts/post.html
View file
Expand Up @@ -96,12 +96,7 @@ <h3>Leave a comment</h3>
$("#addComments").submit(function (e) { $("#addComments").submit(function (e) {
e.preventDefault(); e.preventDefault();
var post = true; var post = true;
$('[name="email"]').first().removeClass('invalid-form-data'); $('#addComments')[0].reset();
$('[name="name"]').first().removeClass('invalid-form-data');
$('[name="comment"]').first().removeClass('invalid-form-data');
//if (grecaptcha) {
$(".g-recaptcha-comment").first().removeClass('invalid-form-data');
//}
var red = "#F66"; var red = "#F66";
if (!($('[name="email"]')[0].value.match(/^[a-zA-Z0-9-.]+@[a-zA-Z0-9-.]+\.[a-zA-Z]{2,6}$/gi))) { if (!($('[name="email"]')[0].value.match(/^[a-zA-Z0-9-.]+@[a-zA-Z0-9-.]+\.[a-zA-Z]{2,6}$/gi))) {
$('[name="email"]').first().addClass('invalid-form-data'); $('[name="email"]').first().addClass('invalid-form-data');
Expand Down Expand Up @@ -138,8 +133,10 @@ <h3>Leave a comment</h3>
} else { } else {
$("#comment-form-result")[0].style = "background-color:rgb(48, 48, 48);border-radius:5px;padding:10px;margin-bottom:8px;display:inline-block;color:white;"; $("#comment-form-result")[0].style = "background-color:rgb(48, 48, 48);border-radius:5px;padding:10px;margin-bottom:8px;display:inline-block;color:white;";
$("#addComments")[0].reset(); $("#addComments")[0].reset();
location.hash = '#comments'; setTimeout(function() {
location.reload(); location.hash = '#comments';
location.reload();
}, 500);
} }
if (grecaptcha) { if (grecaptcha) {
grecaptcha.reset(); grecaptcha.reset();
Expand Down Expand Up @@ -301,6 +298,8 @@ <h5 class="modal-title">Reply</h5>
} }
} }


var commentsArray = [];

function loadComments(page) { function loadComments(page) {


if (!page) page = 1; if (!page) page = 1;
Expand All @@ -317,170 +316,91 @@ <h5 class="modal-title">Reply</h5>
var metadata = data.metadata; var metadata = data.metadata;
var twcomments = data.data.comments; var twcomments = data.data.comments;
var replies = data.data.replies; var replies = data.data.replies;

// Start Preact rewrite
function Comment(props) {
return html`
<div data-comment-id="${props.id}" class="${props.type}">
<table>
<tr>
<td>
<img data-email-hash="${props.email_hash}" src="https://www.gravatar.com/avatar/${props.email_hash}?s=50&d=identicon" class="${props.type}-image" />
</td>
<td>
<div class="${props.type}-name">${props.name}${props.isTrueWinter && (html`<i class=\"the-truewinter fa fa-check-circle\" title=\"This is the real TrueWinter\"></i>`)}</div>
<div class="${props.type}-time">${props.time}
<span class="comment-reply">
<a href="#" class="comment-reply-btn" data-tw-crb-id="${props.id}" data-tw-crb-type="${props.type}">Reply</a>
</span>
</div>
<div class="${props.type}-text">${props.comment}</div>
</td>
</tr>
</table>
${repliesP(props.id)}
</div>
`;
}


function getReplies(id) { function repliesP(id) {
var r = [];
for (var i = 0; i < replies.length; i++) { function getRepliesP(id) {
if(replies[i].in_reply_to === id) { var r = [];
r.push(replies[i]); for (var i = 0; i < replies.length; i++) {
if(replies[i].in_reply_to === id) {
r.push(replies[i]);
}
} }
return r;
} }
return r;
}


function createCommentElement(comment) { var repliesArr = [];
// Comment
var e = document.createElement('div');
e.setAttribute('data-comment-id', comment.id);
e.className = 'comment';
var tb = document.createElement('table');
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.className = 'image-td';
var td2 = document.createElement('td');
var ei = document.createElement('img');
ei.setAttribute('data-email-hash', comment.email_hash);
ei.src = 'https://www.gravatar.com/avatar/'+comment.email_hash+'?s=50&d=identicon';
ei.className = 'comment-image';
var n = document.createElement('div');
if (comment.isTrueWinter) {
n.innerHTML = comment.name + "<i class=\"the-truewinter fa fa-check-circle\" title=\"This is the real TrueWinter\"></i>";
} else {
n.innerText = comment.name;
}
n.className = 'comment-name';
var t = document.createElement('div');
t.innerText = comment.time;
t.className = 'comment-time';
var cr = document.createElement('span');
cr.className = 'comment-reply';
var crb = document.createElement('a');
crb.href = '#';
crb.innerText = 'Reply';
crb.className = 'comment-reply-btn';
crb.setAttribute('data-tw-crb-id', comment.id);
crb.setAttribute('data-tw-crb-type', 'comment');
crb.onclick = replyForm;
cr.appendChild(crb);
t.appendChild(cr);
var c = document.createElement('div');
c.innerText = comment.comment;
c.className = 'comment-text';
td1.appendChild(ei);
td2.appendChild(n);
td2.appendChild(t);
td2.appendChild(c);
tr.appendChild(td1);
tr.appendChild(td2);
tb.appendChild(tr);
e.appendChild(tb);

document.getElementById('tw-comments').appendChild(e);

addReplies(comment.id);

}


function addReplies(id) { function addRepliesP(id) {
var rp = getReplies(id); var rp = getRepliesP(id);
//console.log(rp); //console.log(rp);

for (var i = 0; i < rp.length; i++) {
//console.log('reply');
$('[data-comment-id=\''+id+'\']').append(createReplyElement(rp[i]));

addReplies(rp[i].id);

}
}


function createReplyElement(reply) { for (var i = 0; i < rp.length; i++) {
var e = document.createElement('div'); repliesArr.push(html`<${Comment} id=${rp[i].id} email_hash=${rp[i].email_hash} name=${rp[i].name} time=${rp[i].time} comment=${rp[i].comment} type="reply" isTrueWinter=${rp[i].isTrueWinter ? true : false} />`);
e.setAttribute('data-comment-id', reply.id); if (i === rp.length - 1) {
e.setAttribute('data-in-reply-to', reply.in_reply_to); return repliesArr;
e.className = 'reply'; }
var tb = document.createElement('table'); }
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.className = 'image-td';
var td2 = document.createElement('td');
var ei = document.createElement('img');
ei.setAttribute('data-email-hash', reply.email_hash);
ei.src = 'https://www.gravatar.com/avatar/'+reply.email_hash+'?s=50&d=identicon';
ei.className = 'reply-image';
var n = document.createElement('div');
if (reply.isTrueWinter) {
n.innerHTML = reply.name + "<i class=\"the-truewinter fa fa-check-circle\" title=\"This is the real TrueWinter\"></i>";
} else {
n.innerText = reply.name;
} }
n.className = 'reply-name'; return addRepliesP(id);
var t = document.createElement('div');
t.innerText = reply.time;
t.className = 'reply-time';
var cr = document.createElement('span');
cr.className = 'comment-reply';
var crb = document.createElement('a');
crb.href = '#';
crb.innerText = 'Reply';
crb.className = 'comment-reply-btn';
crb.setAttribute('data-tw-crb-id', reply.id);
crb.setAttribute('data-tw-crb-type', 'reply');
crb.onclick = replyForm;
cr.appendChild(crb);
t.appendChild(cr);
var c = document.createElement('div');
c.innerText = reply.comment;
c.className = 'reply-text';
td1.appendChild(ei);
td2.appendChild(n);
td2.appendChild(t);
td2.appendChild(c);
tr.appendChild(td1);
tr.appendChild(td2);
tb.appendChild(tr);
e.appendChild(tb);
return e;
} }


const html = htm.bind(preact.h);

for (var i = 0; i < twcomments.length; i++) { for (var i = 0; i < twcomments.length; i++) {
//console.log('Comment:'); commentsArray.push(html`<${Comment} id=${twcomments[i].id} email_hash=${twcomments[i].email_hash} name=${twcomments[i].name} time=${twcomments[i].time} comment=${twcomments[i].comment} type="comment" isTrueWinter=${twcomments[i].isTrueWinter ? true : false} />`);
//console.log(comments[i]);
createCommentElement(twcomments[i]);
//console.log('Replies:');
//console.log(getReplies(comments[i].id));
} }

preact.render(commentsArray, $('#tw-comments')[0]);


var replyRecaptchaRendered = false; var replyRecaptchaRendered = false;


function replyForm(e) { $('.comment-reply-btn').on('click', function(e) {
e.preventDefault(); e.preventDefault();


$('#replyTextarea').on('keyup', function() { $('#replyTextarea').on('keyup', function() {
$('#replyFormCharacterCount').text($('#replyTextarea').val().length); $('#replyFormCharacterCount').text($('#replyTextarea').val().length);
}); });


$('#replyModal').on('hidden.bs.modal', function (e) { $('#replyModal').on('hidden.bs.modal', function (e) {
$('[name="tw-rf-name"]').val('');
$('[name="tw-rf-email"]').val('');
$('[name="tw-rf-comment"]').val('');
$('#tw-reply-form-reply-to').val(''); $('#tw-reply-form-reply-to').val('');
$('#tw-reply-form-reply-type').val(''); $('#tw-reply-form-reply-type').val('');
$('#tw-reply-form-reply-post').val(''); $('#tw-reply-form-reply-post').val('');
$('#tw-reply-form-root-comment').val(''); $('#tw-reply-form-root-comment').val('');
$('#comment-reply-form')[0].reset();
}); });


var replyCaptchaComplete = false; var replyCaptchaComplete = false;


$("#comment-reply-form").submit(function (e) { $("#comment-reply-form").submit(function (e) {
e.preventDefault(); e.preventDefault();
var post = true; var post = true;
$('[name="tw-rf-email"]').first().removeClass('invalid-form-data'); $('#comment-reply-form').find('.invalid-form-data').removeClass('invalid-form-data');
$('[name="tw-rf-name"]').first().removeClass('invalid-form-data');
$('[name="tw-rf-comment"]').first().removeClass('invalid-form-data');
//if (recaptcha) {
$(".g-recaptcha-reply").first().removeClass('invalid-form-data');
//}
var red = "#F66"; var red = "#F66";
if (!($('[name="tw-rf-email"]')[0].value.match(/^[a-zA-Z0-9-.]+@[a-zA-Z0-9-.]+\.[a-zA-Z]{2,24}$/gi))) { if (!($('[name="tw-rf-email"]')[0].value.match(/^[a-zA-Z0-9-.]+@[a-zA-Z0-9-.]+\.[a-zA-Z]{2,24}$/gi))) {
$('[name="tw-rf-email"]').first().addClass('invalid-form-data'); $('[name="tw-rf-email"]').first().addClass('invalid-form-data');
Expand Down Expand Up @@ -573,7 +493,7 @@ <h5 class="modal-title">Reply</h5>
replyCaptchaComplete = false; replyCaptchaComplete = false;
} }
$('#replyModal').modal('show'); $('#replyModal').modal('show');
} });


//console.log(data); //console.log(data);


Expand All @@ -585,7 +505,39 @@ <h5 class="modal-title">Reply</h5>
xhr.send(); xhr.send();
} }


var preactLoad = false;
var htmLoad = false;

var preactAndHTMLoadedEvent = new Event('preactAndHTMLoadedEvent');

function preactLoaded() {
console.log('Preact loaded');
preactLoad = true;
if (preactLoad && htmLoad) {
window.dispatchEvent(preactAndHTMLoadedEvent);
}
}
function htmLoaded() {
console.log('HTM loaded');
htmLoad = true;
if (preactLoad && htmLoad) {
window.dispatchEvent(preactAndHTMLoadedEvent);
}
}

function loadScript(url, onloadFn) {
var e = document.createElement('script');
e.src = url;
e.onload = onloadFn;
document.body.appendChild(e);
}

window.addEventListener('load', function() { window.addEventListener('load', function() {
loadScript('https://cdnjs.cloudflare.com/ajax/libs/preact/10.4.7/preact.min.js', preactLoaded);
loadScript('https://cdnjs.cloudflare.com/ajax/libs/htm/3.0.4/htm.min.js', htmLoaded);
});

window.addEventListener('preactAndHTMLoadedEvent', function() {
var commentsLoaded = false; var commentsLoaded = false;
function loadCommentsIfInView() { function loadCommentsIfInView() {
if (commentsLoaded) return; if (commentsLoaded) return;
Expand Down

0 comments on commit cd15d13

Please sign in to comment.