Merge pull request #229 from bigchaindb/fix/228

Get started: switch to postTransactionCommit

_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, '<strong class="code-example__message">$1</strong>');
-    })
+    // 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!', '<strong class="code-example__message"></strong>')
+                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')
@@ -117,12 +125,29 @@ window.addEventListener('DOMContentLoaded', function domload(event) {
         }
     })
 
+    postButton.style.width = `${postButton.offsetWidth}px`
+
+    function buttonStateLoading() {
+        postButton.classList.add('disabled')
+        postButton.innerHTML = '<span class="loader loader--dark"></span>'
+    }
+
+    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')
+        buttonStateLoading()
 
+        const message = messageInput.value
         const alice = new driver.Ed25519Keypair()
         const tx = driver.Transaction.makeCreateTransaction(
             { message: message },
@@ -141,20 +166,17 @@ 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')
             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)
@@ -165,6 +187,8 @@ window.addEventListener('DOMContentLoaded', function domload(event) {
 
             const outputContent = reason.status + ' ' + reason.statusText
             output.textContent = outputContent
+
+            buttonStateFail()
         }).then((res) => console.log('Transaction status:', res.status))
 
     }, false)

_src/_assets/styles/_page-getstarted.scss

@@ -36,6 +36,10 @@
     .form-group:first-child {
         margin-top: 0;
     }
+
+    .message {
+        text-align: left;
+    }
 }
 
 .form--transaction__content {

_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';

_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 `<a>` elements

_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);
+    }
+}

_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 }}
                 </div>