scroll stuff and load images for gallery

7 files changed, 63 insertions, 9 deletions

diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js
index 62e8d10f..717fdd23 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', app.iscroll_options)
+    this.scroller = new IScroll('#hub', app.iscroll_optionsx)
   },
 
   show: function(){
@@ -33,5 +33,4 @@ var HubView = View.extend({
     }.bind(this))
   },
 
-
 })
\ No newline at end of file
diff --git a/StoneIsland/www/js/lib/nav/FooterView.js b/StoneIsland/www/js/lib/nav/FooterView.js
index 76126102..2f872530 100644
--- a/StoneIsland/www/js/lib/nav/FooterView.js
+++ b/StoneIsland/www/js/lib/nav/FooterView.js
@@ -4,6 +4,7 @@ var FooterView = View.extend({
   
   events: {
     "click .filter": "filter",
+    "click .back": "back",
     "click .buynow": "buynow",
     "click .addtocart": "addtocart",
     "click .cancel": "cancel",
@@ -16,6 +17,9 @@ var FooterView = View.extend({
   
   filter: function(){
   },
+  back: function(){
+    app.router.go('store')
+  },
   buynow: function(){
   },
   addtocart: function(){
diff --git a/StoneIsland/www/js/lib/products/CollectionView.js b/StoneIsland/www/js/lib/products/CollectionView.js
index a1a506a3..1377277a 100644
--- a/StoneIsland/www/js/lib/products/CollectionView.js
+++ b/StoneIsland/www/js/lib/products/CollectionView.js
@@ -8,7 +8,12 @@ var CollectionView = ScrollableView.extend({
   items: {},
 
   events: {
-    "click .item": "pick",
+    "touchstart .item": "touchstart",
+    "touchmove .item": "touchmove",
+    "touchend .item": "touchend",
+    "mousedown .item": "touchstart",
+    "mousemove .item": "touchmove",
+    "mouseup .item": "touchend",
   },
   
   initialize: function(){
@@ -62,5 +67,28 @@ var CollectionView = ScrollableView.extend({
     var data = this.items[code]
     app.product.load(code, data)
   },
+  
+  firstTouch: { x: 0, y: 0, id: "" },
+  lastTouch: { x: 0, y: 0, id: "" },
+  touchstart: function(e){
+    var p = e.originalEvent.touches ? e.originalEvent.touches[0] : e.originalEvent
+    this.firstTouch.x = this.lastTouch.x = p.pageX
+    this.firstTouch.y = this.lastTouch.y = p.pageY
+    this.firstTouch.id = e.currentTarget.dataset.id
+  },
+  touchmove: function(e){
+    var p = e.originalEvent.touches ? e.originalEvent.touches[0] : e.originalEvent
+    this.lastTouch.x = p.pageX
+    this.lastTouch.y = p.pageY
+    this.lastTouch.id = e.currentTarget.dataset.id
+  },
+  touchend: function(e){
+    var first = app.collection.firstTouch
+    var last = app.collection.lastTouch
+    var distance = Math.sqrt( Math.pow(first.x - last.x, 2) + Math.pow(first.y - last.y, 2) )
+    if (distance < 20) {
+      this.pick(e)
+    }
+  },
 
 })
diff --git a/StoneIsland/www/js/lib/products/GalleryView.js b/StoneIsland/www/js/lib/products/GalleryView.js
index 2eabe2a6..44eed9f0 100644
--- a/StoneIsland/www/js/lib/products/GalleryView.js
+++ b/StoneIsland/www/js/lib/products/GalleryView.js
@@ -1,6 +1,7 @@
 var GalleryView = View.extend({
 
   el: "#gallery",
+  template: $("#gallery .template").html(),
   
   events: {
     "click .left": "prev",
@@ -16,7 +17,23 @@ var GalleryView = View.extend({
     this.$slider = this.$(".slider")
   },
   
-  populate: function(){
+  populate: function(code, image_ids){
+    var valid_styles = {}
+    image_ids.forEach(function(id){
+      if (id.indexOf("_") == -1) return
+      var partz = id.split("_")
+      var size = parseInt(partz[0]), style = partz[1]
+      if (size > 13) return;
+      if (! valid_styles[style] || valid_styles[style] < size) {
+        valid_styles[style] = size
+      }
+    })
+    Object.keys(valid_styles).forEach(function(style){
+      var id = valid_styles[style] + "_" + style
+      var t = this.template.replace(/{{image}}/, sdk.image(code, id))
+                           .replace(/{{id}}/, sdk.image(code, id))
+      this.$slider.append(t)
+    }.bind(this))
   },
 
   prev: function(){
diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index c1085b91..a179d227 100644
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -69,12 +69,13 @@ var ProductView = ScrollableView.extend({
   
   populate: function(data, details){
     this.show()
-// console.log(data, details)
+    console.log(data, details)
 
     var descriptions = {}
     details['Item']['Descriptions'].forEach(function(pair){
       descriptions[pair.Key] = pair.Value
     })
+    this.gallery.populate( data['Code8'], details['Item']['ImageTypes'] )
 
     var name_partz = data['ModelNames'].split(' ')
     var num = name_partz.shift()
diff --git a/StoneIsland/www/js/sdk/_sdk.js b/StoneIsland/www/js/sdk/_sdk.js
index e87bd86c..2054d0dc 100644
--- a/StoneIsland/www/js/sdk/_sdk.js
+++ b/StoneIsland/www/js/sdk/_sdk.js
@@ -24,7 +24,7 @@ var sdk = (function(){
   }
   
   sdk.image = function(code, size){
-    return "http://cdn.yoox.biz/" + code.substr(0,2) + "/" + code + "_" + size + ".jpg"
+    return "http://cdn.yoox.biz/" + code.substr(0,2) + "/" + code.substr(0,8) + "_" + size + ".jpg"
   }
   
   $.ajaxSetup({
diff --git a/StoneIsland/www/js/vendor/view/view.js b/StoneIsland/www/js/vendor/view/view.js
index 9a8ab5b9..41638ab7 100644
--- a/StoneIsland/www/js/vendor/view/view.js
+++ b/StoneIsland/www/js/vendor/view/view.js
@@ -60,10 +60,15 @@ var View = (function($, _){
         var eventName = match[1], selector = match[2];
         method = _.bind(method, this);
         eventName += '.delegateEvents' + this._id;
-        if (is_mobile && (selector === 'mouseenter' || selector === 'mouseleave')) {
-          continue
+        if (is_mobile) {
+          if (eventName === 'mouseenter' || eventName === 'mouseleave') {
+            continue
+          }
+//           if (eventName === 'click') {
+//             eventName = 'tap'
+//           }
         }
-        else if (selector === '') {
+        if (selector === '') {
           this.$el.on(eventName, method);
         } else {
           this.$el.on(eventName, selector, method);