From 9dc45b2827f5fedfa500bb22cae4504c69eea064 Mon Sep 17 00:00:00 2001
From: Igor Kuzmenko <igor@kuzzmi.com>
Date: Sat, 5 Aug 2017 22:23:57 +0200
Subject: [PATCH] Adds donation banner and modal window.

Includes auto-conversions between USD and BTC and autogeneration of QR code.
---
 _includes/layout/base/html-head.html        |   2 +
 _includes/layout/base/pagetop-donation.html |  71 +++++++++
 _layouts/base.html                          |   3 +
 _sass/_donation-banner.scss                 | 160 ++++++++++++++++++++
 _sass/screen.scss                           |   1 +
 _translations/en.yml                        |   7 +
 js/main.js                                  | 136 +++++++++++++++++
 7 files changed, 380 insertions(+)
 create mode 100644 _includes/layout/base/pagetop-donation.html
 create mode 100644 _sass/_donation-banner.scss

diff --git a/_includes/layout/base/html-head.html b/_includes/layout/base/html-head.html
index 7ed7c7bd..c260bfaf 100644
--- a/_includes/layout/base/html-head.html
+++ b/_includes/layout/base/html-head.html
@@ -16,6 +16,8 @@ http://opensource.org/licenses/MIT.
 {% if page.lang == 'bg' or page.lang == 'el' or page.lang == 'ko' or page.lang == 'hi' or page.lang == 'pl' or page.lang == 'sl' or page.lang == 'ro' or page.lang == 'ru' or page.lang == 'tr' or page.lang == 'uk' or page.lang == 'zh_CN' or page.lang == 'zh_TW' %}<link rel="stylesheet" href="/css/sans.css">{% endif %}
 <script type="text/javascript" src="/js/base.js"></script>
 {% if page.id != 'download' %}<script type="text/javascript" src="/js/main.js"></script>{% endif %}
+<script src="/js/jquery/jquery-1.11.2.min.js"></script>
+<script src="/js/jquery.qrcode.min.js"></script>
 <link rel="shortcut icon" href="/favicon.png">
 <link rel="apple-touch-icon-precomposed" href="/img/icons/logo_ios.png"/>
 <script>
diff --git a/_includes/layout/base/pagetop-donation.html b/_includes/layout/base/pagetop-donation.html
new file mode 100644
index 00000000..f69e1477
--- /dev/null
+++ b/_includes/layout/base/pagetop-donation.html
@@ -0,0 +1,71 @@
+{% comment %}
+This file is licensed under the MIT License (MIT) available on
+http://opensource.org/licenses/MIT.
+{% endcomment %}
+
+<div class="donation-container">
+  <div class="donation-text">
+    <p>
+      {% translate donation-banner-text layout %}
+    </p>
+    <button class="donation-btn" onclick="openDonationModal()">
+      {% translate donation-banner-donate-button layout %}
+    </button>
+  </div>
+  <div class="donation-visibility-toggle" onclick="toggleDonationBanner()">
+    {% translate donation-banner-toggle-button layout %}
+  </div>
+</div>
+
+<div
+  id="donation-modal"
+  style="display: none"
+  class="donation-modal hidden">
+  <div class="modal-dialog">
+    <div class="modal-header">
+      <div class="modal-close-btn" onclick="closeDonationModal()">×</div>
+      <p class="modal-header-text">{% translate donation-modal-header layout %}</p>
+    </div>
+    <p class="modal-subheader">{% translate donation-modal-subheader layout %}</p>
+    <div style="text-align: center;">
+      <div id="donation-qr-code" data-address="{{ site.donation_banner.address }}"></div>
+    </div>
+    <div>
+      <a
+        class="donation-btc-address"
+        href="bitcoin:{{ site.donation_banner.address }}"
+        target="_blank">
+        {{ site.donation_banner.address }}
+      </a>
+    </div>
+    <div class="modal-body bg-white" style="overflow-y:hidden;text-align: center;">
+      <div>
+        {% for amount in site.donation_banner.amounts_in_usd %}
+        <button class="donation-amount-btn" data-amount-usd="{{ amount }}">
+          ${{ amount }}.00
+          <div class="donation-amount-usd-in-btc">(... BTC)</div>
+        </button>
+        {% endfor %}
+      </div>
+
+      <div>
+        <input
+          style="margin-right: 15px"
+          type="text"
+          placeholder="{% translate donation-modal-input-custom-amount layout %} (BTC)"
+          id="donation-input-amount-btc" class="donation-amount-input">
+        <input
+          type="text"
+          placeholder="{% translate donation-modal-input-custom-amount layout %} (USD)"
+          id="donation-input-amount-usd" class="donation-amount-input">
+      </div>
+
+      <div>
+        <textarea
+          class="donation-amount-input"
+          id="donation-input-message"
+          placeholder="{% translate donation-modal-optional-message layout %}"></textarea>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/_layouts/base.html b/_layouts/base.html
index 8fda7d4b..4c1951c3 100644
--- a/_layouts/base.html
+++ b/_layouts/base.html
@@ -10,6 +10,9 @@
 </head>
 
 <body>
+{% if site.donation_banner.display %}
+  {% include layout/base/pagetop-donation.html %}
+{% endif %}
 {% include layout/base/pagetop-detect-mobile.html %}
 
 {% include layout/base/pagetop-alert.html %}
diff --git a/_sass/_donation-banner.scss b/_sass/_donation-banner.scss
new file mode 100644
index 00000000..1363b896
--- /dev/null
+++ b/_sass/_donation-banner.scss
@@ -0,0 +1,160 @@
+.donation-btn {
+    background-color: #4CAF50;
+    background-image: -webkit-linear-gradient(bottom, #318f20 14%, #4cad2c 70%);
+    border: none;
+    border-radius: 10px;
+    padding: 10px 20px;
+    color: white;
+    font-weight: 600;
+}
+
+.donation-container {
+    text-align: center;
+
+    .donation-text {
+        background-color: #ef9e5b;
+        color: #ffffff;
+        font-weight: 700;
+        transition: margin-top .2s ease-in;
+        height: 90px;
+        margin-top: -110px;
+        padding: 10px;
+
+        &.expanded {
+            margin-top: 0;
+            border-bottom: 4px solid #ef9e5b;
+            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.22);
+        }
+    }
+
+    .donation-visibility-toggle {
+        cursor: pointer;
+        display: inline-block;
+        background-color: #ef9e5b;
+        color: #fefefe;
+        font-weight: 600;
+        border: 4px solid #ef9e5b;
+        border-top: 0;
+        padding: 10px 50px;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.22);
+
+        &.active {
+            margin-top: -4px;
+        }
+    }
+}
+
+.donation-modal {
+/* display: block; */
+    background: white;
+    padding: 0 20px;
+    padding-bottom: 20px;
+    position: absolute;
+    top: 70px;
+    right: 0;
+    left: 0;
+    z-index: 1000;
+    max-width: 600px;
+    margin: 0 auto;
+    border-radius: 10px;
+    transition: transform .2s ease-in, opacity .12s ease-in;
+    transform-origin: top;
+
+    &.hidden {
+        transform: scale(0.7);
+        opacity: 0;
+    }
+
+    &.open {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    .modal-close-btn {
+        float: right;
+        cursor: pointer;
+
+        &:hover {
+            color: #2c6fad;
+        }
+    }
+
+    .modal-header-text {
+        color: #383838;
+        font-size: 110%;
+        text-align: left;
+        font-weight: bold;
+        margin: 1em 0;
+    }
+
+    .modal-subheader {
+        text-align: center;
+        font-size: 16px;
+        font-weight: bold;
+        margin: 1.33em 0;
+    }
+
+    .donation-btc-address {
+        text-align: center;
+        font-size: 16px;
+        font-weight: bold;
+        margin: 1.33em 0;
+        display: block;
+        text-align: center;
+    }
+
+    .modal-body {
+        .donation-amount-btn {
+            cursor: pointer;
+            background-color: #ef9e5b;
+            background-image: -webkit-linear-gradient(bottom, #de8236 14%, #ef9e5b 70%);
+            border: none;
+            border-radius: 10px;
+            padding: 10px 20px;
+            color: white;
+            margin-right: 10px;
+            font-weight: 600;
+
+            &:hover {
+                background-image: -webkit-linear-gradient(bottom, #ef9e5b 14%, #de8236 70%);
+            }
+
+            .donation-amount-usd-in-btc {
+                font-size: 75%;
+            }
+        }
+
+        .donation-amount-input {
+            width: 203px;
+            margin-top: 15px;
+            padding: 10px 15px;
+            border: 2px solid #dadada;
+            border-radius: 10px;
+        }
+
+        textarea.donation-amount-input {
+            width: 460px;
+            margin: 15px 0;
+        }
+    }
+}
+
+.modal-drop {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 101;
+    background-color: rgba(0, 0, 0, 0.38);
+    opacity: 0;
+    transition: opacity .2s ease-in;
+}
+
+@media handheld, only screen and ( max-width: 60em ), only screen and ( max-device-width: 60em ){
+    .donation-container {
+        display: none;
+    }
+}
diff --git a/_sass/screen.scss b/_sass/screen.scss
index cc104cef..4887b9fb 100644
--- a/_sass/screen.scss
+++ b/_sass/screen.scss
@@ -2320,3 +2320,4 @@ h2 .rssicon{
 
 @import 'wallets';
 @import 'wallets-menu';
+@import 'donation-banner';
diff --git a/_translations/en.yml b/_translations/en.yml
index 076103fc..1b33232e 100644
--- a/_translations/en.yml
+++ b/_translations/en.yml
@@ -888,6 +888,13 @@
     sponsor: "A community website sponsored by"
     getstarted: "Get started with Bitcoin"
     bitcoin-core: "Bitcoin Core"
+    donation-banner-text: "Bitcoin.org is a community funded project, donations are appreciated and used to improve the website."
+    donation-banner-toggle-button: "Bitcoin.org needs your support!"
+    donation-banner-donate-button: "Make a donation"
+    donation-modal-header: "Donate to Bitcoin.org"
+    donation-modal-subheader: "Please use this QR code or send <br />donation manually using address below"
+    donation-modal-input-custom-amount: "Or custom amount?"
+    donation-modal-optional-message: "Optional message to Bitcoin.org"
   url:
     about-us: about-us
     bitcoin-for-developers: bitcoin-for-developers
diff --git a/js/main.js b/js/main.js
index 3d479d1f..a53eb6d6 100644
--- a/js/main.js
+++ b/js/main.js
@@ -527,3 +527,139 @@ var xint = setInterval(function() {
   addEvent(document.body, 'mousedown', makeEditable);
   clearInterval(xint);
 }, 200);
+
+function generateDonationUrl(address, amountBtc, message) {
+    var result = [
+        address
+    ];
+
+    amountBtc = parseFloat(amountBtc);
+
+    if (!isNaN(amountBtc)) {
+        result.push('?amount=' + amountBtc);
+    }
+
+    if (message !== '') {
+        message = encodeURIComponent(message);
+        result.push(result.length === 1 ? '?' : '&');
+        result.push('message=' + message);
+    }
+
+    return result.join('');
+}
+
+function generateDonationQrCode() {
+    var qrcodeContainer = $('#donation-qr-code');
+    qrcodeContainer.empty();
+
+    var address = qrcodeContainer.data('address');
+    var amount = $('#donation-input-amount-btc').val();
+    var message = $('#donation-input-message').val();
+
+    var text = 'bitcoin:' + generateDonationUrl(address, amount, message);
+
+    $('#donation-qr-code').qrcode({
+        width: 150,
+        height: 150,
+        text: text
+    });
+
+}
+
+function loadTickerPrices() {
+    $.ajax('https://blockchain.info/ticker').then(function(data) {
+        var rate = data.USD.last;
+
+        function usdToBtc(amount) {
+            var amountUsd = parseFloat(amount);
+            if (isNaN(amountUsd)) {
+                return 0;
+            }
+            var amountBtc = amountUsd / rate;
+            return amountBtc.toFixed(8);
+        }
+
+        function btcToUsd(amount) {
+            var amountBtc = parseFloat(amount);
+            if (isNaN(amountBtc)) {
+                return 0;
+            }
+            var amountUsd = amountBtc * rate;
+            return amountUsd.toFixed(2);
+        }
+
+        $('#donation-input-amount-usd').on('keyup', function() {
+            var amount = $(this).val();
+            $('#donation-input-amount-btc').val(usdToBtc(amount));
+            generateDonationQrCode();
+        });
+
+        $('#donation-input-amount-btc').on('keyup', function() {
+            var amount = $(this).val();
+            $('#donation-input-amount-usd').val(btcToUsd(amount));
+            generateDonationQrCode();
+        });
+
+        $('#donation-input-message').on('keyup', function() {
+            generateDonationQrCode();
+        });
+
+        $('[data-amount-usd]').each(function() {
+            var amountUsd = $(this).data('amount-usd');
+            var amountBtc = usdToBtc(amountUsd);
+            $('div', this).text('(' + amountBtc + ' BTC)');
+
+            $(this).on('click', function() {
+                $('#donation-input-amount-btc').val(amountBtc);
+                $('#donation-input-amount-usd').val(amountUsd);
+
+                generateDonationQrCode();
+            });
+        });
+    });
+}
+
+function openDonationModal() {
+    var drop = $('<div class="modal-drop" />');
+    var body = $('body');
+    var modal = $('#donation-modal');
+    body.append(drop);
+    body.css('overflow', 'hidden');
+    modal.css('display', 'block');
+
+    drop.on('click', closeDonationModal);
+
+    // postpone opacity update
+    setTimeout(function() {
+        drop.css('opacity', 1);
+        modal.removeClass('hidden');
+        modal.addClass('open');
+    }, 0);
+
+    loadTickerPrices();
+    generateDonationQrCode();
+}
+
+function closeDonationModal() {
+    var drop = $('.modal-drop');
+    var body = $('body');
+    var modal = $('#donation-modal');
+
+    drop.css('opacity', 0);
+    body.css('overflow', 'auto');
+
+    setTimeout(function() {
+        drop.remove();
+        modal.addClass('hidden');
+        modal.removeClass('open');
+        modal.css('display', 'none');
+    }, 120);
+}
+
+function toggleDonationBanner() {
+    var banner = $('.donation-text');
+    var toggle = $('.donation-visibility-toggle');
+
+    toggle.toggleClass('active');
+    banner.toggleClass('expanded');
+}