4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
12 var Comments = function(){
\r
13 var dialog, postLink, viewLink, txtComment;
\r
14 var tabs, commentsList, postBtn, renderer;
\r
15 var wait, error, errorMsg;
\r
16 var posting = false;
\r
20 // cache some elements for quick access
\r
21 txtComment = Roo.get('comment');
\r
22 commentsList = Roo.get('comments-list');
\r
23 postLink = Roo.get('post-comment');
\r
24 viewLink = Roo.get('view-comments');
\r
25 wait = Roo.get('post-wait');
\r
26 error = Roo.get('post-error');
\r
27 errorMsg = Roo.get('post-error-msg');
\r
29 this.createDialog();
\r
31 postLink.on('click', function(e){
\r
33 tabs.activate('post-tab');
\r
34 dialog.show(postLink);
\r
37 viewLink.on('click', function(e){
\r
39 tabs.activate('view-tab');
\r
40 dialog.show(viewLink);
\r
44 // submit the comment to the server
\r
45 submitComment : function(){
\r
47 wait.radioClass('active-msg');
\r
49 var commentSuccess = function(o){
\r
51 var data = renderer.parse(o.responseText);
\r
52 // if we got a comment back
\r
54 wait.removeClass('active-msg');
\r
55 renderer.append(data.comments[0]);
\r
58 error.radioClass('active-msg');
\r
59 errorMsg.update(o.responseText);
\r
63 var commentFailure = function(o){
\r
65 error.radioClass('active-msg');
\r
66 errorMsg.update('Unable to connect.');
\r
69 Roo.lib.Ajax.formRequest('comment-form', 'post.php',
\r
70 {success: commentSuccess, failure: commentFailure});
\r
73 createDialog : function(){
\r
74 dialog = new Roo.BasicDialog("comments-dlg", {
\r
82 dialog.addKeyListener(27, dialog.hide, dialog);
\r
83 postBtn = dialog.addButton('Post', this.submitComment, this);
\r
84 dialog.addButton('Close', dialog.hide, dialog);
\r
87 // clear any messages and indicators when the dialog is closed
\r
88 dialog.on('hide', function(){
\r
89 wait.removeClass('active-msg');
\r
90 error.removeClass('active-msg');
\r
91 txtComment.dom.value = '';
\r
94 // stoe a refeence to the tabs
\r
95 tabs = dialog.getTabs();
\r
97 // auto fit the comment box to the dialog size
\r
98 var sizeTextBox = function(){
\r
99 txtComment.setSize(dialog.size.width-44, dialog.size.height-264);
\r
102 dialog.on('resize', sizeTextBox);
\r
104 // hide the post button if not on Post tab
\r
105 tabs.on('tabchange', function(panel, tab){
\r
106 postBtn.setVisible(tab.id == 'post-tab');
\r
109 // set up the comment renderer, all ajax requests for commentsList
\r
110 // go through this render
\r
111 renderer = new CommentRenderer(commentsList);
\r
112 var um = commentsList.getUpdateManager();
\r
113 um.setRenderer(renderer);
\r
115 // lazy load the comments when the view tab is activated
\r
116 var commentsLoaded = false;
\r
117 tabs.getTab('view-tab').on('activate', function(){
\r
118 if(!commentsLoaded){
\r
119 um.update('comments.txt');
\r
120 commentsLoaded = true;
\r
127 // This class handles rendering JSON into comments
\r
128 var CommentRenderer = function(list){
\r
129 // create a template for each JSON object
\r
130 var tpl = new Roo.DomHelper.Template(
\r
131 '<li id="comment-{id}">' +
\r
132 '<div class="cheader">' +
\r
133 '<div class="cuser">{author}:</div>' +
\r
134 '<div class="commentmetadata">{date}</div>' +
\r
135 '</div>{text}</li>'
\r
138 this.parse = function(json){
\r
140 return eval('(' + json + ')');
\r
145 // public render function for use with UpdateManager
\r
146 this.render = function(el, response){
\r
147 var data = this.parse(response.responseText);
\r
148 if(!data || !data.comments || data.comments.length < 1){
\r
149 el.update('There are no comments for this post.');
\r
154 for(var i = 0, len = data.comments.length; i < len; i++){
\r
155 this.append(data.comments[i]);
\r
159 // appends a comment
\r
160 this.append = function(data){
\r
161 tpl.append(list.dom, data);
\r
165 Roo.EventManager.onDocumentReady(Comments.init, Comments, true);