Last active
July 4, 2018 18:27
-
-
Save ryanlucas/3ffab181fc0a71460a4b88130a8c0dbc to your computer and use it in GitHub Desktop.
Loading Button
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
yep |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading Button | |
Go | |
press button -> Loading | |
Loading | |
successful -> Success | |
failure -> Error | |
Success | |
Error | |
try again -> Loading | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function render(model){ | |
function add_styles(css_str){ | |
const StyleID = 'my_stylez'; | |
let $s = document.querySelector('#' + StyleID); | |
if(null === $s){ | |
$s = document.createElement('style'); | |
$s.id = StyleID | |
document.head.appendChild($s) | |
} | |
$s.innerText = css_str; | |
} | |
// Define CSS | |
add_styles(` | |
.container { | |
background: #f6c9ca; | |
height: 100%; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
`); | |
// Set up CSS as object attributes | |
let attrs = { | |
width: "100px", | |
height: "40px", | |
background: "white", | |
display: "flex", | |
alignItems: "center", | |
justifyContent: "center", | |
borderRadius: "24px", | |
boxShadow: "0 2px 8px rgba(0,0,0,0.1)", | |
fontFamily: "Tahoma, Arial, Helvetica, sans-serif", | |
fontWeight: "bold", | |
textTransform: "uppercase", | |
fontSize: "14px", | |
} | |
let icons = { | |
go: {}, | |
loading: {color: "grey"}, | |
success: {}, | |
error: {} | |
} | |
let current_state = model.active_states[0].name; | |
if (current_state === "Loading" ) { | |
Object.assign(attrs, icons.loading); | |
} | |
return $('div', {class: "container"}, | |
$('div', {style: attrs, 'data-state': current_state, onClick: function(){ model.emit("Loading") }}, | |
$('label', current_state))); | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment