selector. filter main collection.

3 files changed, 62 insertions, 15 deletions

diff --git a/StoneIsland/www/js/lib/nav/CurtainView.js b/StoneIsland/www/js/lib/nav/CurtainView.js
index ad478335..d444fd60 100644
--- a/StoneIsland/www/js/lib/nav/CurtainView.js
+++ b/StoneIsland/www/js/lib/nav/CurtainView.js
@@ -9,18 +9,31 @@ var CurtainView = View.extend({
   initialize: function(){
   },
   
-  show: function(){
+  klass: null,
+  show: function(klass){
     this.$el.addClass("visible")
+    if (klass) {
+      this.klass = klass
+      this.$el.addClass(klass)
+    }
   },
   
-  hide: function(){
+  hide: function(k){
     this.$el.removeClass("visible")
+    if (this.klass) {
+      setTimeout( function(){
+        this.$el.removeClass(this.klass)
+      }.bind(this), 200 )
+    }
   },
   
   click: function(){
     if (document.body.classList.contains("nav")) {
       app.nav.hide()
     }
+    if (app.selector.visible) {
+      app.selector.hide()
+    }
   },
 
 })
\ No newline at end of file
diff --git a/StoneIsland/www/js/lib/products/CollectionView.js b/StoneIsland/www/js/lib/products/CollectionView.js
index dbece93b..652aa92b 100644
--- a/StoneIsland/www/js/lib/products/CollectionView.js
+++ b/StoneIsland/www/js/lib/products/CollectionView.js
@@ -32,7 +32,34 @@ var CollectionView = ScrollableView.extend({
   },
   
   ok: function(){
-    // this.filter()
+    var cats = this.data.SearchResponseFull.Refinements.Filters.Categories.map(function(cat){
+      return {
+        id: cat.Id,
+        label: cat.Value
+      }
+    })
+    if (this.filter_choice) {
+      cats.push({
+        id: "__remove_filter",
+        label: "REMOVE FILTER",
+      })
+    }
+    app.selector.select(cats, this.filter.bind(this))
+  },
+  filter_choice: null,
+  filter: function(choice){
+    this.$content.empty()
+    if (choice.id == "__remove_filter") {
+      this.filter_choice = null
+      this.data.SearchResponseFull.Results.Items.forEach(this.append.bind(this))
+    }
+    else {
+      this.filter_choice = choice
+      this.data.SearchResponseFull.Results.Items.filter(function(item){
+        return item.MacroCategory == choice.label
+      }).forEach(this.append.bind(this))
+    }
+    this.deferScrollToTop()
   },
   
   fetch: function(){
@@ -56,18 +83,19 @@ var CollectionView = ScrollableView.extend({
       this.$loader.hide()
       this.$content.empty()
       // DefaultCode10
-      data.SearchResponseFull.Results.Items.forEach(function(item){
-        this.items[ item['Code8'] ] = item
-        var t = this.template.replace(/{{image}}/, sdk.image(item['DefaultCode10'], '11_f'))
-                             .replace(/{{code8}}/, item['Code8'])
-        this.$content.append(t)
-      }.bind(this))
-    
+      data.SearchResponseFull.Results.Items.forEach(this.append.bind(this))
       this.deferScrollToTop()
     }
     this.afterFetchCallback && this.afterFetchCallback()
   },
   
+  append: function(item){
+    this.items[ item['Code8'] ] = item
+    var t = this.template.replace(/{{image}}/, sdk.image(item['DefaultCode10'], '11_f'))
+                         .replace(/{{code8}}/, item['Code8'])
+    this.$content.append(t)
+  },
+  
   pick: function(e){
     var code = $(e.currentTarget).data("code")
     var data = this.items[code]
diff --git a/StoneIsland/www/js/lib/products/Selector.js b/StoneIsland/www/js/lib/products/Selector.js
index 1580624b..76c498ec 100644
--- a/StoneIsland/www/js/lib/products/Selector.js
+++ b/StoneIsland/www/js/lib/products/Selector.js
@@ -5,7 +5,7 @@ var Selector = View.extend({
   
   events: {
     "click .close": "hide",
-    "click span": "pick",
+    "click .options div": "pick",
   },
   
   initialize: function(){
@@ -15,26 +15,32 @@ var Selector = View.extend({
   lookup: null,
   callback: null,
   select: function(options, callback){
-    var lookup = this.lookup = {}
+    this.lookup = {}
+    this.callback = callback || function(item){ console.log(item) }
     this.$options.empty()
     options.forEach(function(opt){
-      lookup[opt.id] = opt
+      this.lookup[String(opt.id)] = opt
       var t = this.template.replace(/{{id}}/, opt.id)
                            .replace(/{{label}}/, opt.label)
       this.$options.append(t)
-    })
+    }.bind(this))
     this.$el.show()
+    app.curtain.show("white")
+    this.visible = true
   },
   
   hide: function(){
     this.lookup = this.callback = null
     this.$el.hide()
+    app.curtain.hide()
+    this.visible = false
   },
   
   pick: function(e){
     var $option = $(e.currentTarget)
-    var id = $option.data("id")
+    var id = String($option.data("id"))
     var selection = this.lookup[id]
+
     this.callback( selection )
     this.hide()
   },