From eabdc7390cab3d5f19e118fcc568925a68ff8d84 Mon Sep 17 00:00:00 2001
From: Steffen van Bergerem <svbergerem@online.de>
Date: Thu, 13 Mar 2014 21:34:22 +0100
Subject: [PATCH] Port aspect membership dropdown and hovercards

---
 app/assets/javascripts/app/app.js             |   2 +-
 .../views/aspect_membership_blueprint_view.js | 161 ++++++++++++++++++
 .../app/views/aspect_membership_view.js       |  59 ++-----
 .../javascripts/app/views/hovercard_view.js   |   6 +-
 .../views/publisher/aspect_selector_view.js   |   2 +-
 app/assets/stylesheets/aspects.css.scss       |   5 +-
 app/assets/stylesheets/buttons.css.scss       |  19 ++-
 app/assets/stylesheets/hovercard.css.scss     |  15 +-
 app/controllers/people_controller.rb          |   3 +-
 app/helpers/aspect_global_helper.rb           |  23 ++-
 app/helpers/people_helper.rb                  |   3 +-
 .../_aspect_membership_dropdown.html.haml     |  26 +++
 ...t_membership_dropdown_blueprint.html.haml} |   6 +-
 .../people/_aspect_membership_dropdown.haml   |   2 +-
 .../jasmine_fixtures/people_spec.rb           |  16 ++
 .../aspect_membership_blueprint_view_spec.js  | 118 +++++++++++++
 .../app/views/aspect_membership_view_spec.js  |  74 ++------
 17 files changed, 415 insertions(+), 125 deletions(-)
 create mode 100644 app/assets/javascripts/app/views/aspect_membership_blueprint_view.js
 create mode 100644 app/views/aspect_memberships/_aspect_membership_dropdown.html.haml
 rename app/views/{shared/_aspect_dropdown.html.haml => aspect_memberships/_aspect_membership_dropdown_blueprint.html.haml} (81%)
 create mode 100644 spec/javascripts/app/views/aspect_membership_blueprint_view_spec.js

diff --git a/app/assets/javascripts/app/app.js b/app/assets/javascripts/app/app.js
index 07ad66910..2c9099bf7 100644
--- a/app/assets/javascripts/app/app.js
+++ b/app/assets/javascripts/app/app.js
@@ -99,7 +99,7 @@ var app = {
 
   setupGlobalViews: function() {
     app.hovercard = new app.views.Hovercard();
-    app.aspectMemberships = new app.views.AspectMembership();
+    app.aspectMembershipsBlueprint = new app.views.AspectMembershipBlueprint();
     app.sidebar = new app.views.Sidebar();
   },
 
diff --git a/app/assets/javascripts/app/views/aspect_membership_blueprint_view.js b/app/assets/javascripts/app/views/aspect_membership_blueprint_view.js
new file mode 100644
index 000000000..5608b32c2
--- /dev/null
+++ b/app/assets/javascripts/app/views/aspect_membership_blueprint_view.js
@@ -0,0 +1,161 @@
+/**
+ * this view lets the user (de-)select aspect memberships in the context
+ * of another users profile or the contact page.
+ *
+ * updates to the list of aspects are immediately propagated to the server, and
+ * the results are dislpayed as flash messages.
+ */
+app.views.AspectMembershipBlueprint = Backbone.View.extend({
+
+  initialize: function() {
+    // attach event handler, removing any previous instances
+    var selector = '.dropdown.aspect_membership .dropdown_list > li';
+    $('body')
+      .off('click', selector)
+      .on('click', selector, _.bind(this._clickHandler, this));
+
+    this.list_item = null;
+    this.dropdown  = null;
+  },
+
+  // decide what to do when clicked
+  //   -> addMembership
+  //   -> removeMembership
+  _clickHandler: function(evt) {
+    this.list_item = $(evt.target);
+    this.dropdown  = this.list_item.parent();
+
+    this.list_item.addClass('loading');
+
+    if( this.list_item.is('.selected') ) {
+      var membership_id = this.list_item.data('membership_id');
+      this.removeMembership(membership_id);
+    } else {
+      var aspect_id = this.list_item.data('aspect_id');
+      var person_id = this.dropdown.data('person_id');
+      this.addMembership(person_id, aspect_id);
+    }
+
+    return false; // stop the event
+  },
+
+  // return the (short) name of the person associated with the current dropdown
+  _name: function() {
+    return this.dropdown.data('person-short-name');
+  },
+
+  // create a membership for the given person in the given aspect
+  addMembership: function(person_id, aspect_id) {
+    var aspect_membership = new app.models.AspectMembership({
+      'person_id': person_id,
+      'aspect_id': aspect_id
+    });
+
+    aspect_membership.on('sync', this._successSaveCb, this);
+    aspect_membership.on('error', function() {
+      this._displayError('aspect_dropdown.error');
+    }, this);
+
+    aspect_membership.save();
+  },
+
+  _successSaveCb: function(aspect_membership) {
+    var aspect_id = aspect_membership.get('aspect_id');
+    var membership_id = aspect_membership.get('id');
+    var li = this.dropdown.find('li[data-aspect_id="'+aspect_id+'"]');
+
+    // the user didn't have this person in any aspects before, congratulate them
+    // on their newly found friendship ;)
+    if( this.dropdown.find('li.selected').length == 0 ) {
+      var msg = Diaspora.I18n.t('aspect_dropdown.started_sharing_with', { 'name': this._name() });
+      Diaspora.page.flashMessages.render({ 'success':true, 'notice':msg });
+    }
+
+    li.attr('data-membership_id', membership_id) // just to be sure...
+      .data('membership_id', membership_id)
+      .addClass('selected');
+
+    this.updateSummary();
+    this._done();
+  },
+
+  // show an error flash msg
+  _displayError: function(msg_id) {
+    this._done();
+    this.dropdown.removeClass('active'); // close the dropdown
+
+    var msg = Diaspora.I18n.t(msg_id, { 'name': this._name() });
+    Diaspora.page.flashMessages.render({ 'success':false, 'notice':msg });
+  },
+
+  // remove the membership with the given id
+  removeMembership: function(membership_id) {
+    var aspect_membership = new app.models.AspectMembership({
+      'id': membership_id
+    });
+
+    aspect_membership.on('sync', this._successDestroyCb, this);
+    aspect_membership.on('error', function() {
+      this._displayError('aspect_dropdown.error_remove');
+    }, this);
+
+    aspect_membership.destroy();
+  },
+
+  _successDestroyCb: function(aspect_membership) {
+    var membership_id = aspect_membership.get('id');
+    var li = this.dropdown.find('li[data-membership_id="'+membership_id+'"]');
+
+    li.removeAttr('data-membership_id')
+      .removeData('membership_id')
+      .removeClass('selected');
+
+    // we just removed the last aspect, inform the user with a flash message
+    // that he is no longer sharing with that person
+    if( this.dropdown.find('li.selected').length == 0 ) {
+      var msg = Diaspora.I18n.t('aspect_dropdown.stopped_sharing_with', { 'name': this._name() });
+      Diaspora.page.flashMessages.render({ 'success':true, 'notice':msg });
+    }
+
+    this.updateSummary();
+    this._done();
+  },
+
+  // cleanup tasks after aspect selection
+  _done: function() {
+    if( this.list_item ) {
+      this.list_item.removeClass('loading');
+    }
+  },
+
+  // refresh the button text to reflect the current aspect selection status
+  updateSummary: function() {
+    var btn = this.dropdown.parents('div.aspect_membership').find('.button.toggle');
+    var aspects_cnt = this.dropdown.find('li.selected').length;
+    var txt;
+
+    if( aspects_cnt == 0 ) {
+      btn.removeClass('in_aspects');
+      txt = Diaspora.I18n.t('aspect_dropdown.toggle.zero');
+    } else {
+      btn.addClass('in_aspects');
+      txt = this._pluralSummaryTxt(aspects_cnt);
+    }
+
+    btn.text(txt + ' ▼');
+  },
+
+  _pluralSummaryTxt: function(cnt) {
+    var all_aspects_cnt = this.dropdown.find('li').length;
+
+    if( cnt == 1 ) {
+      return this.dropdown.find('li.selected').first().text();
+    }
+
+    if( cnt == all_aspects_cnt ) {
+      return Diaspora.I18n.t('aspect_dropdown.all_aspects');
+    }
+
+    return Diaspora.I18n.t('aspect_dropdown.toggle', { 'count':cnt.toString() });
+  }
+});
diff --git a/app/assets/javascripts/app/views/aspect_membership_view.js b/app/assets/javascripts/app/views/aspect_membership_view.js
index aea67f090..f753c3134 100644
--- a/app/assets/javascripts/app/views/aspect_membership_view.js
+++ b/app/assets/javascripts/app/views/aspect_membership_view.js
@@ -1,3 +1,5 @@
+//= require ./aspects_dropdown_view
+
 /**
  * this view lets the user (de-)select aspect memberships in the context
  * of another users profile or the contact page.
@@ -5,15 +7,13 @@
  * updates to the list of aspects are immediately propagated to the server, and
  * the results are dislpayed as flash messages.
  */
-app.views.AspectMembership = Backbone.View.extend({
+app.views.AspectMembership = app.views.AspectsDropdown.extend({
+
+  events: {
+    "click ul.aspect_membership.dropdown-menu > li.aspect_selector": "_clickHandler"
+  },
 
   initialize: function() {
-    // attach event handler, removing any previous instances
-    var selector = '.dropdown.aspect_membership .dropdown_list > li';
-    $('body')
-      .off('click', selector)
-      .on('click', selector, _.bind(this._clickHandler, this));
-
     this.list_item = null;
     this.dropdown  = null;
   },
@@ -22,7 +22,7 @@ app.views.AspectMembership = Backbone.View.extend({
   //   -> addMembership
   //   -> removeMembership
   _clickHandler: function(evt) {
-    this.list_item = $(evt.target);
+    this.list_item = $(evt.target).closest('li.aspect_selector');
     this.dropdown  = this.list_item.parent();
 
     this.list_item.addClass('loading');
@@ -72,17 +72,16 @@ app.views.AspectMembership = Backbone.View.extend({
     }
 
     li.attr('data-membership_id', membership_id) // just to be sure...
-      .data('membership_id', membership_id)
-      .addClass('selected');
+      .data('membership_id', membership_id);
 
-    this.updateSummary();
+    this.updateSummary(li);
     this._done();
   },
 
   // show an error flash msg
   _displayError: function(msg_id) {
     this._done();
-    this.dropdown.removeClass('active'); // close the dropdown
+    this.dropdown.closest('.aspect_membership_dropdown').removeClass('open'); // close the dropdown
 
     var msg = Diaspora.I18n.t(msg_id, { 'name': this._name() });
     Diaspora.page.flashMessages.render({ 'success':false, 'notice':msg });
@@ -107,8 +106,8 @@ app.views.AspectMembership = Backbone.View.extend({
     var li = this.dropdown.find('li[data-membership_id="'+membership_id+'"]');
 
     li.removeAttr('data-membership_id')
-      .removeData('membership_id')
-      .removeClass('selected');
+      .removeData('membership_id');
+    this.updateSummary(li);
 
     // we just removed the last aspect, inform the user with a flash message
     // that he is no longer sharing with that person
@@ -117,7 +116,6 @@ app.views.AspectMembership = Backbone.View.extend({
       Diaspora.page.flashMessages.render({ 'success':true, 'notice':msg });
     }
 
-    this.updateSummary();
     this._done();
   },
 
@@ -129,33 +127,8 @@ app.views.AspectMembership = Backbone.View.extend({
   },
 
   // refresh the button text to reflect the current aspect selection status
-  updateSummary: function() {
-    var btn = this.dropdown.parents('div.aspect_membership').find('.button.toggle');
-    var aspects_cnt = this.dropdown.find('li.selected').length;
-    var txt;
-
-    if( aspects_cnt == 0 ) {
-      btn.removeClass('in_aspects');
-      txt = Diaspora.I18n.t('aspect_dropdown.toggle.zero');
-    } else {
-      btn.addClass('in_aspects');
-      txt = this._pluralSummaryTxt(aspects_cnt);
-    }
-
-    btn.text(txt + ' ▼');
+  updateSummary: function(target) {
+    this._toggleCheckbox(target);
+    this._updateButton('green');
   },
-
-  _pluralSummaryTxt: function(cnt) {
-    var all_aspects_cnt = this.dropdown.find('li').length;
-
-    if( cnt == 1 ) {
-      return this.dropdown.find('li.selected').first().text();
-    }
-
-    if( cnt == all_aspects_cnt ) {
-      return Diaspora.I18n.t('aspect_dropdown.all_aspects');
-    }
-
-    return Diaspora.I18n.t('aspect_dropdown.toggle', { 'count':cnt.toString() });
-  }
 });
diff --git a/app/assets/javascripts/app/views/hovercard_view.js b/app/assets/javascripts/app/views/hovercard_view.js
index c32014a71..dc8e4cf82 100644
--- a/app/assets/javascripts/app/views/hovercard_view.js
+++ b/app/assets/javascripts/app/views/hovercard_view.js
@@ -103,10 +103,14 @@ app.views.Hovercard = Backbone.View.extend({
 
     // set aspect dropdown
     var href = this.href();
-    href += "/aspect_membership_button"
+    href += "/aspect_membership_button";
+    if(gon.bootstrap == true){
+      href += "?bootstrap=true";
+    }
     $.get(href, function(response) {
       self.dropdown_container.html(response);
     });
+    var aspect_membership = new app.views.AspectMembership({el: self.dropdown_container});
   },
 
   _positionHovercard: function() {
diff --git a/app/assets/javascripts/app/views/publisher/aspect_selector_view.js b/app/assets/javascripts/app/views/publisher/aspect_selector_view.js
index 4f9d53803..f2135f51d 100644
--- a/app/assets/javascripts/app/views/publisher/aspect_selector_view.js
+++ b/app/assets/javascripts/app/views/publisher/aspect_selector_view.js
@@ -1,4 +1,4 @@
-// require ../aspects_dropdown_view
+//= require ../aspects_dropdown_view
 
 /*
  * Aspects view for the publisher.
diff --git a/app/assets/stylesheets/aspects.css.scss b/app/assets/stylesheets/aspects.css.scss
index 1ffed3318..6389959e5 100644
--- a/app/assets/stylesheets/aspects.css.scss
+++ b/app/assets/stylesheets/aspects.css.scss
@@ -18,7 +18,10 @@
       .icon-refresh { display: inline-block;}
       .icon-ok { display: none;}
     }
-    a { cursor: pointer; }
+    a {
+      cursor: pointer;
+      padding-left: 10px;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/buttons.css.scss b/app/assets/stylesheets/buttons.css.scss
index be77288d9..f8913255b 100644
--- a/app/assets/stylesheets/buttons.css.scss
+++ b/app/assets/stylesheets/buttons.css.scss
@@ -5,8 +5,25 @@
   border: 1px solid darken($button-border-color,20%);
 
   &:hover {
-    @include button-gradient-hover($creation-blue);
     background: $creation-blue;
     border: 1px solid darken($button-border-color,35%);
   }
 }
+.btn-group.open > .btn.creation {
+  background: $creation-blue;
+}
+
+.btn.green {
+  $button-border-color: #aaa;
+  @include button-gradient($green);
+  color: $grey;
+  border: 1px solid darken($button-border-color,20%);
+
+  &:hover {
+    background: $green;
+    border: 1px solid darken($button-border-color,35%);
+  }
+}
+.btn-group.open > .btn.green {
+  background: $green;
+}
diff --git a/app/assets/stylesheets/hovercard.css.scss b/app/assets/stylesheets/hovercard.css.scss
index 24ec49fd5..eb16b7a11 100644
--- a/app/assets/stylesheets/hovercard.css.scss
+++ b/app/assets/stylesheets/hovercard.css.scss
@@ -49,22 +49,25 @@
   };
 
   h4 {
+    margin-top: 0px;
     margin-bottom: 0px;
     padding-bottom: 0px;
-  }
-
-  a {
-    color: $blue;
-    font-weight: bold !important;
+    font-size: 16px;
+    a {
+      color: $blue;
+      font-weight: bold !important;
+    }
   }
 
   p {
     color: $text-grey;
     padding-top: 0px;
     margin-top: 0px;
-    margin-bottom: 10px;
+    margin-bottom: 5px;
   }
 
+  .btn-group.aspect_membership_dropdown { margin: 0 !important; }
+
   .hovercard_footer {
     position: absolute;
     bottom: 0;
diff --git a/app/controllers/people_controller.rb b/app/controllers/people_controller.rb
index 3f14f5586..64aa18b62 100644
--- a/app/controllers/people_controller.rb
+++ b/app/controllers/people_controller.rb
@@ -160,7 +160,8 @@ class PeopleController < ApplicationController
     return render :text => I18n.t('people.person.thats_you') if @person == current_user.person
 
     @contact = current_user.contact_for(@person) || Contact.new
-    render :partial => 'aspect_membership_dropdown', :locals => {:contact => @contact, :person => @person, :hang => 'left'}
+    bootstrap = params[:bootstrap] || false
+    render :partial => 'aspect_membership_dropdown', :locals => {:contact => @contact, :person => @person, :hang => 'left', :bootstrap => bootstrap}
   end
 
   private
diff --git a/app/helpers/aspect_global_helper.rb b/app/helpers/aspect_global_helper.rb
index 501cfab1a..34641505f 100644
--- a/app/helpers/aspect_global_helper.rb
+++ b/app/helpers/aspect_global_helper.rb
@@ -3,7 +3,7 @@
 #   the COPYRIGHT file.
 
 module AspectGlobalHelper
-  def aspect_membership_dropdown(contact, person, hang, aspect=nil)
+  def aspect_membership_dropdown(contact, person, hang, aspect=nil, force_bootstrap=false)
     aspect_membership_ids = {}
 
     selected_aspects = all_aspects.select{|aspect| contact.in_aspect?(aspect)}
@@ -12,12 +12,21 @@ module AspectGlobalHelper
       aspect_membership_ids[a.id] = record.id
     end
 
-    render "shared/aspect_dropdown",
-      :selected_aspects => selected_aspects,
-      :aspect_membership_ids => aspect_membership_ids,
-      :person => person,
-      :hang => hang,
-      :dropdown_class => "aspect_membership"
+    if bootstrap? || force_bootstrap
+      render "aspect_memberships/aspect_membership_dropdown",
+        :selected_aspects => selected_aspects,
+        :aspect_membership_ids => aspect_membership_ids,
+        :person => person,
+        :hang => hang,
+        :dropdown_class => "aspect_membership"
+    else
+      render "aspect_memberships/aspect_membership_dropdown_blueprint",
+        :selected_aspects => selected_aspects,
+        :aspect_membership_ids => aspect_membership_ids,
+        :person => person,
+        :hang => hang,
+        :dropdown_class => "aspect_membership"
+    end
   end
 
   def aspect_dropdown_list_item(aspect, am_id=nil)
diff --git a/app/helpers/people_helper.rb b/app/helpers/people_helper.rb
index e5ffd25cc..baaeeedac 100644
--- a/app/helpers/people_helper.rb
+++ b/app/helpers/people_helper.rb
@@ -39,7 +39,8 @@ module PeopleHelper
     if opts[:to] == :photos
       link_to person_image_tag(person, opts[:size]), person_photos_path(person)
     else
-      "<a #{person_href(person)} class='#{opts[:class]}' #{ ("target=" + opts[:target]) if opts[:target]}>
+      remote_or_hovercard_link = Rails.application.routes.url_helpers.person_path(person).html_safe
+      "<a href='#{remote_or_hovercard_link}' class='#{opts[:class]}' #{ ("target=" + opts[:target]) if opts[:target]}>
       #{person_image_tag(person, opts[:size])}
       </a>".html_safe
     end
diff --git a/app/views/aspect_memberships/_aspect_membership_dropdown.html.haml b/app/views/aspect_memberships/_aspect_membership_dropdown.html.haml
new file mode 100644
index 000000000..49ec355ab
--- /dev/null
+++ b/app/views/aspect_memberships/_aspect_membership_dropdown.html.haml
@@ -0,0 +1,26 @@
+.btn-group.aspect_dropdown.aspect_membership_dropdown
+  %button.btn.btn-small.dropdown-toggle{:class => selected_aspects.size>0 ? "green" : "btn-default", "data-toggle" => "dropdown"}
+    %span.text
+      - if selected_aspects.size == all_aspects.size
+        = t('all_aspects')
+      - elsif selected_aspects.size == 1
+        = selected_aspects.first.name
+      - else
+        = t('shared.aspect_dropdown.toggle', :count => selected_aspects.size)
+    %span.caret
+
+  %ul.dropdown-menu{:class => ["pull-#{hang}", defined?(dropdown_class) && dropdown_class], :unSelectable => 'on', 'data-person_id' => (person.id if defined?(person) && person), 'data-service_uid' => (service_uid if defined?(service_uid)), 'data-person-short-name' => (person.first_name if defined?(person) && person)}
+    - for aspect in all_aspects
+      %li.aspect_selector{ :class => ('selected' if aspect_membership_ids[aspect.id].present?), 'data-aspect_id' => aspect.id, 'data-membership_id' => aspect_membership_ids[aspect.id] }
+        %a
+          %span.status_indicator
+            %i.icon-ok
+            %i.icon-refresh
+          %span.text
+            = aspect.name
+
+    - if (dropdown_may_create_new_aspect && defined?(person) && person)
+      %li.divider
+      %li.newItem
+        .add_aspect
+          = link_to t('contacts.index.add_a_new_aspect'), new_aspect_path(:person_id => person.id, :remote => true), :rel => 'facebox'
diff --git a/app/views/shared/_aspect_dropdown.html.haml b/app/views/aspect_memberships/_aspect_membership_dropdown_blueprint.html.haml
similarity index 81%
rename from app/views/shared/_aspect_dropdown.html.haml
rename to app/views/aspect_memberships/_aspect_membership_dropdown_blueprint.html.haml
index baae64f8c..baed2c0c3 100644
--- a/app/views/shared/_aspect_dropdown.html.haml
+++ b/app/views/aspect_memberships/_aspect_membership_dropdown_blueprint.html.haml
@@ -1,7 +1,3 @@
--#   Copyright (c) 2010-2011, Diaspora Inc.  This file is
--#   licensed under the Affero General Public License version 3 or later.  See
--#   the COPYRIGHT file.
-
 .dropdown{:class => ["hang_#{hang}", defined?(dropdown_class) && dropdown_class]}
   .button.toggle{:class => ("in_aspects" if selected_aspects.size > 0)}
     - if selected_aspects.size == all_aspects.size
@@ -9,7 +5,7 @@
     - elsif selected_aspects.size == 1
       = selected_aspects.first.name
     - else
-      = t('.toggle', :count => selected_aspects.size)
+      = t('shared.aspect_dropdown.toggle', :count => selected_aspects.size)
     &#9660;
 
   .wrapper
diff --git a/app/views/people/_aspect_membership_dropdown.haml b/app/views/people/_aspect_membership_dropdown.haml
index 778ca85bf..7efd9f1f3 100644
--- a/app/views/people/_aspect_membership_dropdown.haml
+++ b/app/views/people/_aspect_membership_dropdown.haml
@@ -1 +1 @@
-= aspect_membership_dropdown(@contact, @person, 'left')
+= aspect_membership_dropdown(@contact, @person, 'left', nil, bootstrap)
diff --git a/spec/controllers/jasmine_fixtures/people_spec.rb b/spec/controllers/jasmine_fixtures/people_spec.rb
index 25d227ac9..53ea8ae72 100644
--- a/spec/controllers/jasmine_fixtures/people_spec.rb
+++ b/spec/controllers/jasmine_fixtures/people_spec.rb
@@ -20,4 +20,20 @@ describe PeopleController do
       save_fixture(html_for("body"), "pending_external_people_search")
     end
   end
+
+  describe '#aspect_membership_dropdown' do
+    before do
+      sign_in :user, bob
+    end
+
+    it "generates a jasmine fixture using Blueprint", :fixture => true do
+      get :aspect_membership_dropdown, :person_id => alice.person.guid
+      save_fixture(html_for("body"), "aspect_membership_dropdown_blueprint")
+    end
+
+    it "generates a jasmine fixture using Bootstrap", :fixture => true do
+      get :aspect_membership_dropdown, :person_id => alice.person.guid, :bootstrap => true
+      save_fixture(html_for("body"), "aspect_membership_dropdown_bootstrap")
+    end
+  end
 end
diff --git a/spec/javascripts/app/views/aspect_membership_blueprint_view_spec.js b/spec/javascripts/app/views/aspect_membership_blueprint_view_spec.js
new file mode 100644
index 000000000..d17405513
--- /dev/null
+++ b/spec/javascripts/app/views/aspect_membership_blueprint_view_spec.js
@@ -0,0 +1,118 @@
+describe("app.views.AspectMembershipBlueprint", function(){
+  beforeEach(function() {
+    spec.loadFixture("aspect_membership_dropdown_blueprint");
+    this.view = new app.views.AspectMembershipBlueprint();
+    this.person_id = $('.dropdown_list').data('person_id');
+  });
+
+  it('attaches to the aspect selector', function(){
+    spyOn($.fn, 'on');
+    view = new app.views.AspectMembership();
+
+    expect($.fn.on).toHaveBeenCalled();
+  });
+
+  context('adding to aspects', function() {
+    beforeEach(function() {
+      this.newAspect = $('li:not(.selected)');
+      this.newAspectId = this.newAspect.data('aspect_id');
+    });
+
+    it('calls "addMembership"', function() {
+       spyOn(this.view, "addMembership");
+       this.newAspect.trigger('click');
+
+       expect(this.view.addMembership).toHaveBeenCalledWith(this.person_id, this.newAspectId);
+    });
+
+    it('tries to create a new AspectMembership', function() {
+      spyOn(app.models.AspectMembership.prototype, "save");
+      this.view.addMembership(1, 2);
+
+      expect(app.models.AspectMembership.prototype.save).toHaveBeenCalled();
+    });
+
+    it('displays an error when it fails', function() {
+      spyOn(this.view, "_displayError");
+      spyOn(app.models.AspectMembership.prototype, "save").andCallFake(function() {
+        this.trigger('error');
+      });
+
+      this.view.addMembership(1, 2);
+
+      expect(this.view._displayError).toHaveBeenCalledWith('aspect_dropdown.error');
+    });
+  });
+
+  context('removing from aspects', function(){
+    beforeEach(function() {
+      this.oldAspect = $('li.selected');
+      this.oldMembershipId = this.oldAspect.data('membership_id');
+    });
+
+    it('calls "removeMembership"', function(){
+      spyOn(this.view, "removeMembership");
+      this.oldAspect.trigger('click');
+
+      expect(this.view.removeMembership).toHaveBeenCalledWith(this.oldMembershipId);
+    });
+
+    it('tries to destroy an AspectMembership', function() {
+      spyOn(app.models.AspectMembership.prototype, "destroy");
+      this.view.removeMembership(1);
+
+      expect(app.models.AspectMembership.prototype.destroy).toHaveBeenCalled();
+    });
+
+    it('displays an error when it fails', function() {
+      spyOn(this.view, "_displayError");
+      spyOn(app.models.AspectMembership.prototype, "destroy").andCallFake(function() {
+        this.trigger('error');
+      });
+
+      this.view.removeMembership(1);
+
+      expect(this.view._displayError).toHaveBeenCalledWith('aspect_dropdown.error_remove');
+    });
+  });
+
+  context('summary text in the button', function() {
+    beforeEach(function() {
+      this.btn = $('div.button.toggle');
+      this.btn.text(""); // reset
+      this.view.dropdown = $('ul.dropdown_list');
+    });
+
+    it('shows "no aspects" when nothing is selected', function() {
+      $('li[data-aspect_id]').removeClass('selected');
+      this.view.updateSummary();
+
+      expect(this.btn.text()).toContain(Diaspora.I18n.t('aspect_dropdown.toggle.zero'));
+    });
+
+    it('shows "all aspects" when everything is selected', function() {
+      $('li[data-aspect_id]').addClass('selected');
+      this.view.updateSummary();
+
+      expect(this.btn.text()).toContain(Diaspora.I18n.t('aspect_dropdown.all_aspects'));
+    });
+
+    it('shows the name of the selected aspect ( == 1 )', function() {
+      var list = $('li[data-aspect_id]');
+      list.removeClass('selected'); // reset
+      list.eq(1).addClass('selected');
+      this.view.updateSummary();
+
+      expect(this.btn.text()).toContain(list.eq(1).text());
+    });
+
+    it('shows the number of selected aspects ( > 1)', function() {
+      var list = $('li[data-aspect_id]');
+      list.removeClass('selected'); // reset
+      $([list.eq(1), list.eq(2)]).addClass('selected');
+      this.view.updateSummary();
+
+      expect(this.btn.text()).toContain(Diaspora.I18n.t('aspect_dropdown.toggle', { 'count':2 }));
+    });
+  });
+});
diff --git a/spec/javascripts/app/views/aspect_membership_view_spec.js b/spec/javascripts/app/views/aspect_membership_view_spec.js
index a0ee61128..5f5abe9bb 100644
--- a/spec/javascripts/app/views/aspect_membership_view_spec.js
+++ b/spec/javascripts/app/views/aspect_membership_view_spec.js
@@ -1,40 +1,22 @@
-
 describe("app.views.AspectMembership", function(){
   beforeEach(function() {
     // mock a dummy aspect dropdown
-    this.person = factory.author({name: "My Name"});
-    spec.content().html(
-      '<div class="aspect_membership dropdown">'+
-      '  <div class="button toggle">The Button</div>'+
-      '  <ul class="dropdown_list" data-person-short-name="'+this.person.name+'" data-person_id="'+this.person.id+'">'+
-      '    <li data-aspect_id="10">Aspect 10</li>'+
-      '    <li data-membership_id="99" data-aspect_id="11" class="selected">Aspect 11</li>'+
-      '    <li data-aspect_id="12">Aspect 12</li>'+
-      '  </ul>'+
-      '</div>'
-    );
-
-    this.view = new app.views.AspectMembership();
-  });
-
-  it('attaches to the aspect selector', function(){
-    spyOn($.fn, 'on');
-    view = new app.views.AspectMembership();
-
-    expect($.fn.on).toHaveBeenCalled();
+    spec.loadFixture("aspect_membership_dropdown_bootstrap");
+    this.view = new app.views.AspectMembership({el: $('.aspect_membership_dropdown')});
+    this.person_id = $('.dropdown-menu').data('person_id');
   });
 
   context('adding to aspects', function() {
     beforeEach(function() {
-      this.newAspect = spec.content().find('li:eq(0)');
-      this.newAspectId = 10;
+      this.newAspect = $('li:not(.selected)');
+      this.newAspectId = this.newAspect.data('aspect_id');
     });
 
     it('calls "addMembership"', function() {
        spyOn(this.view, "addMembership");
        this.newAspect.trigger('click');
 
-       expect(this.view.addMembership).toHaveBeenCalledWith(this.person.id, this.newAspectId);
+       expect(this.view.addMembership).toHaveBeenCalledWith(this.person_id, this.newAspectId);
     });
 
     it('tries to create a new AspectMembership', function() {
@@ -58,8 +40,8 @@ describe("app.views.AspectMembership", function(){
 
   context('removing from aspects', function(){
     beforeEach(function() {
-      this.oldAspect = spec.content().find('li:eq(1)');
-      this.oldMembershipId = 99;
+      this.oldAspect = $('li.selected');
+      this.oldMembershipId = this.oldAspect.data('membership_id');
     });
 
     it('calls "removeMembership"', function(){
@@ -88,43 +70,23 @@ describe("app.views.AspectMembership", function(){
     });
   });
 
-  context('summary text in the button', function() {
+  context('updateSummary', function() {
     beforeEach(function() {
-      this.btn = spec.content().find('div.button.toggle');
-      this.btn.text(""); // reset
-      this.view.dropdown = spec.content().find('ul.dropdown_list');
+      this.Aspect = $('li:eq(0)');
     });
 
-    it('shows "no aspects" when nothing is selected', function() {
-      spec.content().find('li[data-aspect_id]').removeClass('selected');
-      this.view.updateSummary();
+    it('calls "_toggleCheckbox"', function() {
+      spyOn(this.view, "_toggleCheckbox");
+      this.view.updateSummary(this.Aspect);
 
-      expect(this.btn.text()).toContain(Diaspora.I18n.t('aspect_dropdown.toggle.zero'));
+      expect(this.view._toggleCheckbox).toHaveBeenCalledWith(this.Aspect);
     });
 
-    it('shows "all aspects" when everything is selected', function() {
-      spec.content().find('li[data-aspect_id]').addClass('selected');
-      this.view.updateSummary();
+    it('calls "_updateButton"', function() {
+      spyOn(this.view, "_updateButton");
+      this.view.updateSummary(this.Aspect);
 
-      expect(this.btn.text()).toContain(Diaspora.I18n.t('aspect_dropdown.all_aspects'));
-    });
-
-    it('shows the name of the selected aspect ( == 1 )', function() {
-      var list = spec.content().find('li[data-aspect_id]');
-      list.removeClass('selected'); // reset
-      list.eq(1).addClass('selected');
-      this.view.updateSummary();
-
-      expect(this.btn.text()).toContain(list.eq(1).text());
-    });
-
-    it('shows the number of selected aspects ( > 1)', function() {
-      var list = spec.content().find('li[data-aspect_id]');
-      list.removeClass('selected'); // reset
-      $([list.eq(1), list.eq(2)]).addClass('selected');
-      this.view.updateSummary();
-
-      expect(this.btn.text()).toContain(Diaspora.I18n.t('aspect_dropdown.toggle', { 'count':2 }));
+      expect(this.view._updateButton).toHaveBeenCalledWith('green');
     });
   });
 });