Add ability to toggle aspects

app/assets/javascripts/app/collections/aspects.js

@@ -1,3 +1,21 @@
 app.collections.Aspects = Backbone.Collection.extend({
-  model: app.models.Aspect
+  model: app.models.Aspect,
+
+  selectedAspectsIds: function(){
+    return _.pluck(_.filter(this.toJSON(), function(a){
+              return a.selected;
+      }), 'id');
+  },
+
+  allSelected: function(){
+    return this.length === _.filter(this.toJSON(), function(a){ return a.selected; }).length;
+  },
+
+  selectAll: function(){
+    this.map(function(a){ a.set({ 'selected' : true })} );
+  },
+
+  deselectAll: function(){
+    this.map(function(a){ a.set({ 'selected' : false })} );
+  }
 })

app/assets/javascripts/app/models/aspect.js

@@ -1,2 +1,5 @@
 app.models.Aspect = Backbone.Model.extend({
+  toggleSelected: function(){
+    this.set({'selected' : !this.get('selected')});
+  }
 });

app/assets/javascripts/app/router.js

@@ -91,7 +91,7 @@ app.Router = Backbone.Router.extend({
 
   aspects_stream : function(){
 
-    var ids = app.aspects.selectedAspects();
+    var ids = app.aspects.selectedAspectsIds();
 
     app.stream = new app.models.Stream([], {url: '/aspects'});
     app.stream.fetch({data: $.param({a_ids:ids})});

app/assets/javascripts/app/views/aspect_view.js

@@ -3,6 +3,23 @@ app.views.Aspect = app.views.Base.extend({
 
   tagName: "li",
 
+  initialize: function(){
+    if (this.model.get('selected')){
+      this.$el.addClass('active');
+    };
+  },
+
+  events: {
+    'click a.aspect_selector': 'toggleAspect'
+  },
+
+  toggleAspect: function(evt){
+    if (evt) { evt.preventDefault(); };
+    this.$el.toggleClass('active');
+    this.model.toggleSelected();
+    app.router.aspects_stream();
+  },
+
   presenter : function() {
     return _.extend(this.defaultPresenter(), {
       aspect : this.model

app/assets/javascripts/app/views/aspects_list_view.js

@@ -3,7 +3,11 @@ app.views.AspectsList = app.views.Base.extend({
 
   el: '#aspects_list',
 
-  postRenderTemplate : function() {
+  events: {
+    'click .toggle_selector' : 'toggleAll'
+  },
+
+  postRenderTemplate: function() {
     this.collection.each(this.appendAspect, this);
     this.$('a[rel*=facebox]').facebox();
   },
@@ -12,6 +16,30 @@ app.views.AspectsList = app.views.Base.extend({
     $("#aspects_list > *:last").before(new app.views.Aspect({
       model: aspect, attributes: {'data-aspect_id': aspect.get('id')}
     }).render().el);
-  }
+  },
 
+  toggleAll: function(evt){
+    if (evt) { evt.preventDefault(); };
+
+    if (this.collection.allSelected()) {
+      this.collection.deselectAll();
+      this.$('li:not(:last)').removeClass("active");
+    } else {
+      this.collection.selectAll();
+      this.$('li:not(:last)').addClass("active");
+    }
+
+    this.toggleSelector();
+
+    app.router.aspects_stream();
+  },
+
+  toggleSelector: function(){
+    var selector = this.$('a.toggle_selector');
+    if (this.collection.allSelected()) {
+      selector.text(Diaspora.I18n.t('aspect_navigation.deselect_all'));
+    } else {
+      selector.text(Diaspora.I18n.t('aspect_navigation.select_all'));
+    }
+  }
 })

app/assets/templates/aspects-list_tpl.jst.hbs

@@ -1,6 +1,6 @@
 <a class="toggle_selector" href="#">
-  Select All o no
+  {{ t "aspect_navigation.select_all" }}
 </a>
 <li>
-  <a class="new_aspect" href="/aspects/new" rel="facebox">t('.add_an_aspect')</a>
+  <a class="new_aspect" href="/aspects/new" rel="facebox">{{ t "aspect_navigation.add_an_aspect" }}</a>
 </li>

config/locales/javascript/javascript.en.yml

@@ -64,6 +64,7 @@ en:
       select_all: "Select all"
       deselect_all: "Deselect all"
       no_aspects: "No aspects selected"
+      add_an_aspect: "+ Add an aspect"
     getting_started:
       hey: "Hey, <%= name %>!"
       no_tags: "Hey, you haven't followed any tags!  Continue anyway?"