Permalink
Browse files

Select multiple aspects

  • Loading branch information...
1 parent 4c46cc4 commit 7a5841a1e19473857e232d4e4b236421490b99f8 @denniscollective denniscollective committed Mar 10, 2012
@@ -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]
@@ -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>
@@ -9,36 +9,60 @@ 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")
}
},
setDropdownText : function(text){
$.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)
}
})
@@ -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;
+ }
+}
@@ -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")
+ })
+ })
})
})
})

0 comments on commit 7a5841a

Please sign in to comment.