arno/isso
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

client-side draft using qwery, bean, bonzo and domReady

Browse Source
This commit is contained in:
posativ 2012-10-20 17:57:01 +02:00
parent efa334de39
commit 9aeed1a47e
3 changed files with 3347 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3134
isso/static/ender.js Normal file
View File

File diff suppressed because it is too large Load Diff

165
isso/static/post.html Normal file
View File

@ -0,0 +1,165 @@
<!DOCTYPE html>
<head>
<title>Hello World</title>
<meta charset="utf-8" />
<script type="text/javascript" src="/static/ender.js"></script>
<script type="text/javascript">
var initialize = function(thread) {
var comments = '<ul id="comments"></ul>';
var form =
'<div id="comment_form">' +
'<div>' +
' <input type="text" name="name" id="author" value="" placeholder="Name">' +
'</div>' +
'<div>' +
' <input type="email" name="email" id="email" value="" placeholder="Email">' +
'</div>' +
'<div>' +
'<input type="url" name="website" id="website" value="" placeholder="Website URL">' +
'</div>' +
'<div>' +
' <textarea rows="10" name="comment" id="comment" placeholder="Comment"></textarea>' +
'</div>' +
'<div>' +
'<input type="submit" name="submit" value="Add Comment">' +
'</div>' +
'</div>';
// load our css
$('head').append('<link rel="stylesheet" href="/static/style.css" />');
// append our HTML
thread.append(comments)
thread.append(form);
// register events
$('input[type="submit"]').on('click', function() {
var text = $('textarea[id="comment"]').val() || null;
if (text == null) {
// alert("You must write a comment!");
return;
}
$.ajax({
url: '/comment/' + encodeURIComponent(window.location.pathname) + '/new',
method: 'POST',
type: 'json',
headers: {
'Content-Type': 'application/json',
},
data: JSON.stringify({
text: text,
author: $('input[id="author"]').val() || null,
email: $('input[id="email"]').val() || null,
website: $('input[id="website"]').val() || null
}),
error: function(resp) {
alert("Mööp.");
},
success: function(rv) {
//$('#isso_thread').html(resp.content);
insert(thread, rv)
},
});
});
};
var insert = function(thread, post) {
post['author'] = post['author'] || 'Anonymous';
$('ul', thread).append(
'<article class="comment">' +
' <header><em>' + post['author'] + '</em> schrieb am <em>1234567</em>' +
' </header>' + post['text'] +
'</article>');
};
var fetch = function(thread) {
var rv = $.ajax({
url: '/comment/' + encodeURIComponent(window.location.pathname) + '/',
method: 'GET',
type: 'json',
headers: {
'Content-Type': 'application/json',
},
error: function(resp) {
return;
},
success: function(resp) {
console.log(resp);
for (var item in resp) {
insert(thread, resp[item]);
}
}
});
};
$.domReady(function() {
// initialize comment form and css
initialize($('#isso_thread'));
// fetch comments for path
fetch($('#isso_thread'));
// REMOVE ME
$('input[id="author"]').val("Peter");
$('textarea[id="comment"]').val("Lorem ipsum ...");
});
</script>
<style type="text/css">
body {
margin: 0 auto;
width: 700px;
}
hr {
border: 0;
height: 1px;
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}
</style>
</head>
<body>
<article>
<header>
<h1>Hello World. Finally!</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<footer>
<hr />
<div id="isso_thread"></div>
<noscript>
<p>Please enable JavaScript to view the comments powered by Isso™.</a></p>
</noscript>
</footer>
</article>
</body>

48
isso/static/style.css Normal file
View File

@ -0,0 +1,48 @@
#comment_form input, #comment_form textarea {
border: 4px solid rgba(0,0,0,0.1);
padding: 8px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
outline: 0;
}
#comment_form textarea {
width: 350px;
}
#comment_form input[type="submit"] {
cursor: pointer;
background: -webkit-linear-gradient(top, #efefef, #ddd);
background: -moz-linear-gradient(top, #efefef, #ddd);
background: -ms-linear-gradient(top, #efefef, #ddd);
background: -o-linear-gradient(top, #efefef, #ddd);
background: linear-gradient(top, #efefef, #ddd);
color: #333;
text-shadow: 0px 1px 1px rgba(255,255,255,1);
border: 1px solid #ccc;
}
#comment_form input[type="submit"]:hover {
background: -webkit-linear-gradient(top, #eee, #ccc);
background: -moz-linear-gradient(top, #eee, #ccc);
background: -ms-linear-gradient(top, #eee, #ccc);
background: -o-linear-gradient(top, #eee, #ccc);
background: linear-gradient(top, #eee, #ccc);
border: 1px solid #bbb;
}
#comment_form input[type="submit"]:active {
background: -webkit-linear-gradient(top, #ddd, #aaa);
background: -moz-linear-gradient(top, #ddd, #aaa);
background: -ms-linear-gradient(top, #ddd, #aaa);
background: -o-linear-gradient(top, #ddd, #aaa);
background: linear-gradient(top, #ddd, #aaa);
border: 1px solid #999;
}
#comment_form div {
margin-bottom: 8px;
}