refactored blog client-side code
This commit is contained in:
Rushabh Mehta
parent
60f47b3648
commit
fd6ad19fa0
@ -1,4 +1,7 @@
|
||||
erpnext.updates = [
|
||||
["14th December 2012", [
|
||||
"Website Module: Major Refactor - removed framework code from website."
|
||||
]],
|
||||
["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).",
|
||||
"Global Defaults: Session Expiry can now be set in Global Defaults.",
|
||||
|
||||
@ -42,4 +42,12 @@ function get_url_arg(name) {
|
||||
return "";
|
||||
else
|
||||
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;
|
||||
}
|
||||
|
||||
@ -9,8 +9,7 @@ import website.utils
|
||||
def get_blog_list(args=None):
|
||||
"""
|
||||
args = {
|
||||
'limit_start': 0,
|
||||
'limit_page_length': 10,
|
||||
'start': 0,
|
||||
}
|
||||
"""
|
||||
import webnotes
|
||||
@ -24,11 +23,9 @@ def get_blog_list(args=None):
|
||||
comment_doctype='Blog' and comment_docname=`tabBlog`.name) as comments
|
||||
from `tabBlog`
|
||||
where ifnull(published,0)=1
|
||||
order by creation desc, name asc"""
|
||||
|
||||
from webnotes.widgets.query_builder import add_limit_to_query
|
||||
query, args = add_limit_to_query(query, args)
|
||||
|
||||
order by creation desc, name asc
|
||||
limit %s, 5""" % args.start
|
||||
|
||||
result = webnotes.conn.sql(query, args, as_dict=1)
|
||||
|
||||
# strip html tags from content
|
||||
@ -41,38 +38,6 @@ def get_blog_list(args=None):
|
||||
if not res['content']:
|
||||
res['content'] = website.utils.get_html(res['page_name'])
|
||||
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
|
||||
|
||||
|
||||
@ -6,4 +6,8 @@
|
||||
.comment-content {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 240px;
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,6 @@
|
||||
|
||||
{% block javascript %}
|
||||
{% include "js/blog_page.js" %}
|
||||
{% include "js/blog_subscribe.js" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block css %}
|
||||
@ -28,15 +27,32 @@
|
||||
<div class="blog-comments">
|
||||
|
||||
{% if not comment_list %}
|
||||
<div class="no-result help hide">
|
||||
<div class="alert no-comment">
|
||||
<p>Be the first one to comment</p>
|
||||
<br />
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% include 'html/comment.html' %}
|
||||
</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>
|
||||
|
||||
@ -15,29 +15,54 @@
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
// js inside blog page
|
||||
wn.pages['{{ name }}'].onload = function(wrapper) {
|
||||
erpnext.blog_list = new wn.ui.Listing({
|
||||
parent: $(wrapper).find('#blog-list').get(0),
|
||||
method: 'website.helpers.blog.get_blog_list',
|
||||
hide_refresh: true,
|
||||
no_toolbar: true,
|
||||
render_row: function(parent, data) {
|
||||
if(!data.comments) {
|
||||
data.comment_text = 'No comments yet.'
|
||||
} else if (data.comments===1) {
|
||||
data.comment_text = '1 comment.'
|
||||
|
||||
$(document).ready(function() {
|
||||
// make list of blogs
|
||||
blog.get_list();
|
||||
|
||||
$("#next-page").click(function() {
|
||||
blog.get_list();
|
||||
})
|
||||
});
|
||||
|
||||
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 {
|
||||
data.comment_text = data.comments + ' comments.'
|
||||
b.comment_text = b.comments + ' comments.'
|
||||
}
|
||||
|
||||
if(data.content && data.content.length==1000) {
|
||||
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>\
|
||||
$(repl('<h2><a href="%(page_name)s.html">%(title)s</a></h2>\
|
||||
<div class="help">%(comment_text)s</div>\
|
||||
%(content)s<br /><br />', data);
|
||||
},
|
||||
page_length: 10
|
||||
});
|
||||
erpnext.blog_list.run();
|
||||
%(content)s<br />\
|
||||
<p><a href="%(page_name)s">Read with comments...</a></p>\
|
||||
<hr /><br />', b)).appendTo($wrap);
|
||||
});
|
||||
blog.start += data.length;
|
||||
if(!data.length) {
|
||||
$("#next-page").toggle(false)
|
||||
.parent().append("<div class='alert'>Nothing more to show.</div>");
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -16,166 +16,61 @@
|
||||
|
||||
// js inside blog page
|
||||
|
||||
wn.provide('erpnext.blog');
|
||||
wn.pages['{{ name }}'].onload = function(wrapper) {
|
||||
erpnext.blog.wrapper = wrapper;
|
||||
$(document).ready(function() {
|
||||
var n_comments = $(".comment-row").length;
|
||||
|
||||
// sidebar
|
||||
//erpnext.blog.render_recent_list(wrapper);
|
||||
|
||||
// unhide no-result if no comments found
|
||||
erpnext.blog.toggle_no_result(wrapper);
|
||||
|
||||
// bind add comment button to comment dialog
|
||||
erpnext.blog.make_comment_dialog(wrapper);
|
||||
|
||||
// hide add comment button after 50 comments
|
||||
erpnext.blog.toggle_add_comment_btn(wrapper);
|
||||
}
|
||||
|
||||
erpnext.blog.adjust_page_height = function(wrapper) {
|
||||
if (!wrapper) { wrapper = erpnext.blog.wrapper; }
|
||||
if (!wrapper) { return; }
|
||||
|
||||
// adjust page height based on sidebar height
|
||||
var $main_page = $(wrapper).find('.layout-main-section');
|
||||
var $sidebar = $(wrapper).find('.layout-side-section');
|
||||
if ($sidebar.height() > $main_page.height()) {
|
||||
$main_page.height($sidebar.height());
|
||||
if(n_comments) {
|
||||
$(".no_comment").toggle(false);
|
||||
}
|
||||
}
|
||||
|
||||
erpnext.blog.render_recent_list = function(wrapper) {
|
||||
if (!wrapper) { wrapper = erpnext.blog.wrapper; }
|
||||
if (!wrapper) { return; }
|
||||
|
||||
wrapper.recent_list = new wn.ui.Listing({
|
||||
parent: $(wrapper).find('.recent-posts'),
|
||||
no_toolbar: true,
|
||||
method: 'website.helpers.blog.get_recent_blog_list',
|
||||
get_args: function() {
|
||||
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) {
|
||||
if (!wrapper) { wrapper = erpnext.blog.wrapper; }
|
||||
if (!wrapper) { return; }
|
||||
|
||||
var $blog_comments = $(wrapper).find('.blog-comments');
|
||||
var $comment_rows = $blog_comments.find('.comment-row');
|
||||
var $no_result = $blog_comments.find('.no-result');
|
||||
|
||||
if ($comment_rows.length == 0) {
|
||||
$no_result.removeClass('hide');
|
||||
} else {
|
||||
$no_result.addClass('hide');
|
||||
if(n_comments > 50) {
|
||||
$(".add-comment").toggle(false)
|
||||
.parent().append("<div class='alert'>Comments are closed.</div>")
|
||||
}
|
||||
}
|
||||
|
||||
erpnext.blog.make_comment_dialog = function(wrapper) {
|
||||
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;
|
||||
$(".add-comment").click(function() {
|
||||
$("#comment-form").toggle();
|
||||
$("#comment-form input, #comment-form, textarea").val("");
|
||||
})
|
||||
$("#submit-comment").click(function() {
|
||||
var args = {
|
||||
comment_by_fullname: $("[name='comment_by_fullname']").val(),
|
||||
comment_by: $("[name='comment_by']").val(),
|
||||
comment: $("[name='comment']").val(),
|
||||
cmd: "website.helpers.blog.add_comment",
|
||||
comment_doctype: "Blog",
|
||||
comment_docname: "{{ name }}",
|
||||
page_name: "{{ page_name }}"
|
||||
}
|
||||
|
||||
erpnext.blog.comment_dialog.fields_dict.post_comment
|
||||
.input.onclick = function() {
|
||||
erpnext.blog.add_comment(wrapper);
|
||||
$("#comment-form .alert").toggle(false);
|
||||
|
||||
if(!args.comment_by_fullname || !args.comment_by || !args.comment) {
|
||||
$("#comment-form .alert")
|
||||
.html("All fields are necessary to submit the comment.")
|
||||
.toggle(true);
|
||||
return false;
|
||||
}
|
||||
|
||||
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();
|
||||
|
||||
$.ajax({
|
||||
method: "POST",
|
||||
url: "server.py",
|
||||
data: args,
|
||||
dataType: "json",
|
||||
success: function(data) {
|
||||
if(data.exc) {
|
||||
$("#comment-form .alert")
|
||||
.html(data.exc)
|
||||
.toggle(true)
|
||||
} else {
|
||||
$(data.message).appendTo(".blog-comments");
|
||||
$(".no_comment").toggle(false);
|
||||
$(".add-comment").toggle(false);
|
||||
$("#comment-form")
|
||||
.replaceWith("<div class='alert'>Thank you for your comment!</div>")
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
erpnext.blog.add_comment_to_page = function(wrapper, comment) {
|
||||
$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>");
|
||||
}
|
||||
}
|
||||
return false;
|
||||
})
|
||||
})
|
||||
@ -2,7 +2,6 @@
|
||||
|
||||
{% block javascript %}
|
||||
{% include "js/blog.js" %}
|
||||
{% include "js/blog_subscribe.js" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block css %}
|
||||
@ -18,9 +17,12 @@
|
||||
<div class="layout-main">
|
||||
<h1>Blog</h1>
|
||||
<br>
|
||||
<div id="blog-list">
|
||||
<div id="blog-list" style="min-height: 400px;">
|
||||
<!-- blog list will be generated dynamically -->
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<button id="next-page" class="btn">More...</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user