From: Vincent Vanwaelscappel Date: Wed, 3 Oct 2018 09:28:56 +0000 (+0200) Subject: wait #2231 @0.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=6cd76b230b09d47b087d8cbe12f661dd9eea7deb;p=fluidbook-html5.git wait #2231 @0.5 --- diff --git a/js/libs/fluidbook/fluidbook.background.js b/js/libs/fluidbook/fluidbook.background.js index bf4b58e1..80ac5244 100644 --- a/js/libs/fluidbook/fluidbook.background.js +++ b/js/libs/fluidbook/fluidbook.background.js @@ -107,8 +107,6 @@ FluidbookBackground.prototype = { $("#background .links").transform(transform).css(css); } } - - } }; diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index ab7004a0..1a43cc90 100644 --- a/js/libs/fluidbook/fluidbook.links.js +++ b/js/libs/fluidbook/fluidbook.links.js @@ -175,11 +175,19 @@ FluidbookLinks.prototype = { }, - animateLinks: function () { + animateLinks: function (linksContainer, additionalDelay) { + var container = $(document); + if (linksContainer !== undefined) { + container = $(linksContainer); + } + if(additionalDelay===undefined){ + additionalDelay=0; + } + var animateBookmarks = (this.fluidbook.datas.bookmarkBlinkOnPageChange == true); var $this = this; - var links = $(".link a.displayArea"); + var links = $(container).find(".link a.displayArea"); $(links).each(function () { var delay = $(this).data('blinkdelay'); @@ -197,7 +205,7 @@ FluidbookLinks.prototype = { $(e).removeClass('animating').css('opacity', 1) } }); - }, delay); + }, delay+additionalDelay); }); @@ -260,25 +268,25 @@ FluidbookLinks.prototype = { // Calculate positions and scaling for all zoomLink blocks // First, calculate stacked height of all zoomLink blocks - var stackedHeight = gapsTotal + links.reduce(function(sum, zoomLink) { - return sum + (zoomLink.data('height') * zoomLink.data('maxzoom')); + var stackedHeight = gapsTotal + links.reduce(function (sum, zoomLink) { + return sum + (zoomLink.data('height') * zoomLink.data('maxzoom')); }, 0); // Calculate side-by-side width of all zoomLink blocks - var sideBySideWidth = gapsTotal + links.reduce(function(sum, zoomLink) { - return sum + (zoomLink.data('width') * zoomLink.data('maxzoom')); + var sideBySideWidth = gapsTotal + links.reduce(function (sum, zoomLink) { + return sum + (zoomLink.data('width') * zoomLink.data('maxzoom')); }, 0); // Find widest element in collection - var widestLink = links.reduce(function(maxWidth, zoomLink) { - var width = (zoomLink.data('width') * zoomLink.data('maxzoom')); - return (width > maxWidth) ? width : maxWidth; + var widestLink = links.reduce(function (maxWidth, zoomLink) { + var width = (zoomLink.data('width') * zoomLink.data('maxzoom')); + return (width > maxWidth) ? width : maxWidth; }, 0); // Find tallest element in collection - var tallestLink = links.reduce(function(maxHeight, zoomLink) { - var height = (zoomLink.data('height') * zoomLink.data('maxzoom')); - return (height > maxHeight) ? height : maxHeight; + var tallestLink = links.reduce(function (maxHeight, zoomLink) { + var height = (zoomLink.data('height') * zoomLink.data('maxzoom')); + return (height > maxHeight) ? height : maxHeight; }, 0); // Compare scaling required for each layout of blocks @@ -294,23 +302,23 @@ FluidbookLinks.prototype = { // Sort links so they are displayed in a natural order when zooming // When stacked: highest link on page will come first // When side-by-side: leftmost link on page will come first - links.sort(function(a, b) { + links.sort(function (a, b) { if (layout == 'stacked') { - return a.data('y') - b.data('y'); // Lowest Y co-ordinates first + return a.data('y') - b.data('y'); // Lowest Y co-ordinates first } else { - return a.offset().left - b.offset().left; // Lowest X co-ordinates first + return a.offset().left - b.offset().left; // Lowest X co-ordinates first } }); - links.forEach(function(zoomLink, index) { + links.forEach(function (zoomLink, index) { // console.log(index, 'Found link with ID: ' + zoomLink.attr('id')); var zoomID = zoomLink.attr('id'), $groupWrapper = $('#zoomPopupGroupWrapper'); // Add holder for each zoom zone - $groupWrapper.append('
' + getSpriteIcon('interface-close') + '
'); + $groupWrapper.append('
' + getSpriteIcon('interface-close') + '
'); var z = $('#zoomPopup_' + zoomID), box = zoomLink[0].getBoundingClientRect(), // Should return full values without rounding @@ -370,11 +378,11 @@ FluidbookLinks.prototype = { // If this is the first / only block, use calculated groupY position if (index == 0) { - zoomY = groupY - parent.offset().top + zoomMargin; + zoomY = groupY - parent.offset().top + zoomMargin; - // Otherwise, calculate Y position based on first element position + // Otherwise, calculate Y position based on first element position } else { - zoomY = Math.round(groupY + links[0].data('height') * links[0].data('maxzoom') * groupScale + zoomZonesGap + zoomMargin - parent.offset().top); + zoomY = Math.round(groupY + links[0].data('height') * links[0].data('maxzoom') * groupScale + zoomZonesGap + zoomMargin - parent.offset().top); } } else { // Side-by-side layout @@ -390,7 +398,7 @@ FluidbookLinks.prototype = { if (index == 0) { zoomX = groupX - parent.offset().left + zoomMargin; - // Otherwise, calculate X position based on first element position + // Otherwise, calculate X position based on first element position } else { zoomX = Math.round(groupX + (links[0].data('width') * links[0].data('maxzoom') * groupScale) + zoomZonesGap + zoomMargin - parent.offset().left); } @@ -421,10 +429,10 @@ FluidbookLinks.prototype = { // Trigger zoom up animation just after showing zoom element setTimeout(function () { - z.css({ - boxShadow: '0 0 100px rgba(0,0,0,0.3)', - transform: 'translateX(' + zoomX + 'px) translateY(' + zoomY + 'px) scale(1)' - }); + z.css({ + boxShadow: '0 0 100px rgba(0,0,0,0.3)', + transform: 'translateX(' + zoomX + 'px) translateY(' + zoomY + 'px) scale(1)' + }); }, 50); // Hide close button initially so it only shows when zoom finishes. @@ -434,7 +442,7 @@ FluidbookLinks.prototype = { // Display close button after zoom animation has finished setTimeout(function () { - $('.zoomPopupClose').css('opacity', 1); + $('.zoomPopupClose').css('opacity', 1); }, 500); }); @@ -460,19 +468,19 @@ FluidbookLinks.prototype = { var $wrapper = $('#zoomPopupGroupWrapper'); // Close each popup that is open - $wrapper.find('.zoomPopupWrapper').each(function() { - var z = $(this); - z.find('.zoomPopupClose').css('opacity', '0'); + $wrapper.find('.zoomPopupWrapper').each(function () { + var z = $(this); + z.find('.zoomPopupClose').css('opacity', '0'); - if (immediate) { - $('.zoomPopupWrapper').hide(); - $this.hideOverlay(1); - } + if (immediate) { + $('.zoomPopupWrapper').hide(); + $this.hideOverlay(1); + } - z.css({ - transform: 'translate(0,0) scale(' + z.data('starting-scale') + ')', - boxShadow: '0 0 0 rgba(0,0,0,0.3)', - }); + z.css({ + transform: 'translate(0,0) scale(' + z.data('starting-scale') + ')', + boxShadow: '0 0 0 rgba(0,0,0,0.3)', + }); }); // Hide popup after transition completes diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js index b7eca1e4..18c2bf58 100644 --- a/js/libs/fluidbook/fluidbook.menu.js +++ b/js/libs/fluidbook/fluidbook.menu.js @@ -141,12 +141,24 @@ FluidbookMenu.prototype = { var a = $('a[href="#/multimedia/' + multimedia + '"]'); var markup = decodeURIComponent($(a).attr('data-multimedia')); var view = '
' + this.closeButton() + '
'; + var links = ''; + var animateLinks = false; + var uid = $(a).closest('[data-id]').data('id'); + if (this.fluidbook.datas.links['link_' + uid] !== undefined) { + links = '
' + this.fluidbook.datas.links['link_' + uid] + '
'; + animateLinks = true; + } view += '
'; - view += markup; + view += markup + links; view += '
'; var read = multimedia.indexOf('r_') == 0 ? ' data-readmode="1"' : ''; $("#view").append('
' + view + '
'); + + if(animateLinks){ + this.fluidbook.links.animateLinks($("#view"),1000); + } + if (callback != undefined) { callback(); } diff --git a/style/fluidbook.less b/style/fluidbook.less index 59719fd1..12355db6 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -1162,6 +1162,7 @@ html.ios body.portrait #interface { cursor: zoom-in; } + /* Bookmarks */ .bookmark { @@ -1983,6 +1984,15 @@ ul.chapters.shareList a.level0 .svg-icon { background: @menu-background; } } + + .links{ + position: absolute; + top: 0; + left: 0; + .link{ + position: absolute; + } + } } // Chapters