From 35fad4f7cb941b703e63089de599d50f92ed651a Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Fri, 13 Nov 2015 19:58:25 -0500
Subject: selector. filter main collection.

---
 StoneIsland/www/css/nav.css                       | 15 ++++++--
 StoneIsland/www/index.html                        | 18 +++++-----
 StoneIsland/www/js/lib/nav/CurtainView.js         | 17 +++++++--
 StoneIsland/www/js/lib/products/CollectionView.js | 44 ++++++++++++++++++-----
 StoneIsland/www/js/lib/products/Selector.js       | 16 ++++++---
 5 files changed, 83 insertions(+), 27 deletions(-)

diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css
index e1e045a3..3173135e 100644
--- a/StoneIsland/www/css/nav.css
+++ b/StoneIsland/www/css/nav.css
@@ -204,15 +204,26 @@
   opacity: 1;
   z-index: 2;
 }
+#curtain.white {
+  background: rgba(255,255,255,0.8);
+}
 
 
 /* SELECTOR */
 
 #selector {
   display: none;
-  height: 100%; width: 100%;
-  position: absolute; top: 0; left: 0;
+  width: 100%;
+  position: absolute; bottom: 0; left: 0;
   background: #fff;
+  z-index: 2;
+}
+#selector .options div {
+  width: 100%;
+  background: white;
+  text-align: center;
+  padding: 5px;
+  font-size: 14px;
 }
 
 /* CONTENT */
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 410bd36d..be6502e4 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -193,15 +193,6 @@
     </div>
   </div>
 
-  <div id="selector">
-    <span class="close"></span>
-    <div class="options">
-      <script type="text/html" class="template">
-        <span data-id="{{id}}">{{value}}</span>
-      </script>
-    </div>
-  </div>
-
 
   <!-- ACCOUNT ================================================ -->
 
@@ -364,9 +355,16 @@
 
   </div>
 
-
   <div id="curtain"></div>
 
+  <div id="selector">
+    <div class="options">
+      <script type="text/html" class="template">
+        <div data-id="{{id}}">{{label}}</div>
+      </script>
+    </div>
+  </div>
+
 </div>
 
 <script type="text/html" id="creditcard_template">
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()
   },
-- 
cgit v1.2.3-70-g09d2