outro_rails 0.1.0

data/app/assets/javascripts/outro_rails/outro_rails.js

@@ -0,0 +1,451 @@
+// outro_rails: playable guitar fretboard
+//
+// Initializes every [data-outro-guitar] element on the page. Notes are
+// plucked-string sounds synthesized with the Karplus-Strong algorithm
+// via the Web Audio API (no audio assets). Safe to load once globally;
+// re-runs on Turbo/Turbolinks navigation.
+(function () {
+  if (window.OutroGuitar) { window.OutroGuitar.initAll(); return; }
+
+  var audioCtx = null;
+
+  function context() {
+    if (!audioCtx) {
+      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    }
+    if (audioCtx.state === "suspended") audioCtx.resume();
+    return audioCtx;
+  }
+
+  function midiToFrequency(midi) {
+    return 440 * Math.pow(2, (midi - 69) / 12);
+  }
+
+  // Karplus-Strong plucked string: a burst of noise fed through a short
+  // averaging delay line. The delay length sets the pitch; the averaging
+  // rolls off high frequencies over time, which is what makes it decay
+  // like a real string instead of ringing like an organ.
+  function pluckNote(midi, when, duration) {
+    var ctx = context();
+    var startAt = ctx.currentTime + (when || 0);
+    var dur = duration || 2.0;
+
+    var sampleRate = ctx.sampleRate;
+    var period = Math.max(2, Math.round(sampleRate / midiToFrequency(midi)));
+    var length = Math.floor(sampleRate * dur);
+
+    var buffer = ctx.createBuffer(1, length, sampleRate);
+    var data = buffer.getChannelData(0);
+
+    for (var i = 0; i <= period && i < length; i++) {
+      data[i] = Math.random() * 2 - 1; // the "pluck"
+    }
+    for (var j = period + 1; j < length; j++) {
+      data[j] = 0.997 * 0.5 * (data[j - period] + data[j - period - 1]);
+    }
+
+    var source = ctx.createBufferSource();
+    source.buffer = buffer;
+
+    var gain = ctx.createGain();
+    gain.gain.setValueAtTime(0.5, startAt);
+    gain.gain.exponentialRampToValueAtTime(0.0001, startAt + dur);
+
+    source.connect(gain).connect(ctx.destination);
+    source.start(startAt);
+  }
+
+  function flashFret(board, string, fret, delayMs, durationMs) {
+    var cell = board.querySelector(
+      '[data-guitar-fret][data-string="' + string + '"][data-fret="' + fret + '"]'
+    );
+    if (!cell) return;
+    setTimeout(function () {
+      cell.classList.add("is-playing");
+      setTimeout(function () { cell.classList.remove("is-playing"); }, durationMs || 350);
+    }, delayMs || 0);
+  }
+
+  function parsePositions(button) {
+    return button.dataset.positions.split(",").map(function (triple) {
+      var parts = triple.split(":").map(Number);
+      return { string: parts[0], fret: parts[1], midi: parts[2] };
+    });
+  }
+
+  function initGuitar(board) {
+    if (board.dataset.outroGuitarReady) return;
+    board.dataset.outroGuitarReady = "true";
+
+    board.addEventListener("click", function (event) {
+      var cell = event.target.closest("[data-guitar-fret]");
+      if (cell) {
+        pluckNote(parseInt(cell.dataset.midi, 10));
+        flashFret(board, cell.dataset.string, cell.dataset.fret, 0, 350);
+        return;
+      }
+
+      var button = event.target.closest("[data-guitar-play]");
+      if (!button) return;
+
+      var positions = parsePositions(button);
+      if (button.dataset.guitarPlay === "chord") {
+        // Strum: lowest pitch first with a slight stagger, like a downstroke.
+        positions.sort(function (a, b) { return a.midi - b.midi; });
+        positions.forEach(function (pos, i) {
+          pluckNote(pos.midi, i * 0.035, 2.2);
+          flashFret(board, pos.string, pos.fret, i * 35, 1000);
+        });
+      } else {
+        positions.sort(function (a, b) { return a.midi - b.midi; });
+        var step = 0.4; // seconds between scale notes
+        positions.forEach(function (pos, i) {
+          pluckNote(pos.midi, i * step, 1.4);
+          flashFret(board, pos.string, pos.fret, i * step * 1000, 320);
+        });
+      }
+    });
+
+    board.addEventListener("keydown", function (event) {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      var cell = event.target.closest("[data-guitar-fret]");
+      if (!cell) return;
+      event.preventDefault();
+      pluckNote(parseInt(cell.dataset.midi, 10));
+      flashFret(board, cell.dataset.string, cell.dataset.fret, 0, 350);
+    });
+  }
+
+  window.OutroGuitar = {
+    initAll: function () {
+      document.querySelectorAll("[data-outro-guitar]").forEach(initGuitar);
+    }
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", window.OutroGuitar.initAll);
+  } else {
+    window.OutroGuitar.initAll();
+  }
+
+  document.addEventListener("turbo:load", window.OutroGuitar.initAll);
+  document.addEventListener("turbolinks:load", window.OutroGuitar.initAll);
+})();
+
+// outro_rails: playable piano keyboard
+//
+// Initializes every [data-outro-piano] element on the page. Notes are
+// synthesized with the Web Audio API (no audio assets). Safe to load
+// once globally; re-runs on Turbo/Turbolinks navigation.
+(function () {
+  if (window.OutroPiano) { window.OutroPiano.initAll(); return; }
+
+  var audioCtx = null;
+
+  function context() {
+    if (!audioCtx) {
+      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    }
+    if (audioCtx.state === "suspended") audioCtx.resume();
+    return audioCtx;
+  }
+
+  function midiToFrequency(midi) {
+    return 440 * Math.pow(2, (midi - 69) / 12);
+  }
+
+  function playNote(midi, when, duration) {
+    var ctx = context();
+    var startAt = ctx.currentTime + (when || 0);
+    var dur = duration || 1.1;
+
+    var osc = ctx.createOscillator();
+    var gain = ctx.createGain();
+    osc.type = "triangle";
+    osc.frequency.value = midiToFrequency(midi);
+
+    gain.gain.setValueAtTime(0.0001, startAt);
+    gain.gain.exponentialRampToValueAtTime(0.35, startAt + 0.015);
+    gain.gain.exponentialRampToValueAtTime(0.0001, startAt + dur);
+
+    osc.connect(gain).connect(ctx.destination);
+    osc.start(startAt);
+    osc.stop(startAt + dur + 0.05);
+  }
+
+  function flashKey(piano, midi, delayMs, durationMs) {
+    var key = piano.querySelector('[data-piano-key][data-midi="' + midi + '"]');
+    if (!key) return;
+    setTimeout(function () {
+      key.classList.add("is-playing");
+      setTimeout(function () { key.classList.remove("is-playing"); }, durationMs || 300);
+    }, delayMs || 0);
+  }
+
+  function initPiano(piano) {
+    if (piano.dataset.outroPianoReady) return;
+    piano.dataset.outroPianoReady = "true";
+
+    piano.addEventListener("click", function (event) {
+      var key = event.target.closest("[data-piano-key]");
+      if (key) {
+        playNote(parseInt(key.dataset.midi, 10));
+        flashKey(piano, key.dataset.midi, 0, 250);
+        return;
+      }
+
+      var button = event.target.closest("[data-piano-play]");
+      if (!button) return;
+
+      var midis = button.dataset.midis.split(",").map(Number);
+      if (button.dataset.pianoPlay === "chord") {
+        midis.forEach(function (midi) {
+          playNote(midi, 0, 1.6);
+          flashKey(piano, midi, 0, 900);
+        });
+      } else {
+        var step = 0.4; // seconds between scale notes
+        midis.forEach(function (midi, i) {
+          playNote(midi, i * step, 0.9);
+          flashKey(piano, midi, i * step * 1000, 320);
+        });
+      }
+    });
+
+    piano.addEventListener("keydown", function (event) {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      var key = event.target.closest("[data-piano-key]");
+      if (!key) return;
+      event.preventDefault();
+      playNote(parseInt(key.dataset.midi, 10));
+      flashKey(piano, key.dataset.midi, 0, 250);
+    });
+  }
+
+  window.OutroPiano = {
+    initAll: function () {
+      document.querySelectorAll("[data-outro-piano]").forEach(initPiano);
+    }
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", window.OutroPiano.initAll);
+  } else {
+    window.OutroPiano.initAll();
+  }
+
+  document.addEventListener("turbo:load", window.OutroPiano.initAll);
+  document.addEventListener("turbolinks:load", window.OutroPiano.initAll);
+})();
+
+// outro_rails: chord chart hover popups
+//
+// Initializes every [data-outro-chord-chart] element on the page.
+// Hovering a highlighted chord in the chart body shows a floating popup
+// with that chord's figure, cloned from the <template
+// data-outro-chord-popup="..."> elements the chart partial renders (one
+// per distinct chord, showing the same voicing as the diagram grid).
+// Safe to load once globally; re-runs on Turbo/Turbolinks navigation.
+(function () {
+  if (window.OutroChordPopups) { window.OutroChordPopups.initAll(); return; }
+
+  function templateFor(chart, symbol) {
+    var templates = chart.querySelectorAll("template[data-outro-chord-popup]");
+    for (var i = 0; i < templates.length; i++) {
+      if (templates[i].getAttribute("data-outro-chord-popup") === symbol) {
+        return templates[i];
+      }
+    }
+    return null;
+  }
+
+  function initChart(chart) {
+    if (chart.dataset.outroChordPopupsReady) return;
+    chart.dataset.outroChordPopupsReady = "true";
+
+    var popup = document.createElement("div");
+    popup.className = "outro-chord-chart__popup";
+    popup.setAttribute("role", "tooltip");
+    popup.hidden = true;
+    chart.appendChild(popup);
+
+    function show(span) {
+      var template = templateFor(chart, span.getAttribute("data-chord"));
+      if (!template) return;
+
+      popup.innerHTML = "";
+      popup.appendChild(template.content.cloneNode(true));
+      popup.hidden = false;
+
+      var chartRect = chart.getBoundingClientRect();
+      var spanRect = span.getBoundingClientRect();
+      var top = spanRect.top - chartRect.top - popup.offsetHeight - 8;
+      if (top < 0) top = spanRect.bottom - chartRect.top + 8;
+
+      var left = spanRect.left - chartRect.left +
+        (spanRect.width - popup.offsetWidth) / 2;
+      var maxLeft = chart.clientWidth - popup.offsetWidth - 4;
+      if (left > maxLeft) left = maxLeft;
+      if (left < 4) left = 4;
+
+      popup.style.top = top + "px";
+      popup.style.left = left + "px";
+    }
+
+    function hide() {
+      popup.hidden = true;
+    }
+
+    chart.addEventListener("mouseover", function (event) {
+      var span = event.target.closest("[data-chord]");
+      if (span && chart.contains(span)) show(span);
+    });
+
+    chart.addEventListener("mouseout", function (event) {
+      if (event.target.closest("[data-chord]")) hide();
+    });
+  }
+
+  window.OutroChordPopups = {
+    initAll: function () {
+      document.querySelectorAll("[data-outro-chord-chart]").forEach(initChart);
+    }
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", window.OutroChordPopups.initAll);
+  } else {
+    window.OutroChordPopups.initAll();
+  }
+
+  document.addEventListener("turbo:load", window.OutroChordPopups.initAll);
+  document.addEventListener("turbolinks:load", window.OutroChordPopups.initAll);
+})();
+
+// outro_rails: chord chart voicing cyclers
+//
+// Initializes every [data-outro-voicing-cycler] element on the page (the
+// editable chord cards a chord chart renders - see
+// chord_charts/_chart.html.erb). The server renders one slide per
+// voicing with all but the currently-showing one hidden; the arrows step
+// through them, wrapping at either end, and the counter announces
+// "n of m".
+//
+// Selecting and reverting are the slides' own form submissions, but this
+// module intercepts them: the form posts via fetch, the redirected
+// response's HTML is parsed, and the matching [data-outro-chord-chart]
+// container is swapped in place - statuses, buttons, hover popups, and
+// any sibling card sharing the same chord all update without a page
+// reload or a scroll jump. If fetch fails for any reason, the form
+// submits normally as a full page load. Everything also still works with
+// this script absent - you simply can't browse away from the current
+// slide, and submissions navigate. Safe to load once globally; re-runs
+// on Turbo/Turbolinks navigation.
+(function () {
+  if (window.OutroVoicingCyclers) { window.OutroVoicingCyclers.initAll(); return; }
+
+  function reinitAll() {
+    ["OutroGuitar", "OutroPiano", "OutroChordPopups", "OutroVoicingCyclers"]
+      .forEach(function (name) {
+        if (window[name] && window[name].initAll) window[name].initAll();
+      });
+  }
+
+  function freshChartFor(chart, doc) {
+    var key = chart.getAttribute("data-outro-chord-chart") || "";
+    var selector = "[data-outro-chord-chart=\"" +
+      (window.CSS && CSS.escape ? CSS.escape(key) : key.replace(/"/g, "\\\"")) +
+      "\"]";
+    var here = document.querySelectorAll(selector);
+    var index = Array.prototype.indexOf.call(here, chart);
+    var there = doc.querySelectorAll(selector);
+    return there[index > -1 ? index : 0] || null;
+  }
+
+  function submitAndRefresh(form, chart) {
+    var buttons = form.querySelectorAll("button");
+    buttons.forEach(function (b) { b.disabled = true; });
+    chart.setAttribute("aria-busy", "true");
+
+    fetch(form.action, {
+      method: "POST",
+      body: new FormData(form),
+      headers: { "Accept": "text/html" },
+      credentials: "same-origin",
+      redirect: "follow"
+    }).then(function (response) {
+      if (!response.ok) throw new Error("Voicing update failed: " + response.status);
+      return response.text();
+    }).then(function (html) {
+      var doc = new DOMParser().parseFromString(html, "text/html");
+      var fresh = freshChartFor(chart, doc);
+      if (!fresh) throw new Error("Refreshed page has no matching chart");
+
+      chart.replaceWith(document.importNode(fresh, true));
+      reinitAll();
+    }).catch(function () {
+      buttons.forEach(function (b) { b.disabled = false; });
+      chart.removeAttribute("aria-busy");
+      form.submit();
+    });
+  }
+
+  function initCycler(cycler) {
+    if (cycler.dataset.outroVoicingCyclerReady) return;
+    cycler.dataset.outroVoicingCyclerReady = "true";
+
+    var slides = cycler.querySelectorAll("[data-voicing-slide]");
+    var counter = cycler.querySelector("[data-voicing-counter]");
+    if (slides.length === 0) return;
+
+    var index = 0;
+    for (var i = 0; i < slides.length; i++) {
+      if (!slides[i].hidden) { index = i; break; }
+    }
+
+    function render() {
+      for (var j = 0; j < slides.length; j++) {
+        slides[j].hidden = j !== index;
+      }
+      if (counter) {
+        counter.textContent = (index + 1) + " of " + slides.length;
+      }
+    }
+
+    function step(delta) {
+      index = (index + delta + slides.length) % slides.length;
+      render();
+    }
+
+    cycler.addEventListener("click", function (event) {
+      if (event.target.closest("[data-voicing-prev]")) step(-1);
+      else if (event.target.closest("[data-voicing-next]")) step(1);
+    });
+
+    cycler.addEventListener("submit", function (event) {
+      var form = event.target;
+      var chart = form.closest("[data-outro-chord-chart]");
+      if (!chart || !window.fetch || !window.DOMParser) return;
+
+      event.preventDefault();
+      submitAndRefresh(form, chart);
+    });
+
+    render();
+  }
+
+  window.OutroVoicingCyclers = {
+    initAll: function () {
+      document.querySelectorAll("[data-outro-voicing-cycler]").forEach(initCycler);
+    }
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", window.OutroVoicingCyclers.initAll);
+  } else {
+    window.OutroVoicingCyclers.initAll();
+  }
+
+  document.addEventListener("turbo:load", window.OutroVoicingCyclers.initAll);
+  document.addEventListener("turbolinks:load", window.OutroVoicingCyclers.initAll);
+})();