Adds button and click handler to display a specifi distro

_includes/layout/base/wallets-list.html

@@ -8,7 +8,7 @@ http://opensource.org/licenses/MIT.
 <div class="wallets" id="wallets" onclick="walletListener(event);" ontouchstart="walletListener(event);">
 {% for wallet in site.wallets %}
     <div>
-      <a>
+      <a href="/en/wallets/{{ wallet.id }}/#!platform={{ page.platform }}&os={{ page.os }}">
         <img src="/img/wallet/{{ wallet.id }}.png" alt="{{ wallet.title }}" />
         {{ wallet.titleshort }}
       </a>

_layouts/wallet-container.html

@@ -22,7 +22,7 @@ layout: wallet-platform-container
     <div class="wallet-platforms-menu">
       {% for platform in page.platform %}
         {% for os in platform.os %}
-        <button>
+        <button class="wallet-os-btn" id="{{ os.name }}-btn" onclick="walletDistributionListener('{{ os.name }}', '{{ platform.name }}');">
           <img src="/img/os/{{ os.name }}.png"
                alt="{% translate platform{{os.name}} choose-your-wallet %}"
                title="{% translate platform{{os.name}} choose-your-wallet %}" />

_sass/_wallets.scss

@@ -281,6 +281,20 @@ $scores:
                 border-radius: 4px;
                 text-align: center;
 
+                &.active {
+                    background-color: #2c6fad;
+                    background-image: -o-linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
+                    background-image: -moz-linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
+                    background-image: -webkit-linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
+                    background-image: -ms-linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
+                    background-image: linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
+                    color: #fff;
+
+                    &:hover {
+                        background-image: none;
+                    }
+                }
+
                 span {
                     vertical-align: text-top;
                 }
@@ -295,6 +309,10 @@ $scores:
             margin-bottom: 20px;
             display: flex;
 
+            &.hidden {
+                display: none;
+            }
+
             .wallet-os-screenshot {
                 img {
                     border: 1px solid $grey;

js/main.js

@@ -423,6 +423,39 @@ function walletScoreListener(e) {
   onTouchClick(e, init);
 }
 
+function walletScoreListener(e) {
+  // Listen for events on wallet scores and display them on tap.
+  var init = function(e) {
+    var t = getEvent(e, 'target');
+    while (!t.parentNode.parentNode.parentNode.id) t = t.parentNode;
+    (t.className.indexOf('hover') === -1) ? addClass(t, 'hover'): removeClass(t, 'hover');
+  };
+  onTouchClick(e, init);
+}
+
+function walletDistributionListener(os, platform) {
+  window.location.hash = "!platform=" + platform + "&os=" + os;
+  var osContainers = document.querySelectorAll('.wallet-os-container');
+  var osButtons = document.querySelectorAll('.wallet-os-btn');
+  var selected = document.getElementById(os);
+  var button = document.getElementById(os + '-btn');
+  osContainers.forEach(function(el) { addClass(el, 'hidden'); });
+  osButtons.forEach(function(el) { removeClass(el, 'active'); });
+  removeClass(selected, 'hidden');
+  addClass(button, 'active');
+}
+
+(function() {
+  var hash = window.location.hash;
+  if (hash.indexOf('!') > -1 && hash.indexOf('platform') > -1 && hash.indexOf('os') > -1) {
+    var platform = hash.split('&')[0].split('=')[1];
+    var os = hash.split('&')[1].split('=')[1];
+    setTimeout(function() {
+        walletDistributionListener(os, platform);
+    }, 0);
+  }
+})();
+
 function walletShowPlatform(platform) {
   // Show wallets for given platform in the menu.
   var t = null,