outro_rails 0.1.0

data/app/views/outro_rails/chord_charts/_chart.html.erb

@@ -0,0 +1,286 @@
+<%#
+  Renders an attached chord chart, including its metadata, an instrument toggle,
+  a transpose-to-key picker (view-only - nothing is saved), the chart body
+  with chords highlighted, and a diagram for every chord it references.
+
+  Meant to be embedded in a host application's own show view:
+
+    render "outro_rails/chord_charts/chart", chord_chart: @song.chord_sheet
+
+  Locals:
+    chord_chart - required, an OutroRails::ChordChart
+    instrument  - "guitar" or "piano", default "guitar"
+    to_key      - preview the chart transposed into this key, default none
+    editable    - let the viewer change which voicing shows for each
+                  chord, right on this page: arrows cycle through every
+                  voicing, with a button to select one or revert to the
+                  default (the host app decides when to pass this - see
+                  OutroRails.chord_chart_voicing_authorization), default false
+
+%>
+
+<%
+  chord_chart = local_assigns.fetch(:chord_chart)
+  valid_instruments = chord_chart_instrument_options.map(&:last)
+  requested   = local_assigns[:instrument]
+  instrument  = valid_instruments.include?(requested) ? requested : "guitar"
+  to_key      = local_assigns[:to_key].presence
+  editable    = local_assigns[:editable] || false
+  transposed  = to_key.present? && to_key != chord_chart.key
+  chords      = chord_chart.display_chords(to_key: to_key)
+
+  voicings = chords.to_h do |symbol, chord|
+    bass = OutroRails::Theory::Transposer.split_bass(symbol).last
+    [ symbol,
+      chord_chart.voicing_for(chord, instrument,
+                              transposed: transposed, bass: bass) ]
+  end
+
+  editing = editable && !transposed
+  selections =
+    if editing
+      chord_chart.voicings.where(instrument: instrument)
+                 .index_by { |s| [ s.chord_id, s.bass ] }
+    else
+      {}
+    end
+%>
+
+<%# The container is keyed by chart id so the voicing cycler's
+    fetch-based refresh (see outro_rails.js) can swap in the updated
+    chart from the redirected response without reloading the page. %>
+<div class="outro-chord-chart" data-outro-chord-chart="<%= chord_chart.id %>">
+  <section class="outro-card">
+    <h2 class="outro-section-heading">
+      <%= chord_chart.song %>
+      <span class="outro-symbol-list__detail"><%= chord_chart.artist %></span>
+    </h2>
+
+    <dl class="outro-spec">
+      <dt class="outro-spec__term">Tuning</dt>
+      <dd class="outro-spec__detail"><%= chord_chart.to_tuning.label %></dd>
+
+      <dt class="outro-spec__term">Capo</dt>
+      <dd class="outro-spec__detail">
+        <% if chord_chart.capo.present? %>
+          <%= capo_fret_label(chord_chart.capo) %>
+        <% else %>
+          None
+        <% end %>
+      </dd>
+
+      <dt class="outro-spec__term">Key</dt>
+      <dd class="outro-spec__detail">
+        <% if transposed %>
+          <%= to_key %>
+          <span class="outro-symbol-list__detail">
+            originally <%= chord_chart.key %>
+          </span>
+        <% else %>
+          <%= chord_chart.key %>
+        <% end %>
+      </dd>
+    </dl>
+
+    <div class="outro-picker outro-picker--flush">
+      <%= form_with url: request.path, method: :get,
+            class: "outro-picker__field" do %>
+        <span class="outro-label">Instrument</span>
+        <%= select_tag :instrument,
+              options_for_select(chord_chart_instrument_options, instrument),
+              class: "outro-select",
+              onchange: "this.form.requestSubmit()" %>
+        <%= hidden_field_tag :to_key, to_key if to_key %>
+      <% end %>
+
+      <%= form_with url: request.path, method: :get,
+            class: "outro-picker__field" do %>
+        <span class="outro-label">Transpose to</span>
+        <%= select_tag :to_key,
+              grouped_options_for_select(chord_chart_key_options,
+                                         to_key || chord_chart.key),
+              class: "outro-select",
+              onchange: "this.form.requestSubmit()" %>
+        <%= hidden_field_tag :instrument, instrument %>
+      <% end %>
+
+      <% if transposed %>
+        <%= link_to "Reset to #{chord_chart.key}",
+              url_for(request.query_parameters.except("to_key")),
+              class: "outro-chip outro-chip--link" %>
+      <% end %>
+    </div>
+  </section>
+
+  <section class="outro-card">
+    <h2 class="outro-section-heading">Chart</h2>
+    <pre class="outro-chord-chart__body"><%=
+      chord_chart_body(chord_chart, to_key: to_key)
+    %></pre>
+
+    <%# Hover-popup figures, one per distinct chord in the body. <template>
+        contents are inert; outro_rails.js clones the matching one into a
+        floating popup when a chord in the chart text is hovered. %>
+    <% voicings.each do |symbol, voicing| %>
+      <% next unless voicing %>
+      <template data-outro-chord-popup="<%= symbol %>">
+        <p class="outro-chord-chart__popup-title"><%= voicing.symbol %></p>
+        <%= render "outro_rails/chord_voicings/figure", voicing: voicing %>
+      </template>
+    <% end %>
+  </section>
+
+  <section class="outro-card">
+    <h2 class="outro-section-heading">
+      Chords
+      <% if editing %>
+        <span class="outro-symbol-list__detail">
+          Use the arrows to browse each chord's voicings and pick
+          which one shows.
+        </span>
+      <% end %>
+    </h2>
+
+    <% if chords.any? %>
+      <ul class="outro-grid outro-grid--figures">
+        <% chords.each do |symbol, chord| %>
+          <% voicing = voicings[symbol] %>
+          <li class="outro-grid__item">
+            <div class="outro-card">
+              <h3 class="outro-section-heading">
+                <%= link_to symbol, outro_rails.chord_path(chord) %>
+                <% if voicing && voicing.symbol != symbol %>
+                  <span class="outro-symbol-list__detail">
+                    <%= voicing.symbol %> voicing
+                  </span>
+                <% end %>
+              </h3>
+
+              <% if !voicing %>
+                <div class="outro-empty">
+                  <p>No <%= instrument %> voicing yet.</p>
+                </div>
+              <% elsif editing %>
+                <%
+                  bass = OutroRails::Theory::Transposer
+                           .split_bass(symbol).last
+                  all_voicings = chord.voicings
+                                      .where(instrument: instrument)
+                                      .order(:position).to_a
+                  normalized = OutroRails::ChordChart::Voicing
+                                 .normalize_bass(bass)
+                  selection = selections[[ chord.id, normalized ]]
+                  default_voicing =
+                    chord_chart.default_voicing_for(chord, instrument,
+                                                    bass: bass)
+
+                  form_params = {
+                    chord_id:   chord.id,
+                    instrument: instrument,
+                    bass:       bass,
+                    return_to:  request.fullpath
+                  }
+                %>
+
+                <div class="outro-voicing-cycler" data-outro-voicing-cycler>
+                  <% if all_voicings.many? %>
+                    <div class="outro-voicing-cycler__nav">
+                      <button type="button" data-voicing-prev
+                              class="outro-button
+                                     outro-voicing-cycler__arrow"
+                              aria-label=
+                                "Previous voicing for <%= symbol %>">
+                        &#9664;
+                      </button>
+                      <span class="outro-voicing-cycler__counter"
+                            data-voicing-counter aria-live="polite"></span>
+                      <button type="button" data-voicing-next
+                              class="outro-button
+                                     outro-voicing-cycler__arrow"
+                              aria-label=
+                                "Next voicing for <%= symbol %>">
+                        &#9654;
+                      </button>
+                    </div>
+                  <% end %>
+
+                  <% all_voicings.each do |candidate| %>
+                    <%
+                      showing = candidate.id == voicing.id
+                      is_pick = selection&.chord_voicing_id == candidate.id
+                      is_default = default_voicing&.id == candidate.id
+                      caption = "#{candidate.symbol} - " \
+                                "position #{candidate.position}"
+                    %>
+                    <div class="outro-voicing-cycler__slide"
+                         data-voicing-slide
+                         <%= "hidden" unless showing %>>
+                      <p class="outro-spec__detail">
+                        <%= render "outro_rails/chord_voicings/figure",
+                              voicing: candidate,
+                              caption: caption %>
+
+                      </p>
+
+                      <% if is_default && selection %>
+                        <%# Not currently on the default: navigating here
+                            offers the revert, same as the pick's slide. %>
+                        <%
+                          revert_path = outro_rails.chord_chart_voicing_path(
+                            chord_chart, selection, **form_params
+                          )
+                        %>
+                        <%= button_to revert_path,
+                              method: :delete, class: "outro-button",
+                              form_class: "outro-inline-form" do %>
+                          <%= image_tag "outro_rails/undo.svg",
+                                class: "outro-button__icon" %>
+                          Revert to default
+                        <% end %>
+                      <% elsif !showing %>
+                        <%
+                          pick_path = outro_rails.chord_chart_voicings_path(
+                            chord_chart, **form_params
+                          )
+                        %>
+                        <%= button_to pick_path,
+                              method: :post,
+                              params: { chord_voicing_id: candidate.id },
+                              class: "outro-button",
+                              form_class: "outro-inline-form" do %>
+                          <%= image_tag "outro_rails/check.svg",
+                                class: "outro-button__icon" %>
+                          Select Voicing
+                        <% end %>
+                      <% elsif is_pick %>
+                        <%
+                          revert_path = outro_rails.chord_chart_voicing_path(
+                            chord_chart, selection, **form_params
+                          )
+                        %>
+                        <%= button_to revert_path,
+                              method: :delete, class: "outro-button",
+                              form_class: "outro-inline-form" do %>
+                          <%= image_tag "outro_rails/undo.svg",
+                                class: "outro-button__icon" %>
+                          Revert to default
+                        <% end %>
+                      <% end %>
+                    </div>
+                  <% end %>
+                </div>
+              <% else %>
+                <%= render "outro_rails/chord_voicings/figure",
+                      voicing: voicing %>
+              <% end %>
+            </div>
+          </li>
+        <% end %>
+      </ul>
+    <% else %>
+      <div class="outro-empty">
+        <p>No recognized chords yet.</p>
+      </div>
+    <% end %>
+  </section>
+</div>

data/app/views/outro_rails/chord_charts/_fields.html.erb

@@ -0,0 +1,50 @@
+<%#
+  Chord chart form fields, nested under a chord-chart form builder.
+  Rendered by ChordChartsHelper#chord_chart_area. Don't render this
+  directly, use `form.chord_chart_area :name` instead:
+
+    form_with model: @song do |form|
+      form.chord_chart_area :chord_sheet
+    end
+%>
+
+<fieldset class="outro-chord-chart-fields">
+  <div class="outro-picker outro-picker--grid outro-picker--cols-2">
+    <label class="outro-picker__field">
+      <span class="outro-label">Artist</span>
+      <%= f.text_field :artist, class: "outro-input" %>
+    </label>
+
+    <label class="outro-picker__field">
+      <span class="outro-label">Song</span>
+      <%= f.text_field :song, class: "outro-input" %>
+    </label>
+  </div>
+
+  <div class="outro-picker outro-picker--grid outro-picker--cols-3">
+    <label class="outro-picker__field">
+      <span class="outro-label">Tuning</span>
+      <%= f.select :tuning, chord_chart_tuning_options, {},
+            class: "outro-select" %>
+    </label>
+
+    <label class="outro-picker__field">
+      <span class="outro-label">Capo</span>
+      <%= f.select :capo, chord_chart_capo_options,
+            { include_blank: "None" }, class: "outro-select" %>
+    </label>
+
+    <label class="outro-picker__field">
+      <span class="outro-label">Key</span>
+      <%= f.select :key, chord_chart_key_options, {}, class: "outro-select" %>
+    </label>
+  </div>
+
+  <label class="outro-transposer__field">
+    <span class="outro-label">Chords &amp; lyrics</span>
+    <%= f.text_area :body,
+          rows: 16,
+          placeholder: "Paste or type a chord chart here.",
+          class: "outro-textarea outro-transposer__textarea" %>
+  </label>
+</fieldset>

data/app/views/outro_rails/chord_voicings/_chord_voicing.html.erb

@@ -0,0 +1,41 @@
+<div class="outro-grid">
+  <section class="outro-card">
+    <h2 class="outro-section-heading">
+      <%= voicing.instrument.titleize %>
+      <span class="outro-symbol-list__detail"><%= voicing.symbol %></span>
+    </h2>
+
+    <%= render "outro_rails/chord_voicings/#{voicing.instrument}",
+          voicing: voicing %>
+  </section>
+
+  <section class="outro-card">
+    <h2 class="outro-section-heading">Details</h2>
+
+    <div class="outro-details">
+      <dl class="outro-spec outro-details__spec">
+        <dt class="outro-spec__term">Bass</dt>
+        <% if voicing.bass_name %>
+          <dd class="outro-spec__detail">
+            <%= voicing.bass_name %>
+            <span class="outro-symbol-list__detail">
+              pitch class <%= voicing.bass_pitch_class %>
+            </span>
+          </dd>
+        <% else %>
+          <dd class="outro-spec__detail outro-spec__detail--empty">Not set</dd>
+        <% end %>
+
+        <dt class="outro-spec__term">Notes from bass</dt>
+        <dd class="outro-spec__detail"><%= voicing.display_notes %></dd>
+
+        <dt class="outro-spec__term">Chord</dt>
+        <dd class="outro-spec__detail">
+          <%= link_to @chord.symbol, chord_path(@chord) %>
+        </dd>
+      </dl>
+
+      <%= render "outro_rails/chord_voicings/figure", voicing: voicing %>
+    </div>
+  </section>
+</div>

data/app/views/outro_rails/chord_voicings/_figure.html.erb

@@ -0,0 +1,37 @@
+<%#
+  Compact printable figure for a voicing. Renders the piano or guitar
+  version automatically from voicing.display_data. Attachable anywhere
+  a voicing is at hand, including pages listing many chords:
+
+    render "outro_rails/chord_voicings/figure", voicing: voicing
+
+  Optional local:
+    caption: text shown under the figure, e.g. voicing.symbol (default none)
+%>
+
+<%
+  display_data = voicing.display_data || {}
+  prefer       = voicing.preferred_accidentals
+  caption      = local_assigns[:caption]
+%>
+
+<figure class="outro-figure outro-figure--<%= voicing.instrument %>">
+  <% if voicing.piano? %>
+    <% range = Array(display_data["range"].presence) %>
+    <%= render "outro_rails/instruments/piano_figure",
+          start_note: range.first,
+          end_note: range.last,
+          highlight_keys: Array(display_data["notes"].presence),
+          prefer: prefer %>
+  <% else %>
+    <%= render "outro_rails/instruments/guitar_figure",
+          start_fret: display_data["start_fret"],
+          end_fret: display_data["end_fret"],
+          highlight_frets: display_data["highlight_frets"],
+          prefer: prefer %>
+  <% end %>
+
+  <% if caption %>
+    <figcaption class="outro-figure__caption"><%= caption %></figcaption>
+  <% end %>
+</figure>

data/app/views/outro_rails/chord_voicings/_guitar.html.erb

@@ -0,0 +1,13 @@
+<%
+  display_data    = voicing.display_data || {}
+  start_fret      = display_data['start_fret']
+  end_fret        = display_data['end_fret']
+  highlight_frets = display_data['highlight_frets']
+  prefer          = voicing.preferred_accidentals
+%>
+
+<%= render "outro_rails/instruments/guitar_midi",
+      start_fret: start_fret,
+      end_fret: end_fret,
+      highlight_frets: highlight_frets,
+      prefer: prefer %>

data/app/views/outro_rails/chord_voicings/_piano.html.erb

@@ -0,0 +1,17 @@
+<%
+  display_data = voicing.display_data || {}
+  note         = display_data['note'].presence
+  keys         = Array(display_data['notes'].presence)
+  prefer       = voicing.preferred_accidentals
+  range        = Array(display_data['range'].presence)
+%>
+
+<%= render 'outro_rails/instruments/piano_midi',
+      start_note: range&.first,
+      end_note: range&.last,
+      highlight_keys: keys,
+      prefer: prefer %>
+
+<% if note %>
+  <p class="outro-voicing__note"><%= note %></p>
+<% end %>

data/app/views/outro_rails/chord_voicings/show.html.erb

@@ -0,0 +1,17 @@
+<% content_for :title, "#{@voicing.symbol} #{@voicing.instrument.titleize}" %>
+
+<div class="outro outro-container">
+
+  <%= render "outro_rails/shared/header",
+      title: @voicing.symbol,
+      subtitle: "Voicing on #{@voicing.instrument.titleize.downcase}." %>
+
+  <%= render "outro_rails/shared/breadcrumb", trail: [
+        [ "Outro Home", root_path ],
+        [ "Chord Library", chords_path ],
+        [ @chord.symbol, chord_path(@chord) ],
+        [ @voicing.symbol ]
+      ] %>
+
+  <%= render 'outro_rails/chord_voicings/chord_voicing', voicing: @voicing %>
+</div>

data/app/views/outro_rails/chords/_chord.html.erb

@@ -0,0 +1,50 @@
+<div class="outro-grid outro-grid--wide">
+  <section class="outro-card">
+    <h2 class="outro-section-heading">Details</h2>
+
+    <dl class="outro-spec">
+      <dt class="outro-spec__term">Root</dt>
+      <dd class="outro-spec__detail">
+        <%= chord.root_name %>
+        <span class="outro-symbol-list__detail">
+          pitch class <%= chord.root_pitch_class %>
+        </span>
+      </dd>
+
+      <dt class="outro-spec__term">Quality</dt>
+      <dd class="outro-spec__detail"><%= chord.quality.humanize %></dd>
+
+      <dt class="outro-spec__term">Extension</dt>
+      <dd class="outro-spec__detail"><%= chord.display_extension %></dd>
+
+      <dt class="outro-spec__term">Alterations</dt>
+      <dd class="outro-spec__detail"><%= chord.display_alterations %></dd>
+
+      <dt class="outro-spec__term">Added tones</dt>
+      <dd class="outro-spec__detail"><%= chord.display_added_tones %></dd>
+
+      <dt class="outro-spec__term">Intervals</dt>
+      <dd class="outro-spec__detail"><%= chord.display_intervals %></dd>
+    </dl>
+  </section>
+
+  <section class="outro-card">
+    <h2 class="outro-section-heading">Voicings</h2>
+
+    <% if @voicings.any? %>
+      <ul class="outro-symbol-list">
+        <% @voicings.each do |voicing| %>
+          <li class="outro-symbol-list__item">
+            <%= link_to voicing.symbol, voicing_path(voicing),
+                  class: "outro-symbol-list__symbol" %>
+            <span class="outro-symbol-list__detail">
+              <%= voicing.instrument %>
+            </span>
+          </li>
+        <% end %>
+      </ul>
+    <% else %>
+      <p class="outro-symbol-list__detail">No voicings for this chord yet.</p>
+    <% end %>
+  </section>
+</div>

data/app/views/outro_rails/chords/_chords.html.erb

@@ -0,0 +1,29 @@
+<% if chords_by_root.any? %>
+  <div class="outro-grid outro-grid--dense">
+    <% chords_by_root.each do |root_name, chords| %>
+      <section class="outro-card outro-chord-group">
+        <h2 class="outro-section-heading">
+          <%= root_name %>
+        </h2>
+
+        <ul class="outro-symbol-list">
+          <% chords.each do |chord| %>
+            <li class="outro-symbol-list__item">
+              <%= link_to chord.symbol, chord_path(chord),
+                    class: "outro-symbol-list__symbol" %>
+              <span class="outro-symbol-list__detail">
+                <%= chord.quality.humanize.downcase %>
+                <%= chord.extension if chord.extension.present? %>
+              </span>
+            </li>
+          <% end %>
+        </ul>
+      </section>
+    <% end %>
+  </div>
+<% else %>
+  <div class="outro-empty">
+    <p>The chord database is empty.</p>
+    <p>Run <code>rake outro:seed</code> to populate it.</p>
+  </div>
+<% end %>

data/app/views/outro_rails/chords/_filter.html.erb

@@ -0,0 +1,87 @@
+<div class="outro-panel outro-filters">
+  <%# Search bar: a typed symbol or slug goes straight to the chord page. %>
+  <%= form_with url: chords_picker_path, method: :get,
+        class: "outro-filters__search" do %>
+    <%= search_field_tag :q, params[:missing],
+          placeholder: "F#m7b5 or fsharpm7flat5",
+          "aria-label": "Go to chord by symbol or slug",
+          class: "outro-input outro-filters__search-input" %>
+    <%= button_tag type: :submit, name: nil,
+      class: "outro-button",
+      "aria-label": "Search" do %>
+      <%= image_tag "outro_rails/search.svg", class: 'outro-button__icon' %>
+      Search
+    <% end %>
+  <% end %>
+
+  <%# Facet filters: all submitted together, so changing one keeps the rest. %>
+  <%= form_with url: chords_path, method: :get,
+        class: "outro-picker outro-filters__facets" do %>
+    <label class="outro-picker__field">
+      <span class="outro-label">Root</span>
+      <%= select_tag :root,
+            options_for_select(chord_root_options, @filters[:root]),
+            include_blank: "Any",
+            class: "outro-select",
+            onchange: "this.form.requestSubmit()" %>
+    </label>
+
+    <label class="outro-picker__field">
+      <span class="outro-label">Quality</span>
+      <%= select_tag :quality,
+            options_for_select(chord_quality_options, @filters[:quality]),
+            include_blank: "Any",
+            class: "outro-select",
+            onchange: "this.form.requestSubmit()" %>
+    </label>
+
+    <label class="outro-picker__field">
+      <span class="outro-label">Extension</span>
+      <%= select_tag :extension,
+            options_for_select(chord_extension_options, @filters[:extension]),
+            include_blank: "Any",
+            class: "outro-select",
+            onchange: "this.form.requestSubmit()" %>
+    </label>
+
+    <label class="outro-picker__field">
+      <span class="outro-label">Alteration</span>
+      <%= select_tag :alteration,
+            options_for_select(chord_alteration_options, @filters[:alteration]),
+            include_blank: "Any",
+            class: "outro-select",
+            onchange: "this.form.requestSubmit()" %>
+    </label>
+
+    <label class="outro-picker__field">
+      <span class="outro-label">Added tone</span>
+      <%= select_tag :added_tone,
+            options_for_select(chord_added_tone_options, @filters[:added_tone]),
+            include_blank: "Any",
+            class: "outro-select",
+            onchange: "this.form.requestSubmit()" %>
+    </label>
+
+    <%= button_tag type: :submit, name: nil,
+      class: "outro-button",
+      "aria-label": "Filter" do %>
+      <%= image_tag "outro_rails/filter.svg", class: 'outro-button__icon' %>
+      Filter
+    <% end %>
+
+    <% if filters_active? %>
+      <%= link_to chords_path,
+        class: "outro-button",
+        "aria-label": "Clear" do %>
+        <%= image_tag "outro_rails/clear.svg", class: 'outro-button__icon' %>
+        Clear
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <% if @missing_query.present? %>
+    <p class="outro-filters__missing">
+      No chord found for &ldquo;<%= @missing_query %>&rdquo;.
+    </p>
+  <% end %>
+</div>

data/app/views/outro_rails/chords/index.html.erb

@@ -0,0 +1,31 @@
+<% content_for :title, 'Chord Library' %>
+
+<div class="outro outro-container">
+
+  <%= render "outro_rails/shared/header",
+          title: 'Chord Library',
+          subtitle: 'Every chord in the database, grouped by root. Search
+                     by symbol or narrow the list with filters.'
+      %>
+
+  <%= render "outro_rails/shared/breadcrumb", trail: [
+        [ "Outro Home", root_path ],
+        [ "Chord Library" ]
+      ] %>
+
+  <%= render 'outro_rails/chords/filter' %>
+
+  <% if filters_active? && @chords_by_root.empty? %>
+    <div class="outro-empty">
+      <p>No chords match those filters.</p>
+      <%= link_to chords_path,
+        class: "outro-button",
+        "aria-label": "Clear Filters" do %>
+        <%= image_tag "outro_rails/clear.svg", class: 'outro-button__icon' %>
+        Clear Filters
+      <% end %>
+    </div>
+  <% else %>
+    <%= render 'outro_rails/chords/chords', chords_by_root: @chords_by_root %>
+  <% end %>
+</div>