https://realochem.study/reactions/views.js

1// views.js — the front page's Literature Reactions section shows the same
2// reaction examples pages two ways: by mechanism (the sheet families, the
3// default: the framing students should leave with) and by functional group
4// (chapter order of a typical sophomore sequence, the on-ramp from a
5// textbook chapter). Both arrangements are in the page (scripts/build-index.js
6// writes them from data/reactions-pages.json); this only switches which one
7// shows. The choice rides in ?view= so a guide can link into either framing,
8// the last choice is remembered per browser, and the front-page filter
9// (index-filter.js) is told to re-run so it searches only the visible view.
10// Plain script, no dependencies, loaded with defer after index-filter.js.
11(function () {
12    'use strict';
13    var KEY = 'roc-reactions-view';
14    var VIEWS = ['mechanism', 'group'];
15    var chips = document.getElementById('roc-views');
16    if (!chips) return;
17
18    function show(view, opts) {
19        if (VIEWS.indexOf(view) < 0) view = VIEWS[0];
20        VIEWS.forEach(function (v) {
21            var panel = document.querySelector('.roc-view[data-view="' + v + '"]');
22            if (!panel) return;
23            if (v === view) panel.removeAttribute('hidden'); else panel.setAttribute('hidden', '');
24        });
25        Array.prototype.forEach.call(chips.querySelectorAll('.roc-chip'), function (b) {
26            var on = b.getAttribute('data-view') === view;
27            b.classList.toggle('is-active', on);
28            b.setAttribute('aria-pressed', on ? 'true' : 'false');
29        });
30        if (opts && opts.remember) {
31            try { localStorage.setItem(KEY, view); } catch (e) { /* private mode */ }
32            var url = new URL(location.href);
33            if (view === VIEWS[0]) url.searchParams.delete('view'); else url.searchParams.set('view', view);
34            history.replaceState(null, '', url.pathname + url.search + url.hash);
35        }
36        document.dispatchEvent(new Event('roc-view-change'));
37    }
38
39    chips.addEventListener('click', function (e) {
40        var btn = e.target.closest('.roc-chip');
41        if (btn) show(btn.getAttribute('data-view'), { remember: true });
42    });
43
44    var fromUrl = new URLSearchParams(location.search).get('view');
45    var stored = null;
46    try { stored = localStorage.getItem(KEY); } catch (e) { /* private mode */ }
47    show(fromUrl || stored || VIEWS[0]);
48})();