populate product view

11 files changed, 66 insertions, 25 deletions

diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css
index 03f468a7..381a9f28 100644
--- a/StoneIsland/www/css/nav.css
+++ b/StoneIsland/www/css/nav.css
@@ -6,7 +6,7 @@
   top: 0; left: 0;
   width: 249px;
   -webkit-transform: translateZ(0) translateX(-249px);
-  -webkit-transition: -webkit-transform 0.3s;
+  -webkit-transition: -webkit-transform 0.1s;
   background: #fff;
 }
 #content {
@@ -15,7 +15,7 @@
   width: 100%; height: 100%;
   overflow: hidden;
   -webkit-transform: translateZ(0) translateX(0px);
-  -webkit-transition: -webkit-transform 0.3s;
+  -webkit-transition: -webkit-transform 0.1s;
 }
 .ios #nav,
 .ios #content {
@@ -193,8 +193,8 @@
   width: 100%; height: 100%;
   background: rgba(72,72,72,0.8);
   opacity: 0;
-  -webkit-transition: opacity 0.4s;
-  transition: opacity 0.4s;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
 }
 #curtain.visible {
   pointer-events: auto;
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index b2f89a28..e0183655 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -350,6 +350,7 @@
 <script src="js/vendor/view/view.js"></script>
 <script src="js/vendor/view/formview.js"></script>
 <script src="js/vendor/view/router.js"></script>
+<script src="js/vendor/view/scrollable.js"></script>
 
 <script src="js/lib/cart/CartView.js"></script>
 <script src="js/lib/cart/CartBilling.js"></script>
diff --git a/StoneIsland/www/js/lib/_router.js b/StoneIsland/www/js/lib/_router.js
index 567d1aad..8a117e39 100644
--- a/StoneIsland/www/js/lib/_router.js
+++ b/StoneIsland/www/js/lib/_router.js
@@ -43,6 +43,7 @@ var SiteRouter = Router.extend({
 	product: function(code){
 	  app.view = app.product
 	  app.product.load(code)
+	  app.product.show()
 	},
 	
 	hub: function(){
diff --git a/StoneIsland/www/js/lib/blogs/ArchiveView.js b/StoneIsland/www/js/lib/blogs/ArchiveView.js
index 13bacb22..783254cc 100644
--- a/StoneIsland/www/js/lib/blogs/ArchiveView.js
+++ b/StoneIsland/www/js/lib/blogs/ArchiveView.js
@@ -20,11 +20,12 @@ var ArchiveView = View.extend({
     this.data = data
     this.$loader.hide()
     this.$content.empty()
+    
+    // id title images[ uri label code caption ]
     this.data.forEach(function(row){
-      var t = this.template.replace(/{{image}}/, row.image.url)
+      var t = this.template.replace(/{{image}}/, row.images[0].uri)
                            .replace(/{{code}}/, row.code)
                            .replace(/{{title}}/, row.title)
-                           .replace(/{{body}}/, row.body)
       this.$content.append(t)
     }.bind(this))
   },
diff --git a/StoneIsland/www/js/lib/blogs/BlogView.js b/StoneIsland/www/js/lib/blogs/BlogView.js
index 70fc910a..573fe3c3 100644
--- a/StoneIsland/www/js/lib/blogs/BlogView.js
+++ b/StoneIsland/www/js/lib/blogs/BlogView.js
@@ -19,13 +19,13 @@ var BlogView = View.extend({
   success: function(data){
     this.loaded = true
     this.data = data
-    this.loader.preloadImage(data.archive[0].image.url, function(img){
+    this.loader.preloadImage(data.archive[0].images[0].uri, function(img){
       app.archive.populate(data.archive)
     })
-    this.loader.preloadImage(data.hub[0].image.url, function(img){
+    this.loader.preloadImage(data.hub[0].image.uri, function(img){
       app.hub.populate(data.hub)
     })
-    this.loader.preloadImage(data.story[0].image.url, function(img){
+    this.loader.preloadImage(data.story[0].image.uri, function(img){
       app.story.populate(data.story)
     })
   },
diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js
index 95cdef3f..62e8d10f 100644
--- a/StoneIsland/www/js/lib/blogs/HubView.js
+++ b/StoneIsland/www/js/lib/blogs/HubView.js
@@ -20,14 +20,15 @@ var HubView = View.extend({
     this.data = data
     this.$loader.hide()
     this.$content.empty()
+    // id date subtitle body link image[uri caption]
     this.data.forEach(function(row){
-      var t = this.template.replace(/{{image}}/, row.image.url)
+      var t = this.template.replace(/{{image}}/, row.images[0].uri)
                            .replace(/{{date}}/, row.date)
                            .replace(/{{code}}/, row.code)
                            .replace(/{{title}}/, row.title)
                            .replace(/{{subtitle}}/, row.subtitle)
                            .replace(/{{link}}/, row.link)
-                           .replace(/{{body}}/, row.body)
+                           .replace(/{{body}}/, row.body.replace(/\n/g, "<br>"))
       this.$content.append(t)
     }.bind(this))
   },
diff --git a/StoneIsland/www/js/lib/blogs/StoryView.js b/StoneIsland/www/js/lib/blogs/StoryView.js
index b47b0488..efdd65a7 100644
--- a/StoneIsland/www/js/lib/blogs/StoryView.js
+++ b/StoneIsland/www/js/lib/blogs/StoryView.js
@@ -4,6 +4,7 @@ var StoryView = View.extend({
   template: $("#story .template").html(),
 
   events: {
+    "load img": "image_loaded"
   },
   
   initialize: function(){
@@ -20,13 +21,17 @@ var StoryView = View.extend({
     this.data = data
     this.$loader.hide()
     this.$content.empty()
+    // id title image[uri caption] body
     this.data.forEach(function(row){
-      var t = this.template.replace(/{{image}}/, row.image.url)
+      var t = this.template.replace(/{{image}}/, row.image.uri)
                            .replace(/{{date}}/, row.date)
                            .replace(/{{title}}/, row.title)
-                           .replace(/{{body}}/, row.body)
+                           .replace(/{{body}}/, row.body.replace(/\n/g, "<br>"))
       this.$content.append(t)
     }.bind(this))
   },
+  
+  image_loaded: function(){
+  },
 
 })
\ 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 d638171b..a1a506a3 100644
--- a/StoneIsland/www/js/lib/products/CollectionView.js
+++ b/StoneIsland/www/js/lib/products/CollectionView.js
@@ -1,4 +1,5 @@
-var CollectionView = View.extend({
+
+var CollectionView = ScrollableView.extend({
   
   el: "#collection",
   template: $("#collection .template").html(),
@@ -25,18 +26,25 @@ var CollectionView = View.extend({
   },
   
   fetch: function(){
+    if (this.loaded) return
     this.$loader.show()
     sdk.product.collection({
-      gallery_id: 31617,
+      gallery_id: 32780,
       success: this.populate.bind(this)
     })
   },
 
   populate: function(data){
+    if (this.loaded && ! data) {
+      data = this.data
+    }
+    else {
+      this.data = data
+    }
+    this.loaded = true
     this.$loader.hide()
     this.$content.empty()
     // DefaultCode10
-    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'], '11_f'))
@@ -44,10 +52,9 @@ var CollectionView = View.extend({
       this.$content.append(t)
     }.bind(this))
     
-    setTimeout(function(){
-      this.scroller.refresh()
-      app.collection.scroller.scrollTo(0, 0)
-    }.bind(this), 0)
+    this.deferScrollToTop()
+    
+    this.afterFetchCallback && this.afterFetchCallback()
   },
   
   pick: function(e){
diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index c0a1ee79..0e4063df 100644
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -8,7 +8,7 @@ var SIZE_LOOKUP = {
   "XXXL": "XXX-LARGE",
 };
 
-var ProductView = View.extend({
+var ProductView = ScrollableView.extend({
   
   el: "#product",
   
@@ -44,7 +44,16 @@ var ProductView = View.extend({
   cache: {},
   
   load: function(code, data){
-    window.location.href = "#/product/" + code
+    this.show()
+    if (! app.collection.loaded) {
+      app.collection.afterFetchCallback = this.load.bind(this, code, data)
+      app.collection.fetch()
+      return
+    }
+    else {
+      app.collection.afterFetchCallback = null
+    }
+    window.location.href = "#/store/" + code
     data = data || app.collection.items[code]
     if (code in this.cache) {
       return this.populate(data, this.cache[code])
@@ -59,6 +68,8 @@ var ProductView = View.extend({
   },
   
   populate: function(data, details){
+    this.show()
+console.log(data, details)
     var name_partz = data['ModelNames'].split(' ')
     var num = name_partz.shift()
     var title = name_partz.join(' ')
diff --git a/StoneIsland/www/js/vendor/view/router.js b/StoneIsland/www/js/vendor/view/router.js
index d766880f..a8ec331f 100644
--- a/StoneIsland/www/js/vendor/view/router.js
+++ b/StoneIsland/www/js/vendor/view/router.js
@@ -14,8 +14,10 @@ var Router = View.extend({
 	},
 	
 	parseRoute: function(pathname){
-
-		if (pathname[0] !== "/" && pathname[0] !== "#") { pathname = "/" + pathname }
+    
+    pathname = pathname.replace(/^#/, "")
+    
+		if (pathname[0] !== "/") { pathname = "/" + pathname }
 
 		var routes = this.routes,
 		    path = pathname.split("/");
@@ -25,7 +27,7 @@ var Router = View.extend({
 				path[i] = null
 			}
 		}
-		
+
 		if (pathname in routes) {	
 			this[this.routes[pathname]]()
 			return
diff --git a/StoneIsland/www/js/vendor/view/scrollable.js b/StoneIsland/www/js/vendor/view/scrollable.js
new file mode 100644
index 00000000..d3540723
--- /dev/null
+++ b/StoneIsland/www/js/vendor/view/scrollable.js
@@ -0,0 +1,12 @@
+var ScrollableView = View.extend({
+
+  deferScrollToTop: function(){
+    setTimeout(this.scrollToTop.bind(this), 0)
+  },
+  
+  scrollToTop: function(){
+    this.scroller.refresh()
+    app.collection.scroller.scrollTo(0, 0)
+  },
+
+})
\ No newline at end of file