--- /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
+ };
+
+ 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') {
+ 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 !== null) {
+ 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;
+ },
+}
}
this.lowdef = false;
+ this.animations = new FluidbookLinksAnimations(fluidbook);
this.init();
}
$this.resize();
});
-
$(document).on(this.fluidbook.input.clickEvent, 'a, [data-pseudolink-href]', function () {
if ($(this).is('#wopen')) {
return true;
autostart = false;
}
var animations = $(link).data('animations');
- var $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(link, $.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') {
- 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);
- }
-
- 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;
+ this.animations.executeAnimations(link, animations, autostart, delay);
},
getLinkDataById: function (uid) {
projects / fluidbook-html5.git / commitdiff