From eaa5e38b2068acb087d0d1bf5f773049cc77b987 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 2 May 2018 18:09:02 +0200 Subject: [PATCH 1/4] switch to postTransactionCommit --- _src/_assets/javascripts/page-getstarted.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/_assets/javascripts/page-getstarted.js b/_src/_assets/javascripts/page-getstarted.js index a17de4e..594b49b 100644 --- a/_src/_assets/javascripts/page-getstarted.js +++ b/_src/_assets/javascripts/page-getstarted.js @@ -141,7 +141,7 @@ window.addEventListener('DOMContentLoaded', function domload(event) { const messageFail = document.getElementsByClassName('message--fail')[0] const transactionLink = document.getElementsByClassName('transaction-link')[0] - conn.postTransactionSync(txSigned).then((response) => { + conn.postTransactionCommit(txSigned).then((response) => { waiting.classList.add('hide') messageInitial.classList.add('hide') responseArea.classList.remove('hide') From 8c2500c93f3ca4783888efbee61773a13e64ae34 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 2 May 2018 18:52:03 +0200 Subject: [PATCH 2/4] add a loader when transaction is sent * closes #135 --- _src/_assets/javascripts/page-getstarted.js | 6 ++++ _src/_assets/styles/_page-getstarted.scss | 4 +++ _src/_assets/styles/bigchain.scss | 1 + _src/_assets/styles/bigchain/_buttons.scss | 4 +++ _src/_assets/styles/bigchain/_loader.scss | 31 +++++++++++++++++++++ 5 files changed, 46 insertions(+) create mode 100644 _src/_assets/styles/bigchain/_loader.scss diff --git a/_src/_assets/javascripts/page-getstarted.js b/_src/_assets/javascripts/page-getstarted.js index 594b49b..87ada69 100644 --- a/_src/_assets/javascripts/page-getstarted.js +++ b/_src/_assets/javascripts/page-getstarted.js @@ -117,11 +117,14 @@ window.addEventListener('DOMContentLoaded', function domload(event) { } }) + postButton.style.width = `${postButton.offsetWidth}px` + postButton.addEventListener('click', function(e) { e.preventDefault() const message = messageInput.value postButton.classList.add('disabled') + postButton.innerHTML = '' const alice = new driver.Ed25519Keypair() const tx = driver.Transaction.makeCreateTransaction( @@ -165,6 +168,9 @@ window.addEventListener('DOMContentLoaded', function domload(event) { const outputContent = reason.status + ' ' + reason.statusText output.textContent = outputContent + + postButton.classList.remove('disabled') + postButton.innerHTML = 'Off you go' }).then((res) => console.log('Transaction status:', res.status)) }, false) diff --git a/_src/_assets/styles/_page-getstarted.scss b/_src/_assets/styles/_page-getstarted.scss index d59e7d7..326880d 100644 --- a/_src/_assets/styles/_page-getstarted.scss +++ b/_src/_assets/styles/_page-getstarted.scss @@ -36,6 +36,10 @@ .form-group:first-child { margin-top: 0; } + + .message { + text-align: left; + } } .form--transaction__content { diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss index 9c2e4f2..4e98451 100644 --- a/_src/_assets/styles/bigchain.scss +++ b/_src/_assets/styles/bigchain.scss @@ -16,6 +16,7 @@ // Components @import 'bigchain/typography'; @import 'bigchain/tables'; +@import 'bigchain/loader'; @import 'bigchain/buttons'; @import 'bigchain/forms'; @import 'bigchain/input-group'; diff --git a/_src/_assets/styles/bigchain/_buttons.scss b/_src/_assets/styles/bigchain/_buttons.scss index fdbba0e..24d680e 100644 --- a/_src/_assets/styles/bigchain/_buttons.scss +++ b/_src/_assets/styles/bigchain/_buttons.scss @@ -47,6 +47,10 @@ margin-right: .25rem; margin-bottom: -1px; } + + .loader { + margin-bottom: -.2rem; + } } // Future-proof disabling of clicks on `` elements diff --git a/_src/_assets/styles/bigchain/_loader.scss b/_src/_assets/styles/bigchain/_loader.scss new file mode 100644 index 0000000..91e50e7 --- /dev/null +++ b/_src/_assets/styles/bigchain/_loader.scss @@ -0,0 +1,31 @@ +.loader { + border-radius: 50%; + width: 1rem; + height: 1rem; + font-size: 1rem; + text-indent: -9999rem; + border-top: 2px solid rgba(#fff, .2); + border-right: 2px solid rgba(#fff, .2); + border-bottom: 2px solid rgba(#fff, .2); + border-left: 2px solid #fff; + transform: translateZ(0); + animation: spin 1.1s infinite linear; + display: inline-block; +} + +.loader--dark { + border-top-color: rgba($brand-main-blue, .2); + border-right-color: rgba($brand-main-blue, .2); + border-bottom-color: rgba($brand-main-blue, .2); + border-left-color: $brand-main-blue; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} From b6b5ca0441f3a20f7981e67654c45e76d28ae94e Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 2 May 2018 18:53:37 +0200 Subject: [PATCH 3/4] update code example --- _src/developers/getstarted.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/developers/getstarted.html b/_src/developers/getstarted.html index c3fbbf3..ed5c763 100644 --- a/_src/developers/getstarted.html +++ b/_src/developers/getstarted.html @@ -120,7 +120,7 @@ const tx = driver.Transaction.makeCreateTransaction( driver.Transaction.makeEd25519Condition(alice.publicKey))], alice.publicKey) const txSigned = driver.Transaction.signTransaction(tx, alice.privateKey) -conn.postTransactionSync(txSigned) +conn.postTransactionCommit(txSigned) ``` {% endcapture %}{{ nodejs | markdownify }} From 92784a08bd81cf9ddfa8c2036b9d2ee034cc1e48 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 3 May 2018 10:54:27 +0200 Subject: [PATCH 4/4] quick refactoring * abstract out button states * rewrite remaining jQuery in vanilla js * remove for(...) loops, use forEach --- _src/_assets/javascripts/page-getstarted.js | 66 +++++++++++++-------- 1 file changed, 42 insertions(+), 24 deletions(-) diff --git a/_src/_assets/javascripts/page-getstarted.js b/_src/_assets/javascripts/page-getstarted.js index 87ada69..29f5b9d 100644 --- a/_src/_assets/javascripts/page-getstarted.js +++ b/_src/_assets/javascripts/page-getstarted.js @@ -83,31 +83,39 @@ window.addEventListener('DOMContentLoaded', function domload(event) { const driver = window.BigchainDB const API_PATH = proxyUrl + apiPath - const form = document.getElementById('form-transaction') const postButton = document.getElementById('post') + const postButtonText = postButton.innerText const messageInput = document.getElementById('message') - // nasty jquery inside of here, YOLO - $(".highlight code:contains('Blockchain all the things!')").html(function(_, html) { - return html.replace(/(Blockchain all the things!)/g, '$1'); - }) + // put a wrapper around original message, and empty it + function addMessageWrapper() { + const codeExamples = document.querySelectorAll('.highlight code') - const codeMessages = document.querySelectorAll('.code-example__message') - - function updateMessage(content) { - const escapedContent = content.replace(/'/g, "\\'") - for (var codeMessage of codeMessages) { - codeMessage.textContent = escapedContent - } + codeExamples.forEach(function (codeExample) { + if (codeExample.innerText.includes('Blockchain all the things!')) { + let html = codeExample.innerHTML + html = html.replace('Blockchain all the things!', '') + codeExample.innerHTML = html + } + }) + } + addMessageWrapper() + + // update message helper function + function updateMessage(content) { + const codeMessages = document.querySelectorAll('.code-example__message') + const escapedContent = content.replace(/'/g, "\\'") + + codeMessages.forEach(function(codeMessage) { + codeMessage.textContent = escapedContent + }) } - // empty default message - updateMessage('') // quick form validation, live update code example with user input messageInput.addEventListener('input', function() { if (messageInput.value === '') { postButton.setAttribute('disabled', '') - // empty message again + // empty message updateMessage('') } else { postButton.removeAttribute('disabled') @@ -119,13 +127,27 @@ window.addEventListener('DOMContentLoaded', function domload(event) { postButton.style.width = `${postButton.offsetWidth}px` + function buttonStateLoading() { + postButton.classList.add('disabled') + postButton.innerHTML = '' + } + + function buttonStateSuccess() { + postButton.style.opacity = 0 + } + + function buttonStateFail() { + postButton.classList.remove('disabled') + postButton.removeAttribute('disabled') + postButton.innerHTML = postButtonText + } + postButton.addEventListener('click', function(e) { e.preventDefault() - const message = messageInput.value - postButton.classList.add('disabled') - postButton.innerHTML = '' + buttonStateLoading() + const message = messageInput.value const alice = new driver.Ed25519Keypair() const tx = driver.Transaction.makeCreateTransaction( { message: message }, @@ -150,14 +172,11 @@ window.addEventListener('DOMContentLoaded', function domload(event) { responseArea.classList.remove('hide') messageSuccess.classList.remove('hide') - console.log(response) - const outputContent = JSON.stringify(response, null, 2) // indented with 2 spaces output.textContent = outputContent - transactionLink.href = bigchaindbUrl + apiPath + 'transactions/' + response.id - postButton.style.opacity = 0 + buttonStateSuccess() }, reason => { // Error! console.log(reason) @@ -169,8 +188,7 @@ window.addEventListener('DOMContentLoaded', function domload(event) { const outputContent = reason.status + ' ' + reason.statusText output.textContent = outputContent - postButton.classList.remove('disabled') - postButton.innerHTML = 'Off you go' + buttonStateFail() }).then((res) => console.log('Transaction status:', res.status)) }, false)