From 44ba111c40ce50f8634a7e9bb4316315274218cb Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 1 Dec 2015 06:18:02 -0500
Subject: fix gallery arrows

---
 StoneIsland/www/css/blogs.css                  |  8 ++---
 StoneIsland/www/css/products.css               | 43 ++------------------------
 StoneIsland/www/index.html                     |  2 +-
 StoneIsland/www/js/lib/blogs/HubView.js        | 20 +++++++-----
 StoneIsland/www/js/lib/products/GalleryView.js |  8 ++---
 StoneIsland/www/js/lib/products/ProductView.js |  4 +--
 6 files changed, 24 insertions(+), 61 deletions(-)

diff --git a/StoneIsland/www/css/blogs.css b/StoneIsland/www/css/blogs.css
index 0b9f8eed..e0fea9f3 100644
--- a/StoneIsland/www/css/blogs.css
+++ b/StoneIsland/www/css/blogs.css
@@ -105,7 +105,7 @@
 
 /* NOTE: optional arrows */
 
-.gallery-multiple-images::before {
+.gallery-left {
   border:1px solid black;
   background:rgba(255,255,255,1);
   background-image:url(../img/left-arrow.png);
@@ -114,7 +114,7 @@
   background-position:center;
   width:15px;
   height:30px;
-  top:50%;
+  top:26vh;
   content:'';
   transform:translateY(-50%);
   transform-origin:top right;
@@ -126,7 +126,7 @@
   display:block;
 }
 
-.gallery-multiple-images::after {
+.gallery-right {
   border:1px solid black;
   background:rgba(255,255,255,1);
   background-image:url(../img/right-arrow.png);
@@ -135,7 +135,7 @@
   background-position:center;
   width:15px;
   height:30px;
-  top:50%;
+  top:26vh;
   content:'';
   transform:translateY(-50%);
   transform-origin:top right;
diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css
index 78d02811..82c7c36c 100644
--- a/StoneIsland/www/css/products.css
+++ b/StoneIsland/www/css/products.css
@@ -181,46 +181,9 @@
 
 }
 
-#product #gallery::before {
-  border:1px solid black;
-  background:rgba(255,255,255,1);
-  background-image:url(../img/left-arrow.png);
-  background-size:5px 10px;
-  background-repeat:no-repeat;
-  background-position:center;
-  width:15px;
-  height:30px;
-  top:50%;
-  content:'';
-  transform:translateY(-50%);
-  transform-origin:top right;
-  left:20px;
-  font-size:18px;
-  padding:3px 3px 3px 1px;
-  z-index:999;
-  position:absolute;
-  display:block;
-}
-
-#product #gallery::after {
-  border:1px solid black;
-  background:rgba(255,255,255,1);
-  background-image:url(../img/right-arrow.png);
-  background-size:5px 10px;
-  background-repeat:no-repeat;
-  background-position:center;
-  width:15px;
-  height:30px;
-  top:50%;
-  content:'';
-  transform:translateY(-50%);
-  transform-origin:top right;
-  right:20px;
-  font-size:18px;
-  padding:3px 1px 3px 3px;
-  z-index:999;
-  position:absolute;
-  display:block;
+#product .gallery-prev,
+#product .gallery-next {
+  top: 26vh;
 }
 
 #product .content .body {
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index ad005ced..8fb18b76 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -139,7 +139,7 @@
       <h1>HUB</h1>
       <div class="content">
         <script type="text/html" class="template">
-          <div class="hub_item">
+          <div class="hub_item" data-id="{{id}}">
             <div class="gallery gallery-{{id}}"></div>
             <div class="gallery-left"></div>
             <div class="gallery-right"></div>
diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js
index 001b8161..87f8127e 100644
--- a/StoneIsland/www/js/lib/blogs/HubView.js
+++ b/StoneIsland/www/js/lib/blogs/HubView.js
@@ -22,14 +22,16 @@ var HubView = ScrollableView.extend({
     document.body.className = "hub"
   },
 
+  galleries: {},
   populate: function(data){
     this.data = data
     this.$loader.hide()
     this.$content.empty()
+    this.galleries = {}
     // id date subtitle body link store image[uri caption]
     this.data.forEach(function(row){
       // console.log(row)
-      var t = this.template.replace(/{{id}}/, row.id)
+      var t = this.template.replace(/{{id}}/g, row.id)
                            .replace(/{{date}}/, moment(row.date).format("MM.DD.YYYY"))
                            .replace(/{{title}}/, row.title)
                            .replace(/{{subtitle}}/, row.subtitle)
@@ -50,7 +52,7 @@ var HubView = ScrollableView.extend({
           el.className = "item"
           $gallery.append(el)
         })
-        new Flickity( ".gallery-" + row.id, {
+        this.galleries[row.id] = new Flickity( ".gallery-" + row.id, {
           selector: '.item',
           cellAlign: 'center',
           autoPlay: false,
@@ -76,8 +78,8 @@ var HubView = ScrollableView.extend({
           play.className = "play"
           $(".gallery-" + row.id).append(play)
         }
-        $t.find("gallery-left").remove()
-        $t.find("gallery-right").remove()
+        $t.find(".gallery-left").remove()
+        $t.find(".gallery-right").remove()
       }
       
     }.bind(this))
@@ -89,11 +91,13 @@ var HubView = ScrollableView.extend({
     app.router.go("store")
   },
   
-  gallery_prev: function(e){
-    $(e.currentTarget).closest("hub_item").flickity('prev')
+  gallery_left: function(e){
+    var id = $(e.currentTarget).closest(".hub_item").data('id')
+    this.galleries[id].previous()
   },
-  gallery_next: function(e){
-    $(e.currentTarget).closest("hub_item").flickity('next')
+  gallery_right: function(e){
+    var id = $(e.currentTarget).closest(".hub_item").data('id')
+    this.galleries[id].next()
   },
 
   share: function(){
diff --git a/StoneIsland/www/js/lib/products/GalleryView.js b/StoneIsland/www/js/lib/products/GalleryView.js
index b36c5df2..02193f14 100644
--- a/StoneIsland/www/js/lib/products/GalleryView.js
+++ b/StoneIsland/www/js/lib/products/GalleryView.js
@@ -4,8 +4,8 @@ var GalleryView = View.extend({
   template: $("#gallery .template").html(),
   
   events: {
-    "click .left": "prev",
-    "click .right": "next",
+//     "click .left": "prev",
+//     "click .right": "next",
 //     "touchstart .gallery": "touchstart",
 //     "touchmove .gallery": "touchmove",
 //     "touchend .gallery": "touchend",
@@ -51,10 +51,6 @@ var GalleryView = View.extend({
     })
   },
 
-  prev: function(){
-  },
-  next: function(){
-  },
   touchstart: function(e){
   },
   touchmove: function(e){
diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index 5b7ee6d2..4789850a 100644
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -47,10 +47,10 @@ var ProductView = ScrollableView.extend({
   cache: {},
   
   gallery_prev: function(){
-    this.gallery.gallery.flickity('prev')
+    app.product.gallery.gallery.previous()
   },
   gallery_right: function(){
-    this.gallery.gallery.flickity('next')
+    app.product.gallery.gallery.next()
   },
   
   find: function(code, cb){
-- 
cgit v1.2.3-70-g09d2