From 4ff569d59a625404049dcbe81ecc5dc874c81983 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 15 Oct 2018 19:05:32 +0200
Subject: [PATCH] wipe #2298 @4

---
 js/libs/fluidbook/fluidbook.links.js | 26 ++++++++++++++++++++++++++
 style/fluidbook.less                 | 22 ++++++++++++++++++++++
 style/rollover.less                  |  0
 3 files changed, 48 insertions(+)
 create mode 100644 style/rollover.less

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 8856a629..92803486 100644
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -35,6 +35,20 @@ FluidbookLinks.prototype = {
             return false;
         });
 
+        $(document).on('mouseenter', '#links a.image_rollover', function () {
+            console.log(this);
+            var id = $(this).closest('[data-id]').data('id');
+            console.log(id);
+            var iid = 'i_' + id;
+            $this.rolloverEnter(iid);
+        });
+
+        $(document).on('mouseleave', '#links a.image_rollover', function () {
+            var id = $(this).closest('[data-id]').data('id');
+            var iid = 'i_' + id;
+            $this.rolloverLeave(iid);
+        });
+
         $(this.fluidbook).on('fluidbook.zoom.in.end', function () {
             $this.zoomLinkReset(true);
             return true;
@@ -591,4 +605,16 @@ FluidbookLinks.prototype = {
                 .css({width: iw, height: ih, transform: 'scale(' + (1 / $this.fluidbook.resize.bookScale) + ')'});
         });
     },
+
+    rolloverEnter: function (iid) {
+        console.log('enter',iid);
+        var e = $('[data-id="' + iid + '"]');
+        e.addClass('animaterollover');
+    },
+
+    rolloverLeave: function (iid) {
+        console.log('leave',iid);
+        var e = $('[data-id="' + iid + '"]');
+        e.removeClass('animaterollover');
+    }
 }
diff --git a/style/fluidbook.less b/style/fluidbook.less
index db9f938f..4fea84ed 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -2839,4 +2839,26 @@ body > input {
 	font-style: normal;
 }
 
+/* Links anims rollovers */
+@keyframes enterupanddown {
+	0% {
+		margin-top: 0px;
+	}
+	50% {
+		margin-top: -40px;
+	}
+	100% {
+		margin-top: 0px;
+	}
+
+}
+
+[data-rollover="upanddown"] {
+	&.animaterollover {
+		animation-duration: 800ms;
+		animation-name: enterupanddown;
+		animation-timing-function: ease-out;
+	}
+}
+
 @import "additional.less";
diff --git a/style/rollover.less b/style/rollover.less
new file mode 100644
index 00000000..e69de29b
-- 
2.39.5