wait #3202 @6

diff --git a/js/libs/fluidbook/fluidbook.background.js b/js/libs/fluidbook/fluidbook.background.js
index 80ac5244bfedb7e1bb4bcdfa716edfb5818a0c78..d51079986d467209fed3d8ad7c96444a6c73bd91 100644 (file)
--- a/js/libs/fluidbook/fluidbook.background.js
+++ b/js/libs/fluidbook/fluidbook.background.js
@@ -7,7 +7,7 @@ function FluidbookBackground(fluidbook) {
 FluidbookBackground.prototype = {
     init: function () {
         if (this.fluidbook.datas.links.background !== undefined
-            && (this.fluidbook.datas.repeat !== Fluidbook.REPEAT || this.fluidbook.datas.tabsHTML5 !== '')
+            && (this.fluidbook.datas.repeat !== Fluidbook.REPEAT || this.fluidbook.tabs.hasTabs())
             && this.fluidbook.datas.links.background !== ''
             && this.fluidbook.datas.mobileIgnoreBackgroundLinks === false) {
 
@@ -21,32 +21,32 @@ FluidbookBackground.prototype = {
         }
 
         // Don't scale links if there is tabs (tabs have their own resize process)
-        if ($("#background").find('.tabslink').length > 0) {
+        if (this.fluidbook.tabs.hasTabs()) {
             return;
         }
 
         var left, top, iw, ih;
 
-        if (this.fluidbook.datas.backgroundImageDimensions == undefined) {
+        if (this.fluidbook.datas.backgroundImageDimensions === undefined) {
 
-        } else if (this.fluidbook.datas.repeat == Fluidbook.NONE) {
+        } else if (this.fluidbook.datas.repeat === Fluidbook.NONE) {
             iw = this.fluidbook.datas.backgroundImageDimensions.width;
             ih = this.fluidbook.datas.backgroundImageDimensions.height;
 
-            if (this.fluidbook.datas.backgroundHAlign == Fluidbook.LEFT) {
+            if (this.fluidbook.datas.backgroundHAlign === Fluidbook.LEFT) {
                 left = 0
-            } else if (this.fluidbook.datas.backgroundHAlign == Fluidbook.RIGHT) {
+            } else if (this.fluidbook.datas.backgroundHAlign === Fluidbook.RIGHT) {
                 left = w - iw;
-            } else if (this.fluidbook.datas.backgroundHAlign == Fluidbook.CENTER) {
+            } else if (this.fluidbook.datas.backgroundHAlign === Fluidbook.CENTER) {
                 left = (w - iw) / 2;
             }
 
 
-            if (this.fluidbook.datas.backgroundVAlign == Fluidbook.TOP) {
+            if (this.fluidbook.datas.backgroundVAlign === Fluidbook.TOP) {
                 top = 0
-            } else if (this.fluidbook.datas.backgroundVAlign == Fluidbook.BOTTOM) {
+            } else if (this.fluidbook.datas.backgroundVAlign === Fluidbook.BOTTOM) {
                 top = h - ih;
-            } else if (this.fluidbook.datas.backgroundVAlign == Fluidbook.MIDDLE) {
+            } else if (this.fluidbook.datas.backgroundVAlign === Fluidbook.MIDDLE) {
                 top = (h - ih) / 2;
             }
 
@@ -54,7 +54,7 @@ FluidbookBackground.prototype = {
                 top: top,
                 left: left
             });
-        } else if (this.fluidbook.datas.repeat == Fluidbook.RATIO || this.fluidbook.datas.repeat == Fluidbook.STRETCH) {
+        } else if (this.fluidbook.datas.repeat === Fluidbook.RATIO || this.fluidbook.datas.repeat === Fluidbook.STRETCH) {
 
             var origin = ['0%', '0%', '0%'];
             // if (this.fluidbook.datas.backgroundHAlign == Fluidbook.LEFT) {
@@ -83,12 +83,12 @@ FluidbookBackground.prototype = {
             var css = {};
             var scaleX = w / bw;
             var scaleY = h / bh;
-            if (this.fluidbook.datas.repeat == Fluidbook.RATIO) {
+            if (this.fluidbook.datas.repeat === Fluidbook.RATIO) {
                 if (scaleX < scaleY) {
                     var l = ((scaleX - scaleY) * bw);
-                    if (this.fluidbook.datas.backgroundHAlign == Fluidbook.CENTER) {
+                    if (this.fluidbook.datas.backgroundHAlign === Fluidbook.CENTER) {
                         css.left = l / 2;
-                    } else if (this.fluidbook.datas.backgroundHAlign == Fluidbook.LEFT) {
+                    } else if (this.fluidbook.datas.backgroundHAlign === Fluidbook.LEFT) {
                         css.left = 0;
                     }
                 } else {

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index c01e4c3455f4548a871340263b076c387e6f6035..ac8a4665df3da674969a0141b04aac1f41313de6 100644 (file)
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -78,6 +78,9 @@ Fluidbook.prototype = {
             this.form == false;
         }
         this.privacy = new FluidbookPrivacy(this);
+        if (typeof window.FluidbookTabs === 'function') {
+            this.tabs = new FluidbookTabs(this);
+        }
 
         this.refw = 0;
         this.refh = 0;

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index e1559db796e1f236f01fe2eff7690216e93b2ada..b350c8f383f2935743aad917d8528723c8c4e116 100644 (file)
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -8,8 +8,8 @@ function FluidbookLinks(fluidbook) {
     this.fluidbook = fluidbook;
     try {
         this.zoom = new FluidbookLinksZoom(fluidbook);
-    }catch (e) {
-        
+    } catch (e) {
+
     }
     this.initInlineSlideshowsIntervals = [];
     this.lowdef = false;
@@ -64,7 +64,12 @@ FluidbookLinks.prototype = {
             if (!target) {
                 target = '_self';
             }
+
+
             var href = $(this).attr('href');
+            if (href === undefined) {
+                return true;
+            }
             var external = href.substr(0, 4) === 'http';
             if (href === '#') {
                 return true;

diff --git a/js/libs/fluidbook/fluidbook.tabs.js b/js/libs/fluidbook/fluidbook.tabs.js
new file mode 100644 (file)
index 0000000..eb88da6
--- /dev/null
+++ b/js/libs/fluidbook/fluidbook.tabs.js
@@ -0,0 +1,358 @@
+function FluidbookTabs(fluidbook) {
+    this.fluidbook = fluidbook;
+    if (this.fluidbook.datas.svgTabs) {
+        this.init();
+    } else if (this.hasTabs()) {
+        this.initZip();
+    }
+}
+
+FluidbookTabs.prototype = {
+
+    hasTabs: function () {
+        return this.fluidbook.datas.tabsHTML5 !== '';
+    },
+
+    initZip: function () {
+
+    },
+
+    init: function () {
+        if ($("#background .links").length === 0) {
+            $("#background").append('<div class="links"></div>');
+        }
+        $("#background .links").append('<div id="l_tabs" class="link tabslink multimedia" data-id="tabs"></div>');
+        this.element = $("#l_tabs");
+        this.cont;
+        this.visibility = {};
+        this.naturalDimensions = {width: 0, height: 0};
+        this.image = 'tabs.svg';
+
+        this.setOptions();
+        this.initTabs();
+    },
+
+    setOptions: function () {
+        this.hideOnLastPage = this.fluidbook.datas.tabsHideOnLastPage;
+        this.hideOnFirstPage = this.fluidbook.datas.tabsHideOnCover;
+        this.hideOnPortrait = this.fluidbook.datas.tabsHideOnPortrait;
+        this.hideOnZoom = this.fluidbook.datas.tabsHideOnZoom;
+        this.hideWhenOverlapingArrows = this.fluidbook.datas.tabsHideWhenOverlapingArrows;
+        this.mode = 'side';
+        this.align = this.fluidbook.datas.tabsSide;
+        this.margin = parseFloat(this.fluidbook.datas.tabsMargin);
+        this.hideEdge = this.fluidbook.datas.tabsHideEdges;
+        this.linkWidth = parseFloat(this.fluidbook.datas.tabsLinkWidth);
+
+        this.sections = this.fluidbook.datas.tabsSections.map(function (x) {
+            return parseInt(x);
+        });
+        this.addLinks(this.fluidbook.datas.tabsPages);
+    },
+
+    addLinks: function (pages) {
+        pages = pages.map(function (x) {
+            return parseInt(x);
+        });
+
+        this.links = [];
+        var $this = this;
+        var sections = [];
+
+        if (this.hasSections()) {
+            $.each(this.sections, function (id, limit) {
+                var sectionPages = [];
+                $.each(pages, function (k, p) {
+                    if ($this.getSectionByPageNumber(p) - 1 === id) {
+                        sectionPages.push(p);
+                    }
+                });
+                sections.push(sectionPages);
+            });
+        } else {
+            sections.push(pages);
+        }
+
+        var index = 1;
+        $.each(sections, function (k, sectionPages) {
+            var nbPages = sectionPages.length;
+            var i = 0;
+            $.each(sectionPages, function (k, value) {
+                if (value % 2 === 1) {
+                    value--;
+                }
+                $this.links.push({
+                    css: {height: (100 / nbPages) + '%', top: (100 / nbPages * i) + '%', width: $this.linkWidth},
+                    page: parseInt(value),
+                    index: index,
+                    id: 'o' + index
+                });
+                i++;
+                index++;
+            });
+        });
+    },
+
+    initTabs: function () {
+        var $this = this;
+        this.element.append('<div class="tabs"></div>');
+        this.cont = this.element.find('.tabs');
+
+        var svgPath = 'data/tabs.svg';
+        $.get(svgPath, {}, function (data) {
+            $this.cont.append(data);
+            $this.naturalDimensions.width = Math.floor(parseFloat($(data).attr('width')));
+            $this.naturalDimensions.height = Math.floor(parseFloat($(data).attr('height')));
+            $this.svg = $this.cont.find('svg');
+            $this.svg.addClass('tabsimg').css({height: '100%', width: 'auto'});
+            $this.createLinks();
+            $this.initStandardEvents();
+        }, 'text');
+    },
+
+    changePage: function (page) {
+        var id = 'oo';
+        var $this = this;
+        $.each(this.links, function (k, v) {
+            if (page >= v.page) {
+                try {
+                    if (v.last !== undefined && page >= v.last) {
+                        id = 'none';
+                    } else {
+                        id = v.id;
+                    }
+                } catch (e) {
+
+                }
+            }
+        });
+
+
+        if (id === 'none') {
+            this.svg.find('[id^="o"].active').removeClass('active');
+        } else {
+            try {
+                this.svg.find('[id^="o"].active:not(#' + id + ')').removeClass('active');
+                this.svg.find('#' + id).addClass('active');
+            } catch (err) {
+
+            }
+        }
+
+        if (this.hasSections()) {
+            this.changeSection(page);
+        }
+    },
+
+    changeSection: function (page) {
+        var currentSection = this.getSectionByPageNumber(page);
+        if (currentSection > 0) {
+            var sectionSelector = "#s" + currentSection;
+            this.svg.find('[id^="s"]').not(sectionSelector).addClass('section_hidden');
+            this.svg.find(sectionSelector).removeClass('section_hidden');
+            this.cont.find('[data-section]').not('[data-section="' + currentSection + '"]').hide();
+            this.cont.find('[data-section="' + currentSection + '"]').show();
+        }
+    },
+
+    hasSections: function () {
+        return !(this.sections === undefined || this.sections == null || this.sections === '' || this.sections.length === 0);
+    },
+
+    getSectionByPageNumber: function (page) {
+        if (!this.hasSections()) {
+            return 0;
+        }
+        var section = 0;
+        $.each(this.sections, function (k, v) {
+            if (page >= v) {
+                section = k + 1;
+            }
+        });
+
+        return section;
+    },
+
+
+    hideEdges: function (hide) {
+        if (!hide) {
+            $("#edges .edge").css('visibility', 'visible');
+            return;
+        }
+        if (this.hideEdge === undefined || this.hideEdge === 'none') {
+            return;
+        }
+
+        if (this.hideEdge === 'left' || this.hideEdge === 'both') {
+            $("#edges .edge.left, #shadow .shadow.side.left").css({visibility: 'hidden'});
+        }
+        if (this.hideEdge === 'right' || this.hideEdge === 'both') {
+            $("#edges .edge.right, #shadow .shadow.side.right").css({visibility: 'hidden'});
+        }
+    },
+
+    createLinks: function () {
+        var $this = this;
+        $(this.links).each(function (k, v) {
+            var l = $('<a class="tablink" />');
+            $this.cont.append(l);
+            l.css(v.css);
+            if (v.page) {
+                l.attr('href', '#/page/' + v.page);
+            }
+            if ($this.hasSections()) {
+                l.attr('data-section', $this.getSectionByPageNumber(v.page));
+            }
+            if ($this.svg.find('#t' + v.index).length > 0) {
+                l.attr('data-labelid', 't' + v.index);
+            }
+        });
+    },
+
+    initStandardEvents: function () {
+        var $this = this;
+
+        $(this.fluidbook).on('fluidbook.resize', function (e, data) {
+            $this.resize(data);
+            return true;
+        });
+
+        if (this.hideOnZoom) {
+            this.visibility.zoomin = true;
+            $(this.fluidbook).on('fluidbook.zoom.in.start', function (e) {
+                $this.changeVisibility('zoomin', false);
+            });
+            $(this.fluidbook).on('fluidbook.zoom.out.end', function (e) {
+                $this.changeVisibility('zoomin', true);
+            });
+        }
+
+        if (this.hideOnPortrait) {
+            this.visibility.portrait = true;
+            $(this.fluidbook).on('fluidbook.resize.orientation', function (e, data) {
+                if (data.orientation == 'portrait') {
+                    $this.changeVisibility('portrait', false);
+                } else {
+                    $this.changeVisibility('portrait', true);
+                }
+            });
+        }
+
+        if (this.hideOnLastPage || this.hideOnFirstPage) {
+            if (this.hideOnLastPage) {
+                this.visibility.lastpage = true;
+            }
+            if (this.hideOnFirstPage) {
+                this.visibility.firstpage = true;
+            }
+
+            $(this.fluidbook).on('fluidbook.page.change.start', function (e, page) {
+                if ($this.hideOnFirstPage) {
+                    if (page <= 1) {
+                        $this.changeVisibility('firstpage', false);
+                    }
+                }
+                if ($this.hideOnLastPage) {
+                    var last = $this.fluidbook.datas.pages;
+                    if (last % 2 === 1) {
+                        last--;
+                    }
+                    if (page >= last) {
+                        $this.changeVisibility('lastpage', false);
+                    }
+                }
+                $this.changePage(page);
+            });
+
+            $(this.fluidbook).on('fluidbook.page.change.end', function (e, page) {
+                if ($this.hideOnFirstPage) {
+                    if (page > 1) {
+                        $this.changeVisibility('firstpage', true);
+                    }
+                }
+                if ($this.hideOnLastPage) {
+                    var last = $this.fluidbook.datas.pages;
+                    if (last % 2 === 1) {
+                        last--;
+                    }
+                    if (page < last) {
+                        $this.changeVisibility('lastpage', true);
+                    }
+                }
+            });
+
+            $(document).on('mouseover', '.tablink[data-labelid]', function () {
+                $this.svg.find('[id^="t"].active').removeClass('active');
+                $this.svg.find('#' + $(this).data('labelid')).addClass('active');
+            });
+
+            $(document).on('mouseout', '.tablink[data-labelid]', function () {
+                $this.svg.find('[id^="t"].active').removeClass('active');
+            });
+        }
+    },
+
+    changeVisibility: function (type, visible) {
+        this.visibility[type] = visible;
+        var tabsvisible = true;
+        $.each(this.visibility, function (k, v) {
+            if (!v) {
+                tabsvisible = false;
+                return false;
+            }
+        });
+
+        if (!tabsvisible) {
+            this.cont.addClass('hide');
+        } else {
+            this.cont.removeClass('hide');
+        }
+
+        this.hideEdges(tabsvisible);
+    },
+
+    resize: function (data) {
+        var $this = this;
+        var css = {position: 'absolute'};
+        var svgcss = {height: css.height};
+        if (this.mode === 'side') {
+            var scale = data.fluidbookrect.height / this.naturalDimensions.height;
+            var w = this.naturalDimensions.width * scale;
+
+            css.top = data.fluidbookrect.top;
+            css.height = data.fluidbookrect.height;
+            if (this.fluidbook.support.IE > 0) {
+                svgcss.width = w;
+            }
+            css.width = 'auto';
+            if (this.align === 'right') {
+                css.left = data.fluidbookrect.left + data.fluidbookrect.width + (this.margin * scale);
+            } else if (this.align === 'left') {
+                css.left = data.fluidbookrect.left - w - this.margin;
+            }
+        }
+
+        // This trick allows to fix a dimension bug in ios
+        try {
+            this.svg.css(svgcss);
+        } catch (e) {
+
+        }
+        this.cont.css(css);
+
+        if (this.hideWhenOverlapingArrows) {
+            try {
+                var bbox = this.svg.find('#o1').get(0).getBoundingClientRect();
+                if (this.align === 'left') {
+                    if (bbox.left < data.arrowLeftRect.right) {
+                        this.changeVisibility('arrows', false);
+                    } else {
+                        this.changeVisibility('arrows', true);
+                    }
+                }
+            } catch (e) {
+
+            }
+        }
+    },
+};

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 309c2efac6eb51b9e1aecf2e6c383e0fad309616..cef30969e96afd12b336729743ce978992703b43 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -3101,4 +3101,5 @@ body > input {
   display: none;
 }
 
-@import "mobilefirst.less";
\ No newline at end of file
+@import "mobilefirst.less";
+@import "tabs.less";
\ No newline at end of file

diff --git a/style/tabs.less b/style/tabs.less
new file mode 100644 (file)
index 0000000..dd049ca
--- /dev/null
+++ b/style/tabs.less
@@ -0,0 +1,7 @@
+#l_tabs {
+  top: 0;
+  left: 0;
+  width: 100px;
+  height: 100px;
+  z-index: 5000;
+}
\ No newline at end of file