From e379a9d565341f10569e32abb8ec1d712518ac35 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 17 May 2019 15:22:12 +0200
Subject: [PATCH] fix #2733 @1

---
 js/libs/fluidbook/fluidbook.links.js       | 338 +++++++++++----------
 js/libs/fluidbook/fluidbook.mobilefirst.js |  10 +-
 2 files changed, 178 insertions(+), 170 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 891deee7..b547f7eb 100644
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -220,186 +220,188 @@ FluidbookLinks.prototype = {
     },
 
     initAnimatedContentsLinks: function () {
-        var fluidbook = this.fluidbook;
-        var pauseNetworkDelay = 0;
+        if (this.fluidbook.mobilefirst.enabled) {
+            return;
+        }
+        var $this = this;
+
         $(".contentLink[data-animation]").each(function () {
-            var animation = $(this).data('animation');
-            if (animation.type === undefined || animation.type === '') {
-                return;
-            }
-            var link = this;
-            var w = parseFloat($(this).css('width'));
-            var cx = w / 2;
-            var h = parseFloat($(this).css('height'));
-            var cy = h / 2;
-            var from = {};
-            var to = {};
-            var duration = 0.5;
-            var tweenmax = true;
-            if (animation.duration !== undefined) {
-                duration = parseFloat(animation.duration);
+            $this.animateContentLink($(this));
+        });
+    },
+
+    animateContentLink: function (link) {
+        var animation = $(link).data('animation');
+        if (animation.type === undefined || animation.type === '') {
+            return;
+        }
+        var defaultParams;
+        var w = parseFloat($(link).css('width'));
+        var cx = w / 2;
+        var h = parseFloat($(link).css('height'));
+        var cy = h / 2;
+        var from = {};
+        var to = {};
+        var duration = 0.5;
+        var tweenmax = true;
+        if (animation.duration !== undefined) {
+            duration = parseFloat(animation.duration);
+        }
+        if (animation.ease !== undefined) {
+            to.ease = animation.ease;
+        }
+        if (animation.delay !== undefined) {
+            to.delay = parseFloat(animation.delay);
+        }
+        if (animation.type === 'fadein') {
+            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') {
+            var top = 0;
+            var right = w;
+            var bottom = h;
+            var left = 0;
+
+            var rectinit = 'rect(0px,' + w + 'px,' + h + 'px,0px)';
+            if ((animation.direction === 'left' && animation.type === 'unmask') ||
+                (animation.direction === 'right' && animation.type === 'reveal')) {
+                right = 0;
+            } else if ((animation.direction === 'right' && animation.type === 'unmask') ||
+                (animation.direction === 'left' && animation.type === 'reveal')) {
+                left = w;
+            } else if ((animation.direction === 'up' && animation.type === 'unmask') ||
+                (animation.direction === 'down' && animation.type === 'reveal')) {
+                bottom = 0;
+            } else if ((animation.direction === 'down' && animation.type === 'unmask') ||
+                (animation.direction === 'up' && animation.type === 'reveal')) {
+                top = h;
             }
-            if (animation.ease !== undefined) {
-                to.ease = animation.ease;
+            var rect = 'rect(' + top + 'px,' + right + 'px,' + bottom + 'px,' + left + 'px);';
+
+            if (animation.type === 'unmask') {
+                to.clip = rect;
+                from.clip = rectinit;
+            } else if (animation.type === 'reveal') {
+                to.clip = rectinit;
+                from.clip = rect;
             }
-            if (animation.delay !== undefined) {
-                to.delay = parseFloat(animation.delay);
+        } else if (animation.type === 'pie') {
+            defaultParams = {startAngle: '0', direction: 'clockwise', size: 'outside', innerRadius: '0'};
+            animation = $.extend({}, defaultParams, animation);
+            animation.startAngle = parseFloat(animation.startAngle);
+            animation.innerRadius = parseFloat(animation.innerRadius);
+            if (animation.direction === 'clockwise') {
+                from.angle = animation.startAngle + 720;
+            } else {
+                from.angle = animation.startAngle;
             }
-            if (animation.type === 'fadein') {
-                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') {
-                var top = 0;
-                var right = w;
-                var bottom = h;
-                var left = 0;
-
-                var rectinit = 'rect(0px,' + w + 'px,' + h + 'px,0px)';
-                if ((animation.direction === 'left' && animation.type === 'unmask') ||
-                    (animation.direction === 'right' && animation.type === 'reveal')) {
-                    right = 0;
-                } else if ((animation.direction === 'right' && animation.type === 'unmask') ||
-                    (animation.direction === 'left' && animation.type === 'reveal')) {
-                    left = w;
-                } else if ((animation.direction === 'up' && animation.type === 'unmask') ||
-                    (animation.direction === 'down' && animation.type === 'reveal')) {
-                    bottom = 0;
-                } else if ((animation.direction === 'down' && animation.type === 'unmask') ||
-                    (animation.direction === 'up' && animation.type === 'reveal')) {
-                    top = h;
-                }
-                var rect = 'rect(' + top + 'px,' + right + 'px,' + bottom + 'px,' + left + 'px);';
-
-                if (animation.type === 'unmask') {
-                    to.clip = rect;
-                    from.clip = rectinit;
-                } else if (animation.type === 'reveal') {
-                    to.clip = rectinit;
-                    from.clip = rect;
-                }
-            } else if (animation.type === 'pie') {
-                var defaultParams = {startAngle: '0', direction: 'clockwise', size: 'outside', innerRadius: '0'};
-                animation = $.extend({}, defaultParams, animation);
-                animation.startAngle = parseFloat(animation.startAngle);
-                animation.innerRadius = parseFloat(animation.innerRadius);
-                if (animation.direction === 'clockwise') {
-                    from.angle = animation.startAngle + 720;
-                } else {
-                    from.angle = animation.startAngle;
-                }
-                link.angle = from.angle;
+            link.angle = from.angle;
 
-                var radius;
-                if (animation.size === 'outside') {
-                    // Calcul hypotenuse
-                    radius = Math.sqrt((cx * cx) + (cy * cy));
-                } else {
-                    radius = Math.min(w, h) / 2;
-                }
+            var radius;
+            if (animation.size === 'outside') {
+                // Calcul hypotenuse
+                radius = Math.sqrt((cx * cx) + (cy * cy));
+            } else {
+                radius = Math.min(w, h) / 2;
+            }
 
-                var sector = function sector(paper, cx, cy, r, pct, startAngle, endAngle, params) {
-                    if (animation.direction === 'clockwise') {
-                        var sa = startAngle;
-                        startAngle = endAngle;
-                        endAngle = sa;
-                    }
-                    // init radian
-                    var rad = Math.PI / 180;
-                    // first circle (bigger)
-                    var x1 = cx + r * Math.cos(-startAngle * rad),
-                        x2 = cx + r * Math.cos(-endAngle * rad),
-                        y1 = cy + r * Math.sin(-startAngle * rad),
-                        y2 = cy + r * Math.sin(-endAngle * rad);
-
-                    // second circle / donut section
-                    var r1 = r * pct;
-                    var
-                        x3 = cx + r1 * Math.cos(-endAngle * rad),
-                        y3 = cy + r1 * Math.sin(-endAngle * rad),
-                        x4 = cx + r1 * Math.cos(-startAngle * rad),
-                        y4 = cy + r1 * Math.sin(-startAngle * rad);
-
-                    var long = +(endAngle - startAngle > 180);
-                    return paper.path(["M", x4, y4, "L", x1, y1, "A", r, r, 0, long, 0, x2, y2, "L", x3, y3, "A", r1, r1, 0, long, 1, x4, y4, "z"]).attr(params);
+            var sector = function sector(paper, cx, cy, r, pct, startAngle, endAngle, params) {
+                if (animation.direction === 'clockwise') {
+                    var sa = startAngle;
+                    startAngle = endAngle;
+                    endAngle = sa;
                 }
-                var paper = new Raphael($(this).attr('id'), w, h);
-                var bgc = $(this).data('color');
-
-                to.angle = animation.startAngle + 360;
-                to.onStart = function () {
-                    to.onUpdate();
-                    $(link).css('background-color', "transparent");
-                };
-                to.onUpdate = function () {
-                    paper.clear();
-                    sector(paper, cx, cy, radius, animation.innerRadius, link.angle, to.angle, {
-                        fill: bgc,
-                        stroke: 'none'
-                    });
-                };
-            } else if (animation.type === 'number') {
-                tweenmax = false;
-                var defaultParams = {
-                    startValue: '0',
-                    decimalSeparator: '.',
-                    decimalDigitNumber: '0',
-                    separator: ' ',
-                    align: 'left',
-                    letterSpacing: '0',
-                    prefix: '',
-                    suffix: ''
-                };
-                animation = $.extend({}, defaultParams, animation);
-                animation.startValue = parseFloat(animation.startValue.replace(/,/, '.'));
-                animation.decimalDigitNumber = parseInt(animation.decimalDigitNumber);
-                animation.letterSpacing = parseFloat(animation.letterSpacing);
-
-                var ea = to.ease.split('.');
-                var ease = window[ea[0]][ea[1]];
-
-                var options = {
-                    duration: duration,
-                    useEasing: true,
-                    useGrouping: true,
-                    separator: animation.separator,
-                    decimalPlaces: animation.decimalDigitNumber,
-                    decimal: animation.decimalSeparator,
-                    prefix: animation.prefix,
-                    suffix: animation.suffix,
-                    easingFn: function (t, b, c, d) {
-                        return b + ease.getRatio(Math.min(1, Math.max(0, t / d))) * c;
-                    }
-                };
-
-                var css = {
-                    textAlign: animation.align,
-                    letterSpacing: animation.letterSpacing,
-                    opacity: 0,
+                // init radian
+                var rad = Math.PI / 180;
+                // first circle (bigger)
+                var x1 = cx + r * Math.cos(-startAngle * rad),
+                    x2 = cx + r * Math.cos(-endAngle * rad),
+                    y1 = cy + r * Math.sin(-startAngle * rad),
+                    y2 = cy + r * Math.sin(-endAngle * rad);
+
+                // second circle / donut section
+                var r1 = r * pct;
+                var
+                    x3 = cx + r1 * Math.cos(-endAngle * rad),
+                    y3 = cy + r1 * Math.sin(-endAngle * rad),
+                    x4 = cx + r1 * Math.cos(-startAngle * rad),
+                    y4 = cy + r1 * Math.sin(-startAngle * rad);
+
+                var long = +(endAngle - startAngle > 180);
+                return paper.path(["M", x4, y4, "L", x1, y1, "A", r, r, 0, long, 0, x2, y2, "L", x3, y3, "A", r1, r1, 0, long, 1, x4, y4, "z"]).attr(params);
+            }
+            var paper = new Raphael($(link).attr('id'), w, h);
+            var bgc = $(this).data('color');
+
+            to.angle = animation.startAngle + 360;
+            to.onStart = function () {
+                to.onUpdate();
+                $(link).css('background-color', "transparent");
+            };
+            to.onUpdate = function () {
+                paper.clear();
+                sector(paper, cx, cy, radius, animation.innerRadius, link.angle, to.angle, {
+                    fill: bgc,
+                    stroke: 'none'
+                });
+            };
+        } else if (animation.type === 'number') {
+            tweenmax = false;
+            defaultParams = {
+                startValue: '0',
+                decimalSeparator: '.',
+                decimalDigitNumber: '0',
+                separator: ' ',
+                align: 'left',
+                letterSpacing: '0',
+                prefix: '',
+                suffix: ''
+            };
+            animation = $.extend({}, defaultParams, animation);
+            animation.startValue = parseFloat(animation.startValue.replace(/,/, '.'));
+            animation.decimalDigitNumber = parseInt(animation.decimalDigitNumber);
+            animation.letterSpacing = parseFloat(animation.letterSpacing);
+
+            var ea = to.ease.split('.');
+            var ease = window[ea[0]][ea[1]];
+
+            var options = {
+                duration: duration,
+                useEasing: true,
+                useGrouping: true,
+                separator: animation.separator,
+                decimalPlaces: animation.decimalDigitNumber,
+                decimal: animation.decimalSeparator,
+                prefix: animation.prefix,
+                suffix: animation.suffix,
+                easingFn: function (t, b, c, d) {
+                    return b + ease.getRatio(Math.min(1, Math.max(0, t / d))) * c;
                 }
+            };
 
-                var $this = this;
-                $(this).css(css);
-                var value = parseFloat($(this).text().replace(/,/, '.'));
-                $(this).text('');
-                var countup = new CountUp($(this).attr('id'), value, options);
-                setTimeout(function () {
-                    $($this).css('opacity', 1);
-                    countup.start();
-                }, to.delay * 1000);
+            var css = {
+                textAlign: animation.align,
+                letterSpacing: animation.letterSpacing,
+                opacity: 0,
             }
-            pauseNetworkDelay = Math.max(pauseNetworkDelay, to.delay + duration);
-            $(this).show();
-            if (tweenmax) {
-                TweenMax.fromTo($(this), duration, from, to);
-            }
-        });
 
-        if (pauseNetworkDelay > 0) {
-            this.fluidbook.networkControl.pause((pauseNetworkDelay + 0.5) * 1000);
+            $(link).css(css);
+            var value = parseFloat($(link).text().replace(/,/, '.'));
+            $(link).text('');
+            var countup = new CountUp($(link).attr('id'), value, options);
+            setTimeout(function () {
+                $(link).css('opacity', 1);
+                countup.start();
+            }, to.delay * 1000);
+        }
+        $(link).show();
+        if (tweenmax) {
+            TweenMax.fromTo($(link), duration, from, to);
         }
+        this.fluidbook.networkControl.pause((to.delay + duration + 0.5) * 1000);
     },
 
     getLinkDataById: function (uid) {
diff --git a/js/libs/fluidbook/fluidbook.mobilefirst.js b/js/libs/fluidbook/fluidbook.mobilefirst.js
index 21f9ed91..1b98e54b 100644
--- a/js/libs/fluidbook/fluidbook.mobilefirst.js
+++ b/js/libs/fluidbook/fluidbook.mobilefirst.js
@@ -53,12 +53,13 @@ FluidbookMobileFirst.prototype = {
 
     checkLinksReveal: function () {
         var $this = this;
-        $("#links .link:not(.revealed):visible").each(function () {
+        var delay = 800;
+        $("#links .link:not(.revealed):visible, .clinks [data-animation]:not(.revealed)").each(function () {
             var rect = $(this).get(0).getBoundingClientRect();
             if (rect.top < $this.fluidbook.resize.hh) {
                 $(this).addClass('revealed');
                 if ($(this).find('a.displayArea').length > 0) {
-                    $this.fluidbook.links.animateLink(this, 800);
+                    $this.fluidbook.links.animateLink(this, delay);
                 } else if ($(this).is('.multimedia.notinteractive')) {
                     var url = $(this).find('iframe').attr('src');
                     var iframe = $(this).find('iframe');
@@ -66,6 +67,11 @@ FluidbookMobileFirst.prototype = {
                     setTimeout(function () {
                         $(iframe).attr('src', url);
                     }, 10);
+                } else if ($(this).is('[data-animation]')) {
+                    var $link = this;
+                    setTimeout(function () {
+                        $this.fluidbook.links.animateContentLink($link);
+                    }, delay);
                 }
             }
         });
-- 
2.39.5