From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 30 Jul 2024 07:55:37 +0000 (+0200)
Subject: wip #6961
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=e69a33f9c83aa5970dba4e7b3dc1a2d55fe44980;p=fluidbook-toolbox.git

wip #6961
---

diff --git a/resources/linkeditor/js/fluidbook.links.animations.js b/resources/linkeditor/js/fluidbook.links.animations.js
new file mode 100644
index 000000000..8a7b9db39
--- /dev/null
+++ b/resources/linkeditor/js/fluidbook.links.animations.js
@@ -0,0 +1,426 @@
+
+
+function FluidbookLinksAnimations(fluidbook) {
+    if (fluidbook === undefined) {
+        fluidbook = false;
+    }
+    this.fluidbook = fluidbook;
+}
+
+FluidbookLinksAnimations.prototype = {
+
+    executeAnimations(element, animations, properties, autostart, delay) {
+        let $this = this;
+        var defaults = ['ease', 'duration', 'delay'];
+        var firstDefaults = {};
+
+        if (animations === undefined || animations === null || animations.length === 0) {
+            return;
+        }
+
+        if (animations[0]["autostart"] === undefined) {
+            animations[0]["autostart"] = true;
+        }
+
+        if (animations[0]['autostart'] == '0' || animations[0]['autostart'] == 'false') {
+            animations[0]['autostart'] = false;
+        }
+
+        if (autostart && !animations[0]['autostart']) {
+            return;
+        }
+
+        $.each(defaults, function (k, v) {
+            if (animations[0][v] !== undefined) {
+                firstDefaults[v] = animations[0][v];
+            }
+        });
+
+        var override = {};
+        if (delay !== undefined) {
+            override.delay = delay;
+        }
+
+        $.each(animations, function (k, animation) {
+            $this.executeAnimation(element, $.extend({}, firstDefaults, animation, override));
+        });
+    },
+
+    executeAnimation: function (link, animation) {
+        $(link).data('animation-started', true);
+
+        link = $(link);
+        var linkElement = $(link).get(0);
+        var animatedElement = linkElement;
+        if (animation.type === undefined || animation.type === '') {
+            animation.type = 'none';
+        }
+        var defaultParams = {};
+        var globalDefault = {
+            x: 0, y: 0, yoyo: 0, repeatdelay: 0, repeat: 0, transformorigin: '50% 50%', preventflickering: 0
+        };
+
+        if ($(linkElement).hasClass('textLink')) {
+            globalDefault.transformorigin = '0 100%';
+        }
+
+        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 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);
+
+        var css = {};
+        if (animation.filter) {
+            css.filter = animation.filter;
+        }
+        if (animation.align) {
+            css.textAlign = animation.align;
+        }
+        if (animation.scale && ['scale', 'scalefrom', 'zoomin', 'zoomout'].indexOf(animation.type) === -1) {
+            if (animation.preventflickering) {
+                css.backgroundSize = '100% 100%';
+                css.backgroundPosition = animation.transformorigin;
+            } else {
+                css.transform = 'scale(' + animation.scale + ')';
+                css.transformOrigin = animation.transformorigin;
+            }
+        }
+
+        if (animation.letterspacing) {
+            css.letterspacing = parseFloat(animation.letterspacing);
+        }
+
+        animation.ease = this.fixEase(animation.ease);
+        if (animation.rotate !== undefined) {
+            animation.rotation = animation.rotate;
+        }
+        if (animation.rotation !== undefined) {
+            from.rotation = animation.rotation;
+        }
+        to.ease = animation.ease;
+
+        if (animation.delay !== undefined) {
+            to.delay = parseFloat(animation.delay);
+        }
+
+        if (animation.type === 'blurfrom') {
+            animation.type = "blur";
+            animation.from = 1;
+        }
+
+        if (animation.type === 'blur') {
+            let b = 'blur(' + animation.blur + 'px)';
+            let zero = 'blur(0px)';
+            if (css.filter === undefined) {
+                css.filter = '';
+            }
+
+            if (animation.from) {
+                css.filter += ' ' + b;
+                to.filter = zero;
+            } else {
+                css.filter = ' ' + b;
+                to.filter = b;
+            }
+        } else if (animation.type === 'scalefrom') {
+            to.display = 'block';
+            to.visibility = 'visible';
+
+            from.scale = animation.scale;
+            to.scale = 1;
+            from.transformOrigin = to.transformOrigin = animation.transformorigin;
+        } else if (animation.type === 'scale') {
+            to.display = 'block';
+            to.visibility = 'visible';
+
+            from.scale = 1;
+            to.scale = animation.scale;
+            from.transformOrigin = to.transformOrigin = animation.transformorigin;
+        } else if (animation.type === 'rotate') {
+            to.display = 'block';
+            to.visibility = 'visible';
+            from.rotation = 0;
+            to.rotation = animation.rotation;
+            from.transformOrigin = to.transformOrigin = animation.transformorigin;
+        } else if (animation.type === 'rotatefrom') {
+            to.display = 'block';
+            to.visibility = 'visible';
+            to.rotation = 0;
+            from.rotation = animation.rotation;
+            from.transformOrigin = to.transformOrigin = animation.transformorigin;
+        } else if (animation.type === 'translatefrom') {
+            from.display = 'none';
+            to.display = 'block';
+            to.visibility = 'visible';
+
+            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';
+            to.visibility = 'visible';
+            from.x = 0;
+            from.y = 0;
+            to.x = animation.x;
+            to.y = animation.y;
+
+        } else if (animation.type === 'zoomin' || animation.type === 'zoomout') {
+            to.display = 'block';
+            to.visibility = 'visible';
+            animatedElement = $(linkElement).find('img,div.img');
+            from.scale = animation.type === 'zoomin' ? 1 : animation.scale;
+            to.scale = animation.type === 'zoomout' ? 1 : animation.scale;
+            from.transformOrigin = to.transformOrigin = animation.transformorigin;
+            if (animation.preventflickering == 1) {
+                from.backgroundSize = from.scale * 100 + '% ' + from.scale * 100 + '%';
+                to.backgroundSize = to.scale * 100 + '% ' + to.scale * 100 + '%';
+                from.backgroundPosition = animation.transformorigin;
+                to.transformOrigin = from.transformOrigin = '50% 50%';
+                to.scale = from.scale = 1;
+            }
+        } else if (animation.type === 'fadein') {
+            from.display = 'none';
+            to.display = 'block';
+            to.visibility = 'visible';
+            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';
+                to.visibility = 'visible';
+            }
+
+            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') {
+            defaultParams = {
+                startangle: '0', direction: 'clockwise', size: 'outside', innerradius: '0', hideonstart: '0'
+            };
+            animation = $.extend({}, globalDefault, 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;
+            }
+            linkElement.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 sector = function (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 paper = new Raphael(link.attr('id'), w, h);
+            var bgc = link.attr('data-color');
+            to.angle = animation.startangle + 360;
+            if (animation.hideonstart == '1') {
+                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'
+                });
+                link.css('background-color', "transparent");
+            };
+        } else if (animation.type === 'number') {
+            usegsap = false;
+            defaultParams = {
+                startvalue: '0',
+                decimalseparator: '.',
+                decimaldigitnumber: '0',
+                separator: ' ',
+                letterspacing: '0',
+                prefix: '',
+                suffix: '',
+            };
+            animation = $.extend({}, globalDefault, defaultParams, animation);
+            animation.startvalue = parseFloat(animation.startvalue.replace(/,/, '.'));
+            animation.decimaldigitnumber = parseInt(animation.decimaldigitnumber);
+            animation.letterspacing = parseFloat(animation.letterspacing);
+
+            var ease = gsap.parseEase(to.ease);
+            var options = {
+                duration: duration,
+                useEasing: true,
+                useGrouping: true,
+                separator: animation.separator,
+                decimalPlaces: animation.decimaldigitnumber,
+                decimal: animation.decimalseparator,
+                prefix: animation.prefix,
+                suffix: animation.suffix,
+                startVal: animation.startvalue,
+                easingFn: function (t, b, c, d) {
+                    return b + ease(Math.min(1, Math.max(0, t / d))) * c;
+                }
+            };
+
+            css['opacity'] = 0;
+
+            let value;
+            if ($(link).data('anim-numeric-value') === null || $(link).data('anim-numeric-value') === undefined) {
+                value = parseFloat(link.text().replace(/,/, '.'));
+                $(link).data('anim-numeric-value', value);
+            } else {
+                value = $(link).data('anim-numeric-value');
+            }
+            link.text('');
+            var countup = new CountUp(link.attr('id'), value, options);
+            setTimeout(function () {
+                link.css('opacity', 1);
+                countup.start();
+            }, to.delay * 1000);
+        } else if (animation.type === 'draggable') {
+            if(this.fluidbook===false){
+                return;
+            }
+            this.fluidbook.hasDraggableOnPage(true);
+            $(link).css('pointer-events', 'auto');
+            var $this = this;
+            var draggable = new Draggable(link, {
+                inertia: true, type: 'x', onDragStart: function () {
+                    $this.fluidbook.touch.draggingFromOutside = true;
+                }, onRelease: function () {
+                    var d = this;
+                    setTimeout(function () {
+                        $this.fluidbook.touch.draggingFromOutside = false;
+                    }, 250);
+
+                    if (animation.drop === 'clickhide') {
+                        $('#links .link a').each(function () {
+                            if (d.hitTest(this)) {
+                                var e = this;
+                                setTimeout(function () {
+                                    $(e).click();
+                                }, 500);
+
+                                gsap.to($(link), {duration: 0.5, autoAlpha: 0});
+                                return true;
+                            }
+                        });
+                    }
+
+                }
+            });
+        } else {
+            usegsap = false;
+        }
+
+        link.css(css);
+        if (from.display !== undefined && from.display !== 'none') {
+            link.show();
+        }
+        if (from.display !== undefined && from.display === 'none') {
+            link.hide();
+        }
+        if (usegsap) {
+            to.duration = duration;
+            let anim = gsap.fromTo(animatedElement, from, to);
+
+            let anims = [];
+            if ($(link).data('gsap') !== undefined) {
+                anims = $(link).data('gsap');
+            }
+            anims.push(anim);
+            $(link).data('gsap', anims);
+        }
+
+        if (this.fluidbook !== false) {
+            this.fluidbook.networkControl.pause((to.delay + duration + 0.5) * 1000);
+        }
+    },
+
+    fixEase: function (ease) {
+        if (ease === undefined) {
+            ease = "power1.out";
+        }
+        ease = ease.toLowerCase();
+        if (ease.indexOf('linear') === 0 || ease.indexOf('power0') === 0) {
+            ease = 'none';
+        }
+        ease = ease.replace('.ease', '.');
+        ease = ease.replace('inout', 'inOut');
+        return ease;
+    },
+}
+
+
+
+
+export default FluidbookLinksAnimations;
\ No newline at end of file