From 51b17723fbe48935503b017220f605f13c058db3 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 13 Nov 2018 17:54:11 +0100
Subject: [PATCH] WIP #1806 @7.5

---
 js/libs/fluidbook/fluidbook.bookmarks.js |  35 +++++++-
 js/libs/fluidbook/fluidbook.js           |   1 +
 js/libs/fluidbook/fluidbook.menu.js      |  85 +-----------------
 js/libs/fluidbook/fluidbook.print.js     | 110 +++++++++++++++++++++++
 style/print.less                         |  30 +++++++
 5 files changed, 179 insertions(+), 82 deletions(-)
 create mode 100644 js/libs/fluidbook/fluidbook.print.js

diff --git a/js/libs/fluidbook/fluidbook.bookmarks.js b/js/libs/fluidbook/fluidbook.bookmarks.js
index d8e7d1b1..8a906126 100644
--- a/js/libs/fluidbook/fluidbook.bookmarks.js
+++ b/js/libs/fluidbook/fluidbook.bookmarks.js
@@ -491,6 +491,39 @@ FluidbookBookmarks.prototype = {
 
     // Used by the print function. Will return maximum of 3 pages or a blank page if no bookmarks.
     getPrintPreview: function() {
-        return '[bookmark images go here]';
+
+        if (!this.hasBookmarkedPages()) {
+            return '<div class="thumb left blank"></div>';
+        }
+
+
+        var maxImages = 3, // How many images maximum to show in the bookmarks print preview thumbnail
+            count = 0,
+            html = '',
+            groups = this.getBookmarkedGroups();
+
+        html += '<div class="bookmark-thumbnails">';
+
+        for (var g = 0; g < groups.length; g++) {
+            count++;
+            var group = groups[g];
+
+            html += '<div class="thumb">' + this.fluidbook.loader.getThumbImage(group.page);
+
+            if (this.fluidbook.bookmarks.enabled) {
+              html += this.fluidbook.bookmarks.getBookmarkForPage(group.page, true, true);
+            }
+
+            html += '</div>';
+
+            // Stop once we have enough images for the preview
+            if (count >= maxImages) {
+                break;
+            }
+        }
+
+        html += '</div>';
+
+        return html;
     }
 };
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 94bcb5ac..2879cdef 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -55,6 +55,7 @@ Fluidbook.prototype = {
         this.audiodescription = new FluidbookAudioDescription(this);
         this.sound = new FluidbookSound(this);
         this.slideshow = new FluidbookSlideshow(this);
+        this.printing = new FluidbookPrint(this);
 
 
         if (this.datas.basket) {
diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 31ab0666..16764737 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -462,89 +462,12 @@ FluidbookMenu.prototype = {
     },
 
     openPrint: function (callback) {
-        // Todo: handle RTL differences for page numbers? See fluidbook.index.js for example
-        var leftPageNumber = parseInt(this.fluidbook.getPageNumberOfSide('left')),
-            rightPageNumber = parseInt(this.fluidbook.getPageNumberOfSide('right')),
-            isFirstPage = (this.fluidbook.currentPage == 0),
-            isLastPage = (this.fluidbook.currentPage == this.fluidbook.datas.pages),
-            printDialogue = '<div class="caption">' + this.closeButton() + '<h2>' + __('Print') + '</h2></div>';
-        printDialogue += '<div class="content">';
-        printDialogue += '<div class="print-dialogue">';
-
-        // ToDo: implement http://adrianroselli.com/2017/05/under-engineered-custom-radio-buttons-and-checkboxen.html - might need 2 labels for each input so thumbnails are clickable too.
-
-        // Left Page (empty when on first page)
-        if (!isFirstPage) {
-            printDialogue += '<label for="leftPage">';
-            printDialogue += '<div class="doubleThumb">';
-            printDialogue += '<div class="thumb left">';
-            printDialogue += this.fluidbook.loader.getThumbImage(leftPageNumber, null, true);
-            printDialogue += '</div>'; // .thumb
-            printDialogue += '<div class="thumb right blank"></div>';
-            printDialogue += '</div>'; // .doubleThumb
-            printDialogue += '<input type="radio" name="printChoice" value="'+ leftPageNumber +'" id="leftPage">';
-            printDialogue += '<span class="print-label-text">' + __('Left page') + '</span>';
-            printDialogue += '</label>';
-        }
-
-        // Right Page (empty when when on last page)
-        if (!isLastPage) {
-            printDialogue += '<label for="rightPage">';
-            printDialogue += '<div class="doubleThumb">';
-            printDialogue += '<div class="thumb left blank"></div>';
-            printDialogue += '<div class="thumb right">';
-            printDialogue += this.fluidbook.loader.getThumbImage(rightPageNumber, null, true);
-            printDialogue += '</div>'; // .thumb
-            printDialogue += '</div>'; // .doubleThumb
-            printDialogue += '<input type="radio" name="printChoice" value="'+ leftPageNumber +'" id="rightPage">';
-            printDialogue += '<span class="print-label-text">' + __('Right page') + '</span>';
-            printDialogue += '</label>';
-        }
-
-        // Double Page
-        if (!isFirstPage && !isLastPage) {
-            printDialogue += '<label for="doublePage">';
-            printDialogue += '<div class="doubleThumb">';
-            printDialogue += '<div class="thumb left">';
-            printDialogue += this.fluidbook.loader.getThumbImage(leftPageNumber, null, true);
-            printDialogue += '</div>';
-            printDialogue += '<div class="thumb right">';
-            printDialogue += this.fluidbook.loader.getThumbImage(rightPageNumber, null, true);
-            printDialogue += '</div>'; // .thumb
-            printDialogue += '</div>'; // .doubleThumb
-            printDialogue += '<input type="radio" name="printChoice" value="'+ leftPageNumber +','+ rightPageNumber +'" id="doublePage">'
-            printDialogue += '<span class="print-label-text">' + __('Double page') + '</span>';
-            printDialogue += '</label>';
-        }
-
-        // Full Brochure
-        printDialogue += '<label for="allPages">';
-        printDialogue += '<div class="doubleThumb">';
-        printDialogue += '<div class="thumb left">';
-        printDialogue += this.fluidbook.loader.getThumbImage(1, null, true);
-        printDialogue += '</div>'; // .thumb
-        printDialogue += '</div>'; // .doubleThumb
-        printDialogue += '<input type="radio" name="printChoice" value="all" id="allPages">'
-        printDialogue += '<span class="print-label-text">' + __('Full brochure') + '</span>';
-        printDialogue += '</label>';
-
-        // Bookmarks
-        var hasBookmarks = this.fluidbook.bookmarks.hasBookmarkedPages(),
-            bookmarksDisabled = hasBookmarks ? '' : 'disabled';
-
-        printDialogue += '<label for="bookmarkedPages">';
-        printDialogue += '<div class="doubleThumb bookmarks '+ bookmarksDisabled +'">';
-        printDialogue += this.fluidbook.bookmarks.getPrintPreview();
-        printDialogue += '</div>'; // .doubleThumb
-        printDialogue += '<input type="radio" name="printChoice" value="bookmarks" id="bookmarkedPages" '+ bookmarksDisabled +'>'
-        printDialogue += '<span class="print-label-text">' + __('My bookmarks') + '</span>';
-        printDialogue += '</label>';
-
-
-        printDialogue += '</div>'; // .print-dialogue
-        printDialogue += '</div>'; // .content
+        var printDialogue = '<div class="caption">' + this.closeButton() + '<h2>' + __('Print') + '</h2></div>';
+
+        printDialogue += this.fluidbook.printing.getView();
 
         $("#view").append('<div class="mview" data-menu="print">' + printDialogue + '</div>');
+
         if (callback != undefined) {
             callback();
         }
diff --git a/js/libs/fluidbook/fluidbook.print.js b/js/libs/fluidbook/fluidbook.print.js
new file mode 100644
index 00000000..e879fa1d
--- /dev/null
+++ b/js/libs/fluidbook/fluidbook.print.js
@@ -0,0 +1,110 @@
+function FluidbookPrint(fluidbook) {
+    this.fluidbook = fluidbook;
+    this.init();
+}
+
+FluidbookPrint.prototype = {
+    init: function () {
+
+        // Handle click on Print button inside dialogue
+        $(document).on('click', '#confirmPrint', function(event) {
+            event.preventDefault();
+
+            // ToDo: handle print option selection - either send for full document or generate dynamic workshop URL. Need to also consider what happens if Fluidbook is self-hosted or offline (maybe here is not the best place to handle that)
+
+        });
+    },
+
+    getView: function () {
+        // Todo: handle RTL differences for page numbers? See fluidbook.index.js for example
+        var leftPageNumber = parseInt(this.fluidbook.getPageNumberOfSide('left')),
+            rightPageNumber = parseInt(this.fluidbook.getPageNumberOfSide('right')),
+            isFirstPage = (this.fluidbook.currentPage == 0),
+            isLastPage = (this.fluidbook.currentPage == this.fluidbook.datas.pages),
+            printDialogue = '';
+
+        printDialogue += '<div class="content">';
+        printDialogue += '<div class="print-dialogue">';
+
+        // ToDo: implement http://adrianroselli.com/2017/05/under-engineered-custom-radio-buttons-and-checkboxen.html - might need 2 labels for each input so thumbnails are clickable too.
+
+        // Left Page (empty when on first page)
+        if (!isFirstPage) {
+            printDialogue += '<label for="leftPage">';
+            printDialogue += '<div class="doubleThumb">';
+            printDialogue += '<div class="thumb left">';
+            printDialogue += this.fluidbook.loader.getThumbImage(leftPageNumber, null, true);
+            printDialogue += '</div>'; // .thumb
+            printDialogue += '<div class="thumb right blank"></div>';
+            printDialogue += '</div>'; // .doubleThumb
+            printDialogue += '<input type="radio" name="printChoice" value="'+ leftPageNumber +'" id="leftPage">';
+            printDialogue += '<span class="print-label-text">' + (isLastPage ? __('Current page') : __('Left page')) + '</span>';
+            printDialogue += '</label>';
+        }
+
+        // Right Page (empty when when on last page)
+        if (!isLastPage) {
+            printDialogue += '<label for="rightPage">';
+            printDialogue += '<div class="doubleThumb">';
+            printDialogue += '<div class="thumb left blank"></div>';
+            printDialogue += '<div class="thumb right">';
+            printDialogue += this.fluidbook.loader.getThumbImage(rightPageNumber, null, true);
+            printDialogue += '</div>'; // .thumb
+            printDialogue += '</div>'; // .doubleThumb
+            printDialogue += '<input type="radio" name="printChoice" value="'+ leftPageNumber +'" id="rightPage">';
+            printDialogue += '<span class="print-label-text">' + (isFirstPage ? __('Current page') : __('Right page')) + '</span>';
+            printDialogue += '</label>';
+        }
+
+        // Double Page
+        if (!isFirstPage && !isLastPage) {
+            printDialogue += '<label for="doublePage">';
+            printDialogue += '<div class="doubleThumb">';
+            printDialogue += '<div class="thumb left">';
+            printDialogue += this.fluidbook.loader.getThumbImage(leftPageNumber, null, true);
+            printDialogue += '</div>';
+            printDialogue += '<div class="thumb right">';
+            printDialogue += this.fluidbook.loader.getThumbImage(rightPageNumber, null, true);
+            printDialogue += '</div>'; // .thumb
+            printDialogue += '</div>'; // .doubleThumb
+            printDialogue += '<input type="radio" name="printChoice" value="'+ leftPageNumber +','+ rightPageNumber +'" id="doublePage">'
+            printDialogue += '<span class="print-label-text">' + __('Double page') + '</span>';
+            printDialogue += '</label>';
+        }
+
+        // Full Brochure
+        printDialogue += '<label for="allPages">';
+        printDialogue += '<div class="doubleThumb">';
+        printDialogue += '<div class="thumb left">';
+        printDialogue += this.fluidbook.loader.getThumbImage(1, null, true);
+        printDialogue += '</div>'; // .thumb
+        printDialogue += '</div>'; // .doubleThumb
+        printDialogue += '<input type="radio" name="printChoice" value="all" id="allPages">'
+        printDialogue += '<span class="print-label-text">' + __('Full brochure') + '</span>';
+        printDialogue += '</label>';
+
+        // Bookmarks
+        var hasBookmarks = this.fluidbook.bookmarks.hasBookmarkedPages(),
+        bookmarksDisabled = hasBookmarks ? '' : 'disabled';
+
+        printDialogue += '<label for="bookmarkedPages">';
+        printDialogue += '<div class="doubleThumb bookmarks '+ bookmarksDisabled +'">';
+        printDialogue += this.fluidbook.bookmarks.getPrintPreview();
+        printDialogue += '</div>'; // .doubleThumb
+        printDialogue += '<input type="radio" name="printChoice" value="bookmarks" id="bookmarkedPages" '+ bookmarksDisabled +'>'
+        printDialogue += '<span class="print-label-text">' + __('My bookmarks') + '</span>';
+        printDialogue += '</label>';
+
+        printDialogue += '</div>'; // .print-dialogue
+
+        // Action buttons
+        printDialogue += '<div class="fonctions">';
+        printDialogue += '<a id="confirmPrint" href="#">'+ __('Print') +'</a>';
+        printDialogue += '</div>'; // .fonctions
+
+        printDialogue += '</div>'; // .content
+
+        return printDialogue;
+    }
+};
+
diff --git a/style/print.less b/style/print.less
index 5773d10b..9292ec67 100644
--- a/style/print.less
+++ b/style/print.less
@@ -4,6 +4,7 @@
   flex-wrap: wrap;
   text-align: left;
   padding: 1em 2em;
+  margin-bottom: -2em; // Offset the margin-bottom on each <label> so there's no extra margin on last row
 
   > label {
     flex: 0 1 33%;
@@ -19,4 +20,33 @@
     margin-bottom: 1em;
   }
 
+  .thumb.right {
+    left: 100px; // Override default so there's no gap between pages
+  }
+
+  .bookmark-thumbnails {
+    .thumb {
+      &:before {
+        width: 113px; // Controls drop shadow on right side of thumbnail
+      }
+
+      &:nth-child(1) {
+        z-index: 3;
+      }
+      &:nth-child(2) {
+        left: 50px;
+        z-index: 2;
+      }
+      &:nth-child(3) {
+        left: 100px;
+        z-index: 1;
+      }
+    }
+
+    .bookmark {
+      pointer-events: none; // Disable hover/click on bookmark icons in this context
+    }
+  }
+
+
 }
-- 
2.39.5