mirror of
https://github.com/frappe/erpnext.git
synced 2026-05-13 18:21:22 +00:00
refactored blog client-side code
This commit is contained in:
Rushabh Mehta
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user