refactored blog client-side code
diff --git a/website/helpers/blog.py b/website/helpers/blog.py
index 02230dc..2bff6e5 100644
--- a/website/helpers/blog.py
+++ b/website/helpers/blog.py
@@ -9,8 +9,7 @@
def get_blog_list(args=None):
"""
args = {
- 'limit_start': 0,
- 'limit_page_length': 10,
+ 'start': 0,
}
"""
import webnotes
@@ -24,11 +23,9 @@
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 @@
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
diff --git a/website/templates/css/blog_page.css b/website/templates/css/blog_page.css
index 928b8ac..8f56cd2 100644
--- a/website/templates/css/blog_page.css
+++ b/website/templates/css/blog_page.css
@@ -6,4 +6,8 @@
.comment-content {
margin-left: 20px;
}
+
+ input {
+ width: 240px;
+ }
</style>
\ No newline at end of file
diff --git a/website/templates/html/blog_page.html b/website/templates/html/blog_page.html
index 5421f00..87dcfef 100644
--- a/website/templates/html/blog_page.html
+++ b/website/templates/html/blog_page.html
@@ -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>
diff --git a/website/templates/js/blog.js b/website/templates/js/blog.js
index 24cdf15..43b2d70 100644
--- a/website/templates/js/blog.js
+++ b/website/templates/js/blog.js
@@ -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>");
+ }
+ }
}
\ No newline at end of file
diff --git a/website/templates/js/blog_page.js b/website/templates/js/blog_page.js
index 12dcac1..2e8de7e 100644
--- a/website/templates/js/blog_page.js
+++ b/website/templates/js/blog_page.js
@@ -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>");
- }
-}
\ No newline at end of file
+ return false;
+ })
+})
\ No newline at end of file
diff --git a/website/templates/pages/blog.html b/website/templates/pages/blog.html
index c4a5dad..75681d5 100644
--- a/website/templates/pages/blog.html
+++ b/website/templates/pages/blog.html
@@ -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>