From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 19 Apr 2022 15:48:11 +0000 (+0200)
Subject: wip #5240 @1.25
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=67def1ac64dfa0e978f7aec7a18531fb8195c174;p=fluidbook-html5.git

wip #5240 @1.25
---

diff --git a/js/libs/fluidbook/fluidbook.bookmarks.js b/js/libs/fluidbook/fluidbook.bookmarks.js
index 21702ebc..a3d0af2f 100644
--- a/js/libs/fluidbook/fluidbook.bookmarks.js
+++ b/js/libs/fluidbook/fluidbook.bookmarks.js
@@ -482,49 +482,29 @@ FluidbookBookmarks.prototype = {
 
         var index = '<div class="' + contentClass + '"><div class="indexView bookmarkView" data-size="' + this.fluidbook.settings.bookmarkView + '">';
         if (this.fluidbook.settings.bookmarkView === 'small') {
-            index += '<div class="indexViewHolder">';
-            if (onlyGroup === undefined || !onlyGroup) {
-                for (var g = 0; g < groups.length; g++) {
-                    var group = groups[g];
-                    var pages = [];
-                    for (var i = 0; i < group.nb; i++) {
-                        pages.push(group.page + i);
-                    }
-
-                    var dim = this.fluidbook.menu.index.getThumbDimensions(group.page);
-
-                    index += '<div class="doubleThumb simple left"' + dim.doublethumb + ' page="' + group.page + '" data-pages="' + pages.join(',') + '">';
-                    index += this.fluidbook.menu.index._thumb(group.page, 'left', this.fluidbook.mobilefirst.enabled ? undefined : 100, group.name);
-                    if (this.fluidbook.bookmarks.enabled) {
-                        index += this.fluidbook.bookmarks.getBookmarkForPage(group.page, true, true);
-                    }
-                    index += '</div></div>';
-                }
-            } else {
-                var group = groups[this.getGroupOfPage(onlyGroup)];
-
-                var pages = [];
-                for (var i = 0; i < group.nb; i++) {
-                    pages.push(group.page + i);
-                }
-
-                for (i in pages) {
-                    var p = pages[i];
-
-                    var dim = this.fluidbook.menu.index.getThumbDimensions(p);
-
-                    index += '<div class="doubleThumb simple left"' + dim.doublethumb + ' page="' + p + '" data-pages="' + p + '">';
-                    index += this.fluidbook.menu.index._thumb(p, 'left', this.fluidbook.mobilefirst.enabled ? undefined : 100);
-                    if (this.fluidbook.bookmarks.enabled) {
-                        index += this.fluidbook.bookmarks.getBookmarkForPage(p, true, true);
+            index += this.getSmallView(onlyGroup, groups);
+        } else if (this.fluidbook.settings.bookmarkView === 'large') {
+            var $this = this;
+            $(document).on('change', '[name=bookmarkDisplay]', function () {
+                var v = $(this).val();
+                if (v === 'bookmarked') {
+                    if (all === false) {
+                        groups = $this.getBookmarkedGroups();
+                    } else {
+                        groups = $this.getOrderedGroups();
                     }
-                    index += '</div></div>';
-
+                    $("#bookmarksHolder").html($this.getSmallView(onlyGroup, groups));
+                } else {
+                    $("#bookmarksHolder").html($this.fluidbook.menu.index.getPages());
                 }
-            }
+            });
+            index += '<div id="bookmarkDisplayOptions" role="radiogroup">';
+            index += '<div class="radio-option"><input id="bookmarkDisplay-all" type="radio" name="bookmarkDisplay" value="all" checked /><label for="bookmarkDisplay-all">' + this.fluidbook.l10n.__('show all the pages') + '</label></div>';
+            index += '<div class="radio-option"><input id="bookmarkDisplay-bookmarked" type="radio" name="bookmarkDisplay" value="bookmarked" /><label for="bookmarkDisplay-bookmarked">' + this.fluidbook.l10n.__('show bookmarked pages') + '</label></div>';
             index += '</div>';
-        } else if (this.fluidbook.settings.bookmarkView === 'large') {
+            index += '<div id="bookmarksHolder">';
             index += this.fluidbook.menu.index.getPages();
+            index += '</div>';
         }
         index += '</div></div>';
         index += '<div class="fonctions">';
@@ -545,6 +525,51 @@ FluidbookBookmarks.prototype = {
         return index;
     },
 
+    getSmallView: function (onlyGroup, groups) {
+        var index = '<div class="indexViewHolder small">';
+        if (onlyGroup === undefined || !onlyGroup) {
+            for (var g = 0; g < groups.length; g++) {
+                var group = groups[g];
+                var pages = [];
+                for (var i = 0; i < group.nb; i++) {
+                    pages.push(group.page + i);
+                }
+
+                var dim = this.fluidbook.menu.index.getThumbDimensions(group.page);
+
+                index += '<div class="doubleThumb simple left"' + dim.doublethumb + ' page="' + group.page + '" data-pages="' + pages.join(',') + '">';
+                index += this.fluidbook.menu.index._thumb(group.page, 'left', this.fluidbook.mobilefirst.enabled ? undefined : 100, group.name);
+                if (this.fluidbook.bookmarks.enabled) {
+                    index += this.fluidbook.bookmarks.getBookmarkForPage(group.page, true, true);
+                }
+                index += '</div></div>';
+            }
+        } else {
+            var group = groups[this.getGroupOfPage(onlyGroup)];
+
+            var pages = [];
+            for (var i = 0; i < group.nb; i++) {
+                pages.push(group.page + i);
+            }
+
+            for (i in pages) {
+                var p = pages[i];
+
+                var dim = this.fluidbook.menu.index.getThumbDimensions(p);
+
+                index += '<div class="doubleThumb simple left"' + dim.doublethumb + ' page="' + p + '" data-pages="' + p + '">';
+                index += this.fluidbook.menu.index._thumb(p, 'left', this.fluidbook.mobilefirst.enabled ? undefined : 100);
+                if (this.fluidbook.bookmarks.enabled) {
+                    index += this.fluidbook.bookmarks.getBookmarkForPage(p, true, true);
+                }
+                index += '</div></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 () {
 
diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index f0b3f405..db0bfe88 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -487,6 +487,7 @@ FluidbookMenu.prototype = {
         this.viewWrap(this.fluidbook.bookmarks.getView(title, downloadLabel), 'bookmarks');
 
         if (callback !== undefined) {
+            $('[role="radiogroup"]').AriaRadio();
             callback();
         }
     }, openChapters: function (submenu, callback) {
diff --git a/style/00-import.less b/style/00-import.less
index bede759d..4dccd334 100644
--- a/style/00-import.less
+++ b/style/00-import.less
@@ -2,4 +2,5 @@
 @import "mixins";
 @import "mmenu/mmenu";
 @import "nav-horizontal";
+@import "input-radio";
 @import "accessibility";
\ No newline at end of file
diff --git a/style/bookmarks.less b/style/bookmarks.less
index 28484491..5316a00e 100644
--- a/style/bookmarks.less
+++ b/style/bookmarks.less
@@ -184,4 +184,8 @@ a.bookmark {
     height: unit(@thumb-width*0.35, px);
     z-index: 3;
   }
+}
+
+#bookmarkDisplayOptions{
+  padding-bottom: 15px;
 }
\ No newline at end of file
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 392fefc8..fadd996e 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1945,13 +1945,31 @@ form input[type="text"], form input[type="email"] {
 }
 
 .indexView {
+  #bookmarkDisplayOptions {
+    padding-left: 30px;
+    text-align: left;
+    .radio-option {
+      display: inline-block;
+      margin-right: 20px;
+    }
+  }
+
   .indexViewHolder {
+
+
+
     margin: auto;
     text-align: left;
 
     .rtl & {
       text-align: right;
     }
+
+    &.small {
+      .doubleThumb, .padding {
+        width: unit(@thumb-width, px);
+      }
+    }
   }
 
   .doubleThumb, .padding {
diff --git a/style/input-radio.less b/style/input-radio.less
new file mode 100644
index 00000000..fce67a41
--- /dev/null
+++ b/style/input-radio.less
@@ -0,0 +1,52 @@
+.radio-option {
+
+  label{
+    position: relative;
+    cursor: pointer;
+  }
+
+  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;
+    opacity: 0.5;
+    display: inline-block;
+    box-sizing: border-box;
+    width: 22px;
+    height: 22px;
+    margin-right: 0.5em;
+    margin-top: -1px; // Using ems caused rounding problems with position
+    vertical-align: middle;
+    cursor: pointer;
+    text-align: center;
+    //transition: all .1s ease-out;
+    border-radius: 100%;
+  }
+
+  // Checked styling
+  input[type=radio]:checked + label:after {
+    content: '';
+    background-color: #fff; // Color of dot inside radio input
+    display: block;
+    box-sizing: border-box;
+    width: 12px;
+    height: 12px;
+    cursor: pointer;
+    border-radius: 100%;
+    position: absolute;
+    left: 5px;
+    top: 6px;
+  }
+}
\ No newline at end of file