refactored blog client-side code
diff --git a/home/page/latest_updates/latest_updates.js b/home/page/latest_updates/latest_updates.js
index f41c547..d1e46ef 100644
--- a/home/page/latest_updates/latest_updates.js
+++ b/home/page/latest_updates/latest_updates.js
@@ -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.",
diff --git a/public/js/website_utils.js b/public/js/website_utils.js
index eb6363f..f35ad4c 100644
--- a/public/js/website_utils.js
+++ b/public/js/website_utils.js
@@ -42,4 +42,12 @@
return "";
else
return decodeURIComponent(results[1]);
-}
\ No newline at end of file
+}
+
+function repl(s, dict) {
+ if(s==null)return '';
+ for(key in dict) {
+ s = s.split("%("+key+")s").join(dict[key]);
+ }
+ return s;
+}
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>