Mobile Gallery

SketchSystems.spec

Mobile Gallery
  Gallery Closed*
    clicked image -> Gallery Open
  Gallery Open
    clicked-close -> Gallery Closed
    Image View*
      clicked prev -> Image View
      clicked next -> Image View
      clicked grid button -> Grid View
      Zoomed-Out*
        clicked zoom button -> Zoomed-In
        pinched in -> Zoomed-In
        swiped horizontal -> Zoomed-Out
        swiped vertical -> Far Enough Swipe?
      Zoomed-In
        clicked zoom button -> Zoomed-Out
        pinched out -> Zoomed-Out
      Far Enough Swipe?
        yes -> Gallery Closed
        no -> Image View
    Grid View
      clicked image -> Image View
      clicked grid button -> Image View

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}