9 changed files with 8 additions and 226 deletions
@ -1,28 +0,0 @@ |
|||
from json import dumps |
|||
from time import time |
|||
from uuid import uuid4 |
|||
|
|||
def comment(author, title, text, t, uid): |
|||
return { |
|||
"time" : t, |
|||
"id" : uid, |
|||
"title" : title, |
|||
"author" : author, |
|||
"text" : text |
|||
} |
|||
|
|||
|
|||
testcomments = { |
|||
1 : dumps( |
|||
[ |
|||
comment("Person 1", "Two", "A Comment here", 1, str(uuid4())), |
|||
comment("Person 2", "One", "Some other comment", 2, str(uuid4())), |
|||
comment("Person 3", "Three", "My opinion is correct", 3, str(uuid4())) |
|||
]), |
|||
2 : dumps( |
|||
[ |
|||
comment("Person 1", "Two", "A cool terrible Comment here", 1, str(uuid4())), |
|||
comment("Person 2", "One", "Some other awful comment", 2, str(uuid4())), |
|||
comment("Person 3", "Three", "My opinion is not correct", 3, str(uuid4())) |
|||
]) |
|||
} |
@ -0,0 +1,8 @@ |
|||
<blog> |
|||
|
|||
<script> |
|||
import route from 'riot-route/lib/tag'; |
|||
|
|||
|
|||
</script> |
|||
</blog> |
@ -1,17 +0,0 @@ |
|||
<comment> |
|||
<div class="comment centered"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<h4 class="card-title">Comment posted by {author}</h4> |
|||
</div> |
|||
<div class="card-body comment-body"> |
|||
{ text } |
|||
</div> |
|||
<button if={delete !== undefined} onclick={delete} class="btn"> |
|||
Delete this comment |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<script> |
|||
</script> |
|||
</comment> |
@ -1,113 +0,0 @@ |
|||
<comments> |
|||
<div if={loading} class="loading comments-loader"></div> |
|||
<comment if={!loading} each={R.sortBy(R.prop("time"), R.values(this.comments))} data="{this}"></comment> |
|||
<textarea onfocus={clearplaceholder} |
|||
onblur={checkplaceholder} |
|||
oninput={echo} |
|||
__disabled={disabled} |
|||
class={"form-input comments centered " + this.maxed} |
|||
ref="textarea" |
|||
rows="10" |
|||
cols="50" |
|||
maxlength={this.maxlength}> |
|||
{ placeholder } |
|||
</textarea> |
|||
<button onclick={submit} class="btn comment-submit"> |
|||
Submit Comment |
|||
</button> |
|||
<div if={this.warn} class="toast toast-danger maxwarn centered"> |
|||
<button |
|||
onclick={this.closewarning} |
|||
class="btn btn-clear float-right"> |
|||
</button> |
|||
Your comment is too long! |
|||
</div> |
|||
<script> |
|||
import 'whatwg-fetch'; |
|||
import { default as R } from 'ramda'; |
|||
this.R = R; |
|||
|
|||
this.comments = []; |
|||
this.maxlength = 700; |
|||
|
|||
this.placeholder = "Comment on this post"; |
|||
this.focused = false; |
|||
this.maxed = ""; |
|||
this.warn = false; |
|||
this.disabled = ""; |
|||
this.loading = true; |
|||
|
|||
clearplaceholder() { |
|||
if (!this.focused) { |
|||
this.update({ |
|||
"placeholder" : "", |
|||
"focused" : true |
|||
}) |
|||
} |
|||
} |
|||
|
|||
checkplaceholder() { |
|||
if (this.refs.textarea.value.trim().length == 0) { |
|||
this.update({ |
|||
"placeholder" : "Comment here!", |
|||
"focused" : false |
|||
}); |
|||
} |
|||
} |
|||
|
|||
closewarning() { |
|||
this.update({"warn" : false}); |
|||
} |
|||
|
|||
echo(ev) { |
|||
if (this.refs.textarea.value.length >= this.maxlength) { |
|||
this.update({ |
|||
"maxed" : "maxinput", |
|||
"warn" : true |
|||
}); |
|||
} |
|||
else { |
|||
this.update({ |
|||
"maxed" : "", |
|||
"warn" : false |
|||
}); |
|||
window.setTimeout(this.closewarning, 15000); |
|||
} |
|||
} |
|||
|
|||
var self = this; |
|||
|
|||
getComments(pid) { |
|||
fetch("/blog/comments/"+pid) |
|||
.then( |
|||
function(resp) { |
|||
return resp.text(); |
|||
}) |
|||
.then( |
|||
function(body) { |
|||
var parsed =JSON.parse(body); |
|||
parsed.map(function(comment) { self.comments[comment["id"]] = comment; } ); |
|||
self.update(); |
|||
self.update( |
|||
{ |
|||
"loading" : false |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
submit() { |
|||
var id = Math.random(); |
|||
this.comments[id] = { |
|||
"author" : "name", |
|||
"text" : this.refs.textarea.value, |
|||
"delete" : (() => { delete self.comments[id]; self.update(); }) |
|||
}; |
|||
this.update(); |
|||
} |
|||
|
|||
this.on("mount", |
|||
function() { |
|||
this.getComments(self.opts.pid); |
|||
}); |
|||
</script> |
|||
</comments> |
Loading…
Reference in new issue