/static/js/post_list.js

  1/**
  2 * Created by PyCharm.
  3 * User: Administrator
  4 * Date: 12-5-3
  5 * Time: 下午9:10
  6 * To change this template use File | Settings | File Templates.
  7 */
  8(function(){
  9
 10    window.Post = Backbone.Model.extend({
 11        urlRoot: POST_API,
 12        idAttribute:'post_id'
 13    });
 14
 15    window.Comment = Backbone.Model.extend({
 16        urlRoot: COMMENT_API,
 17        idAttribute:'comment_id'
 18    });
 19
 20    window.Posts = PaginatedCollection.extend({
 21        model: Post,
 22        urlRoot: POST_API,
 23
 24        // properies needed for PaginatedCollection
 25        baseUrl:POST_API,
 26        limit: 10,
 27        filter_options : {"course__course_id":1},
 28        sort_field : "-ctime",
 29
 30//        comparator: function(post){
 31//            return post.get("ctime");
 32//        },
 33
 34        maybeFetch : function(options){
 35            if(this._fetched){
 36                options.success && options.success();
 37                return;
 38            }
 39            var self = this;
 40            var successWrapper = function(success){
 41                return function(){
 42                    self._fetched = true;
 43                    success && success.apply(this,arguments);
 44                };
 45            };
 46            options.success = successWrapper(options.success);
 47            this.fetch(options);
 48        }
 49
 50    });
 51
 52    window.Comments = Backbone.Collection.extend({
 53        model: Comment,
 54        urlRoot: COMMENT_API,
 55
 56        maybeFetch : function(options){
 57            if(this._fetched){
 58                options.success && options.success();
 59                return;
 60            }
 61            var self = this;
 62            var successWrapper = function(success){
 63                return function(){
 64                    self._fetched = true;
 65                    success && success.apply(this,arguments);
 66                };
 67            };
 68            options.success = successWrapper(options.success);
 69            this.fetch(options);
 70        }
 71    });
 72
 73    window.PostView = Backbone.View.extend({
 74        tagName: 'div',
 75        className: 'postAbs',
 76
 77        events: {
 78            'click .delete': 'clear',
 79            'click .show-comment' :'show_comment',
 80            'click .comment-submit': 'add_comment'
 81        },
 82
 83        initialize: function(){
 84            this.model.bind('change', this.change_view, this);
 85            this.model.bind('destroy', this.remove, this);
 86
 87            $(this.el).data("comment_state","hide");
 88
 89            this.comment_collection = new Comments();
 90        },
 91
 92        change_view: function(){
 93            this.$('.comment-num').html(this.model.get("comment_count"));
 94        },
 95
 96        clear: function(e){
 97            e.preventDefault();
 98           this.model.destroy({
 99               success: function(){ },
100               error: function(){ alert("delete failed!"); },
101               wait:true
102           });
103        },
104
105        showCommentPanel: function(){
106            this.$(".comment-panel").slideDown();
107        },
108
109        hideCommentPanel: function(){
110           this.$(".comment-panel").slideUp();
111        },
112
113        show_comment: function(e){
114            e.preventDefault();
115            if($(this.el).data("comment_state")=="hide"){
116                this.showCommentPanel();
117                $(this.el).data("comment_state","show");
118
119                var view = new CommentSlideDownView({
120                    el: this.$('.comment-panel'),
121                    collection: this.comment_collection,
122                    model: this.model
123                });
124                view.setPostPt(this);
125                view.render(this.model);
126                this.comment_collection.fetch({
127                     fail: function(){alert("failed to load comments");},
128                     data: {"post__post_id": this.model.id}
129                 });
130
131            }
132            else{
133                this.hideCommentPanel();
134                $(this.el).data("comment_state","hide");
135            }
136        },
137
138        add_comment: function(){
139            var content = this.$('#new-comment-content').val();
140            if(content){
141                // add new comment
142                post_list_app.comments.create({
143                    school: SCHOOL,
144                    course: COURSE,
145                    creator: PARTICIPANT,
146                    content: content,
147                    post: POST_API + this.model.id +"/",
148                    isdeleted : false
149                },{ wait: true});
150                this.$('#new-comment-content').val('');
151
152               // update the comment-count
153                this.model.save(
154                    {comment_count: this.model.get("comment_count") + 1} ,
155                    {error: function(){alert("fail update")}}
156                );
157            }
158        },
159        render: function(){
160            $(this.el).html(ich.postAbsTemplate(this.model.toJSON()));
161            return this;
162        }
163    });
164
165    window.CommentView = Backbone.View.extend({
166        tagName: 'div',
167        className: 'comment',
168
169        events:{
170            'click .delete-comment': 'clear'
171        },
172
173        initialize: function(){
174            this.model.bind('change', this.render, this);
175            this.model.bind('destroy', this.remove, this);
176        },
177
178        setPost: function(post){
179            this.post = post;
180        },
181
182        clear: function(e){
183            //window.alert('deleting comment');
184            e.preventDefault();
185            this.model.destroy({
186                error: function(){ alert("delete failed!"); },
187                wait:true
188            });
189
190            // update the comment-count
191            this.post.save(
192                {comment_count: this.post.get("comment_count") - 1},
193                {error: function(){ alert("fail update"); }}
194            );
195        },
196
197        render: function(){
198            $(this.el).html(ich.commentTemplate(this.model.toJSON()));
199            return this;
200        }
201    });
202
203    window.PostListView = Backbone.View.extend({
204        initialize: function(){
205            _.bindAll(this, 'addOne', 'appendOne','addAll');
206
207            this.collection.bind('add', this.addOne);
208            this.collection.bind('reset', this.addAll, this);
209            //$(window).bind('scroll', this.collection, this.loadMore);
210            this.views = [];
211        },
212
213        addAll: function(){
214            this.views = [];  //view.remove()清除
215            this.collection.each(this.appendOne);
216        },
217
218        //used when fetch old posts
219        appendOne: function(post){
220            var view = new PostView({
221                model: post
222            });
223            $(this.el).append(view.render().el);
224            this.views.push(view);
225            view.bind('all', this.rethrow, this);
226        },
227
228        //used when create new post
229        addOne: function(post){
230            var view = new PostView({
231                model: post
232            });
233            $(this.el).prepend(view.render().el);
234            this.views.push(view);
235            view.bind('all', this.rethrow, this);
236        },
237
238        rethrow: function(){
239            this.trigger.apply(this, arguments);
240        }
241    });
242
243
244    window.EditorView = Backbone.View.extend({
245        events:{
246            'click .b-submit': 'createPost'
247        },
248
249        createPost: function(){
250            //var content = this.$('#textContent').val();
251            var content = this.$('#textContent').editorBox("get_code");
252            if(content){
253                this.collection.create({
254                    school: SCHOOL,
255                    course: COURSE,
256                    creator: PARTICIPANT,
257                    content: content,
258                    comment_count : 0,
259                    isdeleted : false
260                },{ wait: true});
261                this.$('#textContent').val('');
262            }
263        },
264
265        render: function(){
266          $(this.el).html(ich.postEditor());
267        }
268    });
269
270    window.CommentSlideDownView = Backbone.View.extend({
271       events:{
272           'click .comment-submit': 'addComment',
273           'click .view-all': 'view_all_comments'
274       },
275
276       initialize: function(){
277           _.bindAll(this, 'addOne', 'addAll');
278
279           this.collection.bind('add', this.addOne);
280           this.collection.bind('reset', this.addAll, this);
281
282           this.views = [];
283           this.postpt = null;
284       },
285
286       addAll: function(){
287           this.views = [];
288           this.$('.comments').html("");
289           this.collection.each(this.addOne);
290       },
291
292       addOne: function(comment){
293           var view = new CommentView({
294               model: comment
295           });
296           view.setPost(this.post);
297           this.$(".comments").prepend(view.render().el);
298           this.views.push(view);
299           view.bind('all', this.rethrow, this);
300       },
301
302        //set PostView pointer(this)
303       setPostPt: function(pt){
304           this.postpt = pt;
305       },
306
307       view_all_comments: function(e){
308           e.preventDefault();
309           //popup window
310           $.blockUI({
311                 message: $('.view-all-panel'),    //pop up element
312                 css: {    //element css
313                     textAlign:'left',
314                     top: '50%',
315                     left: '50%',
316                     marginLeft: '-350px',
317                     marginTop: '-250px',
318                     background: 'transparent',
319                     width: '700px',
320                     height: '500px',
321                     cursor: 'arrow',
322                     border: 'none'
323                 },
324                 overlayCSS:  {
325                     cursor:'arrow'
326                 }
327             });
328           $('.blockOverlay').click($.unblockUI);   //close when click on overlay
329           $('.view-all-panel #close').click($.unblockUI);  //close when click on close-button
330           $('.view-all-panel .popup-comment').click(function(e){e.stopPropagation();});
331           $('.view-all-panel').click( $.unblockUI);
332
333           //hide comment slide down panel
334           $(this.el).hide();
335           $(this.postpt.el).data("comment_state","hide");
336
337           post_list_app.popupComment.render( this.model);
338           post_list_app.comments.fetch({
339                fail: function(){alert("fail");},
340                data: {"post__post_id": this.model.id}
341            });
342       },
343
344       addComment: function(){
345           var content = this.$('#new-comment-content').val();
346           if(content){
347               // add new comment
348               this.collection.create({
349                   school: SCHOOL,
350                   course: COURSE,
351                   creator: PARTICIPANT,
352                   content: content,
353                   post: POST_API + this.post.id +"/",
354                   isdeleted : false
355               },{ wait: true});
356               this.$('#new-comment-content').val('');
357
358               // update the comment-count
359               this.post.save(
360                   {comment_count: this.post.get("comment_count") + 1} ,
361                   {error: function(){alert("fail update")}}
362               );
363           }
364       },
365
366       render: function(post){
367           this.post = post;
368           $(this.el).html(ich.commentSlideDown(post.toJSON()));
369       }
370   });
371
372    window.CommentPopupView = Backbone.View.extend({
373        events:{
374            'click .headAction': 'closePopup',
375            'click .comment-submit': 'addComment'
376        },
377
378        initialize: function(){
379            _.bindAll(this, 'addOne', 'addAll');
380
381            this.collection.bind('add', this.addOne);
382            this.collection.bind('reset', this.addAll, this);
383
384            this.views = [];
385        },
386
387        addAll: function(){
388            this.views = [];
389            this.collection.each(this.addOne);
390        },
391
392        addOne: function(comment){
393            var view = new CommentView({
394                model: comment
395            });
396            view.setPost(this.post);
397            this.$(".comments").prepend(view.render().el);
398            this.views.push(view);
399            view.bind('all', this.rethrow, this);
400        },
401
402        closePopup: function(){
403          $(this.el).hide();
404        },
405
406        addComment: function(){
407            var content = this.$('#new-comment-content').val();
408            if(content){
409                // add new comment
410                this.collection.create({
411                    school: SCHOOL,
412                    course: COURSE,
413                    creator: PARTICIPANT,
414                    content: content,
415                    post: POST_API + this.post.id +"/",
416                    isdeleted : false
417                },{ wait: true});
418                this.$('#new-comment-content').val('');
419
420                // update the comment-count
421                this.post.save(
422                    {comment_count: this.post.get("comment_count") + 1} ,
423                    {error: function(){alert("fail update")}}
424                );
425            }
426        },
427
428        render: function(post){
429            this.post = post;
430            $(this.el).html(ich.commentPopup(this.post.toJSON()));
431
432            //this.postDetailView.render();
433        }
434    });
435
436    window.PostDetailView = Backbone.View.extend({
437        render: function(){
438            $(this.el).html(ich.postDetail(this.model.toJSON()));
439            return this;
440        }
441    });
442
443    window.PostPaginatedCollection = PaginatedCollection.extend({
444        baseUrl : "/api/v1/post/"
445    });
446
447    $(function(){
448        window.post_list_app =   window.post_list_app || {};
449
450        post_list_app.posts = new Posts();
451        post_list_app.comments = new Comments();
452
453        //initialize the post editor view
454        post_list_app.editor = new EditorView({
455            el: $("#composer"),
456            collection: post_list_app.posts
457        });
458        post_list_app.editor.render();
459
460        //initialize the post list view
461        post_list_app.postlist = new PostListView({
462            el:$(".postArea"),
463            collection: post_list_app.posts
464        });
465
466        post_list_app.posts.maybeFetch({
467            success: _.bind(post_list_app.postlist.render, post_list_app.postlist)
468            //data: {"course__course_id":1,"order_by":"-ctime"}
469        });
470
471        //initialize the popup view, but do not show it
472        post_list_app.popupComment = new CommentPopupView({
473            el:$(".view-all-panel .popup-comment"),
474            collection: post_list_app.comments
475        });
476
477        //$("#textContent").val("aaaaa");
478        require([
479            'tinymce.editor_box'
480        ], function() {
481            $("#textContent").editorBox();
482        });
483
484    });
485})();