refactored blog client-side code

This commit is contained in:
Rushabh Mehta 2012-12-17 12:52:43 +05:30
parent 60f47b3648
commit fd6ad19fa0
8 changed files with 139 additions and 221 deletions

View File

@ -1,4 +1,7 @@
erpnext.updates = [ erpnext.updates = [
["14th December 2012", [
"Website Module: Major Refactor - removed framework code from website."
]],
["12th December 2012", [ ["12th December 2012", [
"Attachments: Attachments can be set as URLs or File Uploads. This will help if people want to share documents from Google Docs, Dropbox and other such services (esp for the Product listings on websites).", "Attachments: Attachments can be set as URLs or File Uploads. This will help if people want to share documents from Google Docs, Dropbox and other such services (esp for the Product listings on websites).",
"Global Defaults: Session Expiry can now be set in Global Defaults.", "Global Defaults: Session Expiry can now be set in Global Defaults.",

View File

@ -43,3 +43,11 @@ function get_url_arg(name) {
else else
return decodeURIComponent(results[1]); return decodeURIComponent(results[1]);
} }
function repl(s, dict) {
if(s==null)return '';
for(key in dict) {
s = s.split("%("+key+")s").join(dict[key]);
}
return s;
}

View File

@ -9,8 +9,7 @@ import website.utils
def get_blog_list(args=None): def get_blog_list(args=None):
""" """
args = { args = {
'limit_start': 0, 'start': 0,
'limit_page_length': 10,
} }
""" """
import webnotes import webnotes
@ -24,10 +23,8 @@ def get_blog_list(args=None):
comment_doctype='Blog' and comment_docname=`tabBlog`.name) as comments comment_doctype='Blog' and comment_docname=`tabBlog`.name) as comments
from `tabBlog` from `tabBlog`
where ifnull(published,0)=1 where ifnull(published,0)=1
order by creation desc, name asc""" order by creation desc, name asc
limit %s, 5""" % args.start
from webnotes.widgets.query_builder import add_limit_to_query
query, args = add_limit_to_query(query, args)
result = webnotes.conn.sql(query, args, as_dict=1) result = webnotes.conn.sql(query, args, as_dict=1)
@ -41,38 +38,6 @@ def get_blog_list(args=None):
if not res['content']: if not res['content']:
res['content'] = website.utils.get_html(res['page_name']) res['content'] = website.utils.get_html(res['page_name'])
res['content'] = split_blog_content(res['content']) res['content'] = split_blog_content(res['content'])
res['content'] = res['content'][:1000]
return result
@webnotes.whitelist(allow_guest=True)
def get_recent_blog_list(args=None):
"""
args = {
'limit_start': 0,
'limit_page_length': 5,
'name': '',
}
"""
import webnotes
if not args: args = webnotes.form_dict
query = """\
select name, page_name, title, left(content, 100) as content
from tabBlog
where ifnull(published,0)=1 and
name!=%(name)s order by creation desc"""
from webnotes.widgets.query_builder import add_limit_to_query
query, args = add_limit_to_query(query, args)
result = webnotes.conn.sql(query, args, as_dict=1)
# strip html tags from content
import webnotes.utils
for res in result:
res['content'] = webnotes.utils.strip_html(res['content'])
return result return result

View File

@ -6,4 +6,8 @@
.comment-content { .comment-content {
margin-left: 20px; margin-left: 20px;
} }
input {
width: 240px;
}
</style> </style>

View File

@ -2,7 +2,6 @@
{% block javascript %} {% block javascript %}
{% include "js/blog_page.js" %} {% include "js/blog_page.js" %}
{% include "js/blog_subscribe.js" %}
{% endblock %} {% endblock %}
{% block css %} {% block css %}
@ -28,15 +27,32 @@
<div class="blog-comments"> <div class="blog-comments">
{% if not comment_list %} {% if not comment_list %}
<div class="no-result help hide"> <div class="alert no-comment">
<p>Be the first one to comment</p> <p>Be the first one to comment</p>
<br />
</div> </div>
{% endif %} {% endif %}
{% include 'html/comment.html' %} {% include 'html/comment.html' %}
</div> </div>
<button class="btn add-comment">Add Comment</button> <div><button class="btn add-comment">Add Comment</button></div>
<div style="display: none; margin-top: 10px;"
id="comment-form" class="well">
<div class="alert" style="display:none;"></div>
<form>
<p>
<input name="comment_by_fullname" placeholder="Your Name" />
</p>
<p>
<input name="comment_by" placeholder="Your Email Id" />
</p>
<p>
<textarea name="comment" placeholder="Comment" />
</textarea>
</p>
<p>
<button class="btn btn-info" id="submit-comment">Submit</button>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -15,29 +15,54 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>. // along with this program. If not, see <http://www.gnu.org/licenses/>.
// js inside blog page // js inside blog page
wn.pages['{{ name }}'].onload = function(wrapper) {
erpnext.blog_list = new wn.ui.Listing({ $(document).ready(function() {
parent: $(wrapper).find('#blog-list').get(0), // make list of blogs
method: 'website.helpers.blog.get_blog_list', blog.get_list();
hide_refresh: true,
no_toolbar: true, $("#next-page").click(function() {
render_row: function(parent, data) { blog.get_list();
if(!data.comments) { })
data.comment_text = 'No comments yet.' });
} else if (data.comments===1) {
data.comment_text = '1 comment.' var blog = {
start: 0,
get_list: function() {
$.ajax({
method: "GET",
url: "server.py",
data: {
cmd: "website.helpers.blog.get_blog_list",
start: blog.start
},
dataType: "json",
success: function(data) {
blog.render(data.message);
}
});
},
render: function(data) {
var $wrap = $("#blog-list");
$.each(data, function(i, b) {
// comments
if(!b.comments) {
b.comment_text = 'No comments yet.'
} else if (b.comments===1) {
b.comment_text = '1 comment.'
} else { } else {
data.comment_text = data.comments + ' comments.' b.comment_text = b.comments + ' comments.'
} }
if(data.content && data.content.length==1000) { $(repl('<h2><a href="%(page_name)s.html">%(title)s</a></h2>\
data.content += repl('... <a href="%(page_name)s.html">(read on)</a>', data);
}
parent.innerHTML = repl('<h2><a href="%(page_name)s.html">%(title)s</a></h2>\
<div class="help">%(comment_text)s</div>\ <div class="help">%(comment_text)s</div>\
%(content)s<br /><br />', data); %(content)s<br />\
}, <p><a href="%(page_name)s">Read with comments...</a></p>\
page_length: 10 <hr /><br />', b)).appendTo($wrap);
}); });
erpnext.blog_list.run(); blog.start += data.length;
if(!data.length) {
$("#next-page").toggle(false)
.parent().append("<div class='alert'>Nothing more to show.</div>");
}
}
} }

View File

@ -16,166 +16,61 @@
// js inside blog page // js inside blog page
wn.provide('erpnext.blog'); $(document).ready(function() {
wn.pages['{{ name }}'].onload = function(wrapper) { var n_comments = $(".comment-row").length;
erpnext.blog.wrapper = wrapper;
// sidebar if(n_comments) {
//erpnext.blog.render_recent_list(wrapper); $(".no_comment").toggle(false);
}
// unhide no-result if no comments found if(n_comments > 50) {
erpnext.blog.toggle_no_result(wrapper); $(".add-comment").toggle(false)
.parent().append("<div class='alert'>Comments are closed.</div>")
// bind add comment button to comment dialog }
erpnext.blog.make_comment_dialog(wrapper); $(".add-comment").click(function() {
$("#comment-form").toggle();
// hide add comment button after 50 comments $("#comment-form input, #comment-form, textarea").val("");
erpnext.blog.toggle_add_comment_btn(wrapper); })
} $("#submit-comment").click(function() {
var args = {
erpnext.blog.adjust_page_height = function(wrapper) { comment_by_fullname: $("[name='comment_by_fullname']").val(),
if (!wrapper) { wrapper = erpnext.blog.wrapper; } comment_by: $("[name='comment_by']").val(),
if (!wrapper) { return; } comment: $("[name='comment']").val(),
cmd: "website.helpers.blog.add_comment",
// adjust page height based on sidebar height comment_doctype: "Blog",
var $main_page = $(wrapper).find('.layout-main-section'); comment_docname: "{{ name }}",
var $sidebar = $(wrapper).find('.layout-side-section'); page_name: "{{ page_name }}"
if ($sidebar.height() > $main_page.height()) {
$main_page.height($sidebar.height());
} }
}
erpnext.blog.render_recent_list = function(wrapper) { $("#comment-form .alert").toggle(false);
if (!wrapper) { wrapper = erpnext.blog.wrapper; }
if (!wrapper) { return; }
wrapper.recent_list = new wn.ui.Listing({ if(!args.comment_by_fullname || !args.comment_by || !args.comment) {
parent: $(wrapper).find('.recent-posts'), $("#comment-form .alert")
no_toolbar: true, .html("All fields are necessary to submit the comment.")
method: 'website.helpers.blog.get_recent_blog_list', .toggle(true);
get_args: function() { return false;
return { name: '{{ name }}' } }
},
hide_refresh: true,
render_row: function(parent, data) {
if(data.content && data.content.length>=100) data.content += '...';
parent.innerHTML = repl('<div style="font-size: 80%">\
<a href="%(page_name)s.html">%(title)s</a>\
<div class="comment">%(content)s</div><br></div>', data);
// adjust page height depending on sidebar height
erpnext.blog.adjust_page_height(wrapper);
},
page_length: 5,
});
wrapper.recent_list.run();
}
erpnext.blog.toggle_no_result = function(wrapper) { $.ajax({
if (!wrapper) { wrapper = erpnext.blog.wrapper; } method: "POST",
if (!wrapper) { return; } url: "server.py",
data: args,
var $blog_comments = $(wrapper).find('.blog-comments'); dataType: "json",
var $comment_rows = $blog_comments.find('.comment-row'); success: function(data) {
var $no_result = $blog_comments.find('.no-result'); if(data.exc) {
$("#comment-form .alert")
if ($comment_rows.length == 0) { .html(data.exc)
$no_result.removeClass('hide'); .toggle(true)
} else { } else {
$no_result.addClass('hide'); $(data.message).appendTo(".blog-comments");
} $(".no_comment").toggle(false);
} $(".add-comment").toggle(false);
$("#comment-form")
erpnext.blog.make_comment_dialog = function(wrapper) { .replaceWith("<div class='alert'>Thank you for your comment!</div>")
if (!wrapper) { wrapper = erpnext.blog.wrapper; }
if (!wrapper) { return; }
var $comment_btn = $(wrapper).find('button.add-comment');
$comment_btn.click(function() {
if(!erpnext.blog.comment_dialog) {
var d = new wn.ui.Dialog({
title: 'Add Comment',
fields: [
{
fieldname: 'comment_by_fullname', label: 'Your Name',
reqd: 1, fieldtype: 'Data'
},
{
fieldname: 'comment_by', label: 'Email Id',
reqd: 1, fieldtype: 'Data'
},
{
fieldname: 'comment', label: 'Comment',
reqd: 1, fieldtype: 'Text'
},
{
fieldname: 'post_comment', label: 'Post Comment',
fieldtype: 'Button'
},
],
});
erpnext.blog.comment_dialog = d;
}
erpnext.blog.comment_dialog.fields_dict.post_comment
.input.onclick = function() {
erpnext.blog.add_comment(wrapper);
}
erpnext.blog.comment_dialog.show();
});
}
erpnext.blog.add_comment = function(wrapper) {
var args = erpnext.blog.comment_dialog.get_values();
if(!args) return;
args.comment_doctype = 'Blog';
args.comment_docname = '{{ name }}';
args.page_name = '{{ page_name }}';
wn.call({
method: 'website.helpers.blog.add_comment',
args: args,
btn: this,
callback: function(r) {
if(!r.exc) {
erpnext.blog.add_comment_to_page(wrapper, r.message);
erpnext.blog.comment_dialog.hide();
} }
} }
}); })
}
erpnext.blog.add_comment_to_page = function(wrapper, comment) { return false;
$blog_comments = $(wrapper).find('.blog-comments'); })
$comment_rows = $blog_comments.find('.comment-row'); })
if ($comment_rows.length) {
$blog_comments.append(comment);
} else {
$blog_comments.append(comment);
}
erpnext.blog.toggle_no_result(wrapper);
erpnext.blog.toggle_add_comment_btn(wrapper);
}
erpnext.blog.toggle_add_comment_btn = function(wrapper) {
var $wrapper = $(wrapper);
if ($wrapper.find('.blog-comments .comment-row').length > 50) {
var $comment_btn = $wrapper.find('button.add-comment');
$comment_btn.addClass('hide');
// show comments are close
$wrapper.find('.blog-comments').append("\
<div class=\"help\"> \
<p>Comments Closed</p> \
<br /> \
</div>");
}
}

View File

@ -2,7 +2,6 @@
{% block javascript %} {% block javascript %}
{% include "js/blog.js" %} {% include "js/blog.js" %}
{% include "js/blog_subscribe.js" %}
{% endblock %} {% endblock %}
{% block css %} {% block css %}
@ -18,9 +17,12 @@
<div class="layout-main"> <div class="layout-main">
<h1>Blog</h1> <h1>Blog</h1>
<br> <br>
<div id="blog-list"> <div id="blog-list" style="min-height: 400px;">
<!-- blog list will be generated dynamically --> <!-- blog list will be generated dynamically -->
</div> </div>
<div style="text-align: center;">
<button id="next-page" class="btn">More...</button>
</div>
</div> </div>
</div> </div>
</div> </div>