]> _ Git - fluidbook-html5.git/commitdiff
wait #2231 @0.5
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Wed, 3 Oct 2018 09:28:56 +0000 (11:28 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Wed, 3 Oct 2018 09:28:56 +0000 (11:28 +0200)
js/libs/fluidbook/fluidbook.background.js
js/libs/fluidbook/fluidbook.links.js
js/libs/fluidbook/fluidbook.menu.js
style/fluidbook.less

index bf4b58e198da16c90d81140cb724730f02561ae9..80ac5244bfedb7e1bb4bcdfa716edfb5818a0c78 100644 (file)
@@ -107,8 +107,6 @@ FluidbookBackground.prototype = {
                 $("#background .links").transform(transform).css(css);
             }
         }
-
-
     }
 };
 
index ab7004a0bb6335b2091db5b263db5c9089787794..1a43cc90ba5e677dc3003d55280a176e7202f1fb 100644 (file)
@@ -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('<div class="zoomPopupWrapper" id="zoomPopup_'+ zoomID +'"><a href="#" class="zoomPopupClose">' + getSpriteIcon('interface-close') + '</a></div>');
+            $groupWrapper.append('<div class="zoomPopupWrapper" id="zoomPopup_' + zoomID + '"><a href="#" class="zoomPopupClose">' + getSpriteIcon('interface-close') + '</a></div>');
 
             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
index b7eca1e45a20e2a2ee09d162ecfcbc1cd403a457..18c2bf58e737573a46d54bbeac7620ed05df85b3 100644 (file)
@@ -141,12 +141,24 @@ FluidbookMenu.prototype = {
         var a = $('a[href="#/multimedia/' + multimedia + '"]');
         var markup = decodeURIComponent($(a).attr('data-multimedia'));
         var view = '<div class="caption">' + this.closeButton() + '</div>';
+        var links = '';
+        var animateLinks = false;
+        var uid = $(a).closest('[data-id]').data('id');
+        if (this.fluidbook.datas.links['link_' + uid] !== undefined) {
+            links = '<div class="links">' + this.fluidbook.datas.links['link_' + uid] + '</div>';
+            animateLinks = true;
+        }
         view += '<div class="content"><div class="multimediaHolder"><div class="multimediaScale">';
-        view += markup;
+        view += markup + links;
         view += '</div></div></div>';
 
         var read = multimedia.indexOf('r_') == 0 ? ' data-readmode="1"' : '';
         $("#view").append('<div class="mview" dir="ltr" data-menu="multimedia"' + read + '>' + view + '</div>');
+
+        if(animateLinks){
+            this.fluidbook.links.animateLinks($("#view"),1000);
+        }
+
         if (callback != undefined) {
             callback();
         }
index 59719fd136775667897b7d1b95712f061f733bc3..12355db605eae354bdcf2ffed5a703b847a2280c 100644 (file)
@@ -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