outro_rails 0.1.5 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 873a2a004ee523b79f100a4aa815e4986dbede341e9ca65740faef497821d8ad
-  data.tar.gz: a053185e62246437b3fd50381ffbacac6afc60ac3e498bcdb06a2a314683b9cd
+  metadata.gz: b9a61b44de4d831dd78c2ef49903677777792cfe812a6f77211dbf4e846ffb35
+  data.tar.gz: 60ee9af6996b28da00252dc296e40d5869c0f877ed8335e126d8650ae6b8d462
 SHA512:
-  metadata.gz: 0d52f9319f9948d5b0912341bf59bc73ca165ad7d618cd6c9eeb3cdb2068bf8e3a949512d4d66e336fea4ec0da2725a02439537e76fb974ab3fd3ee5ed3f4788
-  data.tar.gz: 60b284f1df23ebc1233f3c1a083e5b3ff263e3af45a4750dfea2d9b2ea112ae1ddb1cb9f402ba1e5a7b0be29c568db7624247a25c36b8c59bf20d71e8b4bf1ff
+  metadata.gz: 153b0d96d98f43b44c323a06fa7b3106b2ea06d0e92ca2c4a9e33f74bb3a6555b109bffbb880c3969d5147ca0aa3e43ba573060111b073c36e80f7958911c4ac
+  data.tar.gz: 91a29abfb552a60757fcdc0ded4883d921000fa9fb2c2a31e4a855e5cca628689b9def02844da3f88f736fba6c44ac4b9ff4e5280d50bb736b532bd6b5d67096

data/README.md

@@ -50,7 +50,8 @@ quickest version is to add two tags to your layout:
 ```
 
 If you'd rather fold the engine's assets into your existing bundles, see
-[Assets](#assets) below.
+[Assets](#assets) below. If you'd rather style the form controls with your
+own CSS framework, see [Control classes](#control-classes).
 
 ## Assets
 
@@ -161,6 +162,61 @@ yarn build
 yarn build:css
 ```
 
+### Form Control Classes
+
+Out of the box the engine's text fields, textareas, selects, and labels
+carry its own classes, styled by the stylesheet above:
+
+| Element    | Setting                    | Default          |
+| ---------- | -------------------------- | ---------------- |
+| `button`   | `OutroRails.button_class`   | `outro-button`    |
+| `input`    | `OutroRails.input_class`    | `outro-input`    |
+| `label`    | `OutroRails.label_class`    | `outro-label`    |
+| `select`   | `OutroRails.select_class`   | `outro-select`   |
+| `textarea` | `OutroRails.textarea_class` | `outro-textarea` |
+
+If your app already has a form style (Bootstrap, Tailwind, your own classes)
+point these at it in an initializer and the engine will render your classes
+instead:
+
+```ruby
+# config/initializers/outro_rails.rb
+OutroRails.configure do |config|
+  config.button_class   = "btn btn-sm"
+  config.input_class    = "form-control"
+  config.label_class    = "form-label"
+  config.select_class   = "form-select"
+  config.textarea_class = "form-control"
+end
+```
+
+Each setting is a plain string and can also be assigned on its own
+(`OutroRails.select_class = "form-select"`).
+
+These apply everywhere the engine renders a form control.
+
+#### Per render
+
+The same four names are accepted as locals on the chart partial and as
+options on `chord_chart_area` for a page that needs something other than
+the application-wide setting:
+
+```erb
+<%= form.chord_chart_area :chord_sheet,
+      button_class: "btn-primary",
+      input_class: "form-control",
+      label_class: "form-label",
+      select_class: "form-select",
+      textarea_class: "form-control font-monospace" %>
+```
+
+```erb
+<%= render "outro_rails/chord_charts/chart",
+      chord_chart: @song.chord_sheet,
+      select_class: "form-select",
+      label_class: "form-label" %>
+```
+
 ## Usage
 To view the chord library and music theory tools, mount the engine in your
 routes.rb:
@@ -258,6 +314,12 @@ When the model declares the chart with `required: false`, the fieldset is
 labeled "Optional" and tells the user to leave the fields blank if there's
 no chord chart.
 
+The fields inside the fieldset use the engine's own control classes. Pass
+`input_class:`, `textarea_class:`, `select_class:`, or `label_class:` to
+render them with your app's classes for this form, or set them once
+application-wide — see [Control classes](#control-classes). Any other
+option is passed through to `fields_for`, as before.
+
 ### Controller: Permitting the Parameters
 
 `chord_chart_area` submits the chart as nested attributes, so your
@@ -471,7 +533,6 @@ It seeds the chord library and four example songs (`spec/dummy/db/seeds.rb`).
 The example songs are listed on the home page. To illustrate permissions,
 the dummy app sets even record ids as editable and odd ones as view-only.
 
-
 ## Publishing a New Version
 
 **1. Bump the version.** Edit `lib/outro_rails/version.rb`

data/app/assets/stylesheets/outro_rails/outro_rails.css

@@ -11,8 +11,7 @@
    from `currentColor`, so they adapt to light and dark host themes.
    ========================================================================== */
 
-.outro,
-.outro-page {
+:root {
   --outro-container-width: 66rem;
   --outro-radius: 14px;
   --outro-radius-sm: 6px;
@@ -54,8 +53,7 @@
 
 @supports not (color: color-mix(in srgb, currentColor 50%, transparent)) {
 
-  .outro,
-  .outro-page {
+  :root {
     --outro-muted: rgba(128, 128, 128, 0.9);
     --outro-border: rgba(128, 128, 128, 0.3);
     --outro-border-strong: rgba(128, 128, 128, 0.5);
@@ -129,8 +127,6 @@
   align-items: center;
   gap: 0.4rem;
   min-width: 0;
-  align-items: center;
-  min-width: 0;
   margin: 0;
   padding: 0.3rem clamp(0.6rem, 2vw, 0.95rem);
   border: 1px solid var(--outro-border);
@@ -307,21 +303,6 @@
   font: inherit;
 }
 
-.outro-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  padding: 0.4rem 0.9rem;
-  border: 1px solid var(--outro-border-strong);
-  border-radius: var(--outro-radius-sm);
-  background-color: var(--outro-surface, transparent);
-  color: inherit;
-  font: inherit;
-  line-height: 1.2;
-  text-decoration: none;
-  cursor: pointer;
-}
-
 .outro-card--link {
   transition: transform 0.16s ease, box-shadow 0.16s ease,
     border-color 0.16s ease;
@@ -415,13 +396,6 @@
   }
 }
 
-.outro-panel {
-  padding: var(--outro-card-padding);
-  border: 1px solid var(--outro-border);
-  border-radius: var(--outro-radius);
-  background-color: var(--outro-surface, transparent);
-}
-
 .outro-empty {
   padding: clamp(1.25rem, 4vw, 2rem);
   border: 1px dashed var(--outro-border-strong);
@@ -438,17 +412,6 @@
   margin-bottom: 0;
 }
 
-.outro-select,
-.outro-input,
-.outro-textarea {
-  padding: var(--outro-control-padding);
-  border: 1px solid var(--outro-border-strong);
-  border-radius: var(--outro-radius-sm);
-  background-color: var(--outro-surface, transparent);
-  color: inherit;
-  font: inherit;
-}
-
 .outro-button {
   display: inline-flex;
   align-items: center;
@@ -727,7 +690,6 @@
 .outro-guitar {
   display: flex;
   flex-direction: column;
-  align-items: center;
   gap: 14px;
   width: 100%;
   max-width: 100%;
@@ -735,7 +697,6 @@
   border-radius: var(--outro-instrument-radius);
   background-color: var(--outro-instrument-bg);
   overflow-x: auto;
-  align-items: center;
   align-items: safe center;
 }
 
@@ -910,7 +871,6 @@
 .outro-piano {
   display: flex;
   flex-direction: column;
-  align-items: center;
   gap: 14px;
   width: 100%;
   max-width: 100%;
@@ -918,7 +878,6 @@
   border-radius: var(--outro-instrument-radius);
   background-color: var(--outro-instrument-bg);
   overflow-x: auto;
-  align-items: center;
   align-items: safe center;
 }
 
@@ -1207,6 +1166,15 @@
   position: relative;
 }
 
+.outro-chord-chart-fields__legend {
+  float: none;
+}
+
+legend.outro-chord-chart-fields__legend {
+  float: none;
+  margin-bottom: 0;
+}
+
 .outro-chord-chart__body {
   margin: 0;
   padding: 0.85rem;

data/app/helpers/outro_rails/chord_charts_helper.rb

@@ -3,6 +3,7 @@
 module OutroRails
   module ChordChartsHelper
     include CapoHelper
+    include ClassNamesHelper
     include InstrumentsHelper
     include TransposerHelper
 

data/app/helpers/outro_rails/class_names_helper.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module OutroRails
+  module ClassNamesHelper
+    def outro_button_class(*modifiers)
+      outro_element_class(:button, *modifiers)
+    end
+
+    def outro_input_class(*modifiers)
+      outro_element_class(:input, *modifiers)
+    end
+
+    def outro_label_class(*modifiers)
+      outro_element_class(:label, *modifiers)
+    end
+
+    def outro_select_class(*modifiers)
+      outro_element_class(:select, *modifiers)
+    end
+
+    def outro_textarea_class(*modifiers)
+      outro_element_class(:textarea, *modifiers)
+    end
+
+    def outro_element_class(element, *modifiers)
+      tokens = [ OutroRails.class_for(element), *modifiers ]
+                 .flat_map { |token| token.to_s.split(/\s+/) }
+                 .reject(&:empty?)
+                 .uniq
+
+      tokens.join(" ").presence
+    end
+  end
+end

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

@@ -16,27 +16,27 @@
   <%= form_with url: caged_picker_path, method: :get,
         class: "outro-picker" do %>
     <label class="outro-picker__field">
-      <span class="outro-label">Root</span>
+      <%= tag.span "Root", class: outro_label_class %>
       <%= select_tag :root,
             options_for_select(scale_root_options, @root.path_slug),
-            class: "outro-select",
+            class: outro_select_class,
             onchange: "this.form.requestSubmit()" %>
     </label>
 
     <label class="outro-picker__field">
-      <span class="outro-label">Shape</span>
+      <%= tag.span "Shape", class: outro_label_class %>
       <%= select_tag :shape,
             options_for_select(
               OutroRails::Instruments::Guitar::ChordShapes::CAGED_LETTERS
                 .map { |l| [ "#{l} shape", l.downcase ] },
               @letter.downcase
             ),
-            class: "outro-select",
+            class: outro_select_class,
             onchange: "this.form.requestSubmit()" %>
     </label>
 
     <%= button_tag type: :submit, name: nil,
-      class: "outro-button",
+      class: outro_button_class,
       "aria-label": "Show Shapes" do %>
       <%= image_tag "outro_rails/shapes.svg", class: 'outro-button__icon' %>
       Show Shapes

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

@@ -14,7 +14,8 @@
       ] %>
 
   <div class="outro-panel outro-filters">
-    <span class="outro-label" id="capo-position-label">Capo position</span>
+    <%= tag.span "Capo position", id: "capo-position-label",
+          class: outro_label_class %>
     <nav class="outro-chip-row outro-capo-frets"
          aria-labelledby="capo-position-label">
       <% OutroRails::Instruments::Guitar::Capo::FRETS.each do |fret| %>

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

@@ -8,10 +8,7 @@
     render "outro_rails/chord_charts/chart", chord_chart: @song.chord_sheet
 
   Locals:
-    chord_chart - required, an OutroRails::ChordChart. Pass nil (what an
-                  optional `has_chord_chart ..., required: false` reader
-                  returns before anyone fills it in) to render a short
-                  "no chord chart" placeholder instead.
+    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
@@ -22,277 +19,271 @@
 
 %>
 
-<% chord_chart = local_assigns.fetch(:chord_chart) %>
+<%
+  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)
 
-<% if chord_chart.nil? %>
-  <div class="outro-chord-chart outro-chord-chart--empty">
-    <div class="outro-empty">
-      <p>No chord chart.</p>
-    </div>
-  </div>
-<% else %>
-
-  <%
-    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
 
-    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) ]
+  editing = editable && !transposed
+  selections =
+    if editing
+      chord_chart.voicings.where(instrument: instrument)
+                 .index_by { |s| [ s.chord_id, s.bass ] }
+    else
+      {}
     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>
 
-  <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>
 
-      <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">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>
 
-        <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_class,
+              onchange: "this.form.requestSubmit()" %>
+        <%= hidden_field_tag :to_key, to_key if to_key %>
+      <% end %>
 
-      <% if chord_chart&.body.present? %>
-        <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_class,
+              onchange: "this.form.requestSubmit()" %>
+        <%= hidden_field_tag :instrument, instrument %>
+      <% 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 url_for(request.query_parameters.except("to_key")),
+              class: outro_button_class do %>
+          <%= image_tag "outro_rails/undo.svg",
+                class: "outro-button__icon" %>
+          <%= "Reset to #{chord_chart.key}" %>
+        <% end %>
+      <% 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>
 
-          <% 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>
-      <%end %>
-    </section>
+    <%# 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>
 
-    <% if chord_chart&.body.present? %>
-      <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>
+  <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>
 
-        <% 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>
+    <% 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>
 
-      <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 !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)
 
-        <% 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>
+                  form_params = {
+                    chord_id:   chord.id,
+                    instrument: instrument,
+                    bass:       bass,
+                    return_to:  request.fullpath
+                  }
+                %>
 
-                  <% if !voicing %>
-                    <div class="outro-empty">
-                      <p>No <%= instrument %> voicing yet.</p>
+                <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_class %>
+                                     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_class %>
+                                     outro-voicing-cycler__arrow"
+                              aria-label=
+                                "Next voicing for <%= symbol %>">
+                        &#9654;
+                      </button>
                     </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)
+                  <% end %>
 
-                      form_params = {
-                        chord_id:   chord.id,
-                        instrument: instrument,
-                        bass:       bass,
-                        return_to:  request.fullpath
-                      }
+                  <% 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 %>
 
-                    <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 %>
+                      </p>
 
-                      <% all_voicings.each do |candidate| %>
+                      <% if is_default && selection %>
+                        <%# Not currently on the default: navigating here
+                            offers the revert, same as the pick's slide. %>
                         <%
-                          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}"
+                          revert_path = outro_rails.chord_chart_voicing_path(
+                            chord_chart, selection, **form_params
+                          )
                         %>
-                        <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>
+                        <%= button_to revert_path,
+                              method: :delete, class: outro_button_class,
+                              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_class,
+                              form_class: "outro-inline-form" do %>
+                          <%= image_tag "outro_rails/undo.svg",
+                                class: "outro-button__icon" %>
+                          Revert to default
+                        <% end %>
                       <% 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.</p>
-          </div>
+              <% else %>
+                <%= render "outro_rails/chord_voicings/figure",
+                      voicing: voicing %>
+              <% end %>
+            </div>
+          </li>
         <% end %>
-      </section>
+      </ul>
+    <% else %>
+      <div class="outro-empty">
+        <p>No recognized chords yet.</p>
+      </div>
     <% end %>
-  </div>
-
-<% end %>
+  </section>
+</div>

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

@@ -44,40 +44,41 @@
 
   <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" %>
+      <%= tag.span "Artist", class: outro_label_class %>
+      <%= f.text_field :artist, class: outro_input_class %>
     </label>
 
     <label class="outro-picker__field">
-      <span class="outro-label">Song</span>
-      <%= f.text_field :song, class: "outro-input" %>
+      <%= tag.span "Song", class: outro_label_class %>
+      <%= f.text_field :song, class: outro_input_class %>
     </label>
   </div>
 
   <div class="outro-picker outro-picker--grid outro-picker--cols-3">
     <label class="outro-picker__field">
-      <span class="outro-label">Tuning</span>
+      <%= tag.span "Tuning", class: outro_label_class %>
       <%= f.select :tuning, chord_chart_tuning_options, {},
-            class: "outro-select" %>
+            class: outro_select_class %>
     </label>
 
     <label class="outro-picker__field">
-      <span class="outro-label">Capo</span>
+      <%= tag.span "Capo", class: outro_label_class %>
       <%= f.select :capo, chord_chart_capo_options,
-            { include_blank: "None" }, class: "outro-select" %>
+            { include_blank: "None" }, class: outro_select_class %>
     </label>
 
     <label class="outro-picker__field">
-      <span class="outro-label">Key</span>
-      <%= f.select :key, chord_chart_key_options, {}, class: "outro-select" %>
+      <%= tag.span "Key", class: outro_label_class %>
+      <%= f.select :key, chord_chart_key_options, {},
+            class: outro_select_class %>
     </label>
   </div>
 
   <label class="outro-transposer__field">
-    <span class="outro-label">Chords &amp; lyrics (Optional)</span>
+    <%= tag.span "Chords & lyrics (Optional)", class: outro_label_class %>
     <%= f.text_area :body,
           rows: 16,
           placeholder: "Paste or type a chord chart here.",
-          class: "outro-textarea outro-transposer__textarea" %>
+          class: outro_textarea_class("outro-transposer__textarea") %>
   </label>
 </fieldset>

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

@@ -5,9 +5,9 @@
     <%= 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" %>
+          class: outro_input_class("outro-filters__search-input") %>
     <%= button_tag type: :submit, name: nil,
-      class: "outro-button",
+      class: outro_button_class,
       "aria-label": "Search" do %>
       <%= image_tag "outro_rails/search.svg", class: 'outro-button__icon' %>
       Search
@@ -18,52 +18,52 @@
   <%= 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>
+      <%= tag.span "Root", class: outro_label_class %>
       <%= select_tag :root,
             options_for_select(chord_root_options, @filters[:root]),
             include_blank: "Any",
-            class: "outro-select",
+            class: outro_select_class,
             onchange: "this.form.requestSubmit()" %>
     </label>
 
     <label class="outro-picker__field">
-      <span class="outro-label">Quality</span>
+      <%= tag.span "Quality", class: outro_label_class %>
       <%= select_tag :quality,
             options_for_select(chord_quality_options, @filters[:quality]),
             include_blank: "Any",
-            class: "outro-select",
+            class: outro_select_class,
             onchange: "this.form.requestSubmit()" %>
     </label>
 
     <label class="outro-picker__field">
-      <span class="outro-label">Extension</span>
+      <%= tag.span "Extension", class: outro_label_class %>
       <%= select_tag :extension,
             options_for_select(chord_extension_options, @filters[:extension]),
             include_blank: "Any",
-            class: "outro-select",
+            class: outro_select_class,
             onchange: "this.form.requestSubmit()" %>
     </label>
 
     <label class="outro-picker__field">
-      <span class="outro-label">Alteration</span>
+      <%= tag.span "Alteration", class: outro_label_class %>
       <%= select_tag :alteration,
             options_for_select(chord_alteration_options, @filters[:alteration]),
             include_blank: "Any",
-            class: "outro-select",
+            class: outro_select_class,
             onchange: "this.form.requestSubmit()" %>
     </label>
 
     <label class="outro-picker__field">
-      <span class="outro-label">Added tone</span>
+      <%= tag.span "Added tone", class: outro_label_class %>
       <%= select_tag :added_tone,
             options_for_select(chord_added_tone_options, @filters[:added_tone]),
             include_blank: "Any",
-            class: "outro-select",
+            class: outro_select_class,
             onchange: "this.form.requestSubmit()" %>
     </label>
 
     <%= button_tag type: :submit, name: nil,
-      class: "outro-button",
+      class: outro_button_class,
       "aria-label": "Filter" do %>
       <%= image_tag "outro_rails/filter.svg", class: 'outro-button__icon' %>
       Filter
@@ -71,7 +71,7 @@
 
     <% if filters_active? %>
       <%= link_to chords_path,
-        class: "outro-button",
+        class: outro_button_class,
         "aria-label": "Clear" do %>
         <%= image_tag "outro_rails/clear.svg", class: 'outro-button__icon' %>
         Clear

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

@@ -19,7 +19,7 @@
     <div class="outro-empty">
       <p>No chords match those filters.</p>
       <%= link_to chords_path,
-        class: "outro-button",
+        class: outro_button_class,
         "aria-label": "Clear Filters" do %>
         <%= image_tag "outro_rails/clear.svg", class: 'outro-button__icon' %>
         Clear Filters

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

@@ -63,9 +63,8 @@
       </dl>
 
       <div class="outro-card__footer">
-        <span class="outro-label" id="scale-instruments-label">
-          See this scale on
-        </span>
+        <%= tag.span "See this scale on", id: "scale-instruments-label",
+              class: outro_label_class %>
         <div class="outro-chip-row" role="group"
              aria-labelledby="scale-instruments-label">
           <% OutroRails::ScalesController::INSTRUMENTS.each do |instrument| %>

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

@@ -12,17 +12,17 @@
       <%= hidden_field_tag :instrument, @instrument %>
 
       <label class="outro-picker__field">
-        <span class="outro-label">Tuning</span>
+        <%= tag.span "Tuning", class: outro_label_class %>
         <%= select_tag :tuning,
               options_for_select(guitar_tuning_options, tuning.slug),
-              class: "outro-select",
+              class: outro_select_class,
               onchange: "this.form.requestSubmit()" %>
       </label>
 
       <%# Fallback for keyboard users / no JS; the select auto-submits
           on change. %>
       <%= button_tag type: :submit, name: nil,
-        class: "outro-button",
+        class: outro_button_class,
         "aria-label": "Show Tuning" do %>
         <%= image_tag "outro_rails/guitar.svg", class: 'outro-button__icon' %>
         Show Tuning

data/app/views/outro_rails/scales/_picker.html.erb

@@ -3,33 +3,33 @@
   <%= hidden_field_tag :instrument, @instrument %>
 
   <label class="outro-picker__field">
-    <span class="outro-label">Root</span>
+    <%= tag.span "Root", class: outro_label_class %>
     <%= select_tag :root,
           options_for_select(scale_root_options, @scale.root.path_slug),
-          class: "outro-select",
+          class: outro_select_class,
           onchange: "this.form.requestSubmit()" %>
   </label>
 
   <label class="outro-picker__field">
-    <span class="outro-label">Scale</span>
+    <%= tag.span "Scale", class: outro_label_class %>
     <%= select_tag :type,
           options_for_select(scale_type_options, @scale.slug),
-          class: "outro-select",
+          class: outro_select_class,
           onchange: "this.form.requestSubmit()" %>
   </label>
 
   <% if @instrument == "guitar" %>
     <label class="outro-picker__field">
-      <span class="outro-label">Tuning</span>
+      <%= tag.span "Tuning", class: outro_label_class %>
       <%= select_tag :tuning,
             options_for_select(guitar_tuning_options, @tuning&.slug),
-            class: "outro-select",
+            class: outro_select_class,
             onchange: "this.form.requestSubmit()" %>
     </label>
   <% end %>
 
   <%= button_tag type: :submit, name: nil,
-    class: "outro-button",
+    class: outro_button_class,
     "aria-label": "Show Scale" do %>
     <%= image_tag "outro_rails/scales.svg", class: 'outro-button__icon' %>
     Show Scale

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

@@ -77,9 +77,8 @@
   <% others = OutroRails::ScalesController::INSTRUMENTS - [ @instrument ] %>
   <% if others.any? %>
     <div class="outro-switch">
-      <span class="outro-label" id="scale-switch-label">
-        View this scale on
-      </span>
+      <%= tag.span "View this scale on", id: "scale-switch-label",
+            class: outro_label_class %>
       <div class="outro-chip-row" role="group"
            aria-labelledby="scale-switch-label">
         <% others.each do |other| %>

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

@@ -21,39 +21,39 @@
             class: "outro-transposer" do %>
         <div class="outro-picker outro-picker--flush">
           <label class="outro-picker__field">
-            <span class="outro-label">Convert</span>
+            <%= tag.span "Convert", class: outro_label_class %>
             <%= select_tag :mode,
                   options_for_select(transposer_mode_options, @mode),
-                  class: "outro-select" %>
+                  class: outro_select_class %>
           </label>
 
           <label class="outro-picker__field">
-            <span class="outro-label">Original key</span>
+            <%= tag.span "Original key", class: outro_label_class %>
             <%= select_tag :from_key,
                   grouped_options_for_select(transposer_key_options,
                                              @from_key.to_s),
-                  class: "outro-select" %>
+                  class: outro_select_class %>
           </label>
 
           <label class="outro-picker__field">
-            <span class="outro-label">New key</span>
+            <%= tag.span "New key", class: outro_label_class %>
             <%= select_tag :to_key,
                   grouped_options_for_select(transposer_key_options,
                                              @to_key.to_s),
-                  class: "outro-select" %>
+                  class: outro_select_class %>
           </label>
         </div>
 
         <label class="outro-transposer__field">
-          <span class="outro-label">Chords and lyrics</span>
+          <%= tag.span "Chords and lyrics", class: outro_label_class %>
           <%= text_area_tag :text, @text,
                 rows: 8,
                 placeholder: "Paste a chord chart here.",
-                class: "outro-textarea outro-transposer__textarea" %>
+                class: outro_textarea_class("outro-transposer__textarea") %>
         </label>
 
         <%= button_tag type: :submit, name: nil,
-          class: "outro-button",
+          class: outro_button_class,
           "aria-label": "Transpose" do %>
           <%= image_tag "outro_rails/transposer.svg",
                 class: 'outro-button__icon' %>

data/lib/outro_rails/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module OutroRails
-  VERSION = "0.1.5"
+  VERSION = "0.1.6"
 end

data/lib/outro_rails.rb

@@ -18,4 +18,35 @@ module OutroRails
     !!chord_chart_voicing_authorization.call(chord_chart: chord_chart,
                                              controller:  controller)
   end
+
+  ELEMENT_CLASS_DEFAULTS = {
+    button:   "outro-button",
+    input:    "outro-input",
+    label:    "outro-label",
+    select:   "outro-select",
+    textarea: "outro-textarea"
+  }.freeze
+
+  mattr_accessor :button_class,   default: ELEMENT_CLASS_DEFAULTS[:button]
+  mattr_accessor :input_class,    default: ELEMENT_CLASS_DEFAULTS[:input]
+  mattr_accessor :label_class,    default: ELEMENT_CLASS_DEFAULTS[:label]
+  mattr_accessor :select_class,   default: ELEMENT_CLASS_DEFAULTS[:select]
+  mattr_accessor :textarea_class, default: ELEMENT_CLASS_DEFAULTS[:textarea]
+
+  def self.configure
+    yield self
+    self
+  end
+
+  def self.class_for(element)
+    key = element.to_sym
+
+    unless ELEMENT_CLASS_DEFAULTS.key?(key)
+      raise ArgumentError,
+            "unknown element #{element.inspect}; expected one of " \
+            "#{ELEMENT_CLASS_DEFAULTS.keys.map(&:inspect).join(', ')}"
+    end
+
+    public_send(:"#{key}_class")
+  end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: outro_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.5
+  version: 0.1.6
 platform: ruby
 authors:
 - endtoendpaper
@@ -79,6 +79,7 @@ files:
 - app/helpers/outro_rails/chord_charts_helper.rb
 - app/helpers/outro_rails/chords_helper.rb
 - app/helpers/outro_rails/circle_of_fifths_helper.rb
+- app/helpers/outro_rails/class_names_helper.rb
 - app/helpers/outro_rails/instruments_helper.rb
 - app/helpers/outro_rails/scales_helper.rb
 - app/helpers/outro_rails/transposer_helper.rb