split filters out and stub color/size pickers

6 files changed, 81 insertions, 29 deletions

diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index be6502e4..22e2792a 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -489,6 +489,9 @@
 <script src="js/lib/account/SettingsView.js"></script>
 
 <script src="js/lib/products/CollectionView.js"></script>
+<script src="js/lib/products/filters/CategoryFilter.js"></script>
+<script src="js/lib/products/filters/SizeFilter.js"></script>
+<script src="js/lib/products/filters/ColorFilter.js"></script>
 <script src="js/lib/products/ProductView.js"></script>
 <script src="js/lib/products/GalleryView.js"></script>
 <script src="js/lib/products/Selector.js"></script>
diff --git a/StoneIsland/www/js/lib/products/CollectionView.js b/StoneIsland/www/js/lib/products/CollectionView.js
index 652aa92b..571bb4fc 100644
--- a/StoneIsland/www/js/lib/products/CollectionView.js
+++ b/StoneIsland/www/js/lib/products/CollectionView.js
@@ -20,6 +20,7 @@ var CollectionView = ScrollableView.extend({
     this.$content = this.$(".content")
     this.$loader = this.$(".loader")
     this.scroller = new IScroll('#collection', app.iscroll_options)
+    this.filterView = new CategoryFilter ({ parent: this })
   },
 
   show: function(){
@@ -32,36 +33,9 @@ var CollectionView = ScrollableView.extend({
   },
   
   ok: function(){
-    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))
+    this.filterView.filter()
   },
-  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(){
     if (this.loaded) return
     this.$loader.show()
diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index 19a1f795..829fdc4b 100644
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -20,6 +20,9 @@ var ProductView = ScrollableView.extend({
     this.$size = this.$(".size")
     this.$color = this.$(".color")
     this.$body = this.$(".body")
+    
+    this.colorFilter = new ColorFilter({ parent: this })
+    this.sizeFilter = new SizeFilter({ parent: this })
   },
 
   show: function(){
diff --git a/StoneIsland/www/js/lib/products/filters/CategoryFilter.js b/StoneIsland/www/js/lib/products/filters/CategoryFilter.js
new file mode 100644
index 00000000..4e6baf62
--- /dev/null
+++ b/StoneIsland/www/js/lib/products/filters/CategoryFilter.js
@@ -0,0 +1,40 @@
+var CategoryFilter = View.extend({
+
+  initialize: function(opt){
+    this.parent = opt.parent
+  },
+  
+  filter: function(){
+    var cats = this.parent.data.SearchResponseFull.Refinements.Filters.Categories.map(function(cat){
+      return {
+        id: cat.Id,
+        label: cat.Value
+      }
+    })
+    if (this.last_choice) {
+      cats.push({
+        id: "__remove_filter",
+        label: "REMOVE FILTER",
+      })
+    }
+    app.selector.select(cats, this.pick.bind(this))
+  },
+
+  last_choice: null,
+  
+  pick: function(choice){
+    this.parent.$content.empty()
+    if (choice.id == "__remove_filter") {
+      this.last_choice = null
+      this.parent.data.SearchResponseFull.Results.Items.forEach(this.parent.append.bind(this.parent))
+    }
+    else {
+      this.last_choice = choice
+      this.parent.data.SearchResponseFull.Results.Items.filter(function(item){
+        return item.MacroCategory == choice.label
+      }).forEach(this.parent.append.bind(this.parent))
+    }
+    this.parent.deferScrollToTop()
+  },
+
+})
diff --git a/StoneIsland/www/js/lib/products/filters/ColorFilter.js b/StoneIsland/www/js/lib/products/filters/ColorFilter.js
new file mode 100644
index 00000000..7b9ab5aa
--- /dev/null
+++ b/StoneIsland/www/js/lib/products/filters/ColorFilter.js
@@ -0,0 +1,16 @@
+var ColorFilter = View.extend({
+
+  initialize: function(opt){
+    this.parent = opt.parent
+  },
+  
+  filter: function(){
+    var colors = this.find_colors_for_size(this.parent.size)
+    app.selector.select(colors, this.pick.bind(this))
+  },
+  
+  pick: function(choice){
+    this.parent.color
+  },
+
+})
diff --git a/StoneIsland/www/js/lib/products/filters/SizeFilter.js b/StoneIsland/www/js/lib/products/filters/SizeFilter.js
new file mode 100644
index 00000000..46f1c234
--- /dev/null
+++ b/StoneIsland/www/js/lib/products/filters/SizeFilter.js
@@ -0,0 +1,16 @@
+var SizeFilter = View.extend({
+
+  initialize: function(opt){
+    this.parent = opt.parent
+  },
+  
+  filter: function(){
+    var sizes = this.find_sizes_for_color(this.parent.color)
+    app.selector.select(sizes, this.pick.bind(this))
+  },
+  
+  pick: function(choice){
+    this.parent.size
+  },
+
+})