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}"
-
unless song.melody.nil? or song.melody.empty? pre.melody=song.melody
-
unless song.verses.empty? .lyrics
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()