From: nael Date: Tue, 22 Jan 2019 15:30:38 +0000 (+0100) Subject: wait #2536 @10 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=43ad7d86cd103e003668bf2fd4d084131fb1bcf4;p=Animations.git wait #2536 @10 --- diff --git a/ongletsHTML/init.js b/ongletsHTML/init.js new file mode 100644 index 0000000..24ad355 --- /dev/null +++ b/ongletsHTML/init.js @@ -0,0 +1 @@ +$($id).tabs($init); \ No newline at end of file diff --git a/ongletsHTML/multimedia.js b/ongletsHTML/multimedia.js new file mode 100644 index 0000000..bfcc64e --- /dev/null +++ b/ongletsHTML/multimedia.js @@ -0,0 +1,272 @@ +(function ($) { + function JQtabs(element, data) { + this.element = element; + this.cont; + this.data = data; + this.visibility = {}; + + this.naturalDimensions = {width: 0, height: 0}; + + /* Change contents from here */ + + this.hideOnLastPage = true; + this.hideOnFirstPage = false; + this.hideOnPortrait = true; + + this.image = 'tabs.svg'; + + this.links = [ + {css: {height: '33%', top: 0}, page: 4, id: 'o1'}, + {css: {height: '33%', top: '33%'}, page: 22, id: 'o2'}, + {css: {height: '33%', top: '66%'}, page: 24, id: 'o3'} + ]; + + /* available modes & alignments : + side|right: tabs are stuck at the right of the publication + side|left: ______________________ left + top|center: tabs are placed on top of the publication centered horizontaly + top|left:_____________________________________________________ at left + top|right:____________________________________________________ at right + */ + this.mode = 'side'; + this.align = 'right'; + + this.margin = -25; // Space between tabs and book + + this.hideEdge = 'right'; // Possible values : left, right, both, none + + /* Stop changing contents here or do it AYOR */ + + this.hideOnZoom = true; // true is recommanded + + this.init(); + } + + JQtabs.prototype = { + init: function () { + var $this = this; + this.element.append('
'); + this.cont = this.element.find('.tabs'); + + $.get(this.data.path + this.image, {}, 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'}); + }, 'text'); + + this.createLinks(); + this.initStandardEvents(); + this.hoverOnglet(); + }, + + 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('.active').removeClass('active'); + }else{ + try { + this.svg.find('.active:not(#' + id + ')').removeClass('active'); + this.svg.find('#' + id).addClass('active'); + } catch (err) { + + } + } + }, + + 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").css({visibility: 'hidden'}); + } + if (this.hideEdge == 'right' || this.hideEdge == 'both') { + $("#edges .edge.right").css({visibility: 'hidden'}); + } + }, + + createLinks: function () { + var $this = this; + var n = 1; + $(this.links).each(function (k, v) { + + var z = n++; + var l = $(''); + $this.cont.append(l); + l.css(v.css); + + if (v.page) { + l.attr('href', '#/page/' + v.page); + } + }); + }, + + //// function hover onglet //// + + hoverOnglet: function(){ + $('.tablink').on('mouseenter',function () { + console.log($(this).attr('data-id')); + $(".tabsimg").find('#o'+ $(this).attr('data-id') ).addClass('hover'); + }); + $('.tablink').on('mouseleave',function () { + $(".tabsimg").find('#o'+ $(this).attr('data-id') ).removeClass('hover'); + }); + }, + + initStandardEvents: function () { + var $this = this; + + $(fluidbook).on('fluidbook.resize', function (e, data) { + $this.resize(data); + return true; + }); + + if (this.hideOnZoom) { + this.visibility.zoomin = true; + $(fluidbook).on('fluidbook.zoom.in.start', function (e) { + $this.changeVisibility('zoomin', false); + }); + $(fluidbook).on('fluidbook.zoom.out.end', function (e) { + $this.changeVisibility('zoomin', true); + }); + } + + if (this.hideOnPortrait) { + this.visibility.portrait = true; + $(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; + } + + $(fluidbook).on('fluidbook.page.change.start', function (e, page) { + if ($this.hideOnFirstPage) { + if (page <= 1) { + $this.changeVisibility('firstpage', false); + } + } + if ($this.hideOnLastPage) { + var last = fluidbook.datas.pages; + if (last % 2 == 1) { + last--; + } + if (page >= last) { + $this.changeVisibility('lastpage', false); + } + } + $this.changePage(page); + }); + + $(fluidbook).on('fluidbook.page.change.end', function (e, page) { + if ($this.hideOnFirstPage) { + if (page > 1) { + this.changeVisibility('firstpage', true); + } + } + if ($this.hideOnLastPage) { + var last = fluidbook.datas.pages; + if (last % 2 == 1) { + last--; + } + if (page < last) { + $this.changeVisibility('lastpage', true); + } + } + }); + } + }, + + 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 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(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.fluidbookrectrect.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); + }, + + }; + + jQuery.fn.tabs = function (data) { + return this.each(function () { + var $this = $(this); + if ($(this).data('tabs') === undefined) { + $(this).data('tabs', new JQtabs($this, data)); + } + }) + }; +})(jQuery); + diff --git a/ongletsHTML/ongletsHTML.zip b/ongletsHTML/ongletsHTML.zip new file mode 100644 index 0000000..d61ece7 Binary files /dev/null and b/ongletsHTML/ongletsHTML.zip differ diff --git a/ongletsHTML/tabs.svg b/ongletsHTML/tabs.svg new file mode 100644 index 0000000..c33a35b --- /dev/null +++ b/ongletsHTML/tabs.svg @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +