metanorma-document 0.2.0

data/data/javascripts/components/mn-toc.js

@@ -0,0 +1,182 @@
+// ToC: sidebar drawer, active tracking, collapsible sections, list toggles
+(function() {
+  var R = window.MetanormaReader;
+  var sidebar = document.getElementById('toc-sidebar');
+  var overlay = document.getElementById('toc-overlay');
+  var hamburger = document.getElementById('toc-hamburger');
+  var closeBtn = document.getElementById('toc-close-btn');
+  if (!sidebar) return;
+
+  // --- Drawer ---
+  function open() {
+    sidebar.classList.add('toc-open');
+    overlay.classList.add('toc-overlay-active');
+    document.body.style.overflow = 'hidden';
+    R.emit('toc:open');
+  }
+
+  function close() {
+    sidebar.classList.remove('toc-open');
+    overlay.classList.remove('toc-overlay-active');
+    document.body.style.overflow = '';
+    R.emit('toc:close');
+  }
+
+  if (hamburger) hamburger.addEventListener('click', open);
+  if (closeBtn) closeBtn.addEventListener('click', close);
+  if (overlay) overlay.addEventListener('click', close);
+
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape' && sidebar.classList.contains('toc-open')) close();
+  });
+
+  // --- Active section tracking ---
+  var tocLinks = document.querySelectorAll('.toc-link');
+  var sections = [];
+  tocLinks.forEach(function(link) {
+    var target = document.getElementById(link.getAttribute('data-target'));
+    if (target) sections.push({ el: target, link: link });
+  });
+
+  if (sections.length > 0 && 'IntersectionObserver' in window) {
+    var observer = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          tocLinks.forEach(function(l) { l.classList.remove('toc-active'); });
+          var match = sections.find(function(s) { return s.el === entry.target; });
+          if (match) {
+            match.link.classList.add('toc-active');
+            if (match.link.scrollIntoViewIfNeeded) {
+              match.link.scrollIntoViewIfNeeded(false);
+            }
+          }
+        }
+      });
+    }, { rootMargin: '-80px 0px -60% 0px' });
+    sections.forEach(function(s) { observer.observe(s.el); });
+  }
+
+  // Close sidebar on ToC link click (mobile)
+  tocLinks.forEach(function(link) {
+    link.addEventListener('click', function() {
+      if (window.innerWidth < 768) close();
+    });
+  });
+
+  // --- Section arrival highlight ---
+  tocLinks.forEach(function(link) {
+    link.addEventListener('click', function() {
+      var targetId = link.getAttribute('data-target');
+      var target = document.getElementById(targetId);
+      if (!target) return;
+      var heading = target.querySelector('h1, h2, h3, h4');
+      if (heading) {
+        heading.classList.add('section-arrival-highlight');
+        setTimeout(function() { heading.classList.remove('section-arrival-highlight'); }, 1500);
+      }
+    });
+  });
+
+  // --- Collapsible ToC ---
+  function initCollapsibleToc() {
+    var tocItems = document.querySelectorAll('.toc-level-1 > li');
+    tocItems.forEach(function(li) {
+      var children = li.querySelectorAll('.toc-level-2, .toc-level-3');
+      if (children.length === 0) return;
+
+      var link = li.querySelector('.toc-link');
+      if (!link) return;
+
+      var toggle = document.createElement('button');
+      toggle.className = 'toc-toggle';
+      toggle.setAttribute('aria-label', 'Toggle subsections');
+      toggle.setAttribute('aria-expanded', 'false');
+      toggle.innerHTML = '&#9656;';
+      link.insertBefore(toggle, link.firstChild);
+
+      if (tocItems.length > 10) {
+        children.forEach(function(c) { c.style.display = 'none'; });
+      } else {
+        toggle.setAttribute('aria-expanded', 'true');
+        toggle.innerHTML = '&#9662;';
+      }
+
+      toggle.addEventListener('click', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var expanded = toggle.getAttribute('aria-expanded') === 'true';
+        toggle.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+        toggle.innerHTML = expanded ? '&#9656;' : '&#9662;';
+        children.forEach(function(c) { c.style.display = expanded ? 'none' : ''; });
+      });
+    });
+  }
+  initCollapsibleToc();
+
+  // --- List of Figures/Tables toggles ---
+  function initListToggles() {
+    document.querySelectorAll('.toc-list-toggle').forEach(function(btn) {
+      btn.addEventListener('click', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var expanded = btn.getAttribute('aria-expanded') === 'true';
+        btn.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+        var header = btn.parentElement;
+        var listType = header.getAttribute('data-list');
+        document.querySelectorAll('.toc-' + listType).forEach(function(item) {
+          item.style.display = expanded ? 'none' : '';
+        });
+      });
+    });
+  }
+  initListToggles();
+
+  // --- Mobile keyboard toggle ---
+  function isEditing() {
+    var el = document.activeElement;
+    return el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable);
+  }
+  document.addEventListener('keydown', function(e) {
+    if (isEditing()) return;
+    if (e.key === 't' && window.innerWidth < 768) {
+      sidebar.classList.contains('toc-open') ? close() : open();
+    }
+  });
+
+  // --- Reading time estimate ---
+  var docContent = document.getElementById('doc-content');
+  if (docContent) {
+    var text = docContent.textContent || docContent.innerText || '';
+    var words = text.trim().split(/\s+/).length;
+    var minutes = Math.max(1, Math.round(words / 200));
+    var tocHeading = document.querySelector('.toc-heading');
+    if (tocHeading) {
+      var badge = document.createElement('span');
+      badge.className = 'reading-time';
+      badge.textContent = minutes + ' min read';
+      tocHeading.appendChild(document.createTextNode(' '));
+      tocHeading.appendChild(badge);
+    }
+  }
+
+  // Public API
+  R.toc = { open: open, close: close };
+
+  // --- Touch swipe for ToC (mobile) ---
+  var touchStartX = 0;
+  var touchStartY = 0;
+  document.addEventListener('touchstart', function(e) {
+    touchStartX = e.touches[0].clientX;
+    touchStartY = e.touches[0].clientY;
+  }, { passive: true });
+  document.addEventListener('touchend', function(e) {
+    var dx = e.changedTouches[0].clientX - touchStartX;
+    var dy = Math.abs(e.changedTouches[0].clientY - touchStartY);
+    if (dy > 50) return; // vertical scroll, ignore
+    if (touchStartX < 30 && dx > 80) {
+      open(); // swipe right from left edge
+    } else if (dx < -80 && sidebar.classList.contains('toc-open')) {
+      close(); // swipe left to close
+    }
+  }, { passive: true });
+})();

data/data/javascripts/core/mn-navigation.js

@@ -0,0 +1,84 @@
+// Navigation: keyboard shortcuts, section jumping, reading mode
+(function() {
+  var R = window.MetanormaReader;
+  var sectionTargets = [];
+
+  document.querySelectorAll('.doc-content div[id]').forEach(function(el) {
+    if (el.querySelector('h1, h2, h3, h4')) sectionTargets.push(el);
+  });
+
+  function getCurrentIndex() {
+    var scrollMid = window.pageYOffset + window.innerHeight * 0.3;
+    for (var i = 0; i < sectionTargets.length; i++) {
+      var top = sectionTargets[i].getBoundingClientRect().top + window.pageYOffset;
+      if (top > scrollMid) return Math.max(0, i - 1);
+    }
+    return sectionTargets.length - 1;
+  }
+
+  function scrollToSection(idx) {
+    if (idx < 0 || idx >= sectionTargets.length) return;
+    sectionTargets[idx].scrollIntoView({ behavior: 'smooth', block: 'start' });
+    var heading = sectionTargets[idx].querySelector('h1, h2, h3, h4');
+    if (heading) {
+      heading.classList.add('section-arrival-highlight');
+      setTimeout(function() { heading.classList.remove('section-arrival-highlight'); }, 1500);
+    }
+    R.emit('navigation:section', { index: idx, element: sectionTargets[idx] });
+  }
+
+  // Reading mode — distraction-free, narrow content
+  var readingMode = false;
+  var banner = document.getElementById('reading-mode-banner');
+  function toggleReadingMode() {
+    readingMode = !readingMode;
+    document.body.classList.toggle('reading-mode', readingMode);
+    var btn = document.getElementById('reading-mode-btn');
+    if (btn) btn.classList.toggle('active', readingMode);
+    if (banner) banner.style.display = readingMode ? 'block' : 'none';
+    R.setSetting('reading-mode', readingMode.toString());
+    R.emit('reading-mode', { active: readingMode });
+  }
+
+  // Restore reading mode preference
+  if (R.getSetting('reading-mode') === 'true') {
+    readingMode = true;
+    document.body.classList.add('reading-mode');
+    if (banner) banner.style.display = 'block';
+    var btn = document.getElementById('reading-mode-btn');
+    if (btn) btn.classList.toggle('active', true);
+  }
+
+  function isEditing() {
+    var el = document.activeElement;
+    return el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable);
+  }
+
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+      var lightbox = document.querySelector('.lightbox-overlay');
+      if (lightbox) lightbox.remove();
+    }
+
+    if (isEditing()) return;
+
+    if ((e.key === 'j' || e.key === ']') && sectionTargets.length > 0) {
+      e.preventDefault();
+      scrollToSection(getCurrentIndex() + 1);
+    }
+    if ((e.key === 'k' || e.key === '[') && sectionTargets.length > 0) {
+      e.preventDefault();
+      scrollToSection(getCurrentIndex() - 1);
+    }
+    if (e.key === 'r') {
+      e.preventDefault();
+      toggleReadingMode();
+    }
+    if (e.key === 'd') {
+      var btn = document.getElementById('theme-toggle');
+      if (btn) btn.click();
+    }
+  });
+
+  R.navigation = { scrollTo: scrollToSection, getCurrentIndex: getCurrentIndex, toggleReadingMode: toggleReadingMode };
+})();

data/data/javascripts/core/mn-reader.js

@@ -0,0 +1,38 @@
+// MetanormaReader — global namespace, event bus, settings
+window.MetanormaReader = (function() {
+  var listeners = {};
+
+  function on(event, fn) {
+    if (!listeners[event]) listeners[event] = [];
+    listeners[event].push(fn);
+  }
+
+  function off(event, fn) {
+    if (!listeners[event]) return;
+    listeners[event] = listeners[event].filter(function(f) { return f !== fn; });
+  }
+
+  function emit(event, data) {
+    if (!listeners[event]) return;
+    listeners[event].forEach(function(fn) { try { fn(data); } catch(e) {} });
+  }
+
+  function getSetting(key, fallback) {
+    try {
+      var val = localStorage.getItem(key);
+      return val !== null ? val : fallback;
+    } catch (e) { return fallback; }
+  }
+
+  function setSetting(key, value) {
+    try { localStorage.setItem(key, value); } catch (e) {}
+  }
+
+  return {
+    on: on,
+    off: off,
+    emit: emit,
+    getSetting: getSetting,
+    setSetting: setSetting
+  };
+})();

data/data/javascripts/core/mn-reveal.js

@@ -0,0 +1,36 @@
+// Scroll reveal: fade-in sections as they enter viewport
+(function() {
+  var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  if (prefersReducedMotion || !('IntersectionObserver' in window)) return;
+
+  document.documentElement.classList.add('scroll-reveal-ready');
+
+  var targets = document.querySelectorAll(
+    '.doc-content > div[id], ' +
+    '.doc-content > div.section-sub, ' +
+    '.doc-content > div[id] > div[id], ' +
+    '.doc-content > .main-section > div[id], ' +
+    '.doc-content > p.doc-title'
+  );
+
+  function checkInitial() {
+    targets.forEach(function(el) {
+      var rect = el.getBoundingClientRect();
+      if (rect.top < window.innerHeight && rect.bottom > 0) {
+        el.classList.add('revealed');
+      }
+    });
+  }
+
+  var observer = new IntersectionObserver(function(entries) {
+    entries.forEach(function(entry) {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('revealed');
+        observer.unobserve(entry.target);
+      }
+    });
+  }, { rootMargin: '0px 0px -40px 0px', threshold: 0.05 });
+
+  targets.forEach(function(el) { observer.observe(el); });
+  checkInitial();
+})();

data/data/javascripts/core/mn-scroll.js

@@ -0,0 +1,87 @@
+// Scroll: progress bar, scroll memory, back-to-top, header auto-hide
+(function() {
+  var R = window.MetanormaReader;
+  var progressBar = document.getElementById('reading-progress');
+  var backToTop = document.getElementById('back-to-top');
+  var header = document.querySelector('.doc-header');
+  var SCROLL_KEY = 'mn-scroll-' + location.pathname;
+  var ticking = false;
+  var lastScroll = 0;
+  var scrollThreshold = 10;
+  var FULL_HEIGHT = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height')) || 52;
+  var COMPACT_HEIGHT = 40;
+
+  function setHeaderHeight(h) {
+    document.documentElement.style.setProperty('--header-height', h + 'px');
+  }
+
+  function updateProgress() {
+    if (!progressBar) return;
+    var scrollTop = window.pageYOffset;
+    var docHeight = document.documentElement.scrollHeight - window.innerHeight;
+    var pct = docHeight > 0 ? Math.min((scrollTop / docHeight) * 100, 100) : 0;
+    progressBar.style.width = pct + '%';
+  }
+
+  function updateBackToTop() {
+    if (!backToTop) return;
+    backToTop.classList.toggle('visible', window.pageYOffset > 600);
+  }
+
+  function updateHeader() {
+    if (!header) return;
+    var scroll = window.pageYOffset;
+    var delta = Math.abs(scroll - lastScroll);
+
+    if (delta < scrollThreshold) return;
+
+    // Scrolling down past 300px — hide header
+    if (scroll > 300 && scroll > lastScroll) {
+      header.classList.add('header-hidden');
+    } else {
+      header.classList.remove('header-hidden');
+    }
+
+    // Compact when not at top — also update CSS variable so sidebar/progress adjust
+    var compact = scroll > 150;
+    header.classList.toggle('header-compact', compact);
+    if (header.classList.contains('header-hidden')) {
+      setHeaderHeight(0);
+    } else {
+      setHeaderHeight(compact ? COMPACT_HEIGHT : FULL_HEIGHT);
+    }
+
+    lastScroll = scroll;
+  }
+
+  function onScroll() {
+    if (!ticking) {
+      window.requestAnimationFrame(function() {
+        updateProgress();
+        updateBackToTop();
+        updateHeader();
+        ticking = false;
+      });
+      ticking = true;
+    }
+  }
+
+  // Restore scroll position
+  if (!location.hash) {
+    var saved = parseInt(R.getSetting(SCROLL_KEY), 10);
+    if (saved > 200) window.scrollTo(0, saved);
+  }
+  window.addEventListener('beforeunload', function() {
+    R.setSetting(SCROLL_KEY, window.pageYOffset.toString());
+  });
+
+  if (backToTop) {
+    backToTop.addEventListener('click', function() {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+  }
+
+  window.addEventListener('scroll', onScroll, { passive: true });
+  updateProgress();
+  updateBackToTop();
+})();

data/data/javascripts/core/mn-theme.js

@@ -0,0 +1,140 @@
+// Theme: 4-mode cycle (light → sepia → dark → OLED), font size, serif toggle, reading mode
+(function() {
+  var R = window.MetanormaReader;
+  var themeBtn = document.getElementById('theme-toggle');
+  var KEY = 'metanorma-theme';
+  var MODES = ['light', 'sepia', 'dark', 'oled'];
+
+  function apply(mode) {
+    document.documentElement.setAttribute('data-theme', mode);
+    if (themeBtn) {
+      themeBtn.className = 'reader-btn theme-toggle mode-' + mode;
+    }
+    R.emit('theme:change', { theme: mode });
+  }
+
+  function init() {
+    var stored = R.getSetting(KEY);
+    var mode = stored && MODES.indexOf(stored) >= 0 ? stored : getSystemPreference();
+    apply(mode);
+  }
+
+  function getSystemPreference() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  function nextMode() {
+    var current = document.documentElement.getAttribute('data-theme') || 'light';
+    var idx = MODES.indexOf(current);
+    return MODES[(idx + 1) % MODES.length];
+  }
+
+  if (themeBtn) {
+    themeBtn.addEventListener('click', function() {
+      var next = nextMode();
+      apply(next);
+      R.setSetting(KEY, next);
+    });
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
+    if (!R.getSetting(KEY)) apply(e.matches ? 'dark' : 'light');
+  });
+
+  init();
+
+  // Font size
+  var FONT_KEY = 'metanorma-font-size';
+  var FONT_SIZES = [0.85, 0.925, 1.0, 1.075, 1.15, 1.25];
+  var DEFAULT_IDX = 2;
+  var fontDecrease = document.getElementById('font-decrease');
+  var fontIncrease = document.getElementById('font-increase');
+
+  function applyFontSize(idx) {
+    document.documentElement.style.setProperty('--reader-font-scale', FONT_SIZES[idx]);
+    if (fontDecrease) fontDecrease.classList.toggle('disabled', idx === 0);
+    if (fontIncrease) fontIncrease.classList.toggle('disabled', idx === FONT_SIZES.length - 1);
+  }
+
+  function getCurrentFontIdx() {
+    var stored = R.getSetting(FONT_KEY);
+    if (stored !== null) {
+      var idx = parseInt(stored, 10);
+      if (idx >= 0 && idx < FONT_SIZES.length) return idx;
+    }
+    return DEFAULT_IDX;
+  }
+
+  if (fontDecrease) fontDecrease.addEventListener('click', function() {
+    var idx = getCurrentFontIdx();
+    if (idx > 0) { idx--; R.setSetting(FONT_KEY, idx); applyFontSize(idx); }
+  });
+  if (fontIncrease) fontIncrease.addEventListener('click', function() {
+    var idx = getCurrentFontIdx();
+    if (idx < FONT_SIZES.length - 1) { idx++; R.setSetting(FONT_KEY, idx); applyFontSize(idx); }
+  });
+  applyFontSize(getCurrentFontIdx());
+
+  // Serif toggle
+  var serifBtn = document.getElementById('serif-toggle');
+  var SERIF_KEY = 'metanorma-serif';
+
+  function applySerifMode(useSerif) {
+    document.documentElement.classList.toggle('reader-serif', useSerif);
+    if (serifBtn) serifBtn.classList.toggle('active', useSerif);
+  }
+
+  if (serifBtn) serifBtn.addEventListener('click', function() {
+    var isSerif = document.documentElement.classList.contains('reader-serif');
+    applySerifMode(!isSerif);
+    R.setSetting(SERIF_KEY, (!isSerif).toString());
+  });
+  applySerifMode(R.getSetting(SERIF_KEY) === 'true');
+
+  // Reading mode button
+  var readingBtn = document.getElementById('reading-mode-btn');
+  if (readingBtn) {
+    readingBtn.addEventListener('click', function() {
+      if (R.navigation && R.navigation.toggleReadingMode) {
+        R.navigation.toggleReadingMode();
+      }
+    });
+  }
+
+  // Exit reading mode button
+  var exitBtn = document.getElementById('exit-reading-btn');
+  if (exitBtn) {
+    exitBtn.addEventListener('click', function() {
+      if (R.navigation && R.navigation.toggleReadingMode) {
+        R.navigation.toggleReadingMode();
+      }
+    });
+  }
+
+  // Settings dropdown toggle
+  var settingsToggle = document.getElementById('settings-toggle');
+  var settingsDropdown = document.getElementById('settings-dropdown');
+  if (settingsToggle && settingsDropdown) {
+    settingsToggle.addEventListener('click', function(e) {
+      e.stopPropagation();
+      settingsDropdown.classList.toggle('open');
+    });
+    document.addEventListener('click', function(e) {
+      if (!settingsDropdown.contains(e.target)) {
+        settingsDropdown.classList.remove('open');
+      }
+    });
+  }
+
+  // Cover title → header animation
+  var headerTitle = document.getElementById('header-doc-title');
+  var coverSection = document.querySelector('.title-section');
+  if (headerTitle && coverSection && 'IntersectionObserver' in window) {
+    var coverObserver = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        headerTitle.classList.toggle('visible', !entry.isIntersecting);
+      });
+    }, { threshold: 0.1 });
+    coverObserver.observe(coverSection);
+  }
+})();