Add donation screen

src/index.html

@@ -42,7 +42,7 @@ <h1 id="app-title" class="display-3">DeBitpay</h1>
             💝 Donations are always appreciated!
           </p>
           <div>
-            <a href="https://donate.alexkaul.com/debitpay" class="btn btn-secondary" target="_blank">Donate Bitcoin</a>
+            <button class="btn btn-warning donate">Donate Bitcoin</button>
           </div>
         </div>
         <div class="col-xs-12 col-md-5 text-center text-md-right pb-5">

src/modules/donation.js

@@ -0,0 +1,51 @@
+import $ from 'jquery'
+
+const urlOneTimeAddress = 'https://donate.alexkaul.com/debitpay/widget?isTransparentBg=1'
+
+const tplScreen = `
+<div>
+  <iframe
+    src="${urlOneTimeAddress}"
+    allowtransparency="true"
+    style="position: fixed; left: 0; top:0; display: block; width: 100%; height: 100%; border: none; background: rgba(204, 207, 210, 0.75); background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, rgba(204, 207, 210, 0.75) 100%);"
+  ></iframe>
+  <button
+    type="button"
+    class="close"
+    aria-label="Close"
+    style="position: fixed; right: 40px; top:20px;"
+  >
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+`
+
+let $donationScreen
+let $preloadLink
+
+export function showDonationScreen() {
+  if ($donationScreen) {
+    $donationScreen.remove()
+  }
+
+  $donationScreen = $(tplScreen)
+  $('html').css('overflow', 'hidden')
+  $donationScreen
+    .hide()
+    .appendTo('body')
+    .fadeIn(300, 'swing')
+  $('button.close', $donationScreen).click(evt => {
+    evt.preventDefault()
+    $donationScreen.fadeOut(300, 'swing', function() {
+      $(this).remove()
+      $('html').css('overflow', '')
+    })
+  })
+}
+
+export function preloadDonationScreen() {
+  if (!$preloadLink) {
+    $preloadLink = $(`<link rel="prefetch" href="${urlOneTimeAddress}">`) // use prefetch, because preload produces a warning for as=document
+    $preloadLink.appendTo('head')
+  }
+}

src/modules/page.js

@@ -7,6 +7,7 @@ import {paymentDataToModalContent} from './paymentModal'
 import {htmlHowToRunLocally} from './howToRunLocally'
 import {htmlHowItWorks} from './howItWorks'
 import {htmlImportantNotice} from './importantNotice'
+import {showDonationScreen, preloadDonationScreen} from './donation'
 
 const isLocalApp = (window.location.protocol === 'file:')
 
@@ -76,6 +77,16 @@ function initImportantNotice () {
   })
 }
 
+function initDonate() {
+  $('button.donate').click(evt => {
+    evt.preventDefault()
+    showDonationScreen()
+  })
+  $('button.donate').mouseover(_ => {
+    preloadDonationScreen()
+  })
+}
+
 function initFooter () {
   btnToCopyBtn($('footer .btn-clipboard'))
 }
@@ -90,6 +101,7 @@ export function initPage () {
   initHowToRunLocally()
   initHowItWorks()
   initImportantNotice()
+  initDonate()
   initFooter()
   loadingDone()
 }