From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 11 Apr 2022 07:10:10 +0000 (+0200)
Subject: wait #5188 @2.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=4e8490075adbb3a76062993f6d8b3549573dbab4;p=fluidbook-html5.git

wait #5188 @2.5
---

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 45ad51be..ba457397 100644
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -306,6 +306,17 @@ FluidbookLinks.prototype = {
             return false;
         });
 
+        $(document).on(this.fluidbook.input.clickEvent, 'a.triggerlink[data-trigger-event="stoponclick"]', function () {
+            var ids = $(this).data('trigger-id').split(',');
+            $.each(ids, function (k, id) {
+                try {
+                    $this.stopLinkById(id);
+                } catch (e) {
+                }
+            });
+            return false;
+        });
+
         $(document).on(this.fluidbook.input.clickEvent, '[data-action]', function () {
             var map = {'pdf': 'print', 'fullScreen': "fullscreen", 'locales': 'localesContainers', 'basket': 'cart'};
             var action = $(this).data('action');
@@ -347,6 +358,22 @@ FluidbookLinks.prototype = {
         });
     },
 
+    stopLinkById: function (id) {
+
+        var link = $('.link[data-id="' + id + '"]');
+        if ($(link).length === 0) {
+            console.warn('Link ' + id + ' cant be stopped');
+            return;
+        }
+
+        this.stopAnimationOfLink($(link));
+    },
+
+    stopAnimationOfLink: function (link) {
+        if ($(link).data('gsap') !== undefined && $(link).data('gsap') !== null) {
+            $(link).data('gsap').pause();
+        }
+    },
 
     handleExternalHref: function (link) {
         var href = $(link).is('[data-pseudolink-href]') ? $(link).data('pseudolink-href') : $(link).attr('href');
@@ -565,8 +592,10 @@ FluidbookLinks.prototype = {
             animations[0]['autostart'] = false;
         }
 
+        var autoStartThisAnim = true;
+
         if (autostart && !animations[0]['autostart']) {
-            return;
+            autoStartThisAnim = false;
         }
 
         $.each(defaults, function (k, v) {
@@ -575,14 +604,24 @@ FluidbookLinks.prototype = {
             }
         });
 
-        $(link).data('animation-started', true);
 
         $.each(animations, function (k, animation) {
-            $this.executeAnimation(link, $.extend({}, firstDefaults, animation));
+            $this.executeAnimation(link, $.extend({}, firstDefaults, animation), autoStartThisAnim);
         });
     },
 
-    executeAnimation: function (link, animation) {
+    executeAnimation: function (link, animation, autoStart) {
+        if (autoStart === undefined) {
+            autoStart = true;
+        }
+        if (autoStart) {
+            $(link).data('animation-started', true);
+            if ($(link).data('gsap') !== undefined && $(link).data('gsap') !== null) {
+                $(link).data('gsap').play();
+                return;
+            }
+        }
+
         link = $(link);
         var linkElement = $(link).get(0);
         if (animation.type === undefined || animation.type === '') {
@@ -596,20 +635,25 @@ FluidbookLinks.prototype = {
         var cy = h / 2;
         var from = {};
         var to = {};
+        var tweenFunctions = {};
         var duration = 0.5;
         var usegsap = true;
 
         animation = $.extend({}, globalDefault, defaultParams, animation);
 
+
         if (animation.duration !== undefined) {
             duration = parseFloat(animation.duration);
         }
 
         to.yoyo = animation.yoyo === true || animation.yoyo === 1 || animation.yoyo === '1' || animation.yoyo === 'true';
         to.repeat = parseInt(animation.repeat);
-        to.repeatdelay = parseFloat(animation.repeatdelay);
+        to.repeatDelay = parseFloat(animation.repeatdelay);
 
         var css = {};
+        if (animation.filter) {
+            css.filter = animation.filter;
+        }
 
         animation.ease = this.fixEase(animation.ease);
         if (animation.rotate !== undefined) {
@@ -748,16 +792,23 @@ FluidbookLinks.prototype = {
             }
             var paper = new Raphael(link.attr('id'), w, h);
             var bgc = link.attr('data-color');
-            to.autoCSS = false;
             to.angle = animation.startangle + 360;
             to.onStart = function () {
                 link.css('background-color', "transparent");
             };
             to.onUpdate = function () {
                 paper.clear();
+                if (Math.abs(linkElement.angle - from.angle) < 2) {
+                    return;
+                }
+                if (animation.backgroundcolor !== null && animation.backgroundcolor !== undefined) {
+                    let circle = paper.circle(cx, cy, radius - 2);
+                    circle.attr("fill", animation.backgroundcolor);
+                }
                 sector(paper, cx, cy, radius, animation.innerradius, linkElement.angle, to.angle, {
                     fill: bgc, stroke: 'none'
                 });
+
             };
         } else if (animation.type === 'number') {
             usegsap = false;
@@ -811,11 +862,9 @@ FluidbookLinks.prototype = {
             $(link).css('pointer-events', 'auto');
             var $this = this;
             var draggable = new Draggable(link, {
-                inertia: true, type: 'x',
-                onDragStart: function () {
+                inertia: true, type: 'x', onDragStart: function () {
                     $this.fluidbook.touch.draggingFromOutside = true;
-                },
-                onRelease: function () {
+                }, onRelease: function () {
                     var d = this;
                     setTimeout(function () {
                         $this.fluidbook.touch.draggingFromOutside = false;
@@ -850,9 +899,18 @@ FluidbookLinks.prototype = {
         }
         if (usegsap) {
             to.duration = duration;
-            gsap.fromTo(linkElement, from, to);
+            var a = gsap.fromTo(linkElement, from, to);
+            if (!autoStart) {
+                a.play()
+                setTimeout(function () {
+                    a.pause().seek(0);
+                }, 10);
+                $(link).data('gsap', a);
+            }
+        }
+        if (autoStart) {
+            this.fluidbook.networkControl.pause((to.delay + duration + 0.5) * 1000);
         }
-        this.fluidbook.networkControl.pause((to.delay + duration + 0.5) * 1000);
     },
 
     fixEase: function (ease) {