Mithril Animator

by ramnathv

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.2-rc.1/mithril.min.js"></script>
<link rel="stylesheet" href="//necolas.github.io/css3-github-buttons/gh-buttons.css">
<div id="app"></div>

CSS

.play{text-align: center;}
.progress{
  width: '100%';
  height: 10px;
  background: #ddd;
}
.fg{
  background: steelblue;
  height: 10px;
  position: relative;
  top: 0;
  left: 0
  -webkit-transition: width 1s; /* Safari */
  transition: width 1s;
}
.controls{
  margin: 0 auto;
}
.item {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 10px;
  height: 10px;
  cursor: pointer;
  font-size: 9px;
  padding: 3px;
  font-family: sans-serif;
  text-align: center;
  vertical-align: middle;
  opacity: 0.8;
}

CoffeeScript

root = exports ? this
root.Animator = 
  controller: (props) ->
    # state
    pos = m.prop(0)
    paused = m.prop(false)
    # derived
    pct = -> Math.round(pos()/(props.items.length - 1)*100)
    # observers
    play = (e) =>
      paused(false)
      timer = setInterval (->
        if (pos() is props.items.length - 1 || paused()) 
          clearInterval(timer)
        else
          pos(pos() + 1)
        m.redraw()
      ), props.delay || 1000
    pause = (e) => paused(true)
    goToNext = (e) => pos(pos() + 1)
    disableNext = -> pos() is props.items.length - 1
    goToPrev = (e) => pos(pos() - 1)
    disablePrev = -> pos() is 0
    keyEvents = (e) -> switch e.keyCode 
      when 39 then goToNext() if !disableNext()
      when 37 then goToPrev() if !disablePrev()
      #m.redraw()
    {pos, play, goToNext, goToPrev, disableNext, disablePrev, pct,
     keyEvents, pause}
  view: (ctrl, props) ->
    m 'div', {onkeydown: ctrl.keyEvents},
      m 'div.foo', props.items.map (d, i) ->
        bg = if i is ctrl.pos() then 'chocolate' else 'lightblue'
        m 'div.item', {
          onclick: (e) -> ctrl.pos(i)
          style: {background: bg}
        }, i
      #m 'div.progress',
      #  m 'div.fg', {style: {width: ctrl.pct() + "%"}}
      m 'img', {
        src: props.items[ctrl.pos()]
        width: "100%",
        tabindex: "0"
      }
      m 'div.controls',
        m 'button.prev', {
          disabled: ctrl.disablePrev()
          onclick: ctrl.goToPrev
        }, "<<"
        m 'button.play', {onclick: ctrl.play}, "Play"
        m 'button.play', {onclick: ctrl.pause}, "Pause"
        m 'button.next',  {
          disabled: ctrl.disableNext()
          onclick: ctrl.goToNext
        }, ">>"

url = "//brentertz.github.io/scianimator/assets/images/vis/20101208_2015_US_vis.jpg"

images_vis = [
  "assets/images/vis/20101208_1715_US_vis.jpg",
  "assets/images/vis/20101208_1730_US_vis.jpg",
  "assets/images/vis/20101208_1745_US_vis.jpg",
 ...