add gooey gif to index page

datalad · Nov 8, 2022 · f8ad8d5 · f8ad8d5
1 parent b2711ad
commit f8ad8d5
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 5 deletions.
diff --git a/content/img/gooey_30fps_scaled1600.gif b/content/img/gooey_30fps_scaled1600.gif
diff --git a/content/pages/index.html b/content/pages/index.html
@@ -144,12 +144,14 @@ <h1>Create Structure</h1>
 <div id="use-datalad" class="spacer-dlgrey"></div>
 
 <!-- SECTION: USE DATALAD -->
+
 <div id="console" class="info-card reverse">
   <div class="card-text use-datalad">
     <h1>Use DataLad</h1>
     <p>
-      DataLad is a free and open source command line tool with a Python API and is compatible with
-      all major operating systems. Use DataLad to:
+      DataLad is a free and open source Python-based tool that is compatible with
+      all major operating systems. It can be used via its Graphical User Interface or
+      via the command line to:
     </p>
     <ul class="main-list">
       <li><span class="icon-code"></span>&nbsp;&nbsp;<code>create</code> new datasets locally</li>
@@ -164,8 +166,8 @@ <h1>Use DataLad</h1>
       <span class="icon-laptop"></span>&nbsp;&nbsp;Try out DataLad</a>
   </div>
   <div class="card-img use-datalad">
-    <img src="img/console.svg" alt="Computer console">
-    <div class="typewriter-text">
+    <img src="img/console.svg" alt="Computer console" id="console_img">    
+    <div class="typewriter-text"  id="typed_text">
       <p style="--n:26; --d:0">datalad create <em>my_dataset</em></p>
       <p style="--n:29; --d:1">datalad save <em>-m "hello world"</em></p>
       <p style="--n:26; --d:2">datalad push <em>--to location</em></p>
@@ -174,6 +176,11 @@ <h1>Use DataLad</h1>
       <p style="--n:24; --d:4">datalad get <em>example.txt</em></p>
       <p style="--n:25; --d:5">datalad drop <em>example.txt</em></p>
     </div>
+    <img src="img/gooey_30fps_scaled1600.gif" id="gooey_video"></img>
+    <div class="show-use"> 
+      <input type="radio" name="useDataLad" value="console" onclick="selectUseDataLad(this.value, 'click')" id="console-select" checked><label for="console-select"></label>
+      <input type="radio" name="useDataLad" value="gooey" onclick="selectUseDataLad(this.value, 'click')" id="gooey-select"><label for="gooey-select"></label>
+    </div>
   </div>
 </div>
 

diff --git a/content/static/scripts.js b/content/static/scripts.js
@@ -63,4 +63,61 @@ function copyCode(text) {
   navigator.clipboard.writeText(text)
     .then(() => { })
     .catch((error) => { alert(`Copy failed! ${error}`) })
+}
+
+// Change "Use DataLad" display
+var gooeyVideo = document.getElementById("gooey_video");
+gooeyVideo.style.display = "none";
+var timer = null
+var interval = 20000
+startTimer()
+
+function startTimer() {
+  if (timer !== null) return;
+  timer = setInterval(toggleUseDataLadRadio, interval);
+}
+
+function stopTimer() {
+  clearInterval(timer);
+  timer = null
+}
+
+function resetTimer() {
+  stopTimer()
+  startTimer()
+}
+
+function selectUseDataLad(val, src) {
+  // Grab elements
+  var consoleImg = document.getElementById("console_img");
+  var typedText = document.getElementById("typed_text");
+  var gooeyVideo = document.getElementById("gooey_video");
+  // Set display
+  if (val==="console") {
+    consoleImg.style.display = "";
+    typedText.style.display = "";
+    gooeyVideo.style.display = "none";
+  } else {
+    consoleImg.style.display = "none";
+    typedText.style.display = "none";
+    gooeyVideo.style.display = "";
+  }
+  if (src==="click") {
+    resetTimer()
+  }
+
+}
+
+function toggleUseDataLadRadio() {
+  var radioConsole = document.getElementById("console-select");
+  var radioGooey = document.getElementById("gooey-select");
+  if (radioConsole.checked) {
+    radioConsole.checked = false;
+    radioGooey.checked = true;
+    selectUseDataLad("gooey", "timer")
+  } else {
+    radioGooey.checked = false;
+    radioConsole.checked = true;
+    selectUseDataLad("console", "timer")
+  }
 }
diff --git a/theme/static/css/style.css b/theme/static/css/style.css
@@ -1603,4 +1603,28 @@ img.no-overflow {
   padding-bottom: 1em;
   text-align: center;
   justify-content: center;
-}
+}
+
+.show-use input[type=radio] {
+  display: none
+}
+.show-use input[type=radio] + label {
+  border: 1px solid var(--datalad-grey);
+  background-color: white;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  position: static;
+  display: inline-block;
+}
+.show-use input[type=radio]:hover + label {
+  background-color: #f6f6f6;
+}
+.show-use input[type=radio]:checked + label {
+  background-color: var(--datalad-yellow);
+}
+
+.show-use input[type=radio]:checked + label {
+  background-color: var(--datalad-yellow);
+}
+