From 437c14b71f9ef6c0423f0dc02f7a36c105596aca Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 20 Nov 2019 18:30:42 +0100 Subject: [PATCH] wait #3202 @6 --- js/libs/fluidbook/fluidbook.background.js | 28 +- js/libs/fluidbook/fluidbook.js | 3 + js/libs/fluidbook/fluidbook.links.js | 9 +- js/libs/fluidbook/fluidbook.tabs.js | 358 ++++++++++++++++++++++ style/fluidbook.less | 3 +- style/tabs.less | 7 + 6 files changed, 391 insertions(+), 17 deletions(-) create mode 100644 js/libs/fluidbook/fluidbook.tabs.js create mode 100644 style/tabs.less diff --git a/js/libs/fluidbook/fluidbook.background.js b/js/libs/fluidbook/fluidbook.background.js index 80ac5244..d5107998 100644 --- 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 c01e4c34..ac8a4665 100644 --- 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 e1559db7..b350c8f3 100644 --- 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 index 00000000..eb88da6b --- /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('
'); + } + $("#background .links").append(''); + 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('
'); + 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 = $(''); + $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 309c2efa..cef30969 100644 --- 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 index 00000000..dd049ca8 --- /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 -- 2.39.5