bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2024-11-22 01:36:55 +01:00
Code Releases Activity

quick refactoring

Browse Source 
* abstract out button states
* rewrite remaining jQuery in vanilla js
* remove for(...) loops, use forEach
This commit is contained in:
Matthias Kretschmann 2018-05-03 10:54:27 +02:00
parent b6b5ca0441
commit 92784a08bd
Signed by: m
GPG Key ID: 606EEEF3C479A91F
1 changed files with 42 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
_src/_assets/javascripts/page-getstarted.js
View File

@ -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')
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()
const codeMessages = document.querySelectorAll('.code-example__message')
// update message helper function
function updateMessage(content) {
const codeMessages = document.querySelectorAll('.code-example__message')
const escapedContent = content.replace(/'/g, "\\'")
for (var codeMessage of codeMessages) {
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 = '<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')
postButton.innerHTML = '<span class="loader loader--dark"></span>'
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)