From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 23 Feb 2021 10:59:55 +0000 (+0100)
Subject: wip #4286 @3
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=97892e668753f858bf8d4ea0ed7f021920e45c67;p=fluidbook-html5.git

wip #4286 @3
---

diff --git a/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js b/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js
index 2f9c2f9b..a74880ec 100644
--- a/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js
+++ b/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js
@@ -15,6 +15,13 @@ FluidbookCartGrandVision.prototype = {
         if (this.boxes.length === 0) {
             this.boxes = [{name: 'Box 1', refs: []}];
         }
+        this.boxIndex = Math.max(0, Math.min(this.boxes.length - 1, parseInt(this.fluidbook.cache.get('boxindex', '0'))));
+
+        $(document).on('click', '.slots [data-cart-delete]', function () {
+            $(this).closest('.item').replaceWith('<div class="slot"></div>');
+            $this.save();
+            return false;
+        });
 
         $(document).on('click', '.grandvision-slideshow .next', function () {
             $this.nextSlide();
@@ -33,6 +40,11 @@ FluidbookCartGrandVision.prototype = {
             }
             return false;
         });
+
+        $(document).on('change', 'select[name="box"]', function () {
+            $this.boxIndex = parseInt($(this).find('option[value="' + $(this).val() + '"').data('i'));
+            return true;
+        });
     },
 
     removeFromCart: function (ref) {
@@ -127,6 +139,7 @@ FluidbookCartGrandVision.prototype = {
 
         $("#grandvision-selection .items").perfectScrollbar();
 
+        this.setBox();
         this.initSortable();
 
         if (cb !== undefined) {
@@ -135,6 +148,7 @@ FluidbookCartGrandVision.prototype = {
     },
 
     initSortable: function () {
+        var $this = this;
         new Sortable(document.getElementById('grandvision-selection-items'), {
             group: {
                 name: 'shared',
@@ -142,15 +156,27 @@ FluidbookCartGrandVision.prototype = {
                 put: false,
             },
             sort: false,
-            animation: 150
+            animation: 150,
+            onMove: function (e) {
+                console.log(e);
+            }
         });
 
         new Sortable(document.getElementById('grandvision-selection-slots'), {
-            swap: true,
             group: {
                 name: 'shared',
             },
-            animation: 150
+            animation: 150,
+            onAdd: function (e) {
+                $this.save();
+            },
+            onRemove: function (e) {
+                $this.save();
+            },
+            onUpdate: function (e) {
+                $this.save();
+            },
+
         });
     },
 
@@ -191,37 +217,12 @@ FluidbookCartGrandVision.prototype = {
         res += '<h2>My Boxes</h2>';
         res += '<select name="box">';
         $.each(this.boxes, function (k, b) {
-            res += '<option>' + b.name + '</option>';
+            res += '<option data-index="' + k + '">' + b.name + '</option>';
         });
         res += '</select>';
         res += '<a class="addbox" href="#">' + getSpriteIcon('grandvision-add') + ' Create a new box</a>';
 
-        $.each(this.boxes, function (k, b) {
-            res += '<div class="box">';
-            res += '<h3>' + b.name + '</h3>';
-            res += '<div class="slots" id="grandvision-selection-slots">';
-            for (var i = 0; i < 10; i++) {
-                if (b.refs[i] === undefined) {
-                    res += '<div class="slot" data-tooltip="Drag an item from your selection here"></div>';
-                } else {
-                    var data = this.getProductData(b.refs[i]);
-                    res += '<div class="slot">';
-                    if (data.front) {
-                        res += '<img src="data/commerce/' + b.refs[i] + '-front.jpg">';
-                    }
-                    res += '<p>' + b.refs[i] + ' | ' + data['Colour Description'] + '</p>';
-                    res += '</div>';
-                }
-            }
-            res += '</div>';
-            res += '<div class="actions">';
-            res += '<a href="#" data-action="rename">' + getSpriteIcon('grandvision-rename') + ' Rename</a>';
-            res += '<a href="#" data-action="print">' + getSpriteIcon('nav-print') + ' Print</a>';
-            res += '<a href="#" data-action="export">' + getSpriteIcon('grandvision-export') + ' Export</a>';
-            res += '<a href="#" data-action="delete">' + getSpriteIcon('grandvision-delete') + ' Delete</a>';
-            res += '</div>';
-            res += '</div>';
-        });
+        res += '<div class="boxholder"></div>';
 
         res += '</div>';
         return res;
@@ -231,28 +232,37 @@ FluidbookCartGrandVision.prototype = {
         var selection = '';
         var $this = this;
         $.each(this.items, function (k, item) {
-            var data = $this.getProductData(item);
-            var infos = ['Brand: ' + data.BRAND, 'Color: ' + data['Color Code']];
-            if (data.Gender !== '') {
-                infos.push('Gender: ' + data.Gender);
-            }
-            infos.push('EAN: ' + item);
+            selection += $this.getItemHTML(item, true);
+        });
+        return selection;
+    },
+
+    getItemHTML: function (item, addToFilters) {
+        var $this = this;
+        var data = $this.getProductData(item);
+        var infos = ['Brand: ' + data.BRAND, 'Color: ' + data['Color Code']];
+        if (data.Gender !== '') {
+            infos.push('Gender: ' + data.Gender);
+        }
+        infos.push('EAN: ' + item);
 
+        if (addToFilters) {
             $.each($this.filters, function (fname, filter) {
                 if ($this.filters[fname].values.indexOf(data[filter.col]) === -1) {
                     $this.filters[fname].values.push(data[filter.col]);
                 }
             });
+        }
+
+        selection = '<div class="item" data-ref="' + item + '" data-brand="' + data.BRAND + '" data-category="' + data.Category + '" data-gender="' + data.Gender + '" data-material="' + data.Material + '">';
+        selection += '<div class="img" style="background-image: url(\'data/commerce/' + item + '-front.jpg\');">';
+        selection += '</div>';
+        selection += '<div class="infos"><h3>' + data['Model Code'] + '</h3>';
+        selection += '<p>' + infos.join(' | ') + '</p></div>';
+        selection += '<div class="infos-box">' + item + ' | ' + data['Colour Description'] + '</div>';
+        selection += '<a href="#" data-cart-delete="' + item + '">' + getSpriteIcon('interface-close') + '</a>';
+        selection += '</div>';
 
-            selection += '<div class="item" data-ref="' + item + '" data-brand="' + data.BRAND + '" data-category="' + data.Category + '" data-gender="' + data.Gender + '" data-material="' + data.Material + '">';
-            selection += '<div class="img" style="background-image: url(\'data/commerce/'+item+'-front.jpg\');">';
-            selection += '</div>';
-            selection += '<div class="infos"><h3>' + data['Model Code'] + '</h3>';
-            selection += '<p>' + infos.join(' | ') + '</p></div>';
-            selection += '<div class="infos-box">' + item + ' | ' + data['Colour Description'] + '</div>';
-            selection += '<a href="#" data-cart-delete="' + item + '">' + getSpriteIcon('interface-close') + '</a>';
-            selection += '</div>';
-        });
         return selection;
     },
 
@@ -298,6 +308,37 @@ FluidbookCartGrandVision.prototype = {
         }
     },
 
+    setBox: function (index) {
+        var $this = this;
+
+        if (index === undefined) {
+            index = this.boxIndex;
+        }
+
+        var b = this.boxes[index];
+
+        res = '<div class="box">';
+        res += '<h3>' + b.name + '</h3>';
+        res += '<div class="slots override-delete" id="grandvision-selection-slots">';
+        for (var i = 0; i < 10; i++) {
+            if (b.refs[i] === undefined || b.refs[i] === null) {
+                res += '<div class="slot" data-tooltip="Drag an item from your selection here"></div>';
+            } else {
+                res += $this.getItemHTML(b.refs[i], false);
+            }
+        }
+        res += '</div>';
+        res += '<div class="actions">';
+        res += '<a href="#" data-action="rename">' + getSpriteIcon('grandvision-rename') + ' Rename</a>';
+        res += '<a href="#" data-action="print">' + getSpriteIcon('nav-print') + ' Print</a>';
+        res += '<a href="#" data-action="export">' + getSpriteIcon('grandvision-export') + ' Export</a>';
+        res += '<a href="#" data-action="delete">' + getSpriteIcon('grandvision-delete') + ' Delete</a>';
+        res += '</div>';
+        res += '</div>';
+
+        $(".boxholder").html(res);
+    },
+
     getProductSlideshow: function (ref, data) {
         var slides = '';
         this.nbslides = 0;
@@ -395,8 +436,24 @@ FluidbookCartGrandVision.prototype = {
     },
 
     save: function () {
+        var $this = this;
+
+        this.fluidbook.cache.set('boxindex', this.boxIndex);
         this.fluidbook.cache.set('cart', this.getItems());
         this.fluidbook.cart.updateLinks();
+
+        $("#grandvision-boxes .box").each(function () {
+            var refs = [];
+            $(this).find('.slots > div').each(function () {
+                if ($(this).hasClass('slot')) {
+                    refs.push(null);
+                } else {
+                    refs.push($(this).data('ref'));
+                }
+            });
+            $this.boxes[this.boxIndex] = {name: $(this).find('h3').eq(0).text(), refs: refs.slice(0, 10)};
+        });
+
         this.fluidbook.cache.set('boxes', this.boxes);
     },
 
diff --git a/js/libs/fluidbook/fluidbook.cart.js b/js/libs/fluidbook/fluidbook.cart.js
index 16575d06..e025b993 100644
--- a/js/libs/fluidbook/fluidbook.cart.js
+++ b/js/libs/fluidbook/fluidbook.cart.js
@@ -16,7 +16,7 @@ FluidbookCart.prototype = {
         this.enabled = true;
         this.instance = this.createInstance();
 
-        $(document).on('click', '[data-cart-delete]', function () {
+        $(document).on('click', ':not(.override-delete) [data-cart-delete]', function () {
             $this.instance.removeFromCart($(this).data('cart-delete'));
             $this.instance.updateCart(false);
             return false;
diff --git a/style/cart/grandvision.less b/style/cart/grandvision.less
index 9e749b1d..045db146 100644
--- a/style/cart/grandvision.less
+++ b/style/cart/grandvision.less
@@ -230,22 +230,22 @@
       }
 
       a.addbox {
-        width: 190px;
+        width: 180px;
         height: 30px;
         display: inline-block;
         background-color: @bleu;
         color: #fff;
         border-radius: 2px;
-        padding: 1px 15px 5px 5px;
+        padding: 0px 15px 5px 5px;
         line-height: 21px;
         font-size: 16px;
 
         svg {
           display: inline-block;
           height: 21px;
-          margin-right: 10px;
+          margin-right: 5px;
           position: relative;
-          top: 3px;
+          top: 4px;
         }
       }
 
@@ -262,6 +262,9 @@
         }
 
         .slots {
+          max-height: 500px;
+          overflow: hidden;
+
           .slot, .item {
             display: inline-block;
             width: 200px;
@@ -305,13 +308,17 @@
 
         .actions {
           position: relative;
-          top: -6px;
+          top: -2px;
+          left:3px;
 
           a {
             display: inline-block;
             color: @bleu;
             font-size: 14px;
-            margin-right: 25px;
+            margin-right: 38px;
+            &:last-child{
+              margin-right: 0;
+            }
 
             svg {
               display: inline-block;