Loading Button

is_deleted

yep

SketchSystems.spec

Loading Button
  
  Go
    press button -> Loading
  
  Loading
    successful -> Success
    failure -> Error

  Success
  
  Error
    try again -> Loading
  

SketchSystems_prototype.js

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