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

refactor and re-indentation

Browse Source
pull/16/head
posativ 12 years ago
parent 63f3d6ff2f
commit eee2e43588
2 changed files with 135 additions and 112 deletions
Show Stats Download Patch File Download Diff File

227
isso/static/post.html
Unescape View File

@ -6,7 +6,21 @@
<script type="text/javascript" src="/static/ender.js"></script>
<script type="text/javascript">
var form = '<div id="comment_form">' +
var createForm = function(id, func) {
/*
Returns HTML for form and registers submit call.
Synopsis: `isso_N` is the comment with the id N. `issoform` is a new
form to write an answer to the article or answer to a comment using
`issoform_N` where N is the id to respond to.
:param id: comment id
:param func: function, that takes one argument (the HTML to display the form)
*/
var formid = 'issoform' + (id ? ('_' + id) : '');
var form =
'<div class="issoform" id="' + formid + '">' +
'<div>' +
' <input type="text" name="name" id="author" value="" placeholder="Name">' +
'</div>' +
@ -22,133 +36,142 @@
'<div>' +
'<input type="submit" name="submit" value="Add Comment">' +
'</div>' +
'</div>';
'</div>'
var initialize = function(thread) {
func(form);
var comments = '<ul id="comments"></ul>';
// register submit event
$('#' + formid + ' ' + 'input[type="submit"]').on('click', function() {
// load our css
$('head').append('<link rel="stylesheet" href="/static/style.css" />');
var text = $('textarea[id="comment"]').val() || null;
// append our HTML
thread.append(comments)
thread.append(form);
// register events
$('input[type="submit"]').on('click', function() {
if (text == null) {
// alert("You must write a comment!");
return;
}
var text = $('textarea[id="comment"]').val() || null;
$.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) {
insert($('#isso_thread'), rv)
},
});
});
};
if (text == null) {
// alert("You must write a comment!");
return;
}
var initialize = function(thread) {
$.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)
},
});
});
};
// that with an unordered list
thread.append('<ul id="comments"></ul>');
var insert = function(thread, post) {
// load our css
$('head').append('<link rel="stylesheet" href="/static/style.css" />');
// pythonic strftime
var format = function(date, lang, fmt) {
// append form
createForm(null, function(html) {thread.append(html)});
};
var months = {'de': [
'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli',
'August', 'September', 'Oktober', 'November', 'Dezember'],
'en': [
'January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December'],
};
var insert = function(thread, post) {
var conversions = [
['%Y', date.getFullYear()], ['%m', date.getMonth()],
['%B', months[lang][date.getMonth() - 1]],
['%d', date.getDate()], ['%H', date.getHours()],
['%H', date.getHours()], ['%M', date.getMinutes()],
];
// pythonic strftime
var format = function(date, lang, fmt) {
conversions.map(function(item) { fmt = fmt.replace(item[0], item[1]) });
return fmt;
var months = {'de': [
'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli',
'August', 'September', 'Oktober', 'November', 'Dezember'],
'en': [
'January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December'],
};
var author = post['author'] || 'Anonymous';
if (post['website']) {
author = '<a href="' + post['website'] + '" rel="nofollow">' + author + '</a>';
}
var conversions = [
['%Y', date.getFullYear()], ['%m', date.getMonth()],
['%B', months[lang][date.getMonth() - 1]],
['%d', date.getDate()], ['%H', date.getHours()],
['%H', date.getHours()], ['%M', date.getMinutes()],
];
conversions.map(function(item) { fmt = fmt.replace(item[0], item[1]) });
return fmt;
};
var date = new Date(parseInt(post['created']) * 1000);
var author = post['author'] || 'Anonymous';
if (post['website']) {
author = '<a href="' + post['website'] + '" rel="nofollow">' + author + '</a>';
}
$('ul', thread).append(
'<article class="comment">' +
' <header><span class="author">' + author + '</span> schrieb am' +
' <span class="date">' + format(date, 'de', '%d. %B %Y um %H:%M') + ':' +
' </span>' +
' </header>' + post['text'] +
' <footer>' +
' <a href="#" id="comment_' + post['id'] + '">Antworten</a>' +
' </footer>' +
'</article>');
$('#comment_' + post['id']).on('click', function() {
var date = new Date(parseInt(post['created']) * 1000);
})
};
$('#isso_thread ul').append(
'<article class="isso">' +
' <header><span class="author">' + author + '</span> schrieb am' +
' <span class="date">' + format(date, 'de', '%d. %B %Y um %H:%M') + ':' +
' </span>' +
' </header>' + post['text'] +
' <footer>' +
' <a href="#" id="isso_' + post['id'] + '">Antworten</a>' +
' </footer>' +
'</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) {
for (var item in resp) {
insert(thread, resp[item]);
}
// ability to answer directly to a comment
$('#isso_' + post['id']).on('click', function(event) {
if ($('#issoform_' + post['id']).length == 0) {
createForm(post['id'], function(html) {$('#isso_' + post['id']).after(html)});
} else {
$('#issoform_' + post['id']).remove();
};
event.stop();
});
};
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) {
for (var item in resp) {
insert(thread, resp[item]);
}
});
};
}
});
};
$.domReady(function() {
$.domReady(function() {
// initialize comment form and css
initialize($('#isso_thread'));
// initialize comment form and css
initialize($('#isso_thread'));
// fetch comments for path
fetch($('#isso_thread'));
// fetch comments for path
fetch($('#isso_thread'));
// REMOVE ME
$('input[id="author"]').val("Peter");
$('textarea[id="comment"]').val("Lorem ipsum ...");
// REMOVE ME
$('input[id="author"]').val("Peter");
$('textarea[id="comment"]').val("Lorem ipsum ...");
});
});
</script>
<style type="text/css">

20
isso/static/style.css
Unescape View File

@ -3,24 +3,24 @@
padding: 0;
}
.comment {
.isso {
margin-bottom: 18px;
margin-top: 18px;
}
.comment .author {
.isso .author {
font-weight: bold;
}
.comment .date {
.isso .date {
color: gray;
}
.comment header {
.isso header {
border-bottom: solid 1px lightgray;
}
#comment_form input, #comment_form textarea {
.issoform input, .issoform textarea {
border: 4px solid rgba(0,0,0,0.1);
padding: 8px 10px;
@ -31,11 +31,11 @@
outline: 0;
}
#comment_form textarea {
.issoform textarea {
width: 350px;
}
#comment_form input[type="submit"] {
.issoform input[type="submit"] {
cursor: pointer;
background: -webkit-linear-gradient(top, #efefef, #ddd);
background: -moz-linear-gradient(top, #efefef, #ddd);
@ -47,7 +47,7 @@
border: 1px solid #ccc;
}
#comment_form input[type="submit"]:hover {
.issoform 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);
@ -56,7 +56,7 @@
border: 1px solid #bbb;
}
#comment_form input[type="submit"]:active {
.issoform 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);
@ -65,6 +65,6 @@
border: 1px solid #999;
}
#comment_form div {
.issoform div {
margin-bottom: 8px;
}
Write Preview
Loading…
Cancel
Save