doctype 1.1 html

head
  title=song.title
  meta charset="UTF-8"
  style type="text/css"==open(URI.encode("https://fonts.googleapis.com/css?family=Cousine|Lora")).read
  script src="abcjs_basic_2.3-min.js"
  script src="abcjs_plugin_2.3-min.js"
  script src="https://d3js.org/d3.v4.min.js"
  javascript:
    window.ABCJS.plugin.auto_render_threshold = 100;
    window.ABCJS.plugin.hide_abc = true;
  script src="songbook.js"
  sass:
    body
      max-width: 1000px
      margin: auto
      padding-top: 50px
      font-family: 'Junge'
      background-color: white
      color: black
      overflow: visible
    html
      overflow-x: hidden
    .lyrics
      line-height: 140%
      font-size: 140%
      overflow-y: hidden
      transform-origin: top
      clear: both
      font-family: 'Cousine'
      margin: auto
      width: 100%
      padding-top: 1em
      position: absolute
      left: 0
      overflow: visible
      white-space: pre
    .chordlyrics
      font-family: 'Cousine', monospace
    .lyricline
      display: inline-block
      white-space: pre-wrap
      text-indent: -2em
      padding-left: 2em
    .verse
      position: absolute
      width: 40%
    .abcrendered
      margin: auto
    h2
      text-align: center
    .order
      position: relative
      top: 10
      left: 0
      float: right
      font-size: 26px
      font-family: 'Cousine', sans
    .chords
      font-family: 'Cousine', monospace
      font-weight: bold
      color: #08c
    .chorusindicator
      color: #0a5
      font-weight: bold
      text-align: center
      display: block
    .chorus
      color: #083
    .author, .key
      font-family: 'Lora', serif
      font-size: 140%
      text-align: center
      font-style: italic
    .author
      float: right
      margin-right: 120px
    .key
      float: left
      margin-left: 120px
    .desc
      clear: both
      margin-bottom: 2em
    .melody
      background: none
      border: none
      clear: both

.order=song.order a name=song.slug h2=“#{song.title}” .info

.desc=song.desc
.author=song.author
.key="Key of #{song.key}"

script==“window.verses = #{song.verses.each_with_index.map { |v, i| next_verse = song.verses[i + 1]; (v.chorus? && !v.chorus_indicator? ? %|<span class=”chorusindicator“>n</span>| : ”“) + v.lines.map(&:to_html).join(”n“) + ((next_verse && next_verse.chorus_indicator? && !v.chorus?) ? %|n<span class=”chorusindicator“></span>| : ”“)}.reject(&:empty?).to_json}”

coffee:

window.verse_index = 0
updateVerses = ->
  v = d3.select('.lyrics').selectAll('.verse').data(verses)
  v.enter().append('div')
   .attr('class', 'verse')
   .style('left', "3000px")
   .html((d) -> d)
  d3.select('.lyrics').selectAll('.verse').transition().duration(500)
   .style 'left', (d, i) ->
      switch
        when i < verse_index then "-100%"
        when i == verse_index then "5%"
        when i == verse_index + 1 then "55%"
        else "100%"
updateVerses()
$("body").keydown (e) ->
  console.log(e.key)
  switch e.key
    when "ArrowLeft"
      verse_index-- if verse_index > 0
    when "ArrowRight", " "
      verse_index++ if verse_index < verses.length - 1
    when "Backspace"
      window.history.back()
    when "ArrowUp"
      window.transposeUp()
    when "ArrowDown"
      window.transposeDown()
  updateVerses()