scroll stuff and load images for gallery

11 files changed, 94 insertions, 22 deletions

diff --git a/StoneIsland/www/css/index.css b/StoneIsland/www/css/index.css
index 674ab65c..b0f35a96 100644
--- a/StoneIsland/www/css/index.css
+++ b/StoneIsland/www/css/index.css
@@ -45,3 +45,8 @@ body {
 @-webkit-keyframes loading {
   to {-webkit-transform: rotate(360deg)}
 }
+
+.scroll {
+  position: absolute;
+  width: 100%;
+}
diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css
index 381a9f28..4a54df2a 100644
--- a/StoneIsland/www/css/nav.css
+++ b/StoneIsland/www/css/nav.css
@@ -173,6 +173,7 @@
   float: right;
   padding: 10px;
 }
+#footer .back,
 #footer .buynow,
 #footer .addtocart,
 #footer .cancel,
@@ -227,9 +228,9 @@
 
 #story, #hub, #archive, #collection, #product, #cart {
   position: absolute;
-  top: 42px;
-  height: -webkit-calc(100% - 42px);
-  height: calc(100% - 42px);
+  top: 43px;
+  height: -webkit-calc(100% - 43px);
+  height: calc(100% - 43px);
   width: 100%;
   overflow: hidden;
 }
@@ -237,9 +238,9 @@ h1 {
   text-align: center;
   margin: 0;
   padding: 15px 10px 10px 10px;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #000;
   font-size: 18px;
-  color: #ccc;
+  color: #000;
   letter-spacing: 2px;
   font-weight: 100;
 }
diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css
index 63faed3e..0a615c34 100644
--- a/StoneIsland/www/css/products.css
+++ b/StoneIsland/www/css/products.css
@@ -2,23 +2,34 @@
 .collection #footer .filter { display: block }
 #collection {
   display: none;
+  text-align: center;
 }
 #collection .item {
   text-align: center;
+  display: inline-block;
+  max-width: 49vw;
 }
 #collection .item img {
-  width: 306px;
-  height: 390px;
+  width: 49vw;
+  height: 63vw;
 }
 
 .product #product { display: block }
-.product #footer .buynow { display: block }
+.product #footer .back { display: block }
 .product #footer .addtocart { display: block }
 #product {
   display: none;
 }
 
-.scroll {
-  position: absolute;
-  width: 100%;
-}
\ No newline at end of file
+#gallery,
+#gallery .slider,
+#gallery .slider .item {
+}
+
+#gallery .slider .item {
+  float: left;
+  width: 10vw;
+}
+#gallery .slider .item img {
+  max-width: 10vw;
+}
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 8ea9c626..4706fe18 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -68,6 +68,7 @@
 
   <div id="footer">
     <span class="filter">FILTER</span>
+    <span class="back">&lt; BACK TO SHOPPING</span>
     <span class="buynow">BUY NOW</span>
     <span class="addtocart">ADD TO CART</span>
     <span class="cancel">CANCEL</span>
@@ -148,7 +149,7 @@
         <span class="right"></span>
         <div class="slider">
           <script type="text/html" class="template">
-            <div class="item">
+            <div class="item" data-id="{{id}}">
               <img src="{{image}}">
             </div>
           </script>
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);