]> _ Git - fluidbook-html5.git/commitdiff
wait #2569 @1
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Fri, 1 Feb 2019 17:27:39 +0000 (18:27 +0100)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Fri, 1 Feb 2019 17:27:39 +0000 (18:27 +0100)
js/libs/fluidbook/fluidbook.links.js
style/fluidbook.less

index 8a8ecec5973c10c5b195184e22ccc126df8ef632..0e0df963be7c5a2a65ca079fa7a6982d4034d450 100644 (file)
@@ -211,6 +211,7 @@ FluidbookLinks.prototype = {
         setTimeout(function () {
             $this.fluidbook.initVideos();
             $this.initInlineSlideshows();
+            $this.initAnimatedContentsLinks();
         }, 200);
 
 
@@ -218,6 +219,70 @@ FluidbookLinks.prototype = {
         this.resize();
     },
 
+    initAnimatedContentsLinks: function () {
+        $(".contentLink[data-animation]").each(function () {
+            var animation = $(this).data('animation');
+            if (animation.type === undefined || animation.type === '') {
+                return;
+            }
+            var from = {};
+            var to = {};
+            var duration = 0.5;
+            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 w = parseFloat($(this).css('width'));
+                var h = parseFloat($(this).css('height'));
+
+                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;
+                }
+            }
+
+            $(this).show();
+            console.log(duration, from, to);
+            TweenMax.fromTo($(this), duration, from, to);
+        });
+    },
+
     getLinkDataById: function (uid) {
         return this.fluidbook.datas.linksData[uid];
     },
index 6d13922369dc9cfc9b87920f5f6775e985a2b08f..8a82b66b9ef445477a497794a472a4406feb783a 100644 (file)
@@ -1194,6 +1194,10 @@ html.ios body.portrait #interface {
        z-index: 0 !important;
        position: absolute;
        pointer-events: none;
+
+       &[data-animation-type="reveal"], &[data-animation-type="fadein"] {
+               display: none;
+       }
 }
 
 @links-area-color: fadeout(@links-color, 70%);