planetstack/core/xoslib/static/js/angrycats.js

MyApp = new Backbone.Marionette.Application();

MyApp.addRegions({
    mainRegion: "#content"
});

AngryCat = Backbone.Model.extend({
    defaults: {
	votes: 0
    },
  
    addVote: function(){
	this.set('votes', this.get('votes') + 1);
    },
  
    rankUp: function() {
	this.set({rank: this.get('rank') - 1});
    },
  
    rankDown: function() {
	this.set({rank: this.get('rank') + 1});
    }
});

AngryCats = Backbone.Collection.extend({
    model: AngryCat,
  
    initialize: function(cats){
	var rank = 1;
	_.each(cats, function(cat) {
	    cat.set('rank', rank);
	    ++rank;
	});
    
	this.on('add', function(cat){
	    if( ! cat.get('rank') ){
		var error = Error("Cat must have a rank defined before being added to the collection");
		error.name = "NoRankError";
		throw error;
	    }
	});
    
	var self = this;

	MyApp.on("rank:up", function(cat){
	    if (cat.get('rank') === 1) {
        // can't increase rank of top-ranked cat
		return true;
	    }
	    self.rankUp(cat);
	    self.sort();
	    self.trigger("reset");
	});

	MyApp.on("rank:down", function(cat){
	    if (cat.get('rank') === self.size()) {
        // can't decrease rank of lowest ranked cat
		return true;
	    }
	    self.rankDown(cat);
	    self.sort();
	    self.trigger("reset");
	});
    
	MyApp.on("cat:disqualify", function(cat){
	    var disqualifiedRank = cat.get('rank');
	    var catsToUprank = self.filter(
		function(cat){ return cat.get('rank') > disqualifiedRank; }
	    );
	    catsToUprank.forEach(function(cat){
		cat.rankUp();
	    });
	    self.trigger('reset');
	});
    },

    comparator: function(cat) {
	return cat.get('rank');
    },
  
    rankUp: function(cat) {
    // find the cat we're going to swap ranks with
	var rankToSwap = cat.get('rank') - 1;
	var otherCat = this.at(rankToSwap - 1);
    
    // swap ranks
	cat.rankUp();
	otherCat.rankDown();
    },
  
    rankDown: function(cat) {
    // find the cat we're going to swap ranks with
	var rankToSwap = cat.get('rank') + 1;
	var otherCat = this.at(rankToSwap - 1);
    
    // swap ranks
	cat.rankDown();
	otherCat.rankUp();
    }
});

AngryCatView = Backbone.Marionette.ItemView.extend({
    template: "#angry_cat-template",
    tagName: 'tr',
    className: 'angry_cat',
  
    events: {
	'click .rank_up img': 'rankUp',
	'click .rank_down img': 'rankDown',
	'click a.disqualify': 'disqualify'
    },
  
    initialize: function(){
	this.listenTo(this.model, "change:votes", this.render);
    },
  
    rankUp: function(){
	this.model.addVote();
	MyApp.trigger("rank:up", this.model);
    },
  
    rankDown: function(){
	this.model.addVote();
	MyApp.trigger("rank:down", this.model);
    },
  
    disqualify: function(){
	MyApp.trigger("cat:disqualify", this.model);
	this.model.destroy();
    }
});

AngryCatsView = Backbone.Marionette.CompositeView.extend({
    tagName: "table",
    id: "angry_cats",
    className: "table-striped table-bordered",
    template: "#angry_cats-template",
    itemView: AngryCatView,
  
    initialize: function(){
	this.listenTo(this.collection, "sort", this.renderCollection);
    },
  
    appendHtml: function(collectionView, itemView){
	collectionView.$("tbody").append(itemView.el);
    }
});

MyApp.addInitializer(function(options){
    var angryCatsView = new AngryCatsView({
	collection: options.cats
    });
    MyApp.mainRegion.show(angryCatsView);
});

$(document).ready(function(){
    var cats = new AngryCats([
	new AngryCat({ name: 'Wet Cat', image_path: 'assets/images/cat2.jpg' }),
	new AngryCat({ name: 'Bitey Cat', image_path: 'assets/images/cat1.jpg' }),
	new AngryCat({ name: 'Surprised Cat', image_path: 'assets/images/cat3.jpg' })
    ]);

    MyApp.start({cats: cats});
  
    cats.add(new AngryCat({
	name: 'Cranky Cat',
	image_path: 'assets/images/cat4.jpg',
	rank: cats.size() + 1
    }));
});