From 619939896107ef7d5f9d208a46ac10ee61f93679 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 21 Aug 2020 16:31:26 +0200
Subject: [PATCH] wip #3785 @4

---
 js/libs/fluidbook/fluidbook.links.js       | 56 +++++++++++++++++++---
 js/libs/fluidbook/fluidbook.mobilefirst.js |  4 +-
 style/fluidbook.less                       |  6 +--
 3 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index fc116a96..9718f021 100644
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -310,11 +310,11 @@ FluidbookLinks.prototype = {
         var $this = this;
 
         this.animateLinks();
+        $this.initAnimatedContentsLinks();
 
         setTimeout(function () {
             $this.fluidbook.initVideos();
             $this.initInlineSlideshows();
-            $this.initAnimatedContentsLinks();
             $this.fluidbook.l10n.translateAttributes();
         }, 200);
 
@@ -339,20 +339,36 @@ FluidbookLinks.prototype = {
         }
         var $this = this;
 
-        $(".contentLink[data-animation]").each(function () {
+        $(".contentLink[data-animations]").each(function () {
             $this.animateContentLink($(this));
         });
     },
 
     animateContentLink: function (link) {
+        var animations = link.data('animations');
+        var $this = this;
+
+        var defaults = ['ease', 'duration'];
+        var firstDefaults = {};
+        $.each(defaults, function (k, v) {
+            if (animations[0][v] !== undefined) {
+                firstDefaults[v] = animations[0][v];
+            }
+        });
+
+        $.each(animations, function (k, animation) {
+            $this.executeAnimation(link, $.extend({}, firstDefaults, animation));
+        });
+    },
+
+    executeAnimation: function (link, animation) {
         link = $(link);
         var linkElement = $(link).get(0);
-        var animation = link.data('animation');
         if (animation.type === undefined || animation.type === '') {
             animation.type = 'none';
         }
         var defaultParams = {};
-        var globalDefault = {zindex: 0};
+        var globalDefault = {zindex: 0, x: 0, y: 0};
         var w = parseFloat(link.css('width'));
         var cx = w / 2;
         var h = parseFloat(link.css('height'));
@@ -377,13 +393,36 @@ FluidbookLinks.prototype = {
         if (animation.delay !== undefined) {
             to.delay = parseFloat(animation.delay);
         }
-        if (animation.type === 'fadein') {
+        if (animation.type === 'translatefrom') {
+            from.display = 'none';
+            to.display = 'block';
+
+            from.x = animation.x;
+            from.y = animation.y;
+
+            to.x = 0;
+            to.y = 0;
+        } else if (animation.type === 'translate') {
+            from.display = 'none';
+            to.display = 'block';
+            from.x = 0;
+            from.y = 0;
+            to.x = animation.x;
+            to.y = animation.y;
+        } else if (animation.type === 'fadein') {
+            from.display = 'none';
+            to.display = 'block';
             from.opacity = 0;
             to.opacity = 1;
         } else if (animation.type === 'fadeout') {
             from.opacity = 1;
             to.opacity = 0;
         } else if (animation.type === "unmask" || animation.type === 'reveal') {
+            if (animation.type === 'reveal') {
+                from.display = 'none';
+                to.display = 'block';
+            }
+
             var top = 0;
             var right = w;
             var bottom = h;
@@ -525,7 +564,12 @@ FluidbookLinks.prototype = {
         css = $.extend({zIndex: 500 + parseInt(animation.zindex)}, css);
 
         link.css(css);
-        link.show();
+        if (from.display !== undefined && from.display !== 'none') {
+            link.show();
+        }
+        if (from.display !== undefined && from.display === 'none') {
+            link.hide();
+        }
         if (tweenmax) {
             TweenMax.fromTo(linkElement, duration, from, to);
         }
diff --git a/js/libs/fluidbook/fluidbook.mobilefirst.js b/js/libs/fluidbook/fluidbook.mobilefirst.js
index 634781b1..8220a859 100644
--- a/js/libs/fluidbook/fluidbook.mobilefirst.js
+++ b/js/libs/fluidbook/fluidbook.mobilefirst.js
@@ -69,7 +69,7 @@ FluidbookMobileFirst.prototype = {
         }
         var $this = this;
         var delay = 800;
-        $("#links .link:not(.revealed):visible, .clinks [data-animation]:not(.revealed)").each(function () {
+        $("#links .link:not(.revealed):visible, .clinks [data-animations]:not(.revealed)").each(function () {
             var rect = $(this).get(0).getBoundingClientRect();
             if (rect.top < $this.fluidbook.resize.hh) {
                 $(this).addClass('revealed');
@@ -82,7 +82,7 @@ FluidbookMobileFirst.prototype = {
                     setTimeout(function () {
                         $(iframe).attr('src', url);
                     }, 10);
-                } else if ($(this).is('[data-animation]')) {
+                } else if ($(this).is('[data-animations]')) {
                     var $link = this;
                     setTimeout(function () {
                         $this.fluidbook.links.animateContentLink($link);
diff --git a/style/fluidbook.less b/style/fluidbook.less
index db65bdef..599fd7af 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1272,14 +1272,10 @@ html.ios body.portrait #interface {
   position: absolute;
   pointer-events: none;
 
-  &[data-animation-type="reveal"], &[data-animation-type="fadein"] {
-    display: none;
-  }
-
   &.textLink {
     white-space: nowrap;
 
-    &[data-animation-type] {
+    &[data-animations] {
       transform-origin: 0 100%;
       opacity: 0;
     }
-- 
2.39.5