Ramjet Experiments

by ramnathv

HTML

<script src="//rawgit.com/Rich-Harris/ramjet/master/dist/ramjet.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<div>
    <button id="btn">Transform</button>
</div>
<div id="a" class="a">a</div>
<div id="b" class='b hidden'>b</div>

CSS

#a, #b{
  width: 30px;
  height: 30px;
  font-size: 4em;
  padding: 1em;
  vertical-align: middle;
  display: block;
}
#b{
  width: 120px;
  height: 120px;
  position: fixed;
}

#a {
    background: red;
    position: fixed;
    visibility: visible;
}
#b {
    background: yellow;
    position: fixed;
    visibility: visible;
}
#a.hidden, #b.hidden {
    background: #fff;
    border: 1px solid green;
    visibility: hidden;
}

CoffeeScript

aTob = true
d3.select('#btn').on 'click', ->
  if aTob
     aTob = false
     d3.select('#b').classed('hidden', false)
     ramjet.transform(a, b, {
       done: -> b.classList.remove('hidden')
     })
     #d3.select('#a').classed('hidden', true)
     d3.select('#b').classed('hidden', false)
  else
     aTob = true
     d3.select('#a').classed('hidden', false)
     ramjet.transform(b, a, {
        done: -> a.classList.remove('hidden')
     })
     d3.select('#b').classed('hidden', true)
     d3.select('#a').classed('hidden', false)