From: Stephen Cameron <stephen@cubedesigners.com>
Date: Thu, 15 Nov 2018 09:14:58 +0000 (+0100)
Subject: Add download options and take into account pdfComplex setting. WIP #1806 @1.75
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=a1c0052e7c7bd5e45a5b6a4b04710e3141fb1797;p=fluidbook-html5.git

Add download options and take into account pdfComplex setting. WIP #1806 @1.75
---

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 3c578b13..abd6a505 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -99,6 +99,8 @@ FluidbookMenu.prototype = {
             this.openSearch(param1, cb);
         } else if (view == 'print') {
             this.openPrint(cb);
+        } else if (view == 'download') {
+            this.openDownload(cb);
         } else {
             this['open' + camelView](param1, param2, cb);
         }
@@ -476,6 +478,22 @@ FluidbookMenu.prototype = {
         }
     },
 
+    openDownload: function (callback) {
+        var downloadDialogue = '<div class="caption">' + this.closeButton() + '<h2>' + __('Download') + '</h2></div>';
+
+        downloadDialogue += this.fluidbook.printing.getView('download'); // Reuse print dialogue since they're almost the same
+
+        $("#view").append('<div class="mview" data-menu="download">' + downloadDialogue + '</div>');
+
+        // Auto select first option (the options are dynamic so we can't do it until now)
+        // Todo: maybe make this different for downloads? Auto select full brochure option?
+        $('.print-dialogue .print-option:first-of-type input[type="radio"]').prop('checked', true);
+
+        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 680cb7aa..6f8883e9 100644
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -688,8 +688,16 @@ FluidbookNav.prototype = {
         });
 
         // Download icon
-        $(document).on('click', '.icon-download', function () {
-            $this.fluidbook.downloadPDF($(this));
+        $(document).on('click', '.icon-download', function (event) {
+            event.preventDefault();
+
+            // Should we show complex PDF download options? Or just give them the full PDF?
+            if ($this.fluidbook.datas.pdfComplex) {
+                $this.fluidbook.menu.openView('download');
+            } else {
+                $this.fluidbook.downloadPDF($(this));
+            }
+
             return false;
         });
 
diff --git a/js/libs/fluidbook/fluidbook.print.js b/js/libs/fluidbook/fluidbook.print.js
index 9ef637f4..7bac0d64 100644
--- a/js/libs/fluidbook/fluidbook.print.js
+++ b/js/libs/fluidbook/fluidbook.print.js
@@ -8,8 +8,8 @@ FluidbookPrint.prototype = {
 
         var $this = this;
 
-        // Handle click on Print button inside dialogue
-        $(document).on('click', '#confirmPrint', function(event) {
+        // Handle click on Print/Download button inside dialogue
+        $(document).on('click', '#confirmChoice', function(event) {
             event.preventDefault();
 
             // ToDo: Consider what happens if Fluidbook is self-hosted or offline (maybe here is not the best place to handle that)
@@ -18,24 +18,26 @@ FluidbookPrint.prototype = {
                 leftPageNumber = $this.fluidbook.getPhysicalPageNumberOfSide('left'),
                 rightPageNumber = $this.fluidbook.getPhysicalPageNumberOfSide('right'),
                 element = $(this),
-                choice = $('input[name="printChoice"]:checked').val();
+                mode = element.data('mode'), // Either 'print' or 'download'
+                print = (mode == 'print'),
+                choice = $('input[name="pageChoice"]:checked').val();
 
             switch (choice) {
               case 'left':
-                $this.fluidbook._openFile(dynamicPDF + leftPageNumber, element, 'pdf', leftPageNumber + '.pdf', true);
+                $this.fluidbook._openFile(dynamicPDF + leftPageNumber, element, 'pdf', leftPageNumber + '.pdf', print);
                 break;
               case 'right':
-                $this.fluidbook._openFile(dynamicPDF + rightPageNumber, element, 'pdf', rightPageNumber + '.pdf', true);
+                $this.fluidbook._openFile(dynamicPDF + rightPageNumber, element, 'pdf', rightPageNumber + '.pdf', print);
                 break;
               case 'double':
                 var pageRange = leftPageNumber + '-' + rightPageNumber;
-                $this.fluidbook._openFile(dynamicPDF + pageRange, element, 'pdf', pageRange + '.pdf', true);
+                $this.fluidbook._openFile(dynamicPDF + pageRange, element, 'pdf', pageRange + '.pdf', print);
                 break;
               case 'all':
-                $this.fluidbook.openPDF(element, true);
+                $this.fluidbook.openPDF(element, print);
                 break;
               case 'bookmarks':
-                $this.fluidbook.bookmarks.openPDF(element, true);
+                $this.fluidbook.bookmarks.openPDF(element, print);
                 break;
               default:
                 return false;
@@ -45,111 +47,119 @@ FluidbookPrint.prototype = {
         });
     },
 
-    getView: function () {
+    getView: function (mode) {
+
+        // Ensure mode is either download or print (default)
+        mode = (mode == 'download' ? mode : 'print');
+
         // Todo: handle RTL differences for page numbers? See fluidbook.index.js for example
         var leftPageNumber = this.fluidbook.getPhysicalPageNumberOfSide('left'),
             rightPageNumber = this.fluidbook.getPhysicalPageNumberOfSide('right'),
             isFirstPage = (this.fluidbook.currentPage == 0),
             isLastPage = (this.fluidbook.currentPage == this.fluidbook.datas.pages),
-            isSinglePageMode = (this.fluidbook.resize.orientation == 'portrait');
-            printDialogue = '';
+            isSinglePageMode = (this.fluidbook.resize.orientation == 'portrait'),
+            buttonLabels = {
+                'print' : __('Print'),
+                'download' : __('Download')
+            },
+            view = '';
 
-        printDialogue += '<div class="content">';
-        printDialogue += '<div class="print-dialogue">';
+        view += '<div class="content">';
+        view += '<div class="print-dialogue">';
 
         // NOTE: Each option has two labels so thumbnails are also clickable and so it works with the custom radio inputs
 
         // Left Page (empty when on first page)
         if (!isFirstPage) {
-            printDialogue += '<div class="print-option">';
-            printDialogue += '<label for="leftPage">';
-            printDialogue += '<div class="doubleThumb">';
-            printDialogue += '<div class="thumb left">';
-            printDialogue += this.fluidbook.loader.getThumbImage(leftPageNumber, null, true);
-            printDialogue += '</div>'; // .thumb
+            view += '<div class="print-option">';
+            view += '<label for="leftPage">';
+            view += '<div class="doubleThumb">';
+            view += '<div class="thumb left">';
+            view += this.fluidbook.loader.getThumbImage(leftPageNumber, null, true);
+            view += '</div>'; // .thumb
             if (!isSinglePageMode && !isLastPage) {
-                printDialogue += '<div class="thumb right blank"></div>';
+                view += '<div class="thumb right blank"></div>';
             }
-            printDialogue += '</div>'; // .doubleThumb
-            printDialogue += '</label>';
-            printDialogue += '<input type="radio" name="printChoice" value="left" id="leftPage">';
-            printDialogue += '<label for="leftPage" class="print-label-text">' + (isLastPage || isSinglePageMode ? __('Current page') : __('Left page')) + '</label>';
-            printDialogue += '</div>'; // .print-option
+            view += '</div>'; // .doubleThumb
+            view += '</label>';
+            view += '<input type="radio" name="pageChoice" value="left" id="leftPage">';
+            view += '<label for="leftPage" class="print-label-text">' + (isLastPage || isSinglePageMode ? __('Current page') : __('Left page')) + '</label>';
+            view += '</div>'; // .print-option
         }
 
         // Right Page (empty when when on last page or in portrait / single page mode)
         if (!isLastPage && !isSinglePageMode) {
-            printDialogue += '<div class="print-option">';
-            printDialogue += '<label for="rightPage">';
-            printDialogue += '<div class="doubleThumb">';
+            view += '<div class="print-option">';
+            view += '<label for="rightPage">';
+            view += '<div class="doubleThumb">';
             if (!isFirstPage) {
-                printDialogue += '<div class="thumb left blank"></div>';
+                view += '<div class="thumb left blank"></div>';
             }
-            printDialogue += '<div class="thumb '+ (isFirstPage ? 'left' : 'right') +'">'; // Only shows 1 page when on first page
-            printDialogue += this.fluidbook.loader.getThumbImage(rightPageNumber, null, true);
-            printDialogue += '</div>'; // .thumb
-            printDialogue += '</div>'; // .doubleThumb
-            printDialogue += '</label>';
-            printDialogue += '<input type="radio" name="printChoice" value="right" id="rightPage">';
-            printDialogue += '<label for="rightPage" class="print-label-text">' + (isFirstPage ? __('Current page') : __('Right page')) + '</label>';
-            printDialogue += '</div>'; // .print-option
+            view += '<div class="thumb '+ (isFirstPage ? 'left' : 'right') +'">'; // Only shows 1 page when on first page
+            view += this.fluidbook.loader.getThumbImage(rightPageNumber, null, true);
+            view += '</div>'; // .thumb
+            view += '</div>'; // .doubleThumb
+            view += '</label>';
+            view += '<input type="radio" name="pageChoice" value="right" id="rightPage">';
+            view += '<label for="rightPage" class="print-label-text">' + (isFirstPage ? __('Current page') : __('Right page')) + '</label>';
+            view += '</div>'; // .print-option
         }
 
         // Double Page
         if (!isFirstPage && !isLastPage && !isSinglePageMode) {
-            printDialogue += '<div class="print-option">';
-            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 += '</label>';
-            printDialogue += '<input type="radio" name="printChoice" value="double" id="doublePage">'
-            printDialogue += '<label for="doublePage" class="print-label-text">' + __('Double page') + '</label>';
-            printDialogue += '</div>'; // .print-option
+            view += '<div class="print-option">';
+            view += '<label for="doublePage">';
+            view += '<div class="doubleThumb">';
+            view += '<div class="thumb left">';
+            view += this.fluidbook.loader.getThumbImage(leftPageNumber, null, true);
+            view += '</div>';
+            view += '<div class="thumb right">';
+            view += this.fluidbook.loader.getThumbImage(rightPageNumber, null, true);
+            view += '</div>'; // .thumb
+            view += '</div>'; // .doubleThumb
+            view += '</label>';
+            view += '<input type="radio" name="pageChoice" value="double" id="doublePage">'
+            view += '<label for="doublePage" class="print-label-text">' + __('Double page') + '</label>';
+            view += '</div>'; // .print-option
         }
 
         // Full Brochure
-        printDialogue += '<div class="print-option">';
-        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 += '</label>';
-        printDialogue += '<input type="radio" name="printChoice" value="all" id="allPages">'
-        printDialogue += '<label for="allPages" class="print-label-text">' + __('Full brochure') + '</label>';
-        printDialogue += '</div>'; // .print-option
+        view += '<div class="print-option">';
+        view += '<label for="allPages">';
+        view += '<div class="doubleThumb">';
+        view += '<div class="thumb left">';
+        view += this.fluidbook.loader.getThumbImage(1, null, true);
+        view += '</div>'; // .thumb
+        view += '</div>'; // .doubleThumb
+        view += '</label>';
+        view += '<input type="radio" name="pageChoice" value="all" id="allPages">'
+        view += '<label for="allPages" class="print-label-text">' + __('Full brochure') + '</label>';
+        view += '</div>'; // .print-option
 
         // Bookmarks
         var hasBookmarks = this.fluidbook.bookmarks.hasBookmarkedPages(),
         bookmarksDisabled = hasBookmarks ? '' : 'disabled';
 
-        printDialogue += '<div class="print-option '+ bookmarksDisabled +'">';
-        printDialogue += '<label for="bookmarkedPages">';
-        printDialogue += '<div class="doubleThumb bookmarks">';
-        printDialogue += this.fluidbook.bookmarks.getPrintPreview();
-        printDialogue += '</div>'; // .doubleThumb
-        printDialogue += '</label>';
-        printDialogue += '<input type="radio" name="printChoice" value="bookmarks" id="bookmarkedPages" '+ bookmarksDisabled +'>'
-        printDialogue += '<label for="bookmarkedPages" class="print-label-text">' + __('My bookmarks') + '</label>';
-        printDialogue += '</div>'; // .print-option
+        view += '<div class="print-option '+ bookmarksDisabled +'">';
+        view += '<label for="bookmarkedPages">';
+        view += '<div class="doubleThumb bookmarks">';
+        view += this.fluidbook.bookmarks.getPrintPreview();
+        view += '</div>'; // .doubleThumb
+        view += '</label>';
+        view += '<input type="radio" name="pageChoice" value="bookmarks" id="bookmarkedPages" '+ bookmarksDisabled +'>'
+        view += '<label for="bookmarkedPages" class="print-label-text">' + __('My bookmarks') + '</label>';
+        view += '</div>'; // .print-option
 
-        printDialogue += '</div>'; // .print-dialogue
+        view += '</div>'; // .print-dialogue
 
         // Action buttons
-        printDialogue += '<div class="fonctions">';
-        printDialogue += '<a id="confirmPrint" href="#">'+ __('Print') +'</a>';
-        printDialogue += '</div>'; // .fonctions
+        view += '<div class="fonctions">';
+        view += '<a id="confirmChoice" href="#" data-mode="'+ mode +'">'+ buttonLabels[mode] +'</a>';
+        view += '</div>'; // .fonctions
 
-        printDialogue += '</div>'; // .content
+        view += '</div>'; // .content
 
-        return printDialogue;
+        return view;
     }
 };
 
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 08a5276e..4ae6bc11 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1363,7 +1363,7 @@ html.ios body.portrait #interface {
 		}
 	}
 
-	&[data-menu="print"] {
+	&[data-menu="print"], &[data-menu="download"]  {
 		max-width: 820px;
 	}