git.roojs.org Git - roojs1/blob - examples/dialog/post.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */\r
  11 \r
  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
  17     \r
  18     return {\r
  19         init : function(){\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
  28              \r
  29              this.createDialog();\r
  30              \r
  31              postLink.on('click', function(e){\r
  32                  e.stopEvent();\r
  33                  tabs.activate('post-tab');\r
  34                  dialog.show(postLink);\r
  35              });\r
  36              \r
  37              viewLink.on('click', function(e){\r
  38                  e.stopEvent();\r
  39                  tabs.activate('view-tab');\r
  40                  dialog.show(viewLink);\r
  41              });             \r
  42         },\r
  43         \r
  44         // submit the comment to the server\r
  45         submitComment : function(){\r
  46             postBtn.disable();\r
  47             wait.radioClass('active-msg');\r
  48             \r
  49             var commentSuccess = function(o){\r
  50                 postBtn.enable();\r
  51                 var data = renderer.parse(o.responseText);\r
  52                 // if we got a comment back\r
  53                 if(data){\r
  54                     wait.removeClass('active-msg');\r
  55                     renderer.append(data.comments[0]);\r
  56                     dialog.hide();\r
  57                 }else{\r
  58                     error.radioClass('active-msg');\r
  59                     errorMsg.update(o.responseText);\r
  60                 }\r
  61             };\r
  62             \r
  63             var commentFailure = function(o){\r
  64                 postBtn.enable();\r
  65                 error.radioClass('active-msg');\r
  66                 errorMsg.update('Unable to connect.');\r
  67             };\r
  68     \r
  69             Roo.lib.Ajax.formRequest('comment-form', 'post.php',\r
  70                     {success: commentSuccess, failure: commentFailure});          \r
  71         },\r
  72         \r
  73         createDialog : function(){\r
  74             dialog = new Roo.BasicDialog("comments-dlg", { \r
  75                     autoTabs:true,\r
  76                     width:500,\r
  77                     height:300,\r
  78                     shadow:true,\r
  79                     minWidth:300,\r
  80                     minHeight:300\r
  81             });\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
  85 \r
  86             \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
  92             });\r
  93             \r
  94             // stoe a refeence to the tabs\r
  95             tabs = dialog.getTabs();\r
  96             \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
 100             };\r
 101             sizeTextBox();\r
 102             dialog.on('resize', sizeTextBox);\r
 103             \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
 107             });\r
 108             \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
 114             \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
 121                 }\r
 122             });\r
 123         }\r
 124     };\r
 125 }();\r
 126 \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
 136     );\r
 137     \r
 138     this.parse = function(json){\r
 139         try{\r
 140             return eval('(' + json + ')');\r
 141         }catch(e){}\r
 142         return null;\r
 143     };\r
 144     \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
 150             return;\r
 151         }\r
 152         // clear loading\r
 153         el.update('');\r
 154         for(var i = 0, len = data.comments.length; i < len; i++){\r
 155             this.append(data.comments[i]);\r
 156         }\r
 157     };\r
 158     \r
 159     // appends a comment \r
 160     this.append = function(data){\r
 161         tpl.append(list.dom, data);\r
 162     };\r
 163 };\r
 164 \r
 165 Roo.EventManager.onDocumentReady(Comments.init, Comments, true);