--- /dev/null
+
+
+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
projects / fluidbook-toolbox.git / commitdiff