using native selects instead of the html selector for sizes

4 files changed, 100 insertions, 45 deletions

diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css
index 63e9b020..5efef660 100755
--- a/StoneIsland/www/css/products.css
+++ b/StoneIsland/www/css/products.css
@@ -160,19 +160,31 @@
   display: flex;
   flex-direction: row;
 }
-.product .size-color span {
-  position:relative;
-  box-sizing:border-box;
-  padding: 0 12px;
+.product .size-color > div {
+  position: relative;
+  box-sizing: border-box;
   height: 48px;
   font-size: 1rem;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.product .size-color span.size {
+.product .size-color > div > div.label {
+  padding: 0 12px;
+  max-width: 6rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.product .size-color div.size {
   border-right: 1px solid #444;
 }
+.product .size-color > div > select {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  opacity: 0;
+}
 
 .product .price {
   display:table-cell;
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 12c4c0ad..06f4455f 100755
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -325,8 +325,14 @@
         <div class="style-share">
         <span class="style">
           <div class="size-color">
-            <span role="button" class="size" aria-label="Tap to select size. Current size"></span>
-            <span role="button" class="color" aria-label="Tap to select color. Current color"></span>
+            <div role="button" class="size" aria-label="Tap to select size. Current size">
+              <div class="label"></div>
+              <select name="size"></select>
+            </div>
+            <div role="button" class="color" aria-label="Tap to select color. Current color">
+              <div class="label"></div>
+              <select name="color"></select>
+            </div>
           </div>
         </span>
         <span role="button" class="share">SHARE +</span>
@@ -1359,8 +1365,8 @@
 <script src="js/lib/blogs/BlogView.js"></script>
 <script src="js/lib/blogs/ArchiveView.js"></script>
 <script src="js/lib/blogs/HubView.js"></script>
-<script src="js/lib/blogs/PageView.js"></script>
 <script src="js/lib/blogs/StoryView.js"></script>
+<script src="js/lib/blogs/PageView.js"></script>
 
 <script src="js/lib/_router.js"></script>
 
diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index 62a6de18..4320043c 100755
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -1,4 +1,3 @@
-
 var ProductView = ScrollableView.extend({
   
   el: "#product",
@@ -6,8 +5,10 @@ var ProductView = ScrollableView.extend({
   events: {
     "click .fit": "scroll_to_bottom",
     "click .notAvailableInCanada": "scroll_to_bottom",
-    "click .size": "select_size",
-    "click .color": "select_color",
+    "change select[name=size]": "select_size",
+    "change select[name=color]": "select_color",
+    // "click .size": "select_size",
+    // "click .color": "select_color",
     "click .share": "share",
     "click .gallery-left": "gallery_left",
     "click .gallery-right": "gallery_right",
@@ -22,8 +23,12 @@ var ProductView = ScrollableView.extend({
     this.$type = this.$(".type")
     this.$price = this.$(".price")
     this.$size = this.$(".size")
-    this.$share = this.$(".share")
+    this.$sizeSelect = this.$(".size select")
+    this.$sizeLabel = this.$(".size .label")
     this.$color = this.$(".color")
+    this.$colorSelect = this.$(".color select")
+    this.$colorLabel = this.$(".color .label")
+    this.$share = this.$(".share")
     this.$body = this.$(".body")
     this.$fit = this.$(".fit")
     this.$fitHeader = this.$('.fitHeader')
@@ -123,7 +128,7 @@ var ProductView = ScrollableView.extend({
 
     var descriptions = this.get_descriptions(details)
 
-    var title = data['ModelNames']
+    var title = data['ModelNames'] || ""
     var type = title_case( data['MicroCategory'] )
     var price = "$" + data['DiscountedPrice'] + ".00"
     var details_description = descriptions['Details'] || ""
@@ -132,7 +137,7 @@ var ProductView = ScrollableView.extend({
     // body = body.replace(/<br>/g, "<br><br>").replace(/(<br>)+$/, "")
 
     var default_color_id = this.populate_selectors(data, details)
-    
+
     var notAvailableInCanada = !! app.store.NotAvailableInCanada
     app.product.$notAvailableInCanada.toggle( notAvailableInCanada )
 
@@ -166,14 +171,8 @@ var ProductView = ScrollableView.extend({
       this.size = size
 
       this.is_onesize = !! this.sizes[1]
-
-      this.$size.show().html(size_label)
-      if (color_label) {
-        this.$color.html(color_label)
-      }
-      else {
-        this.$color.hide()
-      }
+      this.set_size_label(size_label)
+      this.set_color_label(color_label)
     }
     
     // console.log(color, color_label, size, size_label)
@@ -233,6 +232,9 @@ var ProductView = ScrollableView.extend({
       this.$sizing.hide()
     }
 
+    this.populate_sizes()
+    this.populate_colors()
+
     this.deferScrollToTop()
   },
 
@@ -314,37 +316,72 @@ var ProductView = ScrollableView.extend({
     return default_color
   },
 
-  select_size: function(){
+  populate_sizes: function() {
+    console.log(this.sold_out, this.notAvailable, this.is_onesize, this.item)
     if (this.sold_out) { return }
     if (this.notAvailable) { return }
-    if (this.is_onesize) { return this.select_color() }
-    if (this.item['Sizes'].length == 0) { return }
-    var sizes = Object.keys(this.sizes).map(function(key){
-      return this.sizes[key]
-    }.bind(this))
-    
-    app.selector.select("style", sizes, function(size){
-      console.log(size)
-      this.size = size.value
-      this.$size.html(size.label)
+    // if (this.is_onesize) { return this.select_color() }
+    if (this.details['ModelSizes'].length == 0) { return }
+
+    this.$sizeSelect.empty()
+    var sizes = Object.keys(this.sizes).forEach(function(key){
+      var size = this.sizes[key]
+      var option = document.createElement('option')
+      option.value = size.value
+      option.innerHTML = size.label
+      this.$sizeSelect.append(option)
     }.bind(this))
   },
-  
-  select_color: function(){
+
+  populate_colors: function() {
     if (this.sold_out) { return }
     if (this.notAvailable) { return }
-    if (this.item['Colors'].length == 0) { return }
-    var colors = Object.keys(this.colors).map(function(key){
-      return this.colors[key]
-    }.bind(this))
-    app.selector.select("style", colors, function(color){
-      this.code = color.code
-      this.$color.html(color.label)
-      this.gallery.populate( color.code, this.details['ImageTypes'] )
-      this.gallery_right()
+    if (this.details['ModelColors'].length == 0) { return }
+
+    this.$colorSelect.empty()
+    Object.keys(this.colors).forEach(function(key){
+      var color = this.colors[key]
+      var option = document.createElement('option')
+      option.value = key
+      option.innerHTML = color.label
+      this.$colorSelect.append(option)
     }.bind(this))
   },
 
+  select_size: function(){
+    console.log(this.colors)
+    var value = this.$sizeSelect.val()
+    var size = this.sizes[value]
+    console.log(size)
+    this.set_size_label(size.label)
+    this.size = size.value
+  },
+  
+  select_color: function(){
+    var value = this.$colorSelect.val()
+    var color = this.colors[value]
+    console.log(color)
+    this.code = color.code
+    this.set_color_label(color.label)
+    this.gallery.populate( color.code, this.details['ImageTypes'] )
+    this.gallery_right()
+  },
+
+  set_size_label: function(size_label){
+    this.$size.show()
+    this.$sizeLabel.html(size_label)
+  },
+
+  set_color_label: function(color_label){
+    if (color_label) {
+      this.$color.show()
+      this.$colorLabel.html(color_label)
+    }
+    else {
+      this.$color.hide()
+    }
+  },
+
   // ADD TO CART
   save: function(){
     if (this.sold_out) { return }
diff --git a/StoneIsland/www/js/vendor/util.js b/StoneIsland/www/js/vendor/util.js
index 27bdf008..c44dda79 100755
--- a/StoneIsland/www/js/vendor/util.js
+++ b/StoneIsland/www/js/vendor/util.js
@@ -25,7 +25,7 @@ function hex_string (rgb) { return "#" + rgb.map(Math.round).map(function(n){ va
 function parse_rgba_string (s) { return s.match(/(\d+)/g).slice(0,3) }
 
 function title_case (str) {
-  return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
+  return (str || "").replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
 }
 function pluralize (n,s,ss) { return n + " " + s + ( n == 1 ? "" : (ss || "s") ) }
 function as_cash(n){