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