From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 15 Feb 2022 19:29:20 +0000 (+0100)
Subject: wip #5099 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=1354e2977ed0071e78396b7530c88551edc08d08;p=fluidbook-html5.git

wip #5099 @1
---

diff --git a/js/libs/fluidbook/fluidbook.bookmarks.js b/js/libs/fluidbook/fluidbook.bookmarks.js
index 69b9799f..0c90466c 100644
--- a/js/libs/fluidbook/fluidbook.bookmarks.js
+++ b/js/libs/fluidbook/fluidbook.bookmarks.js
@@ -90,18 +90,14 @@ FluidbookBookmarks.prototype = {
         var p_a = this.getPagesOfGroup(a)[0];
         var p_b = this.getPagesOfGroup(b)[0];
         return p_a - p_b;
-    },
-    sortnumeric: function (a, b) {
+    }, sortnumeric: function (a, b) {
         return a - b;
-    },
-    openPDF: function (element, print) {
+    }, openPDF: function (element, print) {
         print = print || false;
         this.fluidbook._openFile(this.getPDF(), element, 'pdf', this.getBookmarksCompacted() + '.pdf', print);
-    },
-    getPDF: function () {
+    }, getPDF: function () {
         return 'https://workshop.fluidbook.com/s/e/' + this.fluidbook.settings.cid + '/' + this.getBookmarksCompacted();
-    },
-    getBookmarksCompacted: function () {
+    }, getBookmarksCompacted: function () {
         this.bookmarks.sort(this.sortnumeric);
 
 
@@ -139,8 +135,7 @@ FluidbookBookmarks.prototype = {
         }
 
         return g.join(',');
-    },
-    addGroup: function (from, nb, name) {
+    }, addGroup: function (from, nb, name) {
         var to = Math.min(from + (nb - 1), this.fluidbook.settings.pages);
         for (var i = from; i <= to; i++) {
             this._pagesToGroup[i] = this._groups;
@@ -148,8 +143,7 @@ FluidbookBookmarks.prototype = {
         this._groupNames[this._groups] = name;
         this._groupOrder.push(this._groups);
         this._groups++;
-    },
-    completeGroups: function () {
+    }, completeGroups: function () {
         for (var i = 1; i <= this.fluidbook.settings.pages; i++) {
             if (this._pagesToGroup[i] === undefined || this._pagesToGroup[i] === null) {
                 this._pagesToGroup[i] = this._groups;
@@ -157,27 +151,23 @@ FluidbookBookmarks.prototype = {
                 this._groups++;
             }
         }
-    },
-    getPreviousGroup: function (group) {
+    }, getPreviousGroup: function (group) {
         var o = this.getOrderGroup(group);
         if (o === -1) {
             return false;
         }
         o--;
         return this._groupOrder[o];
-    },
-    getNextGroup: function (group) {
+    }, getNextGroup: function (group) {
         var o = this.getOrderGroup(group);
         if (o === -1) {
             return false;
         }
         o++;
         return this._groupOrder[o];
-    },
-    getOrderGroup: function (group) {
+    }, getOrderGroup: function (group) {
         return this._groupOrder.indexOf(group);
-    },
-    getGroupName: function (groupId) {
+    }, getGroupName: function (groupId) {
         var res = '';
         if (this._groupNames[groupId] !== undefined) {
             res = this._groupNames[groupId];
@@ -191,8 +181,7 @@ FluidbookBookmarks.prototype = {
             res += " - " + this.fluidbook.physicalToVirtual(pages[pages.length - 1]);
         }
         return res;
-    },
-    getPagesOfGroup: function (groupId) {
+    }, getPagesOfGroup: function (groupId) {
         var res = [];
         for (var i = 1; i <= this.fluidbook.settings.pages; i++) {
             if (this._pagesToGroup[i] === groupId) {
@@ -200,11 +189,9 @@ FluidbookBookmarks.prototype = {
             }
         }
         return res;
-    },
-    getPagesNumberInGroup: function (groupId) {
+    }, getPagesNumberInGroup: function (groupId) {
         return this.getPagesOfGroup(groupId).length;
-    },
-    getBookmarkedGroups: function (onlyBookmarked) {
+    }, getBookmarkedGroups: function (onlyBookmarked) {
         if (onlyBookmarked === undefined) {
             onlyBookmarked = true;
         }
@@ -223,53 +210,45 @@ FluidbookBookmarks.prototype = {
             i++;
         }
         return res;
-    },
-    getOrderedGroups: function () {
+    }, getOrderedGroups: function () {
         return this.getBookmarkedGroups(false);
-    },
-    getGroupOfPage: function (page) {
+    }, getGroupOfPage: function (page) {
         return this._pagesToGroup[page];
-    },
-    getNextPageInGroupOfPage: function (page) {
+    }, getNextPageInGroupOfPage: function (page) {
         var group = this.getLinkedPages(page);
         var index = group.indexOf(page);
         if (index === group.length - 1) {
             return false;
         }
         return group[index + 1];
-    },
-    getPreviousPageInGroupOfPage: function (page) {
+    }, getPreviousPageInGroupOfPage: function (page) {
         var group = this.getLinkedPages(page);
         var index = group.indexOf(page);
         if (index === 0) {
             return false;
         }
         return group[index - 1];
-    },
-    getNextGroupCover: function (page) {
+    }, getNextGroupCover: function (page) {
         var group = this.getGroupOfPage(page);
         group = this.getNextGroup(group);
         if (group === false) {
             return false;
         }
         return this.getCoverOfGroup(group);
-    },
-    getPreviousGroupCover: function (page) {
+    }, getPreviousGroupCover: function (page) {
         var group = this.getGroupOfPage(page);
         group = this.getPreviousGroup(group);
         if (group === false) {
             return false;
         }
         return this.getCoverOfGroup(group);
-    },
-    getCoverOfGroup: function (group) {
+    }, getCoverOfGroup: function (group) {
         var pages = this.getPagesOfGroup(group);
         if (pages.length) {
             return pages[0];
         }
         return false;
-    },
-    hasNextPageInGroup: function (page) {
+    }, hasNextPageInGroup: function (page) {
         var group = this.getGroupOfPage(page);
         var pages = this.getPagesOfGroup(group);
         var i = pages.indexOf(page);
@@ -277,15 +256,13 @@ FluidbookBookmarks.prototype = {
             return false;
         }
         return true;
-    },
-    getLinkedPages: function (page) {
+    }, getLinkedPages: function (page) {
         var group = this.getGroupOfPage(page);
         if (group === -1 || isNaN(group)) {
             return [];
         }
         return this.getPagesOfGroup(group);
-    },
-    addBookmark: function (page, cornersOnly) {
+    }, addBookmark: function (page, cornersOnly) {
         if (!this.areBookmarksAllowedOn(page)) {
             return;
         }
@@ -307,19 +284,16 @@ FluidbookBookmarks.prototype = {
                 this.fluidbook.stats.track(4, pages[0]);
             }
         }
-    },
-    setCornersEnabled: function (page, enabled) {
+    }, setCornersEnabled: function (page, enabled) {
         var bookmarks = $('.bookmark[data-page="' + page + '"]');
         if (enabled) {
             $(bookmarks).attr('data-enabled', 'enabled').attr('data-tooltip', this._txtRemove);
         } else {
             $(bookmarks).attr('data-enabled', null).attr('data-tooltip', this._txtAdd);
         }
-    },
-    disableCorners: function () {
+    }, disableCorners: function () {
         $(".bookmark").attr('data-enabled', null).attr('data-tooltip', this._txtAdd);
-    },
-    toggleBookmark: function (page) {
+    }, toggleBookmark: function (page) {
         if (!this.areBookmarksAllowedOn(page)) {
             return;
         }
@@ -338,15 +312,13 @@ FluidbookBookmarks.prototype = {
         } else {
             this.addBookmark(page);
         }
-    },
-    removeBookmark: function (page) {
+    }, removeBookmark: function (page) {
         var pages = this.getLinkedPages(page);
         for (var i in pages) {
             this.bookmarks = arrayRemove(this.bookmarks, pages[i]);
         }
         this.updateBookmarks();
-    },
-    updateBookmarks: function () {
+    }, updateBookmarks: function () {
         this.saveBookmarks();
         var $this = this;
 
@@ -354,26 +326,21 @@ FluidbookBookmarks.prototype = {
         $.each(this.bookmarks, function (k, v) {
             $this.setCornersEnabled(v, true);
         });
-    },
-    saveBookmarks: function () {
+    }, saveBookmarks: function () {
         this.fluidbook.cache.set('bookmarks', this.bookmarks);
-    },
-    getSavedBookmarks: function () {
+    }, getSavedBookmarks: function () {
         if (this.fluidbook.cache.isset('bookmarks')) {
             return this.fluidbook.cache.get('bookmarks');
         }
         return [];
-    },
-    isBookmarked: function (page) {
+    }, isBookmarked: function (page) {
         return this.areBookmarksAllowedOn(page) && this.bookmarks.indexOf(page) > -1;
-    },
-    areBookmarksAllowedOn: function (pageNr) {
+    }, areBookmarksAllowedOn: function (pageNr) {
         if (pageNr === 0 || pageNr > this.fluidbook.settings.pages) {
             return false;
         }
         return this.fluidbook.settings.bookmarkDisablePages.indexOf(pageNr) === -1;
-    },
-    getBookmarkForPage: function (pageNr, allwaysAtRight, permanentIcon) {
+    }, getBookmarkForPage: function (pageNr, allwaysAtRight, permanentIcon) {
         if (!this.areBookmarksAllowedOn(pageNr)) {
             return '';
         }
@@ -423,8 +390,7 @@ FluidbookBookmarks.prototype = {
         bookmarks += '>' + getSpriteIcon('bookmark-corner') + '</a>';
 
         return bookmarks;
-    },
-    getView: function (title, downloadLabel) {
+    }, getView: function (title, downloadLabel) {
         var c = this.getIndex(false, false, downloadLabel);
         if (c === false) {
             return c;
@@ -437,8 +403,7 @@ FluidbookBookmarks.prototype = {
         index += c;
         index += '</div>';
         return index;
-    },
-    hasBookmarkedPages: function (all) {
+    }, hasBookmarkedPages: function (all) {
         if (all === undefined) {
             all = false;
         }
@@ -453,8 +418,7 @@ FluidbookBookmarks.prototype = {
             return false;
         }
         return true;
-    },
-    getIndex: function (all, onlyGroup, downloadLabel) {
+    }, getIndex: function (all, onlyGroup, downloadLabel) {
         if (all === undefined) {
             all = false;
         }
@@ -479,49 +443,56 @@ FluidbookBookmarks.prototype = {
             contentClass += ' noscroll mobilefirst';
         }
 
-        var index = '<div class="' + contentClass + '"><div class="indexView bookmarkView"><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 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);
+                    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 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>';
+                    index += '</div>';
                 }
-                index += '</div>';
-                index += '</div>';
-            }
-        } else {
-            var group = groups[this.getGroupOfPage(onlyGroup)];
+            } else {
+                var group = groups[this.getGroupOfPage(onlyGroup)];
 
-            var pages = [];
-            for (var i = 0; i < group.nb; i++) {
-                pages.push(group.page + i);
-            }
+                var pages = [];
+                for (var i = 0; i < group.nb; i++) {
+                    pages.push(group.page + i);
+                }
 
-            for (i in pages) {
-                var p = pages[i];
+                for (i in pages) {
+                    var p = pages[i];
 
-                var dim = this.fluidbook.menu.index.getThumbDimensions(p);
+                    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 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>';
+                    index += '</div>';
                 }
-                index += '</div>';
-                index += '</div>';
             }
+            index += '</div>';
+        } else if (this.fluidbook.settings.bookmarkView === 'large') {
+            index += this.fluidbook.menu.index.getPages();
         }
-        index += '</div></div>';
+        index += '</div>';
         index += '<div class="fonctions">';
         if (this.fluidbook.settings.friend && this.fluidbook.settings.bookmarkSendEnable) {
             index += '<a role="button" aria-label="' + this.fluidbook.l10n.__('send') + '" class="send" href="#">' + this.fluidbook.l10n.__('send') + '</a>';
@@ -545,9 +516,7 @@ FluidbookBookmarks.prototype = {
 
 
         var maxImages = 3, // How many images maximum to show in the bookmarks print preview thumbnail
-            count = 0,
-            html = '',
-            groups = this.getBookmarkedGroups();
+            count = 0, html = '', groups = this.getBookmarkedGroups();
 
         html += '<div class="bookmark-thumbnails">';
 
diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 02953bf5..ea369503 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -32,8 +32,7 @@ FluidbookMenu.prototype = {
 
     viewMode: function () {
         return $("#view .mview").length > 0;
-    },
-    openView: function (view, param1, param2, callback) {
+    }, openView: function (view, param1, param2, callback) {
         var $this = this;
 
         setTimeout(function () {
@@ -44,10 +43,7 @@ FluidbookMenu.prototype = {
     _openView: function (view, param1, param2, callback) {
         var $this = this;
         var preload = {
-            index: 'thumbnails',
-            search: 'thumbnails',
-            bookmark: 'thumbnails',
-            video: 'extras'
+            index: 'thumbnails', search: 'thumbnails', bookmark: 'thumbnails', video: 'extras'
         };
         if (!OFFLINEAPP && this.fluidbook.gal != null && preload[view] !== undefined) {
             this.fluidbook.displayLoader();
@@ -61,8 +57,7 @@ FluidbookMenu.prototype = {
         } else {
             this.__openView(view, param1, param2, callback);
         }
-    },
-    __openView: function (view, param1, param2, callback) {
+    }, __openView: function (view, param1, param2, callback) {
 
         try {
             if (typeof param1 === 'string') {
@@ -121,14 +116,11 @@ FluidbookMenu.prototype = {
         } else {
             this['open' + camelView](param1, param2, cb);
         }
-    },
-    openNotes: function (p1, p2, cb) {
+    }, openNotes: function (p1, p2, cb) {
         this.fluidbook.notes.openMenu(cb);
-    },
-    openSearch: function (q, cb) {
+    }, openSearch: function (q, cb) {
         this.fluidbook.nav.openSearch(q, cb);
-    },
-    openingView: function (callback, view) {
+    }, openingView: function (callback, view) {
         var $this = this;
         this.fluidbook.resize.resizeView();
         this.fluidbook.tooltip.hideTooltip();
@@ -349,8 +341,7 @@ FluidbookMenu.prototype = {
             c = ' ' + c;
         }
         return '<a href="#/closeview" role="button" aria-label="' + this.fluidbook.l10n.__('close') + '" aria-keyshortcuts="Escape" class="button back' + c + '">' + getSpriteIcon('interface-close') + '</a>';
-    },
-    openAudio: function (audio, callback) {
+    }, openAudio: function (audio, callback) {
         var hash = '#/audio/' + audio;
         var a = $('a[href="' + hash + '"]');
         var markup = decodeURIComponent($(a).attr('data-audio'));
@@ -370,8 +361,7 @@ FluidbookMenu.prototype = {
         if (callback != undefined) {
             callback();
         }
-    },
-    openWebVideo: function (service, video, callback) {
+    }, openWebVideo: function (service, video, callback) {
         var hash = '#/webvideo/' + service + '/' + video;
         var a = $('a[href="' + hash + '"]');
         var markup = decodeURIComponent($(a).attr('data-video'));
@@ -387,8 +377,7 @@ FluidbookMenu.prototype = {
         if (callback != undefined) {
             callback();
         }
-    },
-    openLocales: function (p1, p2, callback) {
+    }, openLocales: function (p1, p2, callback) {
         var view = this.getCaption('Select language');
         view += '<div class="content">';
         view += '<ul class="chapters localesList">';
@@ -423,8 +412,7 @@ FluidbookMenu.prototype = {
 
     openCart: function (p1, p2, callback) {
         this.fluidbook.cart.instance.openMenu(p1, p2, callback);
-    },
-    openShare: function (p1, p2, callback) {
+    }, openShare: function (p1, p2, callback) {
         this.fluidbook.share.openShare(p1, p2, callback);
     },
 
@@ -486,8 +474,7 @@ FluidbookMenu.prototype = {
         if (callback !== undefined) {
             callback();
         }
-    },
-    openChapters: function (submenu, callback) {
+    }, openChapters: function (submenu, callback) {
         if (this.fluidbook.settings.externalChaptersHTML != '') {
             this.openExternalChapters(callback);
             return;
@@ -525,8 +512,7 @@ FluidbookMenu.prototype = {
             callback();
         }
         this.fluidbook.stats.track(14);
-    },
-    openExternalChapters: function (callback) {
+    }, openExternalChapters: function (callback) {
         var view = this.getCaption();
         view += '<div class="content"><div class="multimediaHolder"><div class="multimediaScale">';
         view += '<iframe data-width="' + this.fluidbook.settings.externalChaptersSize.width + '" data-height="' + this.fluidbook.settings.externalChaptersSize.height + '"  width="' + this.fluidbook.settings.externalChaptersSize.width + '" height="' + this.fluidbook.settings.externalChaptersSize.height + '" src="data/chapters/index.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>';
@@ -538,19 +524,16 @@ FluidbookMenu.prototype = {
             callback();
         }
         this.fluidbook.stats.track(14);
-    },
-    openIndex: function (title, group, closeAll, callback) {
+    }, openIndex: function (title, group, closeAll, callback) {
         this.index.openIndex(title, group, closeAll, callback);
-    },
-    openArchives: function (title, callback) {
+    }, openArchives: function (title, callback) {
         var archives = this.getCaption(title, true, title === undefined || title === '' ? 'h0' : '');
         archives += '<div class="content"><div class="image" id="archivesview"><img src="data/images/' + this.fluidbook.settings.externalArchives + '" /><div class="links">' + this.fluidbook.loader.handleExtension(this.fluidbook.settings.links.archives) + '</div></div></div>';
         this.viewWrap(archives, 'archives', '', 'archives');
         if (callback != undefined) {
             callback();
         }
-    },
-    openText: function (text, callback) {
+    }, openText: function (text, callback) {
         var styleMatches = text.match(/\<style\>([^\<]*)<\/style>/);
         var style = '';
 
@@ -611,8 +594,7 @@ FluidbookMenu.prototype = {
         } else {
             this._closeView(callback, all, animate);
         }
-    },
-    _closeView: function (callback, all, animate) {
+    }, _closeView: function (callback, all, animate) {
         var $this = this;
         if (all == undefined) {
             all = false;
@@ -814,7 +796,9 @@ FluidbookMenu.prototype = {
                 }, 200);
                 break;
             case 'bookmarks':
-                if (this.fluidbook.mobilefirst.enabled) {
+                if (this.fluidbook.settings.bookmarkView === 'large') {
+                    fullscreen = true;
+                } else if (this.fluidbook.mobilefirst.enabled) {
                     var indexWidth = Math.floor(ww / 230) * 230;
                     $(".indexViewHolder:visible").css('width', indexWidth);
                     var cw = 30 + 10 + 130 * this.fluidbook.bookmarks.getBookmarkedGroups(true).length;
@@ -933,28 +917,17 @@ FluidbookMenu.prototype = {
 
                 if (s < 1) {
                     var css = {
-                        overflow: 'hidden',
-                        width: nw * s,
-                        height: nh * s,
-                        top: y,
-                        left: x,
-                        position: 'absolute'
+                        overflow: 'hidden', width: nw * s, height: nh * s, top: y, left: x, position: 'absolute'
                     };
                     m.find('.multimediaHolder').css(css);
                 } else {
                     m.find('.multimediaHolder').css({
-                        position: "",
-                        overflow: '',
-                        width: '',
-                        height: '',
-                        top: '',
-                        left: ''
+                        position: "", overflow: '', width: '', height: '', top: '', left: ''
                     });
                 }
 
                 m.find('.multimediaScale').css({width: nw, height: nh, overflow: 'hidden'}).transform({
-                    scale: [s, s],
-                    origin: [0, 0]
+                    scale: [s, s], origin: [0, 0]
                 }).css('text-align', 'left');
                 break;
             case 'slideshow':
@@ -1013,9 +986,9 @@ FluidbookMenu.prototype = {
         }
 
         var captionHeight = 0;
-        m.find('.caption, .fixed').each(function () {
+        m.find('.caption, .fixed, .fonctions').each(function () {
             captionHeight += $(this).outerHeight();
-        })
+        });
 
         w = Math.min(maxWidth, w);
 
@@ -1066,8 +1039,7 @@ FluidbookMenu.prototype = {
 
         $("#popinOverlay>div").each(function () {
             $(this).css({
-                top: (hh - $(this).outerHeight()) / 2,
-                left: (ww - $(this).outerWidth()) / 2
+                top: (hh - $(this).outerHeight()) / 2, left: (ww - $(this).outerWidth()) / 2
             });
         });
 
@@ -1087,10 +1059,7 @@ FluidbookMenu.prototype = {
             var w = $(window).width() - 200;
             var h = 30;
             $(this).css({
-                height: h,
-                width: w,
-                display: 'block',
-                margin: '40px auto'
+                height: h, width: w, display: 'block', margin: '40px auto'
             });
         });
     },
diff --git a/js/libs/fluidbook/menu/fluidbook.index.js b/js/libs/fluidbook/menu/fluidbook.index.js
index 4ae482d2..c8497ff6 100644
--- a/js/libs/fluidbook/menu/fluidbook.index.js
+++ b/js/libs/fluidbook/menu/fluidbook.index.js
@@ -99,7 +99,25 @@ FluidbookIndex.prototype = {
             res += '<div class="indexViewMessage">' + this.fluidbook.settings.indexMessage + '</div>';
         }
 
-        res += '<nav class="indexViewHolder">';
+        res += this.getPages(height, pageLinks, bookmarks, mobileFirst);
+        return res;
+    },
+
+    getPages: function (height, pageLinks, bookmarks, mobileFirst) {
+        if (pageLinks === undefined) {
+            pageLinks = true;
+        }
+        if (bookmarks === undefined) {
+            bookmarks = true;
+        }
+        if (height === undefined) {
+            height = 'auto';
+        }
+        if (mobileFirst === undefined) {
+            mobileFirst = this.fluidbook.mobilefirst.enabled;
+        }
+
+        var res = '<nav class="indexViewHolder">';
         var j = 0;
         var ix1 = '', ix2 = '', ix = '';
         var c = '';
diff --git a/style/bookmarks.less b/style/bookmarks.less
new file mode 100644
index 00000000..28484491
--- /dev/null
+++ b/style/bookmarks.less
@@ -0,0 +1,187 @@
+a.bookmark {
+  &.hidden {
+    visibility: hidden;
+  }
+}
+
+/* Bookmarks */
+.bookmark {
+  #links & {
+    z-index: 4999;
+    width: @bookmark-corner-size;
+    height: @bookmark-corner-size;
+    background-size: @bookmark-corner-size @bookmark-corner-size;
+
+    .mobilefirst & {
+      @media @large {
+        @w: unit(@bookmark-corner-size*0.5, px);
+        width: @w;
+        height: @w;
+        background-size: @w;
+      }
+    }
+
+    &.left {
+      left: @bookmark-corner-offset;
+
+      .ltr .portrait #fluidbook & {
+        right: @bookmark-corner-offset+@book-page-width;
+        left: auto;
+      }
+    }
+
+    &.right {
+      right: @bookmark-corner-offset;
+    }
+  }
+
+  svg {
+    color: @bookmark-star-disabled-color;
+  }
+
+  &[data-enabled] {
+    svg {
+      color: @bookmark-star-enabled-color;
+    }
+  }
+
+  background-repeat: no-repeat;
+  position: absolute;
+  background-size: cover;
+  top: 0px;
+  opacity: 0.01;
+  display: block;
+  cursor: pointer;
+
+  &[data-enabled], &:hover, &:focus, &.permanent {
+    opacity: 1 !important;
+    transition: none;
+  }
+}
+
+.bookmark.left {
+  left: 0;
+}
+
+.bookmark.right,
+.ltr .portrait #fluidbook .bookmark.left {
+  right: 0;
+
+  svg {
+    transform: scaleX(-1);
+  }
+}
+
+.landscape .bookmark.left {
+  left: 0px;
+}
+
+.bookmark.right {
+  right: 0px;
+}
+
+.mview {
+  &[data-menu="bookmarks-help"] {
+    .content {
+      padding: 40px 70px 100px 70px;
+
+      p {
+        margin-bottom: 60px;
+        font-size: 0.9em;
+        text-align: center;
+      }
+
+      @w: 147px;
+      @h: unit((@w/@book-page-ratio), px);
+
+      .doubleThumb {
+        position: relative;
+        width: @w*2;
+        height: @h;
+        margin: 0 auto;
+
+        .thumb {
+          width: @w;
+          height: @h;
+
+          .pageholder {
+            max-height: @h;
+          }
+
+          &:before {
+            display: none;
+          }
+
+          &.left {
+            margin-right: @w;
+          }
+
+          &.right {
+            left: @w;
+
+            .circle {
+              left: auto;
+              right: -24px;
+            }
+          }
+
+          a.bookmark {
+            pointer-events: none;
+          }
+
+          img {
+            position: relative;
+
+            width: @w;
+            height: @w/@book-page-ratio;
+          }
+
+          .circle {
+            position: absolute;
+            z-index: 1;
+            top: -24px;
+            left: -24px;
+            width: 100px;
+            height: 100px;
+            background-color: @menu-background;
+            border: 2px solid #fff;
+            border-radius: 50%;
+          }
+
+          .bookmark {
+            width: 60px;
+            height: 60px;
+            z-index: 2;
+          }
+        }
+      }
+    }
+  }
+}
+
+.indexView {
+  &.bookmarkView[data-size="small"] {
+    @padding: @menu-padding - 10px;
+    text-align: left;
+    width: 100%;
+    padding: 20px @padding 0;
+
+    .doubleThumb {
+      width: @thumb-width;
+
+      .rtl & {
+        position: relative;
+        left: 108px;
+      }
+    }
+  }
+}
+
+.thumb {
+
+  .bookmark {
+    width: unit(@thumb-width*0.35, px);
+    height: unit(@thumb-width*0.35, px);
+    z-index: 3;
+  }
+}
\ No newline at end of file
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 0dc96006..43e7bc63 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1049,11 +1049,6 @@ footer {
   }
 }
 
-a.bookmark {
-  &.hidden {
-    visibility: hidden;
-  }
-}
 
 /* Cart */
 .icon-cart {
@@ -1509,81 +1504,7 @@ html.ios body.portrait #interface {
   }
 }
 
-/* Bookmarks */
-.bookmark {
-  #links & {
-    z-index: 4999;
-    width: @bookmark-corner-size;
-    height: @bookmark-corner-size;
-    background-size: @bookmark-corner-size @bookmark-corner-size;
-
-    .mobilefirst & {
-      @media @large {
-        @w: unit(@bookmark-corner-size*0.5, px);
-        width: @w;
-        height: @w;
-        background-size: @w;
-      }
-    }
-
-    &.left {
-      left: @bookmark-corner-offset;
-
-      .ltr .portrait #fluidbook & {
-        right: @bookmark-corner-offset+@book-page-width;
-        left: auto;
-      }
-    }
-
-    &.right {
-      right: @bookmark-corner-offset;
-    }
-  }
-
-  svg {
-    color: @bookmark-star-disabled-color;
-  }
-
-  &[data-enabled] {
-    svg {
-      color: @bookmark-star-enabled-color;
-    }
-  }
-
-  background-repeat: no-repeat;
-  position: absolute;
-  background-size: cover;
-  top: 0px;
-  opacity: 0.01;
-  display: block;
-  cursor: pointer;
-
-  &[data-enabled], &:hover, &:focus, &.permanent {
-    opacity: 1 !important;
-    transition: none;
-  }
-}
-
-.bookmark.left {
-  left: 0;
-}
-
-.bookmark.right,
-.ltr .portrait #fluidbook .bookmark.left {
-  right: 0;
-
-  svg {
-    transform: scaleX(-1);
-  }
-}
-
-.landscape .bookmark.left {
-  left: 0px;
-}
-
-.bookmark.right {
-  right: 0px;
-}
+@import "bookmarks";
 
 @menu-padding: 30px;
 
@@ -1736,82 +1657,6 @@ html.ios body.portrait #interface {
     }
   }
 
-  &[data-menu="bookmarks-help"] {
-    .content {
-      padding: 40px 70px 100px 70px;
-
-      p {
-        margin-bottom: 60px;
-        font-size: 0.9em;
-        text-align: center;
-      }
-
-      @w: 147px;
-      @h: unit((@w/@book-page-ratio), px);
-
-      .doubleThumb {
-        position: relative;
-        width: @w*2;
-        height: @h;
-        margin: 0 auto;
-
-        .thumb {
-          width: @w;
-          height: @h;
-
-          .pageholder {
-            max-height: @h;
-          }
-
-          &:before {
-            display: none;
-          }
-
-          &.left {
-            margin-right: @w;
-          }
-
-          &.right {
-            left: @w;
-
-            .circle {
-              left: auto;
-              right: -24px;
-            }
-          }
-
-          a.bookmark {
-            pointer-events: none;
-          }
-
-          img {
-            position: relative;
-
-            width: @w;
-            height: @w/@book-page-ratio;
-          }
-
-          .circle {
-            position: absolute;
-            z-index: 1;
-            top: -24px;
-            left: -24px;
-            width: 100px;
-            height: 100px;
-            background-color: @menu-background;
-            border: 2px solid #fff;
-            border-radius: 50%;
-          }
-
-          .bookmark {
-            width: 60px;
-            height: 60px;
-            z-index: 2;
-          }
-        }
-      }
-    }
-  }
 
   .zoomhdHolder {
     position: relative;
@@ -1896,10 +1741,8 @@ html.ios body.portrait #interface {
       height: 45px;
       text-align: center;
     }
-  }
 
-  &.fs {
-    .fonctions {
+    @media @small {
       padding: 0 @menu-padding @menu-padding @menu-padding;
 
       a {
@@ -2024,21 +1867,6 @@ form input[type="text"], form input[type="email"] {
     }
   }
 
-  &.bookmarkView {
-    @padding: @menu-padding - 10px;
-    text-align: left;
-    width: 100%;
-    padding: 20px @padding 0;
-
-    .doubleThumb {
-      width: @thumb-width;
-
-      .rtl & {
-        position: relative;
-        left: 108px;
-      }
-    }
-  }
 
 }
 
@@ -2124,11 +1952,6 @@ form input[type="text"], form input[type="email"] {
   width: @thumb-width;
   height: @thumb-height;
 
-  .bookmark {
-    width: unit(@thumb-width*0.35, px);
-    height: unit(@thumb-width*0.35, px);
-    z-index: 3;
-  }
 
   .pageholder {
     overflow: hidden;