From: Stephen Cameron <stephen@cubedesigners.com>
Date: Mon, 12 Nov 2018 18:01:59 +0000 (+0100)
Subject: WIP #1806 @7
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=009686f22cf606eebb671302ac6a56e29037d081;p=fluidbook-html5.git

WIP #1806 @7
---

diff --git a/js/libs/fluidbook/fluidbook.bookmarks.js b/js/libs/fluidbook/fluidbook.bookmarks.js
index 1a5bdeac..d8e7d1b1 100644
--- a/js/libs/fluidbook/fluidbook.bookmarks.js
+++ b/js/libs/fluidbook/fluidbook.bookmarks.js
@@ -56,7 +56,7 @@ FluidbookBookmarks.prototype = {
                 $this.fluidbook.alertInternetRequired();
                 return false;
             }
-            $this.fluidbook._openFile($this.getPDF(), $(this), 'pdf', $this.getBookmarksCompacted() + '.pdf');
+            $this.openPDF($(this), true);
             return false;
         });
 
@@ -81,6 +81,10 @@ FluidbookBookmarks.prototype = {
     sortnumeric: function (a, b) {
         return a - b;
     },
+    openPDF: function(element, print) {
+      print = print || false;
+      this.fluidbook._openFile(this.getPDF(), element, 'pdf', this.getBookmarksCompacted() + '.pdf', print);
+    },
     getPDF: function () {
         return 'https://workshop.fluidbook.com/s/e/' + this.fluidbook.datas.cid + '/' + this.getBookmarksCompacted();
     },
@@ -477,10 +481,16 @@ FluidbookBookmarks.prototype = {
 
         }
         if (this.fluidbook.datas.print || this.fluidbook.datas.pdf) {
+            // ToDo: differentiate between download & print?
             index += '<a class="print" href="#">' + downloadLabel + '</a>';
         }
         index += '</div>';
         index += '</div>';
         return index;
+    },
+
+    // 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]';
     }
 };
diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 10200c8b..31ab0666 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -97,6 +97,8 @@ FluidbookMenu.prototype = {
             this.openIframe(param1, cb);
         } else if (view == 'search') {
             this.openSearch(param1, cb);
+        } else if (view == 'print') {
+            this.openPrint(cb);
         } else {
             this['open' + camelView](param1, param2, cb);
         }
@@ -459,6 +461,95 @@ 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
+
+        $("#view").append('<div class="mview" data-menu="print">' + printDialogue + '</div>');
+        if (callback != undefined) {
+            callback();
+        }
+    },
+
     closeView: function (callback, all, animate) {
         if (callback === undefined) {
             callback = function () {
diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 12081a4e..680cb7aa 100644
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -414,7 +414,7 @@ FluidbookNav.prototype = {
             } else if (icon == 'pdf' && this.fluidbook.datas.pdf) {
                 link = this.addLink(navType, 'nav-download', '#', 'download', 'download', 'download');
             } else if (icon == 'print' && this.fluidbook.datas.print) {
-                link = this.addLink(navType, 'nav-print', '#', 'print', 'print', 'print');
+                link = this.addLink(navType, 'nav-print', '#/print', 'print', 'print', 'print');
             } else if (icon == 'basket' && this.fluidbook.cart != undefined && this.fluidbook.cart.enabled) {
                 link = this.addLink(navType, 'nav-basket', '#/cart', 'cart', 'basket', 'basket');
                 $(this.fluidbook).on('fluidbook.cart.updateIcon', {link: $(link).attr('id')}, function (e, data) {
@@ -694,10 +694,10 @@ FluidbookNav.prototype = {
         });
 
         // Print icon
-        $(document).on('click', '.icon-print', function () {
-            $this.fluidbook.print($(this));
-            return false;
-        });
+        // $(document).on('click', '.icon-print', function () {
+        //     $this.fluidbook.print($(this));
+        //     return false;
+        // });
 
         // Bookmarks icon
         $(document).on('click', '.icon-bookmarks', function () {
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 21c5571c..08a5276e 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1363,6 +1363,10 @@ html.ios body.portrait #interface {
 		}
 	}
 
+	&[data-menu="print"] {
+		max-width: 820px;
+	}
+
 	&[data-menu="bookmarks-help"] {
 		.content {
 			padding: 40px 70px 100px 70px;
@@ -2932,4 +2936,6 @@ body > input {
 	}
 }
 
+@import "print.less";
+
 @import "additional.less";
diff --git a/style/print.less b/style/print.less
new file mode 100644
index 00000000..5773d10b
--- /dev/null
+++ b/style/print.less
@@ -0,0 +1,22 @@
+/* Printing Options */
+.print-dialogue {
+  display: flex;
+  flex-wrap: wrap;
+  text-align: left;
+  padding: 1em 2em;
+
+  > label {
+    flex: 0 1 33%;
+    margin-bottom: 2em;
+    position: relative;
+  }
+
+  input[type="radio"] {
+    margin-right: 1em;
+  }
+
+  .doubleThumb {
+    margin-bottom: 1em;
+  }
+
+}