update

8 files changed, 150 insertions, 66 deletions

diff --git a/StoneIsland/platforms/android/assets/www/js/index.js b/StoneIsland/platforms/android/assets/www/js/index.js
index b90f74b1..42cec6f1 100755
--- a/StoneIsland/platforms/android/assets/www/js/index.js
+++ b/StoneIsland/platforms/android/assets/www/js/index.js
@@ -12,26 +12,11 @@ var app = (function(){
       sdk.init({ env: "production" })
     }
 
-    accessibility.init(app.prebuild) // check if we can do native scrolling before build
-  }
-
-  app.prebuild = function(){
-    app.bind()
-    app.build()
-    
-    app.iscroll_options = {
-      mouseWheel: true,
-      scrollbars: true,
-      disablePointer: is_android ? true : false, // important to disable the pointer events that causes the issues
-      disableTouch: false, // false if you want the slider to be usable with touch devices
-      disableMouse: false // false if you want the slider to be usable with a mouse (desktop)
-    }
-
     if (window.cordova) {
-      document.addEventListener('deviceready', app.ready, false)
+      document.addEventListener('deviceready', app.device_ready, false)
     }
     else {
-      app.ready()
+      app.device_ready()
     }
   }
   
@@ -77,8 +62,24 @@ var app = (function(){
 	  app.selector = new Selector ()
   }
   
+  app.device_ready = function(){
+    accessibility.init(app.ready) // check if we can do native scrolling before build
+  }
+
   app.ready = function(){
     console.log(">> READY")
+
+    app.bind()
+    app.build()
+    
+    app.iscroll_options = {
+      mouseWheel: true,
+      scrollbars: true,
+      disablePointer: is_android ? true : false, // important to disable the pointer events that causes the issues
+      disableTouch: false, // false if you want the slider to be usable with touch devices
+      disableMouse: false // false if you want the slider to be usable with a mouse (desktop)
+    }
+
     if (window.cordova) {
       document.addEventListener('pause', app.paused, false)
       document.addEventListener('resume', app.resumed, false)
diff --git a/StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js b/StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js
index f10f7744..92427b6f 100755
--- a/StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js
+++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js
@@ -58,10 +58,9 @@ var ArchiveView = ScrollableView.extend({
     
     // id title images[ uri label code caption ]
     this.data.forEach(function(row, index){
-
       var t = this.menu_template.replace(/{{title}}/, row.title)
       var $t = $(t)
-      $t.data("aria-label", stonewash(row.title.replace(/'/g, " '").trim()))
+      $t.data("aria-label", stonewash(row.title.replace(/'0/g, " 20").replace(/'9/g, " 19").trim()))
       $t.data("title", row.title)
       $t.data("index", index)
       this.$menu_items.append($t)
@@ -86,7 +85,7 @@ var ArchiveView = ScrollableView.extend({
       var $t = $("<div>")
       $t.addClass("row").addClass("loading")
       var t = this.row_template.replace(/{{image}}/, cell.uri)
-                               .replace(/{{label}}/, cell.label)
+                               .replace(/{{label}}/g, cell.label)
                                .replace(/{{code}}/, cell.code)
                                .replace(/{{caption}}/, cell.caption)
       $t.html(t)
diff --git a/StoneIsland/platforms/android/assets/www/js/lib/blogs/HubView.js b/StoneIsland/platforms/android/assets/www/js/lib/blogs/HubView.js
index a0ee9dd0..d3b15f77 100755
--- a/StoneIsland/platforms/android/assets/www/js/lib/blogs/HubView.js
+++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/HubView.js
@@ -94,10 +94,18 @@ var HubView = ScrollableView.extend({
         app.fullscreenViewer.show(url, url)
       })
       $(".gallery-" + row.id).attr('aria-label', stonewash(row.title) + ". Image gallery, use the arrows to scroll.")
+      if (accessibility.voiceOver) {
+        $(".gallery-target-" + row.id).attr('aria-label', stonewash(row.title) + ". Image gallery, use the arrows to scroll.")
+        $(".gallery-target-" + row.id).click(function(e){
+          e && e.preventDefault()
+          var url = gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
+          app.fullscreenViewer.show(url, url)
+        })
+      }
     }
     else {
       // single image
-      var el = document.createElement("div")
+      var el = document.createElement(accessibility.voiceOver ? "a" : "div")
       if (row.image && row.image.length) {
         el.style.backgroundImage = "url(" + row.image[0].uri + ")"
       }
@@ -112,16 +120,28 @@ var HubView = ScrollableView.extend({
         $(".gallery-" + row.id).addClass("gallery-video-post")
         $(".gallery-" + row.id).attr('role', 'link')
         $(".gallery-" + row.id).attr('aria-label', stonewash(row.title) + ". Tap to watch the video on Youtube")
+        // $(".gallery-target-" + row.id).attr('aria-label', stonewash(row.title) + ". Tap to watch the video on Youtube")
         if (! row.image) {
           var url = row.link
           var ytid = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0];
           e.style.backgroundImage = "url(https://i.ytimg.com/vi/" + ytid + "/maxresdefault.jpg"
         }
+        // $(".gallery-target-" + row.id).click(function(e){
+        //   e && e.preventDefault()
+        //   window.open(row.link, '_system')
+        // })
+        $(".gallery-target-" + row.id).remove()
       } else {
-        $(el).click(function(){
+        $(el).click(function(e){
+          e && e.preventDefault()
           app.fullscreenViewer.show(row.image[0].uri)
         })
         $(".gallery-" + row.id).attr('aria-label', stonewash(row.title) + ". Main image")
+        $(".gallery-target-" + row.id).attr('aria-label', stonewash(row.title) + ". Main image.")
+        $(".gallery-target-" + row.id).click(function(e){
+          e && e.preventDefault()
+          app.fullscreenViewer.show(row.image[0].uri)
+        })
       }
       $t.find(".gallery-left").remove()
       $t.find(".gallery-right").remove()
diff --git a/StoneIsland/platforms/android/assets/www/js/lib/etc/accessibility.js b/StoneIsland/platforms/android/assets/www/js/lib/etc/accessibility.js
index 8108e461..31ddaf23 100644
--- a/StoneIsland/platforms/android/assets/www/js/lib/etc/accessibility.js
+++ b/StoneIsland/platforms/android/assets/www/js/lib/etc/accessibility.js
@@ -17,8 +17,10 @@ var accessibility = (function() {
       return ready()
     }
     if ('MobileAccessibility' in window) {
+      console.log('init accessibility')
       accessibility.build(ready)
     } else {
+      console.log('MobileAccessibility not found')
       ready()
     }
   }
diff --git a/StoneIsland/platforms/android/assets/www/js/lib/nav/FooterView.js b/StoneIsland/platforms/android/assets/www/js/lib/nav/FooterView.js
index 8641668f..855c37bd 100755
--- a/StoneIsland/platforms/android/assets/www/js/lib/nav/FooterView.js
+++ b/StoneIsland/platforms/android/assets/www/js/lib/nav/FooterView.js
@@ -17,12 +17,14 @@ var FooterView = View.extend({
     if (cancel) {
       this.$ok.removeClass("wide")
       this.$cancel.show().html(cancel)
+      this.$cancel.attr('aria-label', cancel.toLowerCase())
     }
     else {
       this.$ok.addClass("wide")
       this.$cancel.hide()
     }
     this.$ok.html(ok)
+    this.$ok.attr('aria-label', ok.toLowerCase())
     this.$el.show()
   },
 
diff --git a/StoneIsland/platforms/android/assets/www/js/lib/products/GalleryView.js b/StoneIsland/platforms/android/assets/www/js/lib/products/GalleryView.js
index d6f5723c..e84caa68 100755
--- a/StoneIsland/platforms/android/assets/www/js/lib/products/GalleryView.js
+++ b/StoneIsland/platforms/android/assets/www/js/lib/products/GalleryView.js
@@ -58,19 +58,40 @@ var GalleryView = View.extend({
       draggable: true,
     })
 
-    this.gallery.on('staticClick', function(e){
-      var currentImage = gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
+    this.gallery.on('change', function(){
+      var currentImage = this.gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
       var partz = currentImage.split("_")
       var head = partz[0]
       var size = partz[1]
       var tail = partz[2]
       var end_partz = tail.split(/\./)
       var style = end_partz[0]
-      var largest_size = large_styles[style]
-      var hiresImage = [head, largest_size, tail].join("_")
-      app.fullscreenViewer.show(currentImage, hiresImage)
+      var label = YOOX_IMAGE_STYLE_LABELS[style] || "Image: Alternate view"
+      $("#product .gallery-target").attr('aria-label', label)
     })
+
+    this.gallery.on('staticClick', this.static_click.bind(this))
+
+    if (accessibility.voiceOver) {
+      $("#product .gallery-target").click(this.static_click.bind(this))
+      $("#product .gallery-target").attr('aria-label', "Image: Front view")
+    } else {
+      $("#product .gallery-target").remove()
+    }
   },
+  static_click: function(e){
+    var currentImage = this.gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
+    var partz = currentImage.split("_")
+    var head = partz[0]
+    var size = partz[1]
+    var tail = partz[2]
+    var end_partz = tail.split(/\./)
+    var style = end_partz[0]
+    var largest_size = large_styles[style]
+    var hiresImage = [head, largest_size, tail].join("_")
+    app.fullscreenViewer.show(currentImage, hiresImage)
+  },
+
   touchstart: function(e){
   },
   touchmove: function(e){
@@ -82,7 +103,7 @@ var GalleryView = View.extend({
 
 var YOOX_IMAGE_STYLE_ORDER = "ZZZ f r d e a b c g l".split(" ")
 var YOOX_IMAGE_STYLE_LABELS = {
-  f: 'Front view',
-  r: 'Rear view',
+  f: 'Image: Front view',
+  r: 'Image: Rear view',
 }
 function sort_image_styles (b,a){ return (YOOX_IMAGE_STYLE_ORDER.indexOf(b)) - (YOOX_IMAGE_STYLE_ORDER.indexOf(a)) }
\ No newline at end of file
diff --git a/StoneIsland/platforms/android/assets/www/js/lib/products/ProductView.js b/StoneIsland/platforms/android/assets/www/js/lib/products/ProductView.js
index 62a6de18..f834b1c5 100755
--- a/StoneIsland/platforms/android/assets/www/js/lib/products/ProductView.js
+++ b/StoneIsland/platforms/android/assets/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,74 @@ 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)
+    this.$size.attr('aria-label', 'Tap to select size. Current size: ' + size_label)
+  },
+
+  set_color_label: function(color_label){
+    if (color_label) {
+      this.$color.show()
+      this.$colorLabel.html(color_label)
+      this.$color.attr('aria-label', 'Tap to select color. Current color: ' + color_label)
+    }
+    else {
+      this.$color.hide()
+    }
+  },
+
   // ADD TO CART
   save: function(){
     if (this.sold_out) { return }
diff --git a/StoneIsland/platforms/android/assets/www/js/vendor/util.js b/StoneIsland/platforms/android/assets/www/js/vendor/util.js
index 27bdf008..c44dda79 100755
--- a/StoneIsland/platforms/android/assets/www/js/vendor/util.js
+++ b/StoneIsland/platforms/android/assets/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){