From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 23 Feb 2021 18:01:13 +0000 (+0100)
Subject: wip #4287 @4
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=91ebd8bd826226fedc846f07325ff348f0ca0bd0;p=fluidbook-html5.git

wip #4287 @4
---

diff --git a/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js b/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js
index fcbe2eec..a507f6a0 100644
--- a/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js
+++ b/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js
@@ -68,7 +68,7 @@ FluidbookCartGrandVision.prototype = {
         });
 
         $(document).on('click', '[data-action="rename"]', function () {
-            var h3 = $('.box h3');
+            var h3 = $('.box>h3:eq(0)');
             $(h3).text(window.prompt('Please enter the box name', $(h3).text()));
             $this.save();
             $this.updateBoxesSelector();
@@ -76,12 +76,55 @@ FluidbookCartGrandVision.prototype = {
         });
 
         $(document).on('click', '[data-action="export"]', function () {
-           $this.exportBoxes();
+            $this.exportBoxes();
+            return false;
+        });
+
+        $(document).on('click', '[data-action="printbox"]', function () {
+            $this.exportBoxes(true);
+            return false;
         });
     },
 
-    exportBoxes:function(){
+    getExportFileName: function () {
+        var date = new Date();
+        return 'GrandVision boxes - ' + date.getFullYear() + '-' + date.getMonth() + '-' + date.getDay();
+    },
+
+    exportBoxes: function (print) {
+        this.fluidbook.displayLoader();
+        var $this = this;
+        if ($("#grandvision-pdf").length === 0) {
+            $('body').append('<div id="grandvision-pdf"></div>');
+        }
+
+        var c = $('#grandvision-pdf');
+        $(c).html('');
+        $.each(this.boxes, function (index, box) {
+            $(c).append($this.getBox(index));
+        });
+
 
+        var element = $(c).get(0);
+        var options = {
+            margin: 0,
+            filename: this.getExportFileName() + '.pdf',
+            image: {type: 'png'},
+            html2canvas: {dpi: 150, scale: 4, letterRendering: false},
+            jsPDF: {unit: 'mm', format: 'A4', orientation: 'portrait'}
+        };
+
+        if (print === true) {
+            html2pdf().set(options).from(element).toPdf().get('pdf').then(function (pdfObj) {
+                pdfObj.autoPrint();
+                window.open(pdfObj.output('bloburl'), '_blank');
+                $this.fluidbook.hideLoader(2);
+            });
+        } else {
+            html2pdf().set(options).from(element).save().then(function () {
+                $this.fluidbook.hideLoader(2);
+            });
+        }
     },
 
     addNewBox: function () {
@@ -230,6 +273,7 @@ FluidbookCartGrandVision.prototype = {
     initRightSortable() {
         var $this = this;
         new Sortable(document.getElementById('grandvision-selection-slots'), {
+            swap: true,
             group: {
                 name: 'shared',
             },
@@ -394,30 +438,35 @@ FluidbookCartGrandVision.prototype = {
 
         index = Math.max(0, Math.min(this.boxes.length - 1, index));
 
+
+        $(".boxholder").html(this.getBox(index));
+
+        this.initRightSortable();
+    },
+
+    getBox: function (index) {
+        var $this = this;
         var b = this.boxes[index];
 
-        res = '<div class="box">';
+        var 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 += 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="printbox">' + 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);
-
-        this.initRightSortable();
+        return res;
     },
 
     getProductSlideshow: function (ref, data) {
diff --git a/style/cart/grandvision.less b/style/cart/grandvision.less
index 045db146..5d7d8df1 100644
--- a/style/cart/grandvision.less
+++ b/style/cart/grandvision.less
@@ -274,6 +274,7 @@
 
           .item {
             position: relative;
+
             .img {
               position: absolute;
               top: 0;
@@ -309,14 +310,15 @@
         .actions {
           position: relative;
           top: -2px;
-          left:3px;
+          left: 3px;
 
           a {
             display: inline-block;
             color: @bleu;
             font-size: 14px;
             margin-right: 38px;
-            &:last-child{
+
+            &:last-child {
               margin-right: 0;
             }
 
@@ -456,4 +458,66 @@
       }
     }
   }
+}
+
+#grandvision-pdf {
+  .box {
+    padding:1cm;
+    width: 24cm;
+    page-break-after: always;
+
+    h3 {
+      font-size: 0.75cm;
+    }
+
+    .slots {
+      margin-top: 1cm;
+      @w: 9cm;
+
+      .item, .slot {
+        display: inline-block;
+        width: @w;
+        height: unit(@w*0.425, cm);
+        margin-right: 3.8cm;
+        margin-bottom: 1cm;
+
+        &:nth-child(odd) {
+          margin-right: 0;
+        }
+      }
+
+      .slot {
+        visibility: hidden;
+      }
+
+      .item {
+        [data-cart-delete] {
+          display: none;
+        }
+
+        .img {
+          width: @w;
+          height: unit(@w*0.35, cm);
+          background-position: 50% 50%;
+          background-size: cover;
+        }
+
+        .infos {
+          display: none;
+        }
+
+        .infos-box {
+          width: 100%;
+          text-align: center;
+          color: #959696;
+          font-size: 0.25cm;
+          margin-top: 0.25cm;
+        }
+      }
+    }
+
+    .actions {
+      display: none;
+    }
+  }
 }
\ No newline at end of file