wip #2691 @6

diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 60efd4286089f0a240e9949db2238d008fd1c52c..2ad20689ce83937ccfe30eecb2e8f85c9b84beb8 100644 (file)
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -10,6 +10,8 @@ function FluidbookLoader(fluidbook) {
     this.shadeLeft = null;
     this.shadeRight = null;
     this.transitionPages = [];
+    this.thumbnails = [];
+    this.loadedThumbnails = [];
     this.cleanTimeout = null;
 
     this.init();
@@ -530,47 +532,105 @@ FluidbookLoader.prototype = {
         var img = this.loadImage(src, width, height, type, null, callback);
         return $(img).get(0).outerHTML;
     },
-    getThumbImage: function (page, div, shade, width) {
-        var returnHTML = false;
-        if (div === null || div == undefined) {
-            div = $('<div />');
-        }
-        if (width == undefined) {
-            width = 100;
-        }
 
-        left = ((page % 2 === 0) && this.fluidbook.l10n.ltr) || ((page % 2 == 1) && this.fluidbook.l10n.rtl);
-
-        var h = width * (this.fluidbook.datas.thumbHeight / 100);
+    checkLoadedThumbs: function () {
+        var res = this.loadedThumbnails.length === this.fluidbook.datas.pages;
+        console.log(this.loadedThumbnails, this.fluidbook.datas.pages, res);
+        return res;
+    },
 
-        var shadeImage = '';
-        var shadePosition = '';
-        var shadeSize = '';
+    preloadThumbs: function (callback) {
+        if (this.checkLoadedThumbs()) {
+            callback();
+            return;
+        }
+        $(this).one('thumbnails.loaded', function () {
+            callback();
+        });
+        var cb = function () {
 
-        if (shade) {
-            var p = '0%';
-            var i = 'right';
-            if (left) {
-                p = '100%';
-                i = 'left';
-            }
-            shadeImage = 'url("images/shadows/thumbnails/' + i + '.png"),';
+        };
+        for (var i = 1; i <= this.fluidbook.datas.pages; i++) {
+            this.loadThumb(i, cb);
+        }
+    },
 
-            shadePosition = p + " 0%,";
-            shadeSize = (width / 2) + 'px ' + h + 'px,';
+    loadThumb: function (pageNr, callback) {
+        if (this.thumbnails[pageNr] === undefined || this.thumbnails[pageNr] === null) {
+            return this._loadThumb(pageNr, callback);
         }
+        callback();
+        return this.thumbnails[pageNr];
+    },
 
-        var thumbImage = 'url("data/thumbnails/p' + page + '.jpg")';
-        var thumbPosition = '0px 0px';
-        var thumbSize = '100% 100%';
+    _loadThumb: function (pageNr, callback) {
+        if (pageNr <= 0 || pageNr > this.fluidbook.datas.pages) {
+            callback();
+            return;
+        }
+        var $this = this;
+        var cb = function () {
+            $this.loadedThumbnails.push(pageNr);
+            if ($this.checkLoadedThumbs()) {
+                $($this).trigger('thumbnails.loaded');
+            }
+            callback();
+        };
+        var img = this.loadImage('data/thumbnails/p' + pageNr + '.jpg', null, null, 'image/jpeg', pageNr, cb);
+        this.thumbnails[pageNr] = img;
+        return img;
+    },
 
-        $(div).css({
-            backgroundImage: shadeImage + thumbImage,
-            backgroundPosition: shadePosition + thumbPosition,
-            backgroundSize: shadeSize + thumbSize
-        }).addClass('img');
-        return $(div).get(0).outerHTML;
+    getThumbImage: function (page, shade) {
+        var s = '';
+        if (shade) {
+            s = '<div class="shade"></div>';
+        }
+        return this.loadThumb(page, function () {
+        }).get(0).outerHTML + s;
     },
+
+    // getThumbImage: function (page, div, shade, width) {
+    //     var returnHTML = false;
+    //     if (div === null || div == undefined) {
+    //         div = $('<div />');
+    //     }
+    //     if (width == undefined) {
+    //         width = 100;
+    //     }
+    //
+    //     left = ((page % 2 === 0) && this.fluidbook.l10n.ltr) || ((page % 2 == 1) && this.fluidbook.l10n.rtl);
+    //
+    //     var h = width * (this.fluidbook.datas.thumbHeight / 100);
+    //
+    //     var shadeImage = '';
+    //     var shadePosition = '';
+    //     var shadeSize = '';
+    //
+    //     if (shade) {
+    //         var p = '0%';
+    //         var i = 'right';
+    //         if (left) {
+    //             p = '100%';
+    //             i = 'left';
+    //         }
+    //         shadeImage = 'url("images/shadows/thumbnails/' + i + '.png"),';
+    //
+    //         shadePosition = p + " 0%,";
+    //         shadeSize = (width / 2) + 'px ' + h + 'px,';
+    //     }
+    //
+    //     var thumbImage = 'url("data/thumbnails/p' + page + '.jpg")';
+    //     var thumbPosition = '0px 0px';
+    //     var thumbSize = '100% 100%';
+    //
+    //     $(div).css({
+    //         backgroundImage: shadeImage + thumbImage,
+    //         backgroundPosition: shadePosition + thumbPosition,
+    //         backgroundSize: shadeSize + thumbSize
+    //     }).addClass('img');
+    //     return $(div).get(0).outerHTML;
+    // },
     loadImage: function (src, width, height, type, page, cb) {
         var $this = this;
         var callback = function () {

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index acff9cb7574b9cbb3264c660edc3e5e8c1976502..276afd9085d016395e8834ea18d3ee518cdee1cd 100644 (file)
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -362,15 +362,13 @@ FluidbookMenu.prototype = {
         view += '<div class="content">';
         view += '<p>' + message + '</p>';
         view += '<div class="visual">';
-        view += '<div class="doubleThumb"><div class="thumb left"><div class="img"></div><a href="#" class="bookmark left" data-enabled="enabled">' + getSpriteIcon('bookmark-corner') + '</a></div><div class="thumb right"><div class="img"></div><a href="#" class="bookmark right" data-enabled="enabled">' + getSpriteIcon('bookmark-corner') + '</a></div></div>';
+        view += '<div class="doubleThumb"><div class="thumb left">' + this.fluidbook.loader.getThumbImage(2, true) + '<a href="#" class="bookmark left" data-enabled="enabled">' + getSpriteIcon('bookmark-corner') + '</a></div><div class="thumb right">' + this.fluidbook.loader.getThumbImage(3, true) + '<a href="#" class="bookmark right" data-enabled="enabled">' + getSpriteIcon('bookmark-corner') + '</a></div></div>';
         view += '</div>';
         view += '';
         view += '</div>';
         view += '</div>';
         $("#view").append('<div class="mview" data-menu="bookmarks-help">' + view + '</div>');
 
-        this.fluidbook.loader.getThumbImage(2, $("#view .thumb.left .img"), true, 147);
-        this.fluidbook.loader.getThumbImage(3, $("#view .thumb.right .img"), true, 147);
 
         if (callback != undefined) {
             callback();
@@ -454,25 +452,8 @@ FluidbookMenu.prototype = {
         this.fluidbook.stats.track(14);
     },
     openIndex: function (title, group, closeAll, callback) {
-        var c = !closeAll ? ' one' : '';
-        var index = '<div class="caption">' + this.closeButton(c) + '<h2>' + title + '</h2></div>';
-        index += this.index.getView(group);
-        $("#view").append('<div class="mview" data-menu="index">' + index + '</div>');
-        // Mark current page
-        var cp = this.fluidbook.currentPage;
-
-        if (!this.fluidbook.singleMode) {
-            if (cp % 2 == 1) {
-                cp--;
-            }
-        }
-        $("#view").find('.doubleThumb[page="' + cp + '"]').addClass('here');
-        this.fluidbook.bookmarks.updateBookmarks();
-        if (callback != undefined) {
-            callback();
-        }
-    }
-    ,
+        this.index.openIndex(title,group,closeAll,callback);
+    },
     openArchives: function (title, callback) {
         var archives = '<div class="caption">' + this.closeButton() + '<h2>' + title + '</h2></div>';
         archives += '<div class="image" id="archivesview"><img src="data/images/' + this.fluidbook.datas.externalArchives + '" /><div class="links">' + this.fluidbook.datas.links.archives + '</div></div>';

diff --git a/js/libs/fluidbook/fluidbook.print.js b/js/libs/fluidbook/fluidbook.print.js
index 9491362ef4d445aa983dccdde6743ef9886a4b3a..0a994bf7ada6c5b3e31878c2c3019538024ab47b 100644 (file)
--- a/js/libs/fluidbook/fluidbook.print.js
+++ b/js/libs/fluidbook/fluidbook.print.js
@@ -102,7 +102,7 @@ FluidbookPrint.prototype = {
             view += '<label for="leftPage">';
             view += '<div class="doubleThumb">';
             view += '<div class="thumb left">';
-            view += this.fluidbook.loader.getThumbImage(leftPageNumber, null, true);
+            view += this.fluidbook.loader.getThumbImage(leftPageNumber,  true);
             view += '</div>'; // .thumb
             if (!isSinglePageMode && !isLastPage) {
                 view += '<div class="thumb right blank"><div class="blank-mask"></div></div>';
@@ -123,7 +123,7 @@ FluidbookPrint.prototype = {
                 view += '<div class="thumb left blank"><div class="blank-mask"></div></div>';
             }
             view += '<div class="thumb ' + (isFirstPage ? 'left' : 'right') + '">'; // Only shows 1 page when on first page
-            view += this.fluidbook.loader.getThumbImage(rightPageNumber, null, true);
+            view += this.fluidbook.loader.getThumbImage(rightPageNumber,  true);
             view += '</div>'; // .thumb
             view += '</div>'; // .doubleThumb
             view += '</label>';
@@ -138,10 +138,10 @@ FluidbookPrint.prototype = {
             view += '<label for="doublePage">';
             view += '<div class="doubleThumb">';
             view += '<div class="thumb left">';
-            view += this.fluidbook.loader.getThumbImage(leftPageNumber, null, true);
+            view += this.fluidbook.loader.getThumbImage(leftPageNumber, true);
             view += '</div>';
             view += '<div class="thumb right">';
-            view += this.fluidbook.loader.getThumbImage(rightPageNumber, null, true);
+            view += this.fluidbook.loader.getThumbImage(rightPageNumber, true);
             view += '</div>'; // .thumb
             view += '</div>'; // .doubleThumb
             view += '</label>';
@@ -156,7 +156,7 @@ FluidbookPrint.prototype = {
             view += '<label for="allPages">';
             view += '<div class="doubleThumb">';
             view += '<div class="thumb left">';
-            view += this.fluidbook.loader.getThumbImage(1, null, true);
+            view += this.fluidbook.loader.getThumbImage(1,  true);
             view += '</div>'; // .thumb
             view += '</div>'; // .doubleThumb
             view += '</label>';

diff --git a/js/libs/fluidbook/fluidbook.slider.js b/js/libs/fluidbook/fluidbook.slider.js
index 8153cb5462b7ba3b2fb1fa6f2dddcb5ac1cfaef3..1ef8e9b5b8d9afd4c2a06ae724f2804a7cbdb8b6 100644 (file)
--- a/js/libs/fluidbook/fluidbook.slider.js
+++ b/js/libs/fluidbook/fluidbook.slider.js
@@ -195,11 +195,11 @@ FluidbookSlider.prototype = {
         var left = 0;
         var right = 0;
         var single = false;
-        if (this.fluidbook.resize.orientation == 'portrait') {
+        if (this.fluidbook.resize.orientation === 'portrait') {
             single = true;
             left = page;
         } else {
-            if (page % 2 == 1) {
+            if (page % 2 === 1) {
                 page--;
             }
             if (page > 0) {
@@ -247,8 +247,7 @@ FluidbookSlider.prototype = {
         thumb.find('.bookmark').attr('data-page', page);
         if (page > 0 && page <= this.fluidbook.contentlock.getMaxPage()) {
             thumb.css('visibility', 'visible');
-            this.fluidbook.loader.getThumbImage(page, thumb.find('.img'), shade);
-            thumb.find('a').attr('href', '#').attr('data-page', page);
+            thumb.find('a:not(.bookmark)').attr('href', '#').attr('data-page', page).html(this.fluidbook.loader.getThumbImage(page, shade));
             thumb.find('.number').text(this.fluidbook.physicalToVirtual(page));
         } else {
             thumb.css('visibility', 'hidden');

diff --git a/js/libs/fluidbook/menu/fluidbook.index.js b/js/libs/fluidbook/menu/fluidbook.index.js
index 2768cbe146ef35ffb87637cec3c9f6d710886640..0b454eeb2cb75233da0a534649f713744b1f699c 100644 (file)
--- a/js/libs/fluidbook/menu/fluidbook.index.js
+++ b/js/libs/fluidbook/menu/fluidbook.index.js
@@ -22,6 +22,38 @@ FluidbookIndex.prototype = {
         return this.fluidbook.bookmarks.getIndex(true, group);
     },
 
+    preloadThumbs: function (callback) {
+        this.fluidbook.loader.preloadThumbs(callback);
+    },
+
+    openIndex: function (title, group, closeAll, callback) {
+        var $this = this;
+        this.fluidbook.displayLoader();
+        this.preloadThumbs(function () {
+            $this._openIndex(title, group, closeAll, callback);
+        });
+    },
+
+    _openIndex: function (title, group, closeAll, callback) {
+        var c = !closeAll ? ' one' : '';
+        var index = '<div class="caption">' + this.fluidbook.menu.closeButton(c) + '<h2>' + title + '</h2></div>';
+        index += this.getView(group);
+        $("#view").append('<div class="mview" data-menu="index">' + index + '</div>');
+        // Mark current page
+        var cp = this.fluidbook.currentPage;
+
+        if (!this.fluidbook.singleMode) {
+            if (cp % 2 === 1) {
+                cp--;
+            }
+        }
+        $("#view").find('.doubleThumb[page="' + cp + '"]').addClass('here');
+        this.fluidbook.bookmarks.updateBookmarks();
+        if (callback != undefined) {
+            callback();
+        }
+    },
+
     getNormalView: function () {
         if (this.normalHTML == '') {
             this.normalHTML += '<div class="content"><div id="indexView">';
@@ -62,7 +94,7 @@ FluidbookIndex.prototype = {
                 }
 
                 if (i > 0) {
-                    ix1 += '<div class="thumb ' + s1 + '"><a href="#/page/' + i + '">' + this.fluidbook.loader.getThumbImage(i, null, true) + '</a><span class="number">' + this.fluidbook.physicalToVirtual(i) + '</span>';
+                    ix1 += '<div class="thumb ' + s1 + '"><a href="#/page/' + i + '">' + this.fluidbook.loader.getThumbImage(i, true) + '</a><span class="number">' + this.fluidbook.physicalToVirtual(i) + '</span>';
                     if (this.fluidbook.bookmarks.enabled) {
                         ix1 += this.fluidbook.bookmarks.getBookmarkForPage(i, true);
                     }
@@ -81,16 +113,16 @@ FluidbookIndex.prototype = {
                 }
                 if (!this.singleMode) {
 
-                if (j <= this.fluidbook.contentlock.getMaxPage()) {
-                    ix2 += '<div class="thumb ' + s1 + '"><a href="#/page/' + j + '">' + this.fluidbook.loader.getThumbImage(j, null, true) + '</a><span class="number">' + this.fluidbook.physicalToVirtual(j) + '</span>';
-                    if (this.fluidbook.bookmarks.enabled) {
-                        ix2 += this.fluidbook.bookmarks.getBookmarkForPage(j, true);
+                    if (j <= this.fluidbook.contentlock.getMaxPage()) {
+                        ix2 += '<div class="thumb ' + s1 + '"><a href="#/page/' + j + '">' + this.fluidbook.loader.getThumbImage(j, true) + '</a><span class="number">' + this.fluidbook.physicalToVirtual(j) + '</span>';
+                        if (this.fluidbook.bookmarks.enabled) {
+                            ix2 += this.fluidbook.bookmarks.getBookmarkForPage(j, true);
+                        }
+                        ix2 += '</div>';
+                        pages.push(j);
+                    } else {
+                        c = ' simple ' + s2;
                     }
-                    ix2 += '</div>';
-                    pages.push(j);
-                } else {
-                    c = ' simple ' + s2;
-                }
 
                     if (j == 1) {
                         pages.unshift(0);

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 8a6444e48cbeed1f7cb7a84692759408a2de0797..b7f410d831238e816572fb02bbf91f3aedaf4947 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1452,14 +1452,17 @@ html.ios body.portrait #interface {
       }
 
       @w: 147px;
+      @h: unit(@w/@book-page-ratio, px);
 
       .doubleThumb {
         position: relative;
         width: @w*2;
-        height: @w/@book-page-ratio;
+        height: @h;
         margin: 0 auto;
 
         .thumb {
+          width: @w;
+          height: @h;
 
           &:before {
             display: none;
@@ -1796,27 +1799,49 @@ form input[type="text"], form input[type="email"] {
 }
 
 .thumb {
+  @thumb-width: 100px;
   position: absolute;
+  width: @thumb-width;
+  height: @thumb-height;
 
   .bookmark {
-    width: 35px;
-    height: 35px;
-    z-index: 2;
+    width: unit(@thumb-width*0.35, px);
+    height: unit(@thumb-width*0.35, px);
+    z-index: 3;
   }
 
-  .img {
-    width: 100px;
-    height: @thumb-height;
+  img {
+    width: 100%;
+    height: 100%;
     background-color: #fff;
-    position: relative;
+    position: absolute;
     z-index: 1;
-    //background-blend-mode: normal, overlay;
-    // Fix #2631
-    //.android.chrome & {
-    //  background-blend-mode: normal, normal;
-    //}
+    top: 0;
+    left: 0;
+  }
 
+  .shade {
+    position: absolute;
+    z-index: 2;
+    width: 33%;
+    height: 100%;
+    background-size: 100% 100%;
     background-repeat: no-repeat;
+    background-position: 0 0;
+    top: 0;
+  }
+
+  &.left {
+    .shade {
+      left: 67%;
+      background-image: url("../images/shadows/thumbnails/left.png");
+    }
+  }
+
+  &.right {
+    .shade {
+      background-image: url("../images/shadows/thumbnails/right.png");
+    }
   }
 
   .number {
@@ -1824,11 +1849,13 @@ form input[type="text"], form input[type="email"] {
     display: block;
     margin: 0;
     padding: 5px 0 0 0;
-    max-width: 100px;
-    position: relative;
+    width: @thumb-width;
+    position: absolute;
     z-index: 1;
     font-size: 14px;
-    line-height: 1;
+    line-height: 2;
+    left: 0;
+    top: unit(@thumb-height - 7, px);
   }
 
   &.right {