easyfaa 0.90.0 → 1.1.0

data/app/assets/javascripts/easy/flyer.js

@@ -0,0 +1,100 @@
+// The plane of render "easy/flyer": across the sky in 14 seconds on a gentle wave, nose along it, its trail behind it.
+// On a holiday, by the visitor's own calendar, it flies in the day's colors with a line of smoke per color: every day
+// is in this file, so whatever cached it, it's right at midnight. No plane where motion is off. ES5, for old phones.
+(function () {
+  if (!document.querySelectorAll || !document.createElementNS || !window.requestAnimationFrame) { return; }
+  if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { return; }
+
+  var SKY = { trail: ['#5aa9e6'], opacity: 0.45 }, HANUKKAH = { plane: '#2f6fd0', trail: ['#2f6fd0', '#cfd8e3'] };
+  var GOLD = { plane: '#d4a514', trail: ['#d4a514', '#a8b0b8'] };
+  var USA = { plane: '#2f5fc4', trail: ['#d63a3a', '#ffffff', '#2f5fc4'] };
+  // Hanukkah's first day (25 Kislev) as a day of December, 2025 to 2045 (Nov 28 is -2); its days yield to the others.
+  var KISLEV_25 = [15, 5, 25, 13, 2, 21, 10, -2, 17, 7, 26, 14, 3, 22, 12, 0, 18, 8, 27, 15, 5];
+
+  // The holidays of a year, by "month-day": the plane's color, then its trail's, top to bottom. National Aviation Day
+  // is in pilot's-wings gold and blue, Wright Brothers Day in the Wright Flyer's muslin and spruce.
+  function holidays(year) {
+    var easter = easterOf(year), days = {};
+    for (var k = 0; k < 16; k++) { // last year's eight days of Hanukkah, reaching into January, then this year's
+      var y = year - 1 + (k >> 3), day = new Date(y, 11, KISLEV_25[y - 2025] + k % 8);
+      if (day.getFullYear() === year) { days[(day.getMonth() + 1) + '-' + day.getDate()] = HANUKKAH; }
+    }
+    days['1-1'] = days['12-31'] = GOLD;
+    days['2-14'] = { plane: '#e0457b', trail: ['#d62f4b', '#f07aa0'] };
+    days['3-17'] = { plane: '#1f9d55', trail: ['#1f9d55', '#7cc576'] };
+    days[easter] = { plane: '#a77bd6', trail: ['#f2c94c', '#a77bd6', '#6fcf97'] };
+    days['5-' + weekday(year, 5, 1, -1)] = days['7-4'] = days['11-11'] = USA;
+    days['8-19'] = { plane: '#1a70d0', trail: ['#e0b43a', '#5aa9e6'] };
+    days['10-31'] = { plane: '#f28c28', trail: ['#f28c28', '#7b3fa0'] };
+    days['11-' + weekday(year, 11, 4, 4)] = { plane: '#c0662b', trail: ['#e0a526', '#c0662b', '#8a4b2a'] };
+    days['12-17'] = { plane: '#8a6a43', trail: ['#d9c9a3', '#8a6a43'] };
+    days['12-25'] = { plane: '#d42f2f', trail: ['#1f8a4c', '#d42f2f'] };
+    return days;
+  }
+
+  // The day of the month of its nth weekday (0 Sunday), the last for n -1: Memorial Day, Thanksgiving.
+  function weekday(year, month, day, n) {
+    if (n < 0) { var last = new Date(year, month, 0); return last.getDate() - (last.getDay() - day + 7) % 7; }
+    return 1 + (day - new Date(year, month - 1, 1).getDay() + 7) % 7 + (n - 1) * 7;
+  }
+
+  // Easter Sunday's "month-day": the anonymous Gregorian algorithm.
+  function easterOf(y) {
+    var a = y % 19, b = Math.floor(y / 100), c = y % 100, f = Math.floor((b + 8) / 25);
+    var h = (19 * a + b - Math.floor(b / 4) - Math.floor((b - f + 1) / 3) + 15) % 30;
+    var l = (32 + 2 * (b % 4) + 2 * Math.floor(c / 4) - h - c % 4) % 7, m = Math.floor((a + 11 * h + 22 * l) / 451);
+    return Math.floor((h + l - 7 * m + 114) / 31) + '-' + ((h + l - 7 * m + 114) % 31 + 1);
+  }
+
+  // The sky's colors: its data-date's ("2026-12-25"), to see a holiday on any day, or today's.
+  function colorsOf(sky) {
+    var date = /^(\d{4})-(\d\d)-(\d\d)$/.exec(sky.getAttribute('data-date') || '');
+    var day = date ? new Date(+date[1], date[2] - 1, +date[3]) : new Date();
+    return holidays(day.getFullYear())[(day.getMonth() + 1) + '-' + day.getDate()] || SKY;
+  }
+
+  function svg(name, attributes, parent) {
+    var node = document.createElementNS('http://www.w3.org/2000/svg', name);
+    for (var key in attributes) { node.setAttribute(key, attributes[key]); }
+    return parent.appendChild(node);
+  }
+
+  function fly(sky, n) {
+    var flyer = sky.querySelector('.js-flyer'), trail = sky.querySelector('.js-trail'), colors = colorsOf(sky);
+    var defs = svg('defs', {}, trail), lines = [], fades = [];
+    if (colors.plane) { flyer.style.color = colors.plane; }
+    // One line per color, 3px apart, each fading in from the sky's left edge to the tail.
+    for (var i = 0; i < colors.trail.length; i++) {
+      var id = 'flyer-' + n + '-' + i, color = colors.trail[i];
+      var fade = svg('linearGradient', { id: id, gradientUnits: 'userSpaceOnUse', x1: 0, y1: 0, x2: 100, y2: 0 }, defs);
+      svg('stop', { offset: 0, 'stop-color': color, 'stop-opacity': 0 }, fade);
+      svg('stop', { offset: 1, 'stop-color': color, 'stop-opacity': colors.opacity || 0.7 }, fade);
+      fades.push(fade);
+      lines.push(svg('polyline', { fill: 'none', stroke: 'url(#' + id + ')', 'stroke-width': 2, 'stroke-linecap': 'round' }, trail));
+    }
+    var span = 14000, size = 34, began = null;
+    function wave(x, width) { return 14 + 9 * Math.sin((x / width) * Math.PI * 3); }
+    function frame(now) {
+      if (began === null) { began = now; }
+      var width = sky.offsetWidth, t = ((now - began) % span) / span;
+      var x = -size - 40 + (width + size + 80) * t, y = wave(x + size / 2, width);
+      var angle = Math.atan(wave(x + size / 2 + 1, width) - y) * 180 / Math.PI;
+      var move = 'translate(' + x.toFixed(1) + 'px,' + (y - size / 2).toFixed(1) + 'px) rotate(' + angle.toFixed(1) + 'deg)';
+      flyer.style.webkitTransform = move; flyer.style.transform = move;
+      // The tail is the plane's left edge, at its middle, turned with it.
+      var tailX = x + size / 2 - (size / 2 - 3) * Math.cos(angle * Math.PI / 180);
+      for (var i = 0; i < lines.length; i++) {
+        var shift = (i - (lines.length - 1) / 2) * 3, points = [];
+        for (var px = 0; px < tailX; px += 6) { points.push(px + ',' + (wave(px, width) + shift).toFixed(1)); }
+        if (tailX > 0) { points.push(tailX.toFixed(1) + ',' + (wave(tailX, width) + shift).toFixed(1)); }
+        lines[i].setAttribute('points', points.join(' '));
+        fades[i].setAttribute('x2', Math.max(tailX, 1).toFixed(1));
+      }
+      if (sky.className.indexOf('is-gone') < 0) { window.requestAnimationFrame(frame); } // freed (easy/konami)
+    }
+    window.requestAnimationFrame(frame);
+  }
+
+  var skies = document.querySelectorAll('.js-sky');
+  for (var i = 0; i < skies.length; i++) { fly(skies[i], i); }
+})();

data/app/assets/javascripts/easy/highlight.js

@@ -0,0 +1,54 @@
+// Marks the words of a search in the rows it leaves (easy/switches calls it at each draw): every place a word is
+// found in a row's text is wrapped in mark.search-hit, and the marks of the search before are taken out first. Words
+// are found within one piece of text, never across two elements, and never in a form: what it asks is the
+// same in every row, and what is typed there is the reader's.
+// ES5 alone: every easy app has to work on old iPhones, Androids and Windows browsers.
+(function () {
+  var SKIP = /^(FORM|SCRIPT|STYLE)$/;
+
+  // Straight in a flex or grid box each piece of text is laid out apart, losing the space beside it: the text is
+  // first put whole in a span, one piece as it was, and marked inside it.
+  function texts(node, found) {
+    var laid = /flex|grid/.test(window.getComputedStyle(node).display);
+    for (var child = node.firstChild; child; child = child.nextSibling) {
+      if (child.nodeType === 3 && laid && /\S/.test(child.nodeValue)) {
+        var whole = document.createElement('span');
+        node.replaceChild(whole, child);
+        whole.appendChild(child);
+        found.push(child);
+        child = whole;
+      } else if (child.nodeType === 3) { found.push(child); } else if (child.nodeType === 1 && !SKIP.test(child.nodeName)) { texts(child, found); }
+    }
+    return found;
+  }
+
+  // Wraps the first word found in the text, then goes on in what follows it.
+  function mark(text, words) {
+    var lower = text.nodeValue.toLowerCase(), at = -1, size = 0;
+    for (var w = 0; w < words.length; w++) {
+      var index = lower.indexOf(words[w]);
+      if (index >= 0 && (at < 0 || index < at)) { at = index; size = words[w].length; }
+    }
+    if (at < 0) { return; }
+    var hit = text.splitText(at), rest = hit.splitText(size), wrap = document.createElement('mark');
+    wrap.className = 'search-hit';
+    hit.parentNode.replaceChild(wrap, hit);
+    wrap.appendChild(hit);
+    mark(rest, words);
+  }
+
+  window.easyHighlight = function (box, rows, words) {
+    var marks = box.querySelectorAll('mark.search-hit'), typed = [];
+    for (var m = 0; m < marks.length; m++) {
+      var parent = marks[m].parentNode;
+      parent.replaceChild(document.createTextNode(marks[m].textContent), marks[m]);
+      parent.normalize();
+    }
+    for (var w = 0; w < words.length; w++) { if (words[w]) { typed.push(words[w]); } }
+    if (!typed.length) { return; }
+    for (var r = 0; r < rows.length; r++) {
+      var found = texts(rows[r], []);
+      for (var t = 0; t < found.length; t++) { mark(found[t], typed); }
+    }
+  };
+})();

data/app/assets/javascripts/easy/konami.js

@@ -0,0 +1,73 @@
+// The easter egg of render "easy/flyer": the Konami code sets the plane free, ↑ ↑ ↓ ↓ ← → ← → B A on a keyboard,
+// or on a phone swipes up, up, down, down, left, right, left, right and two taps. It leaves its wave, wanders the
+// window at random until it flies out of it, and never comes back in this browser (localStorage, per site).
+// Included with easy/flyer; where motion is turned off there is no plane, and nothing to free.
+// ES5 alone: every easy app has to work on old iPhones, Androids and Windows browsers.
+(function () {
+  if (!document.querySelectorAll || !document.addEventListener || !window.requestAnimationFrame) { return; }
+  if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { return; }
+  var GONE = 'easy-plane-gone', CODES = ['UUDDLRLRBA', 'UUDDLRLRTT'];
+  var KEYS = { 38: 'U', 40: 'D', 37: 'L', 39: 'R', 66: 'B', 65: 'A' };
+  var skies = document.querySelectorAll('.js-sky'), typed = '', start = null, freed = false;
+
+  // A sky gone keeps no plane, and its trail fades; easy/flyer stops drawing it.
+  function gone() { for (var i = 0; i < skies.length; i++) { skies[i].className += ' is-gone'; } }
+  try { if (window.localStorage.getItem(GONE)) { gone(); return; } } catch (err) { /* no storage: it comes back */ }
+
+  // The plane, out of its sky and over the window, where it was and heading as it was: at 160px a second, it turns
+  // one way then the other, never sharper than a loop in three seconds, until it is past an edge.
+  function fly(flyer) {
+    var box = flyer.getBoundingClientRect(), plane = flyer.cloneNode(true), size = 34;
+    var rotation = /rotate\((-?[\d.]+)deg\)/.exec(flyer.style.transform || '');
+    var x = box.left + box.width / 2 - size / 2, y = box.top + box.height / 2 - size / 2;
+    var heading = rotation ? rotation[1] * Math.PI / 180 : 0, turn = 0, last = null;
+    if (!box.width) { return; }
+    function place() {
+      var turn = (heading * 180 / Math.PI).toFixed(1);
+      var move = 'translate(' + x.toFixed(1) + 'px,' + y.toFixed(1) + 'px) rotate(' + turn + 'deg)';
+      plane.style.webkitTransform = move; plane.style.transform = move;
+    }
+    plane.className = 'flyer is-free';
+    place();
+    document.body.appendChild(plane);
+    function frame(now) {
+      var dt = last === null ? 16 : Math.min(now - last, 50);
+      last = now;
+      turn = Math.max(-0.002, Math.min(0.002, turn + (Math.random() - 0.5) * 0.00002 * dt));
+      heading += turn * dt;
+      x += Math.cos(heading) * 0.16 * dt; y += Math.sin(heading) * 0.16 * dt;
+      place();
+      if (x < -size || y < -size || x > window.innerWidth || y > window.innerHeight) {
+        return document.body.removeChild(plane);
+      }
+      window.requestAnimationFrame(frame);
+    }
+    window.requestAnimationFrame(frame);
+  }
+
+  function free() {
+    try { window.localStorage.setItem(GONE, '1'); } catch (err) { /* no storage: it comes back */ }
+    for (var i = 0; i < skies.length; i++) { fly(skies[i].querySelector('.js-flyer')); }
+    gone();
+  }
+
+  function push(symbol) {
+    typed = (typed + symbol).slice(-10);
+    if (!freed && (typed === CODES[0] || typed === CODES[1])) { freed = true; free(); }
+  }
+
+  document.addEventListener('keydown', function (event) { push(KEYS[event.keyCode] || '-'); });
+  // A swipe is its longer way, 30px at least; a touch that hardly moved is a tap.
+  document.addEventListener('touchstart', function (event) {
+    start = event.touches.length === 1 ? { x: event.touches[0].clientX, y: event.touches[0].clientY } : null;
+  }, { passive: true });
+  document.addEventListener('touchend', function (event) {
+    if (!start) { return; }
+    var dx = event.changedTouches[0].clientX - start.x, dy = event.changedTouches[0].clientY - start.y;
+    var far = Math.max(Math.abs(dx), Math.abs(dy));
+    if (far < 10) { push('T'); } else if (far < 30) { push('-'); } else if (Math.abs(dx) > Math.abs(dy)) {
+      push(dx > 0 ? 'R' : 'L');
+    } else { push(dy > 0 ? 'D' : 'U'); }
+    start = null;
+  }, { passive: true });
+})();

data/app/assets/javascripts/easy/modal.js

@@ -0,0 +1,49 @@
+// Every dialog of render "easy/modal" lets its reader out: its ×, Esc or a click around it closes it where it is,
+// without loading a page, and the address becomes the × link's (the page without what opened it), or loses the #id
+// that opened it. A link to that #id opens it again. Without the script, the × is a plain link.
+// ES5 alone: every easy app has to work on old iPhones, Androids and Windows browsers.
+(function () {
+  if (!document.querySelector || !document.addEventListener) { return; }
+
+  function close(modal) {
+    var link = modal.querySelector('.modal-x'), href = link && link.getAttribute('href');
+    modal.className = modal.className.replace(/\s*\bis-(open|closed)\b/g, '') + ' is-closed';
+    if (!window.history || !history.replaceState) { return; }
+    if (href && href.charAt(0) !== '#') { history.replaceState(null, '', href + location.hash); }
+    else if (location.hash === '#' + modal.id) { history.replaceState(null, '', location.pathname + location.search); }
+  }
+
+  // The dialog showing: drawn open, or the one the address's #id names.
+  function shown() {
+    var target = location.hash.length > 1 && document.getElementById(location.hash.slice(1));
+    var open = document.querySelector('.modal.is-open');
+    if (open) { return open; }
+    var open = target && /(^|\s)modal(\s|$)/.test(target.className) && !/\bis-closed\b/.test(target.className);
+    return open ? target : null;
+  }
+
+  // The node or its nearest ancestor with the class: old browsers have no closest().
+  function up(node, name) {
+    var pattern = new RegExp('(^|\\s)' + name + '(\\s|$)');
+    while (node && node.nodeType === 1 && !pattern.test(node.className)) { node = node.parentNode; }
+    return node && node.nodeType === 1 ? node : null;
+  }
+
+  // The ×, or the dimmed page around the box (the dialog itself, not what it holds).
+  document.addEventListener('click', function (event) {
+    var x = up(event.target, 'modal-x');
+    var modal = x ? up(x, 'modal') : /(^|\s)modal(\s|$)/.test(event.target.className) && event.target;
+    if (!modal) { return; }
+    event.preventDefault();
+    close(modal);
+  });
+  document.addEventListener('keydown', function (event) {
+    if (event.key !== 'Escape' && event.key !== 'Esc' && event.keyCode !== 27) { return; }
+    var modal = shown();
+    if (modal) { event.preventDefault(); close(modal); }
+  });
+  window.addEventListener('hashchange', function () {
+    var target = location.hash.length > 1 && document.getElementById(location.hash.slice(1));
+    if (target) { target.className = target.className.replace(/\s*\bis-closed\b/g, ''); }
+  });
+})();

data/app/assets/javascripts/easy/pin_code.js

@@ -0,0 +1,43 @@
+// The 6-digit code of render "easy/pin_code": its six slots show what its one real field holds, the next one to fill
+// lit, and six digits submit the form without a click, typed, pasted or offered by the phone from the email. A field
+// the page empties redraws on an input event; a code refused is the page's to mark, is-invalid on the .pin-code,
+// which the next digit clears. A .pin-code already drawn is left alone, so including the script twice is harmless.
+// ES5 alone: every easy app has to work on old iPhones, Androids and Windows browsers.
+(function () {
+  if (!document.querySelectorAll || !document.addEventListener) { return; }
+
+  // The form's own submit, so its handlers run first: requestSubmit, or an old browser's submit event.
+  function submit(form) {
+    if (form.requestSubmit) { form.requestSubmit(); return; }
+    var event = document.createEvent('Event');
+    event.initEvent('submit', true, true);
+    if (form.dispatchEvent(event)) { form.submit(); }
+  }
+
+  function drawn(pin) {
+    var input = pin.querySelector('.pin-code-input'), slots = pin.querySelectorAll('.pin-code-slots span');
+    function draw() {
+      var value = input.value.replace(/\D/g, '').slice(0, 6), focused = document.activeElement === input;
+      if (value !== input.value) { input.value = value; }
+      for (var i = 0; i < slots.length; i++) {
+        slots[i].textContent = value.charAt(i);
+        slots[i].className = focused && i === Math.min(value.length, 5) ? 'is-active' : '';
+      }
+      return value;
+    }
+    input.addEventListener('input', function () {
+      pin.className = pin.className.replace(/\s*\bis-invalid\b/g, '');
+      input.removeAttribute('aria-invalid');
+      if (draw().length === 6 && input.form) { submit(input.form); }
+    });
+    input.addEventListener('focus', draw);
+    input.addEventListener('blur', draw);
+    pin.className += ' is-drawn';
+    draw();
+  }
+
+  var pins = document.querySelectorAll('.pin-code');
+  for (var i = 0; i < pins.length; i++) {
+    if (!/\bis-drawn\b/.test(pins[i].className)) { drawn(pins[i]); }
+  }
+})();

data/app/assets/javascripts/easy/report_sort.js

@@ -0,0 +1,57 @@
+// The sort button of easy/report_head: flips every list data-sort-list names, each by its rows' data-sort, remembered
+// in this browser. ES5 alone. A page that redraws its list calls window.easyReportSort() after. Without this script the
+// list stays as the server sent it, and the button hidden.
+(function () {
+  // A page with two heads links the script twice: the second would flip every list back.
+  if (window.easyReportSort) { return; }
+
+  function saved(head) {
+    try {
+      return localStorage.getItem('report-sort:' + head.getAttribute('data-sort-list'));
+    } catch (blocked) { return null; }
+  }
+
+  function save(head, order) {
+    try {
+      localStorage.setItem('report-sort:' + head.getAttribute('data-sort-list'), order);
+    } catch (blocked) { return; }
+  }
+
+  function order(head) { return head.easyOrder || saved(head) || head.getAttribute('data-sort-default'); }
+
+  function compared(a, b) {
+    return a.getAttribute('data-sort').localeCompare(b.getAttribute('data-sort'), undefined, { numeric: true });
+  }
+
+  function apply(head) {
+    var lists = document.querySelectorAll(head.getAttribute('data-sort-list'));
+    var item = head.querySelector('.sort-button-item');
+    if (!lists.length || !item) { return; }
+    var way = order(head), newest = way === 'newest';
+    Array.prototype.forEach.call(lists, function (list) {
+      Array.prototype.slice.call(list.children).filter(function (row) { return row.hasAttribute('data-sort'); })
+        .sort(function (a, b) { return newest ? compared(b, a) : compared(a, b); })
+        .forEach(function (row) { list.appendChild(row); });
+    });
+    item.hidden = false;
+    item.querySelector('.js-sort-label').textContent = newest ? 'Newest first' : 'Oldest first';
+    var icon = item.querySelector('use'), ref = icon.getAttribute('href').split('#')[0] + '#i-' + way;
+    icon.setAttribute('href', ref);
+    icon.setAttribute('xlink:href', ref);
+  }
+
+  window.easyReportSort = function () {
+    Array.prototype.forEach.call(document.querySelectorAll('[data-sort-list]'), apply);
+  };
+
+  document.addEventListener('click', function (event) {
+    var button = event.target.closest && event.target.closest('.js-sort');
+    var head = button && button.closest('[data-sort-list]');
+    if (!head) { return; }
+    head.easyOrder = order(head) === 'newest' ? 'oldest' : 'newest';
+    save(head, head.easyOrder);
+    apply(head);
+  });
+
+  window.easyReportSort();
+}());

data/app/assets/javascripts/easy/rotating_placeholder.js

@@ -0,0 +1,35 @@
+// The search box's placeholder types what the box finds, one example after another, until the visitor types their
+// own: each app gives its examples on the field, <input data-rotating-placeholder='["N714AD", "O-320-H2AD"]'>, and
+// its resting placeholder, which comes back once something is typed. Where motion is turned off, it holds still.
+// ES5 alone: every easy app has to work on old iPhones, Androids and Windows browsers.
+(function () {
+  if (!document.querySelectorAll || !window.JSON) { return; }
+  if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { return; }
+
+  function rotate(input) {
+    var examples;
+    try { examples = JSON.parse(input.getAttribute('data-rotating-placeholder')); } catch (err) { return; }
+    if (!examples || !examples.length) { return; }
+    var resting = input.getAttribute('placeholder') || examples[0], ex = 0, at = 0, typing = null;
+    function tick() {
+      var word = examples[ex];
+      if (at <= word.length) {
+        input.setAttribute('placeholder', word.slice(0, at) || word.charAt(0));
+        at++;
+        typing = setTimeout(tick, at > word.length ? 1600 : 140);
+        return;
+      }
+      ex = (ex + 1) % examples.length; at = 1; typing = setTimeout(tick, 140);
+    }
+    // Typing stops the show; being in the field doesn't, nor a key that typed nothing (the Tab that got there).
+    function typed() {
+      if (input.value && typing) { clearTimeout(typing); typing = null; input.setAttribute('placeholder', resting); }
+    }
+    input.addEventListener('input', typed);
+    input.addEventListener('keyup', typed);
+    typing = setTimeout(tick, 900);
+  }
+
+  var inputs = document.querySelectorAll('[data-rotating-placeholder]');
+  for (var i = 0; i < inputs.length; i++) { rotate(inputs[i]); }
+})();

data/app/assets/javascripts/easy/step_foot.js

@@ -0,0 +1,17 @@
+// A step's foot (step-foot) is in the page's flow, at the step's end. Once the step's top has left the window (the
+// steps bar, or what data-top names) the foot also keeps to the window's foot (is-stuck), coming up from below
+// (is-rising, until it has risen) unless its own place is already in view, as at the end of a short step; back at the
+// top it lets go.
+// Without this script the foot stays at the step's end. ES5 alone, for the browsers that can watch an element.
+(function () {
+  var foot = document.querySelector && document.querySelector('.step-foot');
+  var top = foot && document.querySelector(foot.getAttribute('data-top') || '.steps-bar');
+  if (!top || !window.IntersectionObserver) { return; }
+  new IntersectionObserver(function (entries) {
+    var gone = !entries[0].isIntersecting && entries[0].boundingClientRect.top < 0;
+    var below = foot.getBoundingClientRect().top >= window.innerHeight;
+    foot.className = foot.className.replace(/ ?is-(stuck|rising)/g, '') + (gone ? ' is-stuck' + (below ? ' is-rising' : '') : '');
+  }).observe(top);
+  // Risen, it draws nothing below itself any longer: at the page's end the site's footer is there.
+  foot.addEventListener('animationend', function () { foot.className = foot.className.replace(/ ?is-rising/g, ''); });
+})();

data/app/assets/javascripts/easy/switches.js

@@ -0,0 +1,96 @@
+// Switches over a list: inside js-switches, each count of a switches row (li[data-state]) shows or hides the rows of
+// that state, anything else carrying the same data-state; one with data-off="true" starts off. Words typed in
+// js-words keep the rows that have them all outside their forms, and are marked in them (easy/highlight). A js-none line shows while
+// nothing beside it is left to show, a js-group hides while nothing inside it is, and a tab (js-tabs) whose number is
+// a js-count counts the rows left in its panel that carry data-counted. A row carrying data-keep shows whatever its
+// switch says, until a switch is flipped or a word typed. A page that redraws its rows or its switches calls
+// window.easySwitches() after. Without the script every row shows, the counts are plain and the search hidden.
+// ES5 alone: every easy app has to work on old iPhones, Androids and Windows browsers.
+(function () {
+  // A page with two heads links the script twice: its boxes are wired once.
+  if (window.easySwitches || !document.querySelectorAll || !document.addEventListener) { return; }
+  var drawn = [];
+
+  function each(list, callback) { for (var i = 0; i < list.length; i++) { callback(list[i]); } }
+  function has(el, name) { return (' ' + el.className + ' ').indexOf(' ' + name + ' ') >= 0; }
+  function within(el, name, stop) {
+    for (; el && el !== stop; el = el.parentNode) { if (el.className && has(el, name)) { return el; } }
+    return null;
+  }
+  // What a row says, without what its forms ask: "Complied with" in every card's form is no reason to show them all.
+  function said(node) {
+    var text = '';
+    for (var child = node.firstChild; child; child = child.nextSibling) {
+      if (child.nodeType === 3) { text += child.nodeValue; } else if (child.nodeType === 1 && child.nodeName !== 'FORM') { text += said(child); }
+    }
+    return text;
+  }
+  function holds(el, rows) {
+    for (var i = 0; i < rows.length; i++) { if (el.contains(rows[i])) { return true; } }
+    return false;
+  }
+
+  function wire(box) {
+    var on = box.easySwitches = {}, field = box.querySelector('.js-words'), input = field && field.querySelector('input');
+    function switches() { return box.querySelectorAll('.switches li[data-state]'); }
+    function toggle(target) {
+      for (; target && target !== box; target = target.parentNode) {
+        if (target.getAttribute && target.getAttribute('data-state') && within(target, 'switches', box)) { return target; }
+      }
+      return null;
+    }
+
+    function shown(row, want) {
+      if (on[row.getAttribute('data-state')] === false && !row.hasAttribute('data-keep')) { return false; }
+      var text = want.join('') ? said(row).toLowerCase() : '';
+      for (var w = 0; w < want.length; w++) { if (text.indexOf(want[w]) < 0) { return false; } }
+      return true;
+    }
+
+    function draw() {
+      var want = (input ? input.value : '').toLowerCase().split(/\s+/), left = [];
+      each(switches(), function (li) {
+        var state = li.getAttribute('data-state');
+        if (on[state] === undefined) { on[state] = li.getAttribute('data-off') !== 'true'; }
+        li.className = li.className.replace(/ ?(switches-toggle|is-off)\b/g, '') + ' switches-toggle' + (on[state] ? '' : ' is-off');
+        li.setAttribute('role', 'button');
+        li.setAttribute('tabindex', '0');
+        li.setAttribute('aria-pressed', on[state] ? 'true' : 'false');
+      });
+      each(box.querySelectorAll('[data-state]'), function (row) {
+        if (within(row, 'switches', box)) { return; }
+        row.hidden = !shown(row, want);
+        if (!row.hidden) { left.push(row); }
+      });
+      each(box.querySelectorAll('.js-none'), function (none) { none.hidden = holds(none.parentNode, left); });
+      each(box.querySelectorAll('.js-group'), function (group) { group.hidden = !holds(group, left); });
+      each(box.querySelectorAll('.js-tabs a'), function (tab) {
+        var count = tab.querySelector('.js-count'), panel = document.getElementById(tab.getAttribute('href').slice(1)), n = 0;
+        if (!count || !panel) { return; }
+        each(left, function (row) { if (row.hasAttribute('data-counted') && panel.contains(row)) { n++; } });
+        count.textContent = n;
+      });
+      if (window.easyHighlight) { window.easyHighlight(box, left, want); }
+    }
+
+    function changed() {
+      each(box.querySelectorAll('[data-keep]'), function (row) { row.removeAttribute('data-keep'); });
+      draw();
+    }
+    function flip(li) { on[li.getAttribute('data-state')] = !on[li.getAttribute('data-state')]; changed(); }
+
+    box.addEventListener('click', function (event) { var li = toggle(event.target); if (li) { flip(li); } });
+    box.addEventListener('keydown', function (event) {
+      var li = toggle(event.target);
+      if (li && (event.key === 'Enter' || event.key === ' ' || event.keyCode === 13 || event.keyCode === 32)) {
+        event.preventDefault(); flip(li);
+      }
+    });
+    if (input) { field.hidden = false; input.addEventListener('input', changed); }
+    drawn.push(draw);
+    draw();
+  }
+
+  window.easySwitches = function () { each(drawn, function (draw) { draw(); }); };
+  each(document.querySelectorAll('.js-switches'), wire);
+})();

data/app/assets/javascripts/easy/switches_address.js

@@ -0,0 +1,39 @@
+// Keeps what a js-switches box carrying data-address is set to in the page's address, so the page can be reloaded or
+// shared as it is: ?q= the words typed, ?off= the switches that are off, when they are not the ones that start off
+// ("off=" alone, then, for all of them on). Linked after easy/switches. ES5 alone.
+(function () {
+  var box = document.querySelector('.js-switches[data-address]');
+  if (!box || !box.easySwitches || !window.history || !history.replaceState) { return; }
+  var on = box.easySwitches, input = box.querySelector('.js-words input'), starts = [];
+
+  function params() {
+    var all = {}, pairs = location.search.replace(/^\?/, '').split('&');
+    for (var i = 0; i < pairs.length; i++) {
+      var pair = pairs[i].split('=');
+      if (pairs[i]) { all[decodeURIComponent(pair[0])] = decodeURIComponent((pair[1] || '').replace(/\+/g, ' ')); }
+    }
+    return all;
+  }
+  function off() {
+    var states = [];
+    for (var state in on) { if (on.hasOwnProperty(state) && !on[state]) { states.push(state); } }
+    return states.sort().join(',');
+  }
+  function remember() {
+    var all = params(), words = input ? input.value.replace(/^\s+|\s+$/g, '') : '', pairs = [];
+    delete all.q; delete all.off;
+    if (words) { all.q = words; }
+    if (off() !== starts) { all.off = off(); }
+    for (var key in all) { if (all.hasOwnProperty(key)) { pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(all[key])); } }
+    history.replaceState(history.state, '', location.pathname + (pairs.length ? '?' + pairs.join('&') : '') + location.hash);
+  }
+
+  starts = off();
+  var asked = params();
+  if (asked.off !== undefined) { for (var state in on) { if (on.hasOwnProperty(state)) { on[state] = (',' + asked.off + ',').indexOf(',' + state + ',') < 0; } } }
+  if (asked.q && input) { input.value = asked.q; }
+  window.easySwitches();
+  box.addEventListener('click', remember);
+  box.addEventListener('keydown', remember);
+  box.addEventListener('input', remember);
+})();

data/app/assets/javascripts/easy/tabs.js

@@ -0,0 +1,35 @@
+// Tabs over panels (part-tabs with js-tabs): each tab is a link to its panel's #id. A click shows that panel and hides
+// the others (is-on on the tab, is-off on a panel), and the address takes the #id, which opens the same tab when the
+// page is loaded with it, as does the #id of anything inside a panel. Without the script the panels show one under the other and the tabs jump to each.
+// ES5 alone: every easy app has to work on old iPhones, Androids and Windows browsers.
+(function () {
+  if (!document.querySelectorAll || !document.addEventListener) { return; }
+
+  function strip(el, name) { el.className = el.className.replace(new RegExp('\\s*\\b' + name + '\\b', 'g'), ''); }
+  function id(link) { return link.getAttribute('href').slice(1); }
+
+  function wire(links) {
+    function show(shown) {
+      for (var i = 0; i < links.length; i++) {
+        var panel = document.getElementById(id(links[i]));
+        strip(links[i], 'is-on'); strip(panel, 'is-off');
+        if (id(links[i]) === shown) { links[i].className += ' is-on'; } else { panel.className += ' is-off'; }
+      }
+    }
+    for (var i = 0; i < links.length; i++) {
+      links[i].addEventListener('click', function (event) {
+        event.preventDefault();
+        show(id(this));
+        if (window.history && history.replaceState) { history.replaceState(null, '', '#' + id(this)); }
+      });
+      // The tab the address names, or the one whose panel holds what it names, brought into view: a hidden panel is
+      // nowhere to scroll to. Any other address leaves the tab the page was drawn with.
+      var named = window.location.hash.slice(1), at = named && document.getElementById(named);
+      if (id(links[i]) === named) { show(named); }
+      if (at && id(links[i]) !== named && document.getElementById(id(links[i])).contains(at)) { show(id(links[i])); at.scrollIntoView(); }
+    }
+  }
+
+  var lists = document.querySelectorAll('.js-tabs');
+  for (var l = 0; l < lists.length; l++) { wire(lists[l].getElementsByTagName('a')); }
+})();

data/app/assets/javascripts/easy/theme.js

@@ -0,0 +1,41 @@
+// The theme a reader picks on this browser, light or dark, kept in localStorage and set on <html> before the page
+// paints (layouts/easy/site). Two ways to pick: the header's button (js-theme), which turns to the other one, and
+// radio buttons (inside js-theme-choice, valued light, dark or device), where device forgets the choice and follows
+// the system again. ES5 alone: every easy app has to work on old iPhones, Androids and Windows browsers.
+(function () {
+  if (!document.querySelectorAll || !document.addEventListener) { return; }
+  var root = document.documentElement;
+
+  function stored() { var theme = root.getAttribute('data-theme'); return theme === 'dark' || theme === 'light' ? theme : null; }
+  function system() { return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; }
+  function each(selector, callback) {
+    var list = document.querySelectorAll(selector);
+    for (var i = 0; i < list.length; i++) { callback(list[i]); }
+  }
+
+  function paint() {
+    var dark = (stored() || system()) === 'dark';
+    each('.js-theme', function (button) {
+      var label = button.querySelector('.js-theme-label, .theme-toggle-label');
+      button.setAttribute('aria-pressed', dark ? 'true' : 'false');
+      if (label) { label.textContent = dark ? 'Light theme' : 'Dark theme'; }
+    });
+    each('.js-theme-choice input', function (radio) { radio.checked = radio.value === (stored() || 'device'); });
+  }
+
+  function pick(theme) {
+    if (theme === 'device') { root.removeAttribute('data-theme'); } else { root.setAttribute('data-theme', theme); }
+    try {
+      if (theme === 'device') { localStorage.removeItem('theme'); } else { localStorage.setItem('theme', theme); }
+    } catch (e) {}
+    paint();
+  }
+
+  each('.js-theme', function (button) {
+    button.addEventListener('click', function () { pick((stored() || system()) === 'dark' ? 'light' : 'dark'); });
+  });
+  each('.js-theme-choice input', function (radio) {
+    radio.addEventListener('change', function () { pick(radio.value); });
+  });
+  paint();
+})();