Wahhh

Wahhh.js

(function(){
  
  _.templateSettings = {
    interpolate : /\{\{(.+?)\}\}/g,     // print value: {{ value_name }}
    evaluate    : /\{%([\s\S]+?)%\}/g,  // excute code: {% code_to_execute %}
    escape      : /\{%-([\s\S]+?)%\}/g  // excape HTML: {%- <script> %} prints &lt;script&gt;
  };
  
  // Setting up some shit.
  // Using our own namespace.
  // HD = HackDay
  var HD = {
    
    collections: {
      blank: {},
      live: {}
    },
    
    models: {},
    views: {},
    
    counts: {
      updates: 0
    },
    
    boot: function ()
    {
      // Markdown Object
      window.converter = new Showdown.converter();
      
      // Collections
      HD.collections.live.updates  = new HD.collections.blank.updates();
      
      // Load our initial view
      window.Content = new HD.views.updatesLibrary({
        collection: HD.collections.live.updates
      });
      
      // Sort out the counts in the header.
      HD.counts.updates = parseInt($("#updates_nav span.badge.button").text(), 10);
    }
  };
  
  
  
  //  ========================
  //  = Backbone Models      =
  //  ========================
  
  HD.models.post = Backbone.Model.extend({
    idAttribute: "_id",
    urlRoot: "/api/updates",
    
    initialize: function() {
      this.bind("sync", this.setId, this);
      this.grabComments(this);
    },
    
    setId: function() {
      this.id = this.id;
    },
    
    grabComments: function(update) {
      
    }
  });
  
  HD.models.comment = Backbone.Model.extend({
    idAttribute: "_id"
  });
  
  
  
  //  ========================
  //  = Backbone Collections =
  //  ========================
  
  HD.collections.blank.updates = Backbone.Collection.extend({
    url: "/api/updates",
    model: HD.models.post
  });
  
  HD.collections.blank.comments = Backbone.Collection.extend({
    model: HD.models.comment
  });
  
  
  
  //  ========================
  //  = Backbone Views       =
  //  ========================
  
  HD.views.updatesLibrary = Backbone.View.extend({
    el: $("#updates"),
    
    events: {
      "click #update_submit": "newUpdate"
    },
    
    initialize: function() {
      this.render();
      
      this.collection.bind('add', this.addOne, this);
      this.collection.bind('sync', this.bindings, this);
      this.collection.bind('reset', this.addAll, this);
      
      this.collection.fetch();
    },
    
    render: function() {
      $("#updates").append(_.template($("#updates-view").html()));
      return this;
    },
    
    addAll: function() {
      this.collection.each(this.addOne);
    },
    
    addOne: function(update) {
      // Single Update's View
      var updateView = new HD.views.updateView({ model: update});
      this.$("ul.updates").prepend(updateView.render().el);
    },
    
    bindings: function(update) {
      console.log(update);
    },
    
    newUpdate: function() {
      if (!$("#update-form textarea[name=body]").val()) { return; }
      
      var update = {
        body: $("#update-form textarea[name=body]").val()
      };
      
      HD.collections.live.updates.create(update, { wait: true });
      $("#update-form textarea[name=body]").val('');
    }
  });
  
  
  HD.views.updateView = Backbone.View.extend({
    tagName: "li",
    
    template: _.template($("#update-item").html()),
    
    events: {
      "click .likes.action": "likeUpdate",
      "click .comments-count.action": "toggleComments",
      "click .new-comment": "newComment"
    },
    
    initialize: function() {
      $(this.el).attr('id', this.model.id);
      
      this.model.bind("change", this.render, this);
      
      this.model.comments = new HD.collections.blank.comments();
      this.model.comments.url = '/api/updates/' + this.model.id + '/comments';
      this.model.comments.bind("add", this.renderComment, this);
      this.model.comments.fetch();
      
      console.log(this);
      
    },
    
    render: function() {
      this.$el.html(this.template(this.model.toJSON()));
      return this;
    },
    
    likeUpdate: function(e) {
      // var likes = this.model.get('likes');
      // likes.create({ something: "bang" });
      var button = $(e.currentTarget);
      var count = parseInt(button.find('span.text').text(), 10);
      
      $.ajax({
        url: '/api/updates/' + this.model.id + "/like"
      });
      
      if ( button.hasClass("active") ) {
        button.removeClass("active");
        button.find('span.text').text(count - 1);
      }
      else {
        button.addClass("active");
        button.find('span.text').text(count + 1);
      }
    },
    
    toggleComments: function(e) {
      $(e.currentTarget).toggleClass("active");
      $("#" + this.model.id + " .comment-box").toggleClass("active");

      if (this.model.get('comments_count') !== 0) {
        $("#" + this.model.id + " .comment-box .comments").empty();
        this.model.comments.each(this.renderComment);
      }
    },
    
    renderComment: function(comment) {
      if ($("#" + comment.attributes.commentable_id + " .comment-box ul.comments li.no_comment")) {
        $("#" + comment.attributes.commentable_id + " .comment-box ul.comments li.no_comment").remove();
      }
      var updateView = new HD.views.commentItem({ model: comment });
      $("#" + comment.attributes.commentable_id + " .comment-box ul.comments").append(updateView.render().el);
    },
    
    newComment: function() {
      if (!$("#" + this.model.id + " textarea.comment-body").val()) { return; }
      
      var comment = {
        body: $("#" + this.model.id + " textarea.comment-body").val()
      };
      
      this.model.comments.create(comment, { wait: true });
      $("#" + this.model.id + " textarea.comment-body").val('');
    }
  });
  
  HD.views.commentItem = Backbone.View.extend({
    tagName: "li",
    
    template: _.template($("#comment-item").html()),
    
    render: function() {
      this.$el.html(this.template(this.model.toJSON()));
      return this;
    }
  });
  
  
  
  //  ========================
  //  = Booting Function     =
  //  ========================
  
  $(document).ready(function() {
    HD.boot();
  });
  
}).call(this);