Commit cc31a974 authored by sajolida's avatar sajolida
Browse files

Add first interaction with JavaScript when clicking on direct download

parent b900668a
...@@ -5,6 +5,6 @@ ...@@ -5,6 +5,6 @@
[[!meta stylesheet="install/inc/stylesheets/dave_2" rel="stylesheet" title=""]] [[!meta stylesheet="install/inc/stylesheets/dave_2" rel="stylesheet" title=""]]
[[!meta stylesheet="install/inc/stylesheets/steps" rel="stylesheet" title=""]] [[!meta stylesheet="install/inc/stylesheets/steps" rel="stylesheet" title=""]]
[[!meta stylesheet="install/inc/stylesheets/download-only" 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"]] [[!inline pages="install/inc/steps/download_2.inline" raw="yes" sort="age"]]
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'));
}
});
...@@ -5,20 +5,32 @@ ...@@ -5,20 +5,32 @@
<div class="supported-browser no-js"> <div class="supported-browser no-js">
<h3><span class="step-number">1.</span>Download Tails</h3> <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 id="step-verify-direct">
<div class="caution indent"> <h3><span class="step-number">2.</span>Verify your download using your browser</h3>
<p><b>For your security, always verify your download!</b><br/> <div class="caution indent">
Our browser extension makes it quick and easy.</p> <p><b>For your security, always verify your download!</b><br/>
<p><a>Why?</a></p> 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> </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> <div id="step-continue-direct">
<a class="indent">Skip download</a> <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>
<div class="outdated-browser unsupported-browser"> <div class="outdated-browser unsupported-browser">
...@@ -51,11 +63,23 @@ ...@@ -51,11 +63,23 @@
<h3><span class="step-number">1.</span>Download Tails (Torrent file)</h3> <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> <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> <div id="step-verify-bittorrent">
<p class="indent">Your BitTorrent client will automatically verify your download when it is complete.</p> <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> <div id="step-continue-bittorrent">
<a class="indent">Skip download</a> <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>
</div> </div>
.unsupported-browser { display: inline-block !important; }
.supported-browser, .supported-browser,
.outdated-browser, .outdated-browser,
.unsupported-browser, .unsupported-browser {
display: none;
}
.no-js { .no-js {
display: block;
}
#skip-verification-direct,
#skip-verification-bittorrent,
#next-direct,
#next-bittorrent {
display: none; display: none;
} }
...@@ -25,3 +33,7 @@ span.step-number { ...@@ -25,3 +33,7 @@ span.step-number {
.indent { .indent {
margin-left: 30px !important; margin-left: 30px !important;
} }
.disabled {
pointer-events: none;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment