Editable Text*

SketchSystems.spec

Editable Text*
  Normal*
    hover -> Hover
    Normal-Initial*
    Normal-Success

  Hover
    leaveHover -> Normal
    click -> Active

  Active
    Active-Initial*

    Active-Thinking
      success -> Active-Success
      error -> Active-Error

    Active-Success
    Active-Error
    
    startsTyping -> Active-Thinking
    exit -> Normal-Success

SketchSystems_prototype.js

const lightPurple = "#e3dfff"

function getText(currentState) {
  switch(currentState) {
    case "Active-Thinking":
    case "Active-Error":
        return "So"
    case "Active-Thinking":
    case "Normal-Success":
    case "Active-Success":
       return "Social Studies Class"
    default:
      return "Untitled Class"
  }
}

function renderText(currentState) {
  const style = {
    backgroundColor: /^Active/.test(currentState) ? lightPurple : '',
    padding: '2px 5px',
    margin: '0',
  }
  return $("h2", { style },  getText(currentState))
}

function getHelperIcon(currentState) {
  switch (currentState) {
    case "Active-Success":
       return "✅"
    case "Active-Error":
       return "🚫"
    case "Error":
       return "🚫"
    default:
      return "✏️"
  }
}

function getHelperText(currentState) {
  switch(currentState) {
    case "Normal-Initial":
    case "Normal-Success":
        return ""
    case "Active-Thinking":
        return "saving changes..."
    case "Active-Success":
      return "Saved!"
    case "Active-Error":
      return "Titles must be at least 3 letters"
    case "Hover":
    default:
      return "Click to edit"
  }
}

function renderHelper(currentState) {
  const style = {
    display: 'inline-block',
    border: /Normal/.test(currentState) ? '1px solid transparent' : '1px solid gray',
    padding: '5px 10px',
    margin: '3px 0',
    borderRadius: '2px',
    fontWeight: 400
  }
  return $(
    "h5",
     { style },
     $('span', getHelperIcon(currentState)),
    getHelperText(currentState)
  )

}
  

function render(model){
  const currentState = model.active_states[0].name
  const mainStyle = { fontFamily: 'Helvetica Neue', padding: '20px', margin: '20px', border: '1px solid purple' }
  return $("div",
           { style: mainStyle },
           renderText(currentState),
           renderHelper(currentState),
           
          );
}