WIP #1806 @7.5

diff --git a/js/libs/fluidbook/fluidbook.bookmarks.js b/js/libs/fluidbook/fluidbook.bookmarks.js
index 8a90612624574db85e50abcb6dc45a0557654870..4171ba1fcdb5543307bd3bcc8e833ffdb2696527 100644 (file)
--- a/js/libs/fluidbook/fluidbook.bookmarks.js
+++ b/js/libs/fluidbook/fluidbook.bookmarks.js
@@ -267,11 +267,9 @@ FluidbookBookmarks.prototype = {
     },
     getLinkedPages: function (page) {
         var group = this.getGroupOfPage(page);
-        console.log('group : ' + group);
         if (group === -1 || isNaN(group)) {
             return [];
         }
-        console.log(this.getPagesOfGroup(group));
         return this.getPagesOfGroup(group);
     },
     addBookmark: function (page, cornersOnly) {

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 2879cdeff04428d4f292551d0acd6a57b9453018..80a259bdb244454d6807c986fe1f4cecd759e5e8 100644 (file)
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -816,12 +816,20 @@ Fluidbook.prototype = {
         $("#pagesnumbers .right").html(this.getPageNumberOfSide('right'));
         $("#pagesnumbers").removeClass('hidden');
     },
+    getPhysicalPageNumberOfSide: function (side) { // Side should be 'left' or 'right'
+        var pageSide = $("#currentDoublePage").find('.' + side);
+        if (pageSide.length == 0) {
+            return false;
+        }
+
+        return $(pageSide).data('page');
+    },
     getPageNumberOfSide: function (side) {
-        var p = $("#currentDoublePage").find('.' + side);
-        if (p.length == 0) {
+        var physical = this.getPhysicalPageNumberOfSide(side);
+        if (!physical) {
             return '';
         }
-        return this.physicalToVirtual($(p).data('page'));
+        return this.physicalToVirtual(physical);
     },
     clickLogo: function () {
         if (this.datas.url_link == '' || this.datas.url_link == 'http://') {

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 167647377b734dabe6c854b0c2db0d9839b136aa..3c578b13874d2028953364114079a0297a6dad0b 100644 (file)
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -468,6 +468,9 @@ FluidbookMenu.prototype = {
 
         $("#view").append('<div class="mview" data-menu="print">' + printDialogue + '</div>');
 
+        // Auto select first option (the options are dynamic so we can't do it until now)
+        $('.print-dialogue .print-option:first-of-type input[type="radio"]').prop('checked', true);
+
         if (callback != undefined) {
             callback();
         }

diff --git a/js/libs/fluidbook/fluidbook.print.js b/js/libs/fluidbook/fluidbook.print.js
index e879fa1d4046b132ffc6ab9a6f14f8ef986ef6ed..9ef637f41af54fc3d34ab6f38818767dcb0a683c 100644 (file)
--- a/js/libs/fluidbook/fluidbook.print.js
+++ b/js/libs/fluidbook/fluidbook.print.js
@@ -6,58 +6,98 @@ function FluidbookPrint(fluidbook) {
 FluidbookPrint.prototype = {
     init: function () {
 
+        var $this = this;
+
         // 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)
+            // ToDo: Consider what happens if Fluidbook is self-hosted or offline (maybe here is not the best place to handle that)
+
+            var dynamicPDF = 'https://workshop.fluidbook.com/s/e/' + $this.fluidbook.datas.cid + '/',
+                leftPageNumber = $this.fluidbook.getPhysicalPageNumberOfSide('left'),
+                rightPageNumber = $this.fluidbook.getPhysicalPageNumberOfSide('right'),
+                element = $(this),
+                choice = $('input[name="printChoice"]:checked').val();
+
+            switch (choice) {
+              case 'left':
+                $this.fluidbook._openFile(dynamicPDF + leftPageNumber, element, 'pdf', leftPageNumber + '.pdf', true);
+                break;
+              case 'right':
+                $this.fluidbook._openFile(dynamicPDF + rightPageNumber, element, 'pdf', rightPageNumber + '.pdf', true);
+                break;
+              case 'double':
+                var pageRange = leftPageNumber + '-' + rightPageNumber;
+                $this.fluidbook._openFile(dynamicPDF + pageRange, element, 'pdf', pageRange + '.pdf', true);
+                break;
+              case 'all':
+                $this.fluidbook.openPDF(element, true);
+                break;
+              case 'bookmarks':
+                $this.fluidbook.bookmarks.openPDF(element, true);
+                break;
+              default:
+                return false;
+            }
+
 
         });
     },
 
     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')),
+        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 = '';
 
         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.
+        // 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
-            printDialogue += '<div class="thumb right blank"></div>';
+            if (!isSinglePageMode && !isLastPage) {
+                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>';
+            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
         }
 
-        // Right Page (empty when when on last page)
-        if (!isLastPage) {
+        // 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">';
-            printDialogue += '<div class="thumb left blank"></div>';
-            printDialogue += '<div class="thumb right">';
+            if (!isFirstPage) {
+                printDialogue += '<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 += '<input type="radio" name="printChoice" value="'+ leftPageNumber +'" id="rightPage">';
-            printDialogue += '<span class="print-label-text">' + (isFirstPage ? __('Current page') : __('Right page')) + '</span>';
             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
         }
 
         // Double Page
-        if (!isFirstPage && !isLastPage) {
+        if (!isFirstPage && !isLastPage && !isSinglePageMode) {
+            printDialogue += '<div class="print-option">';
             printDialogue += '<label for="doublePage">';
             printDialogue += '<div class="doubleThumb">';
             printDialogue += '<div class="thumb left">';
@@ -67,33 +107,38 @@ FluidbookPrint.prototype = {
             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>';
+            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
         }
 
         // 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 += '<input type="radio" name="printChoice" value="all" id="allPages">'
-        printDialogue += '<span class="print-label-text">' + __('Full brochure') + '</span>';
         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
 
         // 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 '+ bookmarksDisabled +'">';
+        printDialogue += '<div class="doubleThumb bookmarks">';
         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 += '<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
 
         printDialogue += '</div>'; // .print-dialogue
 

diff --git a/style/print.less b/style/print.less
index 9292ec67e6f08f2f8b6da3e08f14cc547fbf96c0..4b020cda2eee3910f7fbcc1b28c2e9a11cb5c430 100644 (file)
--- a/style/print.less
+++ b/style/print.less
@@ -6,14 +6,19 @@
   padding: 1em 2em;
   margin-bottom: -2em; // Offset the margin-bottom on each <label> so there's no extra margin on last row
 
-  > label {
+  .print-option {
     flex: 0 1 33%;
+    min-width: 230px;
     margin-bottom: 2em;
     position: relative;
+
+    @media (max-width: 753px) {
+      flex-grow: 1; // When going to 2 columns due to wrapping, use space better
+    }
   }
 
-  input[type="radio"] {
-    margin-right: 1em;
+  .disabled .print-label-text {
+    opacity: 0.6;
   }
 
   .doubleThumb {
@@ -48,5 +53,46 @@
     }
   }
 
+  // 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
+
+  // Hide original radio inputs without making them inaccessible
+  input[type=radio] {
+    position: absolute;
+    top: auto;
+    overflow: hidden;
+    clip: rect(1px 1px 1px 1px); /* IE 6/7 */
+    clip: rect(1px, 1px, 1px, 1px);
+    width: 1px;
+    height: 1px;
+    white-space: nowrap; // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+  }
+
+  // Unchecked styling
+  input[type=radio] + label:before {
+    content: '';
+    border: 0.35em solid @menu-button-background;
+    background-color: @menu-button-background;
+    display: inline-block;
+    box-sizing: border-box;
+    width: 1.4em;
+    height: 1.4em;
+    margin-right: 0.5em;
+    margin-top: -0.1em;
+    vertical-align: middle;
+    cursor: pointer;
+    text-align: center;
+    //transition: all .1s ease-out;
+    border-radius: 100%;
+  }
+
+  // Checked styling
+  input[type=radio]:checked + label:before {
+    background-color: #fff; // Color of dot inside radio input
+  }
+
+  label {
+    cursor: pointer;
+  }
 
 }