diff --git a/public/javascripts/app/models/status_message.js b/public/javascripts/app/models/status_message.js
index 6359af3998d06817f8fa16b41c28d816fa1a01d5..8152db67ff9c8e1ceb3a4cf95c7af729d1f0709f 100644
--- a/public/javascripts/app/models/status_message.js
+++ b/public/javascripts/app/models/status_message.js
@@ -6,16 +6,12 @@ app.models.StatusMessage = app.models.Post.extend({
mungeAndSave : function(){
var mungedAttrs = {
status_message : _.clone(this.attributes),
- aspect_ids : mungeAspects(this.get("aspect_ids")),
+ 'aspect_ids[]' : this.get("aspect_ids"),
services : mungeServices(this.get("services"))
}
this.save(mungedAttrs)
- function mungeAspects (value){
- return [value]
- }
-
function mungeServices (values) {
if(!values) { return; }
return values.length > 1 ? values : [values]
diff --git a/public/javascripts/app/templates/aspects-dropdown.handlebars b/public/javascripts/app/templates/aspects-dropdown.handlebars
index de4452e15295422d96ee24024d7bbc2e4e81d702..aca5b30d726fa5079c1e83919f8eb432e6c936eb 100644
--- a/public/javascripts/app/templates/aspects-dropdown.handlebars
+++ b/public/javascripts/app/templates/aspects-dropdown.handlebars
@@ -3,12 +3,12 @@
<span class="text"></span> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
- <li><a href="#" class="public" data-visibility="public">Public</a></li>
- <li><a href="#" class="all-aspects" data-visibility="all-aspects">All Aspects</a></li>
+ <li><i class='icon-ok'/><a href="#" class="public" data-aspect-id="public" data-visibility="public">Public</a></li>
+ <li><i class='icon-ok'/><a href="#" class="all-aspects" data-aspect-id="all_aspects" data-visibility="all-aspects">All Aspects</a></li>
<li class="divider"></li>
{{#each current_user.aspects}}
- <li><a href="#" data-aspect-id="{{id}}" data-visibility="custom">{{name}}</a></li>
+ <li><i class='icon-ok'/><a href="#" data-aspect-id="{{id}}" data-visibility="custom">{{name}}</a></li>
{{/each}}
</ul>
diff --git a/public/javascripts/app/views/aspects_dropdown_view.js b/public/javascripts/app/views/aspects_dropdown_view.js
index b5da17fd201ed62c5e930c1f90fb6b14664697a8..a6085263f2bf68714eee56e92612143f06bf0d39 100644
--- a/public/javascripts/app/views/aspects_dropdown_view.js
+++ b/public/javascripts/app/views/aspects_dropdown_view.js
@@ -9,28 +9,47 @@ app.views.AspectsDropdown = app.views.Base.extend({
},
setVisibility : function(evt){
- var link = $(evt.target)
+ var self = this
+ , link = $(evt.target).closest("a")
, visibilityCallbacks = {
'public' : setPublic,
'all-aspects' : setPrivate,
'custom' : setCustom
}
- visibilityCallbacks[link.data("visibility")].call(this)
+ visibilityCallbacks[link.data("visibility")]()
+
+ this.setAspectIds()
function setPublic (){
- this.setAspectIds("public")
- this.setDropdownText(link.text())
+ deselectAll()
+ selectAspect()
+ self.setDropdownText(link.text())
}
function setPrivate (){
- this.setAspectIds("all_aspects")
- this.setDropdownText(link.text())
+ deselectAll()
+ selectAspect()
+ self.setDropdownText(link.text())
}
function setCustom (){
- this.setAspectIds(link.data("aspect-id"))
- this.setDropdownText(link.text())
+ deselectOverrides()
+ link.parents("li").toggleClass("selected")
+ self.setDropdownText(link.text())
+ evt.stopImmediatePropagation();
+ }
+
+ function selectAspect() {
+ link.parents("li").addClass("selected")
+ }
+
+ function deselectOverrides() {
+ self.$("a.public, a.all-aspects").parent().removeClass("selected")
+ }
+
+ function deselectAll() {
+ self.$("li.selected").removeClass("selected")
}
},
@@ -38,7 +57,12 @@ app.views.AspectsDropdown = app.views.Base.extend({
$.trim(this.$(".dropdown-toggle .text").text(text))
},
- setAspectIds : function(val){
- this.$("input.aspect_ids").val(val)
+ setAspectIds : function(){
+ var selectedAspects = this.$("li.selected a")
+ var aspectIds = _.map(selectedAspects, function(aspect){
+ return $(aspect).data("aspect-id")}
+ )
+
+ this.$("input.aspect_ids").val(aspectIds)
}
})
diff --git a/public/stylesheets/sass/new-templates.scss b/public/stylesheets/sass/new-templates.scss
index 094627e99f6300e3d6419335f9403a5564e748a8..6edb196b2f9aa0f4c5aaca605f11b791e5bae78b 100644
--- a/public/stylesheets/sass/new-templates.scss
+++ b/public/stylesheets/sass/new-templates.scss
@@ -764,3 +764,17 @@ text-rendering: optimizelegibility;
right: 8px;
top: 8px;
}
+
+.aspects_dropdown {
+ i {
+ display: none;
+ }
+
+ .selected i {
+ display: inline-block;
+ }
+
+ a {
+ display : inline-block;
+ }
+}
diff --git a/spec/javascripts/app/views/aspects_dropdown_view_spec.js b/spec/javascripts/app/views/aspects_dropdown_view_spec.js
index eb34414f799a47aa4621f9faac9fb4ddb811f1de..b5a47604d642849ec231c1452d7a9bb1ba5d2378 100644
--- a/spec/javascripts/app/views/aspects_dropdown_view_spec.js
+++ b/spec/javascripts/app/views/aspects_dropdown_view_spec.js
@@ -23,7 +23,8 @@ describe("app.views.AspectsDropdown", function(){
describe("selecting Public", function(){
beforeEach(function(){
- this.view.$("a[data-visibility='public']").click()
+ this.link = this.view.$("a[data-visibility='public']")
+ this.link.click()
})
it("calls set aspect_ids to 'public'", function(){
@@ -33,11 +34,16 @@ describe("app.views.AspectsDropdown", function(){
it("sets the dropdown title to 'public'", function(){
expect(this.view.$(".dropdown-toggle .text").text()).toBe("Public")
})
+
+ it("adds the selected class to the link", function(){
+ expect(this.link.parent().hasClass("selected")).toBeTruthy();
+ })
})
describe("selecting All Aspects", function(){
beforeEach(function(){
- this.view.$("a[data-visibility='all-aspects']").click()
+ this.link = this.view.$("a[data-visibility='all-aspects']")
+ this.link.click()
})
it("calls set aspect_ids to 'all'", function(){
@@ -47,20 +53,61 @@ describe("app.views.AspectsDropdown", function(){
it("sets the dropdown title to 'public'", function(){
expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("All Aspects")
})
+
+ it("adds the selected class to the link", function(){
+ expect(this.link.parent().hasClass("selected")).toBeTruthy();
+ })
})
describe("selecting An Aspect", function(){
beforeEach(function(){
- this.view.$("a:contains('lovers')").click()
+ this.link = this.view.$("a:contains('lovers')")
+ this.link.click()
+ })
+
+ it("sets the dropdown title to the aspect title", function(){
+ expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("lovers")
})
- it("calls set aspect_ids to to the aspect id", function(){
+ it("adds the selected class to the link", function(){
+ expect(this.link.parent().hasClass("selected")).toBeTruthy();
+ })
+
+ it("sets aspect_ids to to the aspect id", function(){
expect(this.view.$("input.aspect_ids").val()).toBe("7")
})
- it("sets the dropdown title to the aspect title", function(){
- expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("lovers")
+ describe("selecting another aspect", function(){
+ beforeEach(function(){
+ this.view.$("a:contains('sauce')").click()
+ })
+
+ it("sets aspect_ids to the selected aspects", function(){
+ expect(this.view.$("input.aspect_ids").val()).toBe("3,7")
+ })
+
+ describe("deselecting another aspect", function(){
+ it("removes the clicked aspect", function(){
+ expect(this.view.$("input.aspect_ids").val()).toBe("3,7")
+ this.view.$("a:contains('lovers')").click()
+ expect(this.view.$("input.aspect_ids").val()).toBe("3")
+ })
+ })
+
+ describe("selecting all_aspects", function(){
+ it("sets aspect_ids to all_aspects", function(){
+ this.view.$("a[data-visibility='all-aspects']").click()
+ expect(this.view.$("input.aspect_ids").val()).toBe("all_aspects")
+ })
+ })
+
+ describe("selecting public", function(){
+ it("sets aspect_ids to public", function(){
+ this.view.$("a[data-visibility='public']").click()
+ expect(this.view.$("input.aspect_ids").val()).toBe("public")
+ })
+ })
})
})
})