iscroll workin, api fetching, hud populating

14 files changed, 136 insertions, 64 deletions

diff --git a/StoneIsland/platforms/ios/StoneIsland.xcodeproj/project.xcworkspace/xcuserdata/jules.xcuserdatad/UserInterfaceState.xcuserstate b/StoneIsland/platforms/ios/StoneIsland.xcodeproj/project.xcworkspace/xcuserdata/jules.xcuserdatad/UserInterfaceState.xcuserstate
index 51158e5f..3b7233e1 100644
--- a/StoneIsland/platforms/ios/StoneIsland.xcodeproj/project.xcworkspace/xcuserdata/jules.xcuserdatad/UserInterfaceState.xcuserstate
+++ b/StoneIsland/platforms/ios/StoneIsland.xcodeproj/project.xcworkspace/xcuserdata/jules.xcuserdatad/UserInterfaceState.xcuserstate
diff --git a/StoneIsland/www/css/index.css b/StoneIsland/www/css/index.css
index db803fa9..674ab65c 100644
--- a/StoneIsland/www/css/index.css
+++ b/StoneIsland/www/css/index.css
@@ -12,7 +12,7 @@ body {
   -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
   -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
   -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
-  background: #eeeeee;
+  background: #fff;
   font-family: pfd, sans-serif;
   font-size: 12px;
 }
diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css
index 2463d123..03f468a7 100644
--- a/StoneIsland/www/css/nav.css
+++ b/StoneIsland/www/css/nav.css
@@ -7,7 +7,7 @@
   width: 249px;
   -webkit-transform: translateZ(0) translateX(-249px);
   -webkit-transition: -webkit-transform 0.3s;
-  background: #eeeeee;
+  background: #fff;
 }
 #content {
   position: absolute;
@@ -132,6 +132,7 @@
   top: 0; left: 0; width: 100%;
   height: 42px;
   background: white;
+  border-bottom: 1px solid black;
 }
 #header .logo {
   background-image: url(../img/wide-logo.png);
@@ -159,8 +160,9 @@
   display: block;
   position: absolute;
   bottom: 0; left: 0; width: 100%;
-  background: #eee;
+  background: #fff;
   border-top: 1px solid #ddd;
+  z-index: 1;
 }
 #footer span {
   display: none;
@@ -197,6 +199,7 @@
 #curtain.visible {
   pointer-events: auto;
   opacity: 1;
+  z-index: 2;
 }
 
 
@@ -217,17 +220,18 @@
   display: none;
   height: 100%; width: 100%;
   position: absolute; top: 0; left: 0;
-  background: #eeeeee;
+  background: #fff;
 }
 
 /* CONTENT */
 
 #story, #hub, #archive, #collection, #product, #cart {
   position: absolute;
-  top: 40px;
-  height: -webkit-calc(100% - 40px);
-  height: calc(100% - 40px);
+  top: 42px;
+  height: -webkit-calc(100% - 42px);
+  height: calc(100% - 42px);
   width: 100%;
+  overflow: hidden;
 }
 h1 {
   text-align: center;
diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css
index bac0d116..63faed3e 100644
--- a/StoneIsland/www/css/products.css
+++ b/StoneIsland/www/css/products.css
@@ -1,14 +1,24 @@
 .collection #collection { display: block }
 .collection #footer .filter { display: block }
-#content.collection { overflow: scroll }
 #collection {
   display: none;
 }
+#collection .item {
+  text-align: center;
+}
+#collection .item img {
+  width: 306px;
+  height: 390px;
+}
 
 .product #product { display: block }
 .product #footer .buynow { display: block }
 .product #footer .addtocart { display: block }
-#content.product { overflow: scroll }
 #product {
   display: none;
 }
+
+.scroll {
+  position: absolute;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/StoneIsland/www/js/index.js b/StoneIsland/www/js/index.js
index e0b08351..1beaa708 100644
--- a/StoneIsland/www/js/index.js
+++ b/StoneIsland/www/js/index.js
@@ -6,6 +6,11 @@ var app = (function(){
     app.build()
     
     sdk.init({ env: "test" })
+    
+    app.iscroll_options = {
+      mouseWheel: true,
+      scrollbars: true,
+    }
 
     if (window.cordova) {
       document.addEventListener('deviceready', app.ready, false)
diff --git a/StoneIsland/www/js/lib/_router.js b/StoneIsland/www/js/lib/_router.js
index 08b8b819..567d1aad 100644
--- a/StoneIsland/www/js/lib/_router.js
+++ b/StoneIsland/www/js/lib/_router.js
@@ -6,11 +6,13 @@ var SiteRouter = Router.extend({
 	routes: {
 		'/':              'intro',
 		'/intro':         'intro',
-    '/store':         'store',
     '/hub':           'hub',
     '/story':         'story',
     '/archive':       'archive',
 
+    '/store':         'store',
+    '/store/:code':   'product',
+
     '/faq':           'faq',
     '/search':        'search',
 
@@ -38,6 +40,11 @@ var SiteRouter = Router.extend({
 	  app.collection.show()
 	},
 	
+	product: function(code){
+	  app.view = app.product
+	  app.product.load(code)
+	},
+	
 	hub: function(){
 	  app.view = app.hub
 	  app.hub.show()
diff --git a/StoneIsland/www/js/lib/blogs/ArchiveView.js b/StoneIsland/www/js/lib/blogs/ArchiveView.js
index 34e8b109..13bacb22 100644
--- a/StoneIsland/www/js/lib/blogs/ArchiveView.js
+++ b/StoneIsland/www/js/lib/blogs/ArchiveView.js
@@ -9,7 +9,7 @@ var ArchiveView = View.extend({
   initialize: function(){
     this.$content = this.$(".content")
     this.$loader = this.$(".loader")
-    this.scroller = new IScroll('#archive .scroll')
+    this.scroller = new IScroll('#archive', app.iscroll_options)
   },
 
   show: function(){
diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js
index ea9b3048..95cdef3f 100644
--- a/StoneIsland/www/js/lib/blogs/HubView.js
+++ b/StoneIsland/www/js/lib/blogs/HubView.js
@@ -9,7 +9,7 @@ var HubView = View.extend({
   initialize: function(){
     this.$content = this.$(".content")
     this.$loader = this.$(".loader")
-    this.scroller = new IScroll('#hub .scroll')
+    this.scroller = new IScroll('#hub', app.iscroll_options)
   },
 
   show: function(){
diff --git a/StoneIsland/www/js/lib/blogs/StoryView.js b/StoneIsland/www/js/lib/blogs/StoryView.js
index 7f9b30a1..b47b0488 100644
--- a/StoneIsland/www/js/lib/blogs/StoryView.js
+++ b/StoneIsland/www/js/lib/blogs/StoryView.js
@@ -9,7 +9,7 @@ var StoryView = View.extend({
   initialize: function(){
     this.$content = this.$(".content")
     this.$loader = this.$(".loader")
-    this.scroller = new IScroll('#story .scroll')
+    this.scroller = new IScroll('#story', app.iscroll_options)
   },
 
   show: function(){
diff --git a/StoneIsland/www/js/lib/products/CollectionView.js b/StoneIsland/www/js/lib/products/CollectionView.js
index 987804fc..d638171b 100644
--- a/StoneIsland/www/js/lib/products/CollectionView.js
+++ b/StoneIsland/www/js/lib/products/CollectionView.js
@@ -13,7 +13,7 @@ var CollectionView = View.extend({
   initialize: function(){
     this.$content = this.$(".content")
     this.$loader = this.$(".loader")
-    this.scroller = new IScroll('#collection .scroll')
+    this.scroller = new IScroll('#collection', app.iscroll_options)
   },
 
   show: function(){
@@ -39,17 +39,21 @@ var CollectionView = View.extend({
     console.log(data)
     data.SearchResponseFull.Results.Items.forEach(function(item){
       this.items[ item['Code8'] ] = item
-      var t = this.template.replace(/{{image}}/, sdk.image(item['DefaultCode10']))
+      var t = this.template.replace(/{{image}}/, sdk.image(item['DefaultCode10'], '11_f'))
                            .replace(/{{code8}}/, item['Code8'])
       this.$content.append(t)
-      
     }.bind(this))
+    
+    setTimeout(function(){
+      this.scroller.refresh()
+      app.collection.scroller.scrollTo(0, 0)
+    }.bind(this), 0)
   },
   
   pick: function(e){
     var code = $(e.currentTarget).data("code")
     var data = this.items[code]
-    app.product.load(data)
+    app.product.load(code, data)
   },
 
 })
diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index 76527c8b..c0a1ee79 100644
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -41,7 +41,24 @@ var ProductView = View.extend({
   color: null,
   code: null,
   
-  load: function(data){
+  cache: {},
+  
+  load: function(code, data){
+    window.location.href = "#/product/" + code
+    data = data || app.collection.items[code]
+    if (code in this.cache) {
+      return this.populate(data, this.cache[code])
+    }
+    sdk.product.item({
+      code: code,
+      success: function(details){
+        this.cache[code] = details
+        this.populate(data, details)
+      }.bind(this),
+    })
+  },
+  
+  populate: function(data, details){
     var name_partz = data['ModelNames'].split(' ')
     var num = name_partz.shift()
     var title = name_partz.join(' ')
@@ -50,7 +67,8 @@ var ProductView = View.extend({
     var size = data['Sizes'][0]
     var size_label = SIZE_LOOKUP[size]
     var color = data['Colors'][0]
-    var color_label = color['Text']
+    console.log(color)
+    var color_label = color && color['Text']
     var body = ""
     
     this.item = data
@@ -63,10 +81,13 @@ var ProductView = View.extend({
     this.$type.html(type)
     this.$price.html(price)
     this.$size.html(size_label)
-    this.$color.html(color)
+    if (color_label) {
+      this.$color.show().html(color_label)
+    }
+    else {
+      this.$color.hide()
+    }
     this.$body.html(body)
-    
-    // TODO: fetch product from item API, get other Code10s so you can populate the gallery
   },
 
   select_size: function(){
diff --git a/StoneIsland/www/js/sdk/_sdk.js b/StoneIsland/www/js/sdk/_sdk.js
index a0250f77..e87bd86c 100644
--- a/StoneIsland/www/js/sdk/_sdk.js
+++ b/StoneIsland/www/js/sdk/_sdk.js
@@ -23,8 +23,8 @@ var sdk = (function(){
     return endpoint + api + "/STONEISLAND_US/" + path
   }
   
-  sdk.image = function(code){
-    return "http://cdn.yoox.biz/" + code.substr(0,2) + "/" + code + "_11_f.jpg"
+  sdk.image = function(code, size){
+    return "http://cdn.yoox.biz/" + code.substr(0,2) + "/" + code + "_" + size + ".jpg"
   }
   
   $.ajaxSetup({
diff --git a/proxy/index.js b/proxy/index.js
index d2d4e738..b530c7a3 100644
--- a/proxy/index.js
+++ b/proxy/index.js
@@ -5,9 +5,10 @@ var fs = require('fs')
 var url = require('url')
 
 var PORT = 9090
+var cache = {}
 
 var server = http.createServer().listen(PORT, function(){
-  console.log("Proxy listening on: http://lvh.me:%s", PORT)
+  console.log('Proxy listening on: http://lvh.me:%s', PORT)
 })
 
 server.on('request', function (req, res){
@@ -18,6 +19,12 @@ server.on('request', function (req, res){
   }
 
   console.log(req.method, req.url)
+  
+  if (req.method == 'GET' && req.url in cache) {
+    res.writeHeader(200, { 'Content-type': 'application/json' })
+    res.end(cache[req.url])
+    return
+  }
 
   // console.log(req.headers)
 
@@ -25,21 +32,28 @@ server.on('request', function (req, res){
   options.headers = get_headers(req.headers)
   options.method = req.method
   options.port = 443
-  options.hostname = "secure.api.yoox.biz"
+  options.hostname = 'secure.api.yoox.biz'
   options.path = req.url
 
   req.pause()
   var connector = https.request(options, function(server_res) {
-    console.log(">> GOT", server_res.statusCode)
-
+    console.log('>> GOT', server_res.statusCode)
+    
     server_res.pause()
     res.writeHeader(server_res.statusCode, server_res.headers)
-    // server_res.on("data", function(s){ console.log("<<", s.toString()) })
     server_res.pipe(res)
+    
+    if (req.method == 'GET') {
+      cache[req.url] = ''
+      server_res.on('data', function(s){
+        cache[req.url] += s.toString()
+      })
+    }
+
     server_res.resume()
   })
-  // req.on("data", function(s){ console.log(">>", s.toString()) })
-  req.on("error", function(s){ console.log("/!\\ ERROR /!\\"); console.log(s) })
+  // req.on('data', function(s){ console.log('>>', s.toString()) })
+  req.on('error', function(s){ console.log('/!\\ ERROR /!\\'); console.log(s) })
   req.pipe(connector)
   req.resume()
 
@@ -47,82 +61,89 @@ server.on('request', function (req, res){
 
 /*
   headers: {
-    "x-yoox-appname": auth.appname,
-    "x-yoox-account-token": auth.access_token,
-    "x-yoox-device": auth.device,
-    "x-yoox-api-key": auth.apikey,
-    "x-yoox-cart-token": cart.token,
+    'x-yoox-appname': auth.appname,
+    'x-yoox-account-token': auth.access_token,
+    'x-yoox-device': auth.device,
+    'x-yoox-api-key': auth.apikey,
+    'x-yoox-cart-token': cart.token,
   },
 */
 
 function get_headers (h){
   var hh = {}
-  "appname account-token device api-key cart-token".split(" ").forEach(function(s){
-    var key = "x-yoox-" + s
+  'appname account-token device api-key cart-token'.split(' ').forEach(function(s){
+    var key = 'x-yoox-' + s
     if (key in h) hh[key] = h[key]
   })
-  hh['Content-Type'] = "application/json" // h['content-type']
+  hh['Content-Type'] = 'application/json' // h['content-type']
   if ('content-length' in h) hh['Content-Length'] = h['content-length']
   if ('connection' in h) hh['Connection'] = h['connection']
   return hh
 }
 
 var mimes = {
-  "gif": "image/gif",
-  "png": "image/png",
-  "jpg": "image/jpeg",
-  "jpeg": "image/jpeg",
-  "html": "text/html",
-  "js": "application/javascript",
-  "css": "text/css",
-  "woff": "application/font-woff",
-  "ttf": "application/font-woff",
+  'gif': 'image/gif',
+  'png': 'image/png',
+  'jpg': 'image/jpeg',
+  'jpeg': 'image/jpeg',
+  'html': 'text/html',
+  'js': 'application/javascript',
+  'css': 'text/css',
+  'woff': 'application/font-woff',
+  'ttf': 'application/font-woff',
 }
 
 function stream (req, res) {
-  var url = req.url.toLowerCase().split("?")[0]
-  var ext_partz = url.split("."), ext = ext_partz[ext_partz.length-1]
-  var mime = mimes[ext] || "application/octet-stream"
+  var url = req.url.toLowerCase().split('?')[0]
+  var ext_partz = url.split('.'), ext = ext_partz[ext_partz.length-1]
+  var mime = mimes[ext] || 'application/octet-stream'
 
-  if (! url || url == "/") {
-    url = "index.html"
-    mime = "text/html"
+  if (! url || url == '/') {
+    url = 'index.html'
+    mime = 'text/html'
+  }
+  if (url == '/cordova.js') {
+    console.log(url)
+    res.writeHead(200, 'OK', { 'Content-type': 'application/javascript' })
+    res.end('{}')
+    return
   }
 
-  var file = path.resolve("../StoneIsland/www/" + url)
-
+  var file = path.resolve('./StoneIsland/www/' + url)
   fs.stat(file, function(err, stats) {
     if (! stats) {
       // console.log(404)
       res.writeHead(404)
-      res.end("404")
+      res.end('404')
       return
     }
 
     var headers = {
-      "Content-Length": stats.size,
-      "Content-Type": mime,
+      'Content-Length': stats.size,
+      'Content-Type': mime,
     }
 
-    res.writeHead(200, "OK", headers)
+    res.writeHead(200, 'OK', headers)
 
     var stream = fs.createReadStream(file, { start: 0, end: stats.size })
-    stream.on("open", function() {
+    stream.on('open', function() {
       stream.pipe(res)
     })
-    stream.on("error", function(err) {
+    stream.on('error', function(err) {
       console.log(err)
       stream.destroy()
       res.end()
     })
-    stream.on("close", function(){
+    stream.on('close', function(){
       stream.destroy()
       res.end()
     })
+/*
     req.connection.setMaxListeners(50)
     req.connection.on('close', function(){
       stream.destroy()
       res.end()
     })
+*/
   })
 }
diff --git a/proxy/package.json b/proxy/package.json
index 7938559d..a9f4ba2c 100644
--- a/proxy/package.json
+++ b/proxy/package.json
@@ -4,5 +4,5 @@
   "description": "local proxy for stone island api",
   "main": "index.js",
   "author": "okfocus",
-  "license": "LNT",
+  "license": "LNT"
 }