From efaebe8574cff9dc6074863642ee729ede0a000b Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Wed, 9 Sep 2020 11:08:53 +0300
Subject: [PATCH] Adds slider on static page per 3 sec, stops on option click.

---
 dmp-frontend/src/assets/splash/index.html    |  8 ++++----
 dmp-frontend/src/assets/splash/js/scripts.js | 16 ++++++++++++++++
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/dmp-frontend/src/assets/splash/index.html b/dmp-frontend/src/assets/splash/index.html
index b5df09f6f..9f1b8dd75 100644
--- a/dmp-frontend/src/assets/splash/index.html
+++ b/dmp-frontend/src/assets/splash/index.html
@@ -103,13 +103,13 @@
                         <p class="title-2 text-uppercase">Argos</p>&nbsp;<p class="title-2">experience</p>
                     </div>
                     <div class="options">
-                        <div class="selected d-flex flex-direction-row option-row" id="id1" onclick="document.getElementById('template-preview').src='assets/img/template-preview-1.svg'; toggleClass(['id1','id2','id3'], 'id1')">
+                        <div class="selected d-flex flex-direction-row option-row" id="id1" onclick="document.getElementById('template-preview').src='assets/img/template-preview-1.svg'; toggleClass(['id1','id2','id3'], 'id1'); clearInterval(slides)">
                             <p class="option-number">1</p>&nbsp;<p class="option-text">Select Templates</p>
                         </div>
-                        <div class="not-selected d-flex flex-direction-row option-row" id="id2" onclick="document.getElementById('template-preview').src='assets/img/template-preview-2.svg'; toggleClass(['id1','id2','id3'], 'id2')">
+                        <div class="not-selected d-flex flex-direction-row option-row" id="id2" onclick="document.getElementById('template-preview').src='assets/img/template-preview-2.svg'; toggleClass(['id1','id2','id3'], 'id2'); clearInterval(slides)">
                             <p class="option-number">2</p>&nbsp;<p class="option-text">Fill the information</p>
                         </div>
-                        <div class="not-selected d-flex flex-direction-row option-row" id="id3" onclick="document.getElementById('template-preview').src='assets/img/template-preview-3.svg'; toggleClass(['id1','id2','id3'], 'id3')">
+                        <div class="not-selected d-flex flex-direction-row option-row" id="id3" onclick="document.getElementById('template-preview').src='assets/img/template-preview-3.svg'; toggleClass(['id1','id2','id3'], 'id3'); clearInterval(slides)">
                             <p class="option-number">3</p>&nbsp;<p class="option-text">Share DMP</p>
                         </div>
                     </div>
@@ -393,4 +393,4 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/dmp-frontend/src/assets/splash/js/scripts.js b/dmp-frontend/src/assets/splash/js/scripts.js
index 6abf11b0b..724c64c44 100644
--- a/dmp-frontend/src/assets/splash/js/scripts.js
+++ b/dmp-frontend/src/assets/splash/js/scripts.js
@@ -45,3 +45,19 @@ window.onclick = function (event) {
         this.closeOpenDropdowns();
     }
 }
+
+// Slideshow per 3 sec, stops on option click
+window.onload = function slideImages() {
+	var x = -1;
+	slides = setInterval(function displayNextImage() {
+		x = (x === images.length - 1) ? 0 : x + 1;
+		document.getElementById('template-preview').src = images[x];
+		toggleClass(['id1','id2','id3'], 'id'.concat((x + 1).toString()));
+	}, 3000);
+}
+
+var slides;
+var images = [];
+images[0] = 'assets/img/template-preview-1.svg';
+images[1] = 'assets/img/template-preview-2.svg';
+images[2] = 'assets/img/template-preview-3.svg';