wait #4284 @3

diff --git a/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js b/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js
index 6bb6ca043291c3ceb5149c09e91b004e40ec1c9e..d2b05ea77f60f4174fadceaeac4d9e5df53849c9 100644 (file)
--- a/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js
+++ b/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js
@@ -8,16 +8,184 @@ function FluidbookCartGrandVision(cart) {
 
 FluidbookCartGrandVision.prototype = {
     init: function () {
+        var $this = this;
+        this.items = this.fluidbook.cache.get('cart', []);
 
+        $(document).on('click', '.grandvision-slideshow .next', function () {
+            $this.nextSlide();
+            return false;
+        });
+
+        $(document).on('click', '.grandvision-slideshow .prev', function () {
+            $this.prevSlide();
+            return false;
+        });
+
+        $(document).on('click', '.grandvision-slideshow .dots a', function () {
+            var diff = $(this).data('i') - $this.currentSlide;
+            if (diff !== 0) {
+                $this.gotoSlide($(this).data('i'), diff>=1?1:-1);
+            }
+            return false;
+        });
     },
 
-    openMenu: function (p1, p2) {
+    openMenu: function (p1, p2, cb) {
         if (p1 === 'details') {
-            return this.openDetails(p2);
+            return this.openDetails(p2, cb);
+        }
+    },
+
+    getProductData: function (ref) {
+        var res = this.fluidbook.settings.basketReferences[ref];
+        if (res === undefined || res === undefined) {
+            return false;
+        }
+        return res;
+    },
+
+    openDetails(reference, callback) {
+        var data = this.getProductData(reference);
+        if (!data) {
+            this.fluidbook.tooltip.displayTooltip('No product matches this EAN');
+            return false;
+        }
+
+        var res = '<div id="grandvision-details">';
+        res += this.fluidbook.menu.getCaption('', true);
+        res += '<div class="content">';
+        res += '<div class="grandvision-details-infos">'
+        res += '<h2>' + data['Model Code'] + '</h2>';
+        res += '<ul class="infos">';
+        res += '<li>Brand: ' + data.BRAND + '</li>';
+        res += '<li>Category: ' + data.Category + '</li>';
+        res += '<li>Color: ' + data['Color Code'] + ' ' + data['Colour Description'] + '</li>';
+        if (data.Gender !== '') {
+            res += '<li>Gender: ' + data.Gender + '</li>';
+        }
+        res += '<li>EAN: ' + reference + '</li>';
+        res += '</ul>';
+        res += '<a href="#" data-cart-ref="' + reference + '">' + getSpriteIcon("external-extra-icon-burger") + ' Add to my selection</a>';
+        res += '</div>';
+        res += this.getProductSlideshow(reference, data);
+        res += '</div>';
+        res += '</div>';
+
+        this.fluidbook.menu.viewWrap(res, 'cart-grandvision-details', 'data-max-width="810" data-min-width="810"');
+
+        if (callback !== undefined) {
+            callback();
+        }
+    },
+
+    getProductSlideshow: function (ref, data) {
+        var slides = '';
+        this.nbslides = 0;
+        this.currentSlide = 0;
+        this.transitioning = false;
+        var o=1;
+        if (data.front) {
+            slides += '<div class="slide" style="opacity: '+o+';"><img src="data/commerce/' + ref + '-front.jpg" /></div>';
+            this.nbslides++;
+            o=0;
+        }
+        if (data.angle) {
+            slides += '<div class="slide" style="opacity: '+o+';"><img src="data/commerce/' + ref + '-angle.jpg" /></div>';
+            this.nbslides++;
+            o=0;
+        }
+        if (data['360']) {
+            slides += '<div class="slide" style="opacity: '+o+';"><video src="data/commerce/' + ref + '-360.mp4" autoplay muted loop preload /></div>';
+            this.nbslides++;
+            o=0;
         }
+        if (this.nbslides === 0) {
+            return '';
+        }
+        var res = '<div class="grandvision-slideshow">';
+        res += '<div class="slides">';
+        res += slides;
+        res += '</div>';
+        if (this.nbslides >= 2) {
+            res += '<a href="#" class="prev">' + getSpriteIcon('interface-prev') + '</a>';
+            res += '<a href="#" class="next">' + getSpriteIcon('interface-next') + '</a>';
+            res += '<nav class="dots">';
+            for (var i = 0; i < this.nbslides; i++) {
+                var c='';
+                if(i===0){
+                    c=' class="active"';
+                }
+                res += '<a href="#" '+c+' data-i="' + i + '"></a>';
+            }
+            res += '</nav>';
+        }
+        res += '</div>';
+        return res;
+    },
+
+    gotoSlide: function (i, dir) {
+        if(this.transitioning){
+            return;
+        }
+        this.transitioning=true;
+        var $this = this;
+        this.nextSlideIndex = this.normalizeSlide(i);
+        var t = 0.6;
+        var w = 360;
+        TweenMax.to($('.grandvision-slideshow .slide:eq(' + this.currentSlide + ')'), t, {left: w * dir*-1, opacity: 0});
+        TweenMax.fromTo($('.grandvision-slideshow .slide:eq(' + this.nextSlideIndex + ')'), t, {left: w * dir , opacity: 0}, {
+            left: 0,
+            opacity: 1,
+            onComplete: function () {
+                $this.endTransition();
+            }
+        });
+    },
+
+    endTransition: function () {
+        this.transitioning = false;
+        this.currentSlide = this.nextSlideIndex;
+        $('.grandvision-slideshow .dots a').removeClass('active');
+        $('.grandvision-slideshow .dots a:eq('+this.currentSlide+')').addClass('active');
+    },
+
+    normalizeSlide: function (i) {
+        return (i + this.nbslides) % this.nbslides;
+    },
+    nextSlide: function () {
+        this.gotoSlide(this.currentSlide + 1, 1);
+    },
+
+    prevSlide: function () {
+        this.gotoSlide(this.currentSlide - 1, -1);
     },
 
-    openDetails(reference) {
+    addToCart: function (ref, quantity) {
+        if (this.items.indexOf(ref) === -1) {
+            this.items.push(ref);
+            this.save();
+        }
+        return true;
+    },
+
+    removeFromCart: function (key) {
+        this.items.splice(key, 1);
+        this.save();
+    },
+
+    save: function () {
+        this.fluidbook.cache.set('cart', this.getItems());
+        this.fluidbook.cart.updateLinks();
+    },
 
+    getItems: function () {
+        var res = [];
+        var $this = this;
+        $(this.items).each(function (i, ref) {
+            if ($this.data[ref] !== undefined && $this.data[ref] !== null) {
+                res.push(ref);
+            }
+        });
+        return res;
     },
 };
\ No newline at end of file

diff --git a/js/libs/fluidbook/fluidbook.cart.js b/js/libs/fluidbook/fluidbook.cart.js
index e7ba91327e0bb3b709b88733df8e1b494f441c07..1435c1ffb32135d68e513d0eb0b542043a0004ee 100644 (file)
--- a/js/libs/fluidbook/fluidbook.cart.js
+++ b/js/libs/fluidbook/fluidbook.cart.js
@@ -29,6 +29,7 @@ FluidbookCart.prototype = {
             }
 
             var ref = $(this).data('cart-ref');
+            console.log(ref);
             $this.fluidbook.stats.track(15, $this.fluidbook.currentPage, ref);
 
             var tooltipStyle = '';
@@ -42,6 +43,9 @@ FluidbookCart.prototype = {
                 tooltip = $this.fluidbook.l10n.__("the item has been added to your cart");
             }
             $this.fluidbook.tooltip.displayTooltip(tooltip, tooltipStyle);
+            setTimeout(function(){
+                $this.fluidbook.tooltip.hideTooltip();
+            },5000)
 
             return false;
         });

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 776c7b8a38feed3b7cc2ef27329e4515de075125..7fbd6782e36c68565c69bc69e42019ec4fc4d3ad 100644 (file)
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -660,6 +660,7 @@ FluidbookMenu.prototype = {
         if (m.data('max-width')) {
             maxWidth = m.data('max-width');
         }
+        var minWidth = 0;
 
         switch (m.data('menu')) {
             case 'chapters':
@@ -958,10 +959,14 @@ FluidbookMenu.prototype = {
                 }
                 break;
             default:
-                if (m.data('maxwidth') !== null) {
-                    maxWidth = parseInt(m.data('maxwidth'));
+                if (m.data('max-width') !== null) {
+                    maxWidth = parseInt(m.data('max-width'));
                 }
-                w = Math.min(w, maxWidth);
+                if (m.data('min-width') !== null) {
+                    minWidth = parseInt(m.data('min-width'));
+                }
+                w = Math.min(Math.max(minWidth, w), maxWidth);
+
                 break;
         }
 

diff --git a/style/cart/grandvision.less b/style/cart/grandvision.less
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..4e8f8169c42202648530fbb7e87d9854478c7984 100644 (file)
--- a/style/cart/grandvision.less
+++ b/style/cart/grandvision.less
@@ -0,0 +1,123 @@
+#grandvision-details {
+  @bleu: #2459a9;
+  background-color: #fff;
+  max-width: 810px;
+  width: 810px;
+  height: 360px;
+
+  .caption {
+    height: 0;
+    padding: 0;
+  }
+
+  .content {
+    padding: 60px;
+    text-align: left;
+    color: #000;
+
+    .grandvision-details-infos {
+      width: 250px;
+      display: inline-block;
+
+      h2 {
+        font-size: 16px;
+        margin-bottom: 40px;
+      }
+
+      ul {
+        list-style-type: none;
+        font-size: 14px;
+      }
+
+      a {
+        display: inline-block;
+        color: #fff;
+        background-color: @bleu;
+        padding: 3px 14px 7px 10px;
+        text-transform: uppercase;
+        font-size: 14px;
+        white-space: nowrap;
+        margin-top: 40px;
+
+        svg {
+          position: relative;
+          top: 4px;
+          height: 20px;
+          margin-right: 6px;
+        }
+      }
+    }
+
+    .grandvision-slideshow {
+      display: inline-block;
+      width: 360px;
+      position: relative;
+      vertical-align: top;
+      top: 16px;
+      left: 57px;
+
+      .slides {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 360px;
+        max-width: 360px;
+        height:202px;
+        max-height: 202px;
+        overflow: hidden;
+
+        .slide {
+          position: absolute;
+          left: 0px;
+          top: 0px;
+
+          img, video {
+
+            display: block;
+            width: 360px;
+            height: auto;
+          }
+        }
+      }
+
+      .dots {
+        position: absolute;
+        top:210px;
+        left:40%;
+
+        a {
+          display: block;
+          float: left;
+          width: 10px;
+          height: 10px;
+          background-color: #ccc;
+          margin: 0 10px;
+          border-radius: 50%;
+          border:2px solid #fff;
+
+          &:hover, &.active {
+            border-color: @bleu;
+            background-color: @bleu;
+          }
+        }
+      }
+
+      .prev, .next {
+        display: block;
+        width: 16px;
+        height: 32px;
+        color: @bleu;
+        position: absolute;
+        top: 86px;
+      }
+
+      .prev {
+        left: -36px;
+      }
+
+      .next {
+        left: 380px;
+      }
+    }
+  }
+}
\ No newline at end of file