From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 15 Jan 2019 16:18:16 +0000 (+0100)
Subject: WIP #2498 @5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=cd968cde087a3bbaeba920671fe028f5897796c8;p=fluidbook-html5.git

WIP #2498 @5
---

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index c85bdd1c..df950132 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -851,8 +851,16 @@ FluidbookMenu.prototype = {
                 });
                 break;
             case 'print':
-            case 'download':
+          case 'download':
                 w = 820;
+
+                // If the option to print the full brochure is disabled,
+                // we change the print dialogue to a 2 column mode and narrower width
+                if (!this.fluidbook.datas.printFullBrochure) {
+                    w = 560;
+                }
+
+                // Enable fullscreen when there's no longer enough width for the popup
                 if (ww < w) {
                     fullscreen = true;
                 }
diff --git a/js/libs/fluidbook/fluidbook.print.js b/js/libs/fluidbook/fluidbook.print.js
index 2bbed8ee..bc5b0841 100644
--- a/js/libs/fluidbook/fluidbook.print.js
+++ b/js/libs/fluidbook/fluidbook.print.js
@@ -20,7 +20,9 @@ FluidbookPrint.prototype = {
                 element = $(this),
                 mode = element.data('mode'), // Either 'print' or 'download'
                 print = (mode == 'print'),
-                choice = $('input[name="pageChoice"]:checked').val();
+                choice = $('input[name="pageChoice"]:checked').val(),
+                rangeStart = parseInt($('#pageRangeStart').val()),
+                rangeEnd = parseInt($('#pageRangeEnd').val());
 
             switch (choice) {
               case 'left':
@@ -39,11 +41,29 @@ FluidbookPrint.prototype = {
               case 'bookmarks':
                 $this.fluidbook.bookmarks.openPDF(element, print);
                 break;
+              case 'range':
+                if (isNaN(rangeStart) ||
+                    isNaN(rangeEnd) ||
+                    (rangeStart < 1) ||
+                    (rangeEnd > $this.fluidbook.datas.pages) ||
+                    (rangeStart > rangeEnd)
+                ) {
+                  alert(__('Invalid page range. Please try again.'));
+                  return false;
+                }
+                var pageRange = rangeStart + '-' + rangeEnd;
+                $this.fluidbook._openFile(dynamicPDF + pageRange, element, 'pdf', pageRange + '.pdf', print);
+                break;
               default:
                 return false;
             }
         });
 
+        // Automatically select page range option when clicking in the input fields
+        $(document).on('focus', '.page-range-input', function() {
+          $('#pageRange').prop('checked', true);
+        });
+
         // When there are no bookmarks a click on the bookmarks option will open the bookmarks help modal
         $(document).on('click', '.bookmarks-option.disabled', function(event) {
             event.preventDefault();
@@ -131,17 +151,19 @@ FluidbookPrint.prototype = {
         }
 
         // Full Brochure
-        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">' + __('entire brochure') + '</label>';
-        view += '</div>'; // .print-option
+        if ((mode === 'print' && this.fluidbook.datas.printFullBrochure) || mode === 'download') {
+          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">' + __('entire brochure') + '</label>';
+          view += '</div>'; // .print-option
+        }
 
         // Bookmarks
         if (this.fluidbook.datas.bookmark) {
@@ -154,12 +176,33 @@ FluidbookPrint.prototype = {
           view += this.fluidbook.bookmarks.getPrintPreview();
           view += '</div>'; // .doubleThumb
           view += '</label>';
-          view += '<input type="radio" name="pageChoice" value="bookmarks" id="bookmarkedPages" '+ bookmarksDisabled +'>'
+          view += '<input type="radio" name="pageChoice" value="bookmarks" id="bookmarkedPages" '+ bookmarksDisabled +'>';
           view += '<label for="bookmarkedPages" class="print-label-text">' + __('bookmarks') + '</label>';
           view += '</div>'; // .print-option
         }
 
-        view += '<div class="print-option"></div>'; // Extra empty div to ensure flexbox space-between works as expected
+        view += '<div class="print-option blank"></div>'; // Extra empty div to ensure flexbox space-between works as expected
+
+        // Page range inputs
+        if (mode === 'print' && this.fluidbook.datas.printPageRange) {
+
+          // leftPageNumber may be false if on first page
+          var rangeStart = Math.max(leftPageNumber, 1);
+
+          // Current page + 1 unless we're out of range.
+          // It has to be calculated this way because sometimes there is no rightPageNumber
+          var rangeEnd = Math.min(rangeStart + 1, this.fluidbook.datas.pages);
+
+          view += '<div class="print-option page-range-option">';
+          view += '<input type="radio" name="pageChoice" value="range" id="pageRange">';
+          view += '<label for="pageRange">';
+          view += __('From page');
+          view += '<input class="page-range-input" type="text" id="pageRangeStart" value="' + rangeStart + '" autocomplete="off">';
+          view += __('to');
+          view += '<input class="page-range-input" type="text" id="pageRangeEnd" value="' + rangeEnd + '" autocomplete="off">';
+          view += '</label>';
+          view += '</div>'; // .print-option
+        }
 
         view += '</div>'; // .print-dialogue
 
diff --git a/style/mixins.less b/style/mixins.less
index ae1e82c4..e563fe2d 100644
--- a/style/mixins.less
+++ b/style/mixins.less
@@ -36,6 +36,10 @@
 .menu-color-a(@background,@button) {
 	background: @background;
 
+	input[type="text"] {
+		background: @button;
+	}
+
 	.fonctions {
 		a {
 			background-color: @button;
@@ -63,4 +67,4 @@
 	&.hidden {
 		opacity: 0;
 	}
-}
\ No newline at end of file
+}
diff --git a/style/print.less b/style/print.less
index 927858f1..a48156d5 100644
--- a/style/print.less
+++ b/style/print.less
@@ -6,6 +6,7 @@
   justify-content: space-between;
   padding: 1.5em 2em 1em;
   margin-bottom: -2em; // Offset the margin-bottom on each <label> so there's no extra margin on last row
+  min-width: 320px;
 
   .print-option {
     flex: 0 0 200px;
@@ -14,6 +15,14 @@
 
     @media (max-width: 753px) {
       flex-basis: 50%;
+
+      &.blank {
+        display: none;
+      }
+
+      &:last-child {
+        margin-bottom: 3em;
+      }
     }
     @media (max-width: 550px) {
       flex-basis: 100%;
@@ -86,6 +95,33 @@
     }
   }
 
+  // Page range options
+  .page-range-option {
+    position: absolute;
+    left: 32px;
+    bottom: 40px;
+    margin-bottom: 0 !important;
+
+    @media (max-width: 559px) {
+      position: relative;
+      left: unset;
+      bottom: unset;
+      flex-basis: 100%;
+      margin-bottom: 3em !important;
+    }
+  }
+
+  .page-range-input {
+    width: 3.2em;
+    margin: 0 0.7em;
+    line-height: 1.8;
+    padding: 0 0.5em;
+    font-size: 14px;
+    border: none;
+    color: currentColor;
+  }
+
+
   // Custom radio buttons (requires input + label to be siblings in HTML)
   // Based on http://adrianroselli.com/2017/05/under-engineered-custom-radio-buttons-and-checkboxen.html
 
@@ -112,7 +148,7 @@
     width: 22px;
     height: 22px;
     margin-right: 0.5em;
-    margin-top: -0.1em;
+    margin-top: -1px; // Using ems caused rounding problems with position
     vertical-align: middle;
     cursor: pointer;
     text-align: center;