]> _ Git - fluidbook-html5.git/commitdiff
fix #1384 @1.5
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 4 May 2017 16:54:42 +0000 (18:54 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 4 May 2017 16:54:42 +0000 (18:54 +0200)
js/libs/fluidbook/fluidbook.links.js
js/libs/fluidbook/fluidbook.loader.js
style/fluidbook.css
style/fluidbook.less

index 12825271e157f08afaffd51c2581ee2560e84029..0930ea87a0f5c8a416fe0dd9e30155b3a64b505c 100644 (file)
@@ -16,6 +16,7 @@ FluidbookLinks.prototype = {
         // ToDo: consider re-using existing popinOverlay div?
         $('body').append('<div id="zoomPopupOverlay"></div><div id="zoomPopupWrapper"><a href="#" class="zoomPopupClose"><svg viewBox="0 0 20 20"><use xlink:href="#close"></use></svg></a></div>');
 
+
         $(document).on('click touchend', '.zoomPopup', function (e) {
             e.preventDefault();
             $this.zoomLink(this);
index 52d595ac6fd59be591100408f8b08a31afce0c3a..f964709c3be1e82d0dbf52fd4aec18b47a054f36 100644 (file)
 function FluidbookLoader(fluidbook) {
-       this.fluidbook = fluidbook;
-       this.texts = [];
-       this.backgrounds = [];
-       this.links = [];
-       this.toPreload = [];
-       this.numPreload = 6;
-       this.imagesErrors = [];
+    this.fluidbook = fluidbook;
+    this.texts = [];
+    this.backgrounds = [];
+    this.links = [];
+    this.toPreload = [];
+    this.numPreload = 6;
+    this.imagesErrors = [];
 }
 
 FluidbookLoader.prototype = {
-       canPreload: function() {
-               this.numPreload = 6;
-               if (this.fluidbook.imagesVersion) {
-                       this.numPreload += 6;
-               }
-               if (this.fluidbook.datas.phonegap) {
-                       this.numPreload = 6;
-               }
-       },
-       preloadPagesBeforeTransition: function(pages, callback) {
-               var $this = this;
-               var $pages = pages.slice(0);
-               if ($pages.length == 0) {
-                       callback();
-                       return;
-               }
+    canPreload: function () {
+        this.numPreload = 6;
+        if (this.fluidbook.imagesVersion) {
+            this.numPreload += 6;
+        }
+        if (this.fluidbook.datas.phonegap) {
+            this.numPreload = 6;
+        }
+    },
+    preloadPagesBeforeTransition: function (pages, callback) {
+        var $this = this;
+        var $pages = pages.slice(0);
+        if ($pages.length == 0) {
+            callback();
+            return;
+        }
 
-               var $callback = callback;
-               var $page = $pages.shift();
-               if ($page > this.fluidbook.datas.pages || $page < 1) {
-                       $this.preloadPagesBeforeTransition($pages, $callback);
-                       return;
-               }
-               this._loadBackground($page, function() {
-                       if ($this.fluidbook.vectorsVersion) {
-                               $this._loadTexts($page, function() {
-                                       $this.preloadPagesBeforeTransition($pages, $callback);
-                               });
-                       } else {
-                               $this.preloadPagesBeforeTransition($pages, $callback);
-                       }
-               })
-       },
-       preloadPages: function() {
-               if (this.toPreload.length == 0) {
-                       return;
-               }
+        var $callback = callback;
+        var $page = $pages.shift();
+        if ($page > this.fluidbook.datas.pages || $page < 1) {
+            $this.preloadPagesBeforeTransition($pages, $callback);
+            return;
+        }
+        this._loadBackground($page, function () {
+            if ($this.fluidbook.vectorsVersion) {
+                $this._loadTexts($page, function () {
+                    $this.preloadPagesBeforeTransition($pages, $callback);
+                });
+            } else {
+                $this.preloadPagesBeforeTransition($pages, $callback);
+            }
+        })
+    },
+    preloadPages: function () {
+        if (this.toPreload.length == 0) {
+            return;
+        }
 
-               var $this = this;
-               var preloadingPage = this.toPreload.shift();
+        var $this = this;
+        var preloadingPage = this.toPreload.shift();
 
-               if (this.backgrounds[preloadingPage] != undefined) {
-                       $this.preloadPages();
-                       return;
-               }
+        if (this.backgrounds[preloadingPage] != undefined) {
+            $this.preloadPages();
+            return;
+        }
 
-               this.backgrounds[preloadingPage] = this.loadImage(this.getBackgroundURL(preloadingPage), null, null, null, function() {
-                       if ($this.fluidbook.vectorTexts) {
-                               $this._loadTexts(preloadingPage, function() {
-                                       $this.preloadPages();
-                               });
-                       } else {
-                               $this.preloadPages();
-                       }
-               });
-       },
-       preloadAround: function(page) {
-               if (this.numPreload == 0) {
-                       this.cleanPreloaded();
-                       return;
-               }
-               var min = Math.max(1, page - 1);
-               var max = Math.min(min + this.numPreload, this.fluidbook.datas.pages);
-               min = max - (this.numPreload);
-               this.toPreload = [];
-               for (var i = min; i <= max; i++) {
-                       this.toPreload.push(i);
-               }
+        this.backgrounds[preloadingPage] = this.loadImage(this.getBackgroundURL(preloadingPage), null, null, null, function () {
+            if ($this.fluidbook.vectorTexts) {
+                $this._loadTexts(preloadingPage, function () {
+                    $this.preloadPages();
+                });
+            } else {
+                $this.preloadPages();
+            }
+        });
+    },
+    preloadAround: function (page) {
+        if (this.numPreload == 0) {
+            this.cleanPreloaded();
+            return;
+        }
+        var min = Math.max(1, page - 1);
+        var max = Math.min(min + this.numPreload, this.fluidbook.datas.pages);
+        min = max - (this.numPreload);
+        this.toPreload = [];
+        for (var i = min; i <= max; i++) {
+            this.toPreload.push(i);
+        }
 
-               this.cleanPreloaded();
-               this.preloadPages();
-       },
-       cleanPreloaded: function() {
-               for (var i = 1; i <= this.fluidbook.datas.pages; i++) {
-                       if (this.backgrounds[i] != undefined && this.toPreload.indexOf(i) == -1) {
-                               this.deletePage(i);
-                       }
-               }
-       },
-       deletePage: function(page) {
-               delete this.backgrounds[page];
-               delete this.texts[page];
-               delete this.links[page];
-       },
-       setContentsInDoublePage: function(doublePage, pages, immediate, callback) {
-               var $this = this;
+        this.cleanPreloaded();
+        this.preloadPages();
+    },
+    cleanPreloaded: function () {
+        for (var i = 1; i <= this.fluidbook.datas.pages; i++) {
+            if (this.backgrounds[i] != undefined && this.toPreload.indexOf(i) == -1) {
+                this.deletePage(i);
+            }
+        }
+    },
+    deletePage: function (page) {
+        delete this.backgrounds[page];
+        delete this.texts[page];
+        delete this.links[page];
+    },
+    setContentsInDoublePage: function (doublePage, pages, immediate, callback) {
+        var $this = this;
 
-               var leftPage = pages[0];
-               var rightPage = pages[1];
+        var leftPage = pages[0];
+        var rightPage = pages[1];
 
-               if (!immediate) {
-                       this.loadLeftPage(leftPage, $(doublePage), function() {
-                               $this.loadRightPage(rightPage, $(doublePage), callback);
-                       });
-               } else {
-                       this.loadLeftPage(leftPage, $(doublePage), function() {
-                       })
-                       this.loadRightPage(rightPage, $(doublePage), function() {
-                       });
-                       callback();
-               }
-       },
-       loadPage: function(pageNr, doublePage, position, callback) {
-               // Si une page de gauche existe déjà dans la double page, on la retire
-               $(doublePage).find('.' + position).each(function() {
-                       if ($(this).attr('id') != 'page_' + pageNr || pageNr == 0) {
-                               $(this).remove();
-                       }
-               })
+        if (!immediate) {
+            this.loadLeftPage(leftPage, $(doublePage), function () {
+                $this.loadRightPage(rightPage, $(doublePage), callback);
+            });
+        } else {
+            this.loadLeftPage(leftPage, $(doublePage), function () {
+            })
+            this.loadRightPage(rightPage, $(doublePage), function () {
+            });
+            callback();
+        }
+    },
+    loadPage: function (pageNr, doublePage, position, callback) {
+        // Si une page de gauche existe déjà dans la double page, on la retire
+        $(doublePage).find('.' + position).each(function () {
+            if ($(this).attr('id') != 'page_' + pageNr || pageNr == 0) {
+                $(this).remove();
+            }
+        })
 
-               var page;
-               var shade;
-               // Si la page existe déjà, on la place à la bonne position et on l'affiche
-               if ($("#page_" + pageNr).length > 0) {
-                       page = $("#page_" + pageNr);
-                       if ($(doublePage).find("#page_" + pageNr).length == 0) {
-                               $(doublePage).append(page);
-                       }
-                       if (!$(page).hasClass(position)) {
-                               if (position == 'left') {
-                                       $(page).removeClass('right');
-                               }
-                               else {
-                                       $(page).removeClass('left');
-                               }
-                               $(page).addClass(position);
-                       }
-                       if (!$(page).is(':visible')) {
-                               $(page).show();
-                       }
-                       shade = 'shade' + position;
-                       if (this.fluidbook.datas.pageReflection) {
-                               shade += '-reflet';
-                       }
-                       shade += '.png';
+        var page;
+        var shade;
+        // Si la page existe déjà, on la place à la bonne position et on l'affiche
+        if ($("#page_" + pageNr).length > 0) {
+            page = $("#page_" + pageNr);
+            if ($(doublePage).find("#page_" + pageNr).length == 0) {
+                $(doublePage).append(page);
+            }
+            if (!$(page).hasClass(position)) {
+                if (position == 'left') {
+                    $(page).removeClass('right');
+                }
+                else {
+                    $(page).removeClass('left');
+                }
+                $(page).addClass(position);
+            }
+            if (!$(page).is(':visible')) {
+                $(page).show();
+            }
+            shade = 'shade' + position;
+            if (this.fluidbook.datas.pageReflection) {
+                shade += '-reflet';
+            }
+            shade += '.png';
 
-                       $(page).children(".shade").html(this.loadImage('images/' + shade, this.fluidbook.datas.width / 4, this.fluidbook.datas.height));
-                       $(page).children('.clinks').html(this.fluidbook.datas.clinks[pageNr]);
-                       this.fluidbook.highlightSearchTerms(pageNr);
-                       callback();
-                       return;
-               }
+            $(page).children(".shade").html(this.loadImage('images/' + shade, this.fluidbook.datas.width / 4, this.fluidbook.datas.height));
+            $(page).children('.clinks').html(this.fluidbook.datas.clinks[pageNr]);
+            this.fluidbook.highlightSearchTerms(pageNr);
+            callback();
+            return;
+        }
 
-               this.fluidbook.initPage(pageNr, doublePage, position);
-               page = $("#page_" + pageNr);
-               $(doublePage).append(page);
-               $(page).show();
-               $(page).addClass(position);
-               var back = $(page).children(".background")[0];
-               this.loadDatas(pageNr, callback);
-               $(page).addClass(position);
+        this.fluidbook.initPage(pageNr, doublePage, position);
+        page = $("#page_" + pageNr);
+        $(doublePage).append(page);
+        $(page).show();
+        $(page).addClass(position);
+        var back = $(page).children(".background")[0];
+        this.loadDatas(pageNr, callback);
+        $(page).addClass(position);
 
-               shade = 'shade' + position;
-               if (this.fluidbook.datas.pageReflection) {
-                       shade += '-reflet';
-               }
-               shade += '.png';
-               $(page).children('.clinks').html(this.fluidbook.datas.clinks[pageNr]);
-               $(page).children(".shade").html(this.loadImage('images/' + shade, this.fluidbook.datas.width / 4, this.fluidbook.datas.height));
-       },
-       loadLeftPage: function(page, doublePage, callback) {
-               if (page > 0 && page <= this.fluidbook.datas.pages) {
-                       this.loadPage(page, doublePage, 'left', callback);
-               } else {
-                       $(doublePage).find('.left').remove();
-                       callback();
-               }
-       },
-       loadRightPage: function(page, doublePage, callback) {
-               if (!this.fluidbook.displayOnePage && page <= this.fluidbook.datas.pages && page > 0) {
-                       this.loadPage(page, doublePage, 'right', callback);
-               } else {
-                       $(doublePage).find('.right').remove();
-                       callback();
-               }
-       },
-       getBackgroundURL: function(page) {
-               var prefix = 'p';
-               if (this.fluidbook.imagesVersion) {
-                       prefix = 't';
-               }
+        shade = 'shade' + position;
+        if (this.fluidbook.datas.pageReflection) {
+            shade += '-reflet';
+        }
+        shade += '.png';
+        $(page).children('.clinks').html(this.fluidbook.datas.clinks[pageNr]);
+        $(page).children(".shade").html(this.loadImage('images/' + shade, this.fluidbook.datas.width / 4, this.fluidbook.datas.height));
+    },
+    loadLeftPage: function (page, doublePage, callback) {
+        if (page > 0 && page <= this.fluidbook.datas.pages) {
+            this.loadPage(page, doublePage, 'left', callback);
+        } else {
+            $(doublePage).find('.left').remove();
+            callback();
+        }
+    },
+    loadRightPage: function (page, doublePage, callback) {
+        if (!this.fluidbook.displayOnePage && page <= this.fluidbook.datas.pages && page > 0) {
+            this.loadPage(page, doublePage, 'right', callback);
+        } else {
+            $(doublePage).find('.right').remove();
+            callback();
+        }
+    },
+    getBackgroundURL: function (page) {
+        var prefix = 'p';
+        if (this.fluidbook.imagesVersion) {
+            prefix = 't';
+        }
 
-               return 'data/background/' + this.fluidbook.support.resolution + '/' + prefix + page + '.jpg';
-       },
-       getTextsURL: function(page) {
-               return 'data/contents/p' + page + '.svg';
-       },
-       setBackground: function(page, callback) {
-               var $this = this;
-               var back = $("#page_" + page + ' .background');
-               this._loadBackground(page, function() {
-                       $(back).addClass('r' + $this.fluidbook.support.resolution);
-                       $(back).append($this.backgrounds[page]);
-               });
-       },
-       _loadBackground: function(page, callback) {
-               if (this.backgrounds[page] != undefined) {
-                       callback();
-               } else {
-                       var $this = this;
-                       if (window.gal != undefined && !OFFLINEAPP) {
-                               window.gal.downloadAndCall('content_' + page, function() {
-                                       $this.__loadBackground(page, callback);
-                               }, 250);
-                       } else {
-                               this.__loadBackground(page, callback);
-                       }
-               }
-       },
-       __loadBackground: function(page, callback) {
-               var url = this.getBackgroundURL(page);
-               this.backgrounds[page] = this.loadImage(url, null, null, null, callback);
-       },
-       loadTexts: function(pageNr, callback) {
-               if (this.fluidbook.imagesVersion) {
-                       callback();
-                       return;
-               }
+        return 'data/background/' + this.fluidbook.support.resolution + '/' + prefix + page + '.jpg';
+    },
+    getTextsURL: function (page) {
+        return 'data/contents/p' + page + '.svg';
+    },
+    setBackground: function (page, callback) {
+        var $this = this;
+        var back = $("#page_" + page + ' .background');
+        this._loadBackground(page, function () {
+            $(back).addClass('r' + $this.fluidbook.support.resolution);
+            $(back).append($this.backgrounds[page]);
+        });
+    },
+    _loadBackground: function (page, callback) {
+        if (this.backgrounds[page] != undefined) {
+            callback();
+        } else {
+            var $this = this;
+            if (window.gal != undefined && !OFFLINEAPP) {
+                window.gal.downloadAndCall('content_' + page, function () {
+                    $this.__loadBackground(page, callback);
+                }, 250);
+            } else {
+                this.__loadBackground(page, callback);
+            }
+        }
+    },
+    __loadBackground: function (page, callback) {
+        var url = this.getBackgroundURL(page);
+        this.backgrounds[page] = this.loadImage(url, null, null, null, callback);
+    },
+    loadTexts: function (pageNr, callback) {
 
-               if (this.texts[pageNr] != undefined) {
-                       $("#page_" + pageNr + ' .texts').append(this.texts[pageNr]);
-                       callback();
-               } else {
-                       this._loadTexts(pageNr, function() {
-                               var content;
-                               content = this;
-                               $("#page_" + pageNr + ' .texts').append(content);
-                               callback();
-                       });
-               }
-       },
-       _loadTexts: function(pageNr, callback) {
-               var w = this.fluidbook.datas.width / 0.75;
-               var h = this.fluidbook.datas.height / 0.75;
+        if (this.fluidbook.imagesVersion) {
+            callback();
+            return;
+        }
 
-               this.texts[pageNr] = this.loadImage(this.getTextsURL(pageNr), w * 2, h * 2, 'image/svg+xml', callback);
-       },
-       loadDatas: function(pageNr, callback) {
-               var $this = this;
-               this.loadTexts(pageNr, function() {
-                       $this.setBackground(pageNr, callback);
-               });
-       },
-       getImage: function(src, width, height, type, callback) {
-               var img = this.loadImage(src, width, height, type, callback);
-               return $(img).get(0).outerHTML;
-       },
-       loadImage: function(src, width, height, type, callback) {
-               var img = new Image();
-               var $this = this;
-               if (callback && typeof callback == 'function') {
-                       $(img).one('load', function() {
-                               setTimeout(function() {
-                                       callback();
-                               }, 100);
-                       });
-               }
-               $(img).on('error', function() {
-                       $this.imagesErrors.push(this);
-                       setTimeout(function() {
-                               callback();
-                       }, 100);
-               });
-               img.src = src;
-               if (width != undefined && width != null) {
-                       img.width = width;
-               }
-               if (height != undefined && height != null) {
-                       img.height = height;
-               }
-               if (type != undefined && type != null) {
-                       img.type = type;
-               }
-               if (callback && typeof callback == 'function' && (img.complete || img.readyState == 'complete' || img.readyState == 4)) {
-                       setTimeout(function() {
-                               callback();
-                       }, 100);
-               }
+        var $this=this;
 
-               return $(img);
-       },
-       retryErrorImages: function() {
-               $(this.imagesErrors).each(function() {
-                       $(this).attr('src', $(this).attr('src'));
-               });
-               this.imagesErrors = [];
-       }
+        if (this.texts[pageNr] != undefined) {
+            $("#page_" + pageNr + ' .texts').append(this.texts[pageNr]);
+            callback();
+        } else {
+            this._loadTexts(pageNr, function () {
+                $("#page_" + pageNr + ' .texts').append($this.texts[pageNr]);
+                callback();
+            });
+        }
+    },
+    _loadTexts: function (pageNr, callback) {
+        var w = this.fluidbook.datas.width / 0.75;
+        var h = this.fluidbook.datas.height / 0.75;
+
+        console.log('_load texts ' + pageNr);
+
+        this.texts[pageNr] = this.loadImage(this.getTextsURL(pageNr), w, h, 'image/svg+xml', callback);
+    },
+    loadDatas: function (pageNr, callback) {
+        var $this = this;
+        this.loadTexts(pageNr, function () {
+            $this.setBackground(pageNr, callback);
+        });
+    },
+    getImage: function (src, width, height, type, callback) {
+        var img = this.loadImage(src, width, height, type, callback);
+        return $(img).get(0).outerHTML;
+    },
+    loadImage: function (src, width, height, type, callback) {
+        var img = new Image();
+        var $this = this;
+        if (callback && typeof callback == 'function') {
+            $(img).one('load', function () {
+                setTimeout(function () {
+                    console.log('loaded '+src);
+                    callback();
+                }, 10);
+            });
+        }
+        $(img).on('error', function () {
+            $this.imagesErrors.push(this);
+            setTimeout(function () {
+                console.log('error');
+                callback();
+            }, 10);
+        });
+        img.src = src;
+        if (width != undefined && width != null) {
+            img.width = width;
+        }
+        if (height != undefined && height != null) {
+            img.height = height;
+        }
+        if (type != undefined && type != null) {
+            img.type = type;
+        }
+        if (callback && typeof callback == 'function' && (img.complete || img.readyState == 'complete' || img.readyState == 4)) {
+            setTimeout(function () {
+                console.log('complete');
+                callback();
+            }, 10);
+        }
+
+        return $(img);
+    },
+    retryErrorImages: function () {
+        $(this.imagesErrors).each(function () {
+            $(this).attr('src', $(this).attr('src'));
+        });
+        this.imagesErrors = [];
+    }
 };
\ No newline at end of file
index 59a75272a4f79bcd4814b1a6e51de16c2c4d559a..34abb6b069fd3e5249611f865c52aad5aa248086 100644 (file)
@@ -106,10 +106,6 @@ html {
   height: 100%;
   touch-action: none;
 }
-a {
-  -ms-touch-action: manipulation;
-  touch-action: manipulation;
-}
 #main {
   position: relative;
   display: none;
@@ -208,6 +204,8 @@ a {
   position: absolute;
   top: 0px;
   left: 0px;
+  width: 100%;
+  height: 100%;
 }
 /* Espaces forcés */
 .page {
index 9794ac83c9b3d66438000f2fed09c700bd09e4fb..304bb861113d678fe6ac4e1924677fcc229fc718 100644 (file)
@@ -117,11 +117,6 @@ body, html {
        touch-action: none;
 }
 
-a {
-       -ms-touch-action: manipulation;
-       touch-action: manipulation;
-}
-
 #main {
        position: relative;
        display: none;
@@ -223,20 +218,20 @@ a {
 
 .background {
        background-repeat: no-repeat;
-}
-
-.background img {
-       width: 100%;
-       height: 100%;
+       img {
+               width: 100%;
+               height: 100%;
+       }
 }
 
 .texts {
-}
-
-.texts img, .texts object {
-       position: absolute;
-       top: 0px;
-       left: 0px;
+       img, object {
+               position: absolute;
+               top: 0px;
+               left: 0px;
+               width: 100%;
+               height: 100%;
+       }
 }
 
 /* Espaces forcés */