Add first interaction with JavaScript when clicking on direct download

wiki/src/install/download_2.html

@@ -5,6 +5,6 @@
 [[!meta stylesheet="install/inc/stylesheets/dave_2" rel="stylesheet" title=""]]
 [[!meta stylesheet="install/inc/stylesheets/steps" rel="stylesheet" title=""]]
 [[!meta stylesheet="install/inc/stylesheets/download-only" rel="stylesheet" title=""]]
-[[!meta script="install/inc/js/dave"]]
+[[!meta script="install/inc/js/dave_2"]]
 
 [[!inline pages="install/inc/steps/download_2.inline" raw="yes" sort="age"]]

wiki/src/install/inc/js/dave_2.js

+document.addEventListener('DOMContentLoaded', function() {
+
+  function opaque(elm) {
+      elm.style.opacity = "1.0";
+      var siblings = elm.querySelectorAll('a');
+      for (let i = 0; i < siblings.length; i++) {
+        siblings[i].classList.remove("disabled");
+      }
+  }
+
+  function transparent(elm) {
+      elm.style.opacity = "0.3";
+      var siblings = elm.querySelectorAll('a');
+      for (let i = 0; i < siblings.length; i++) {
+        siblings[i].classList.add("disabled");
+      }
+  }
+
+  function toggleOpacity(elm, mode) {
+    for(var i = 0; i < elm.length; i++) {
+      if(mode == "opaque") {
+        opaque(elm[i]);
+      } else {
+        transparent(elm[i]);
+      }
+    }
+  }
+
+  function hide(elm) {
+      elm.style.display = "none";
+  }
+
+  function show(elm) {
+      elm.style.display = "block";
+  }
+
+  function toggleDisplay(elm, mode) {
+    for(var i = 0; i < elm.length; i++) {
+      if(mode == "hide") {
+        hide(elm[i]);
+      } else {
+        show(elm[i]);
+      }
+    }
+  }
+
+  // Show initial screen for supported browser
+  toggleDisplay(document.getElementsByClassName('no-js'), "hide");
+  toggleDisplay(document.getElementsByClassName('supported-browser'), "show");
+  transparent(document.getElementById('step-verify-direct'), "transparent");
+  transparent(document.getElementById('step-continue-direct'), "transparent");
+  transparent(document.getElementById('step-verify-bittorrent'), "transparent");
+
+  // Display "Verify with your browser" when "Direct download is clicked"
+  document.getElementById("direct-download").onclick = function() {
+    opaque(document.getElementById('step-verify-direct'));
+    hide(document.getElementById('skip-download-direct'));
+    show(document.getElementById('skip-verification-direct'));
+    transparent(document.getElementById('skip-download-bittorrent'));
+    transparent(document.getElementById('step-continue-bittorrent'));
+  }
+
+});

wiki/src/install/inc/steps/download_2.inline.html

@@ -5,20 +5,32 @@
 
     <div class="supported-browser no-js">
       <h3><span class="step-number">1.</span>Download Tails</h3>
-      <a class="btn btn-primary indent">Download Tails 3.1 ISO image (1.2 GB)</a>
+      <a id="direct-download" class="btn btn-primary indent">Download Tails 3.1 ISO image (1.2 GB)</a>
 
-      <h3><span class="step-number">2.</span>Verify your download using your browser</h3>
-      <div class="caution indent">
-        <p><b>For your security, always verify your download!</b><br/>
-              Our browser extension makes it quick and easy.</p>
-        <p><a>Why?</a></p>
+      <div id="step-verify-direct">
+        <h3><span class="step-number">2.</span>Verify your download using your browser</h3>
+        <div class="caution indent">
+          <p><b>For your security, always verify your download!</b><br/>
+                Our browser extension makes it quick and easy.</p>
+          <p><a>Why?</a></p>
+        </div>
+        <p class="supported-browser"><a class="btn btn-primary indent">Install <u>Tails verification</u> extension (no restart)</a></p>
+        <p class="no-js"><a class="btn btn-primary indent">Install extension for <u>Firefox and Tor Browser</u> (no restart)</a></p>
+        <p class="no-js"><a class="btn btn-primary indent">Install extension for <u>Chrome and Chromium</u> (no restart)</a></p>
       </div>
-      <p class="supported-browser"><a class="btn btn-primary indent">Install <u>Tails verification</u> extension (no restart)</a></p>
-      <p class="no-js"><a class="btn btn-primary indent">Install extension for <u>Firefox and Tor Browser</u> (no restart)</a></p>
-      <p class="no-js"><a class="btn btn-primary indent">Install extension for <u>Chrome and Chromium</u> (no restart)</a></p>
 
-      <h3><span class="step-number">3.</span>Continue installing</h3>
-      <a class="indent">Skip download</a>
+      <div id="step-continue-direct">
+        <h3><span class="step-number">3.</span>Continue installing</h3>
+      </div>
+      <div id="skip-download-direct">
+        <a class="indent">Skip download</a>
+      </div>
+      <div id="skip-verification-direct">
+        <a class="indent">Skip verification</a>
+      </div>
+      <div id="next-direct">
+        <a class="btn btn-primary indent">Next</a>
+      </div>
     </div>
 
     <div class="outdated-browser unsupported-browser">
@@ -51,11 +63,23 @@
     <h3><span class="step-number">1.</span>Download Tails (Torrent file)</h3>
     <a class="btn btn-primary indent">Download Tails 3.1 Torrent file</a>
 
-    <h3><span class="step-number">2.</span>Verify your download using BitTorrent</h3>
-    <p class="indent">Your BitTorrent client will automatically verify your download when it is complete.</p>
+    <div id="step-verify-bittorrent">
+      <h3><span class="step-number">2.</span>Verify your download using BitTorrent</h3>
+      <p class="indent">Your BitTorrent client will automatically verify your download when it is complete.</p>
+    </div>
 
-    <h3><span class="step-number">3.</span>Continue installing</h3>
-    <a class="indent">Skip download</a>
+    <div id="step-continue-bittorrent">
+      <h3><span class="step-number">3.</span>Continue installing</h3>
+    </div>
+    <div id="skip-download-bittorrent">
+      <a class="indent">Skip download</a>
+    </div>
+    <div id="skip-verification-bittorrent">
+      <a class="indent">Skip verification</a>
+    </div>
+    <div id="next-bittorrent">
+      <a class="btn btn-primary indent">Next</a>
+    </div>
   </div>
 
 </div>

wiki/src/install/inc/stylesheets/dave_2.css

-.unsupported-browser { display: inline-block !important; }
-
 .supported-browser,
 .outdated-browser,
-.unsupported-browser,
+.unsupported-browser {
+  display: none;
+}
+
 .no-js {
+  display: block;
+}
+
+#skip-verification-direct,
+#skip-verification-bittorrent,
+#next-direct,
+#next-bittorrent {
   display: none;
 }
 
@@ -25,3 +33,7 @@ span.step-number {
 .indent {
   margin-left: 30px !important;
 }
+
+.disabled {
+  pointer-events: none;
+}