sol-components 2.1.0

package/web/sol-full.js

@@ -0,0 +1,43 @@
+/**
+ * sol-full.js — load every covered component in one tag.
+ *
+ * Side-effect aggregator: each child module registers its custom element
+ * on import. Externals actually imported by the source (rdflib, dompurify,
+ * marked) stay bare-specifier and are resolved by the consumer's importmap.
+ *
+ * Bring-your-own runtime peers (loaded via a `<script>` tag *before* this
+ * module so they self-attach to globals the components probe at runtime):
+ *   - @inrupt/solid-client-authn-browser  → `window.solidClientAuthn`
+ *     (only needed by sol-login)
+ *   - @comunica/query-sparql              → `window.Comunica`
+ *     (only needed for full SPARQL — LIMIT/OFFSET/ORDER BY/federation —
+ *     against RDF documents)
+ * The corresponding vendored UMDs live in `dist/vendor/`.
+ *
+ * Usage:
+ *   <script type="importmap" src="dist/importmap-cdn.json"></script>
+ *       — or —
+ *   <script type="importmap" src="dist/importmap-local.json"></script>
+ *
+ *   <script type="module" src="web/sol-full.js"></script>
+ */
+
+import './sol-menu.js';
+import './menu-from-rdf.js';   // keep sol-menu `from-rdf` working in this bundle
+import './sol-include.js';
+import './sol-query.js';
+import './sol-login.js';
+import './sol-feed.js';
+
+// Deliberately NOT in sol-full: sol-weather, sol-time, sol-calendar — chrome
+// widgets with their own heavy deps (e.g. ical). Load them as ESM where
+// needed, e.g. import 'sol-components/sol-weather.js'.
+//
+// TODO: add the rest as their externals get vendored:
+//   sol-accordion, sol-modal, sol-tabs, sol-rolodex, sol-live-edit, sol-pod,
+//   sol-pod-ops, sol-wac (no extra externals expected — verify and add)
+//   sol-form          (requires solid-ui — vendor solid-ui first)
+//   sol-solidos       (requires mashlib)
+// sol-login is in: it only needs `window.solidClientAuthn` (provided by
+// dist/vendor/@inrupt-solid-client-authn-browser.umd.js loaded as a
+// `<script>` tag before this aggregator).

package/web/sol-gallery.js

@@ -0,0 +1,303 @@
+/**
+ * <sol-gallery> — pure image-grid display (masonry + lightbox).
+ *
+ * Source-blind: it renders the ImageItem RDF it is handed and emits events. It
+ * does NO network, no search, and knows nothing about Commons / Wikidata /
+ * files / SKOS / DCAT. A host (see the `sources/` providers) pumps pages of
+ * `schema:ImageObject` records in and decides what a selection means.
+ *
+ * Display contract
+ *   clear()       drop all tiles — a new collection was selected
+ *   add(store)    append one page of schema:ImageObject records   ← the seam
+ *   end()         the host signals there are no more pages
+ * Events out
+ *   'item-opened' {detail:{iri}}  a tile's lightbox opened (lazy per-item detail hook)
+ *   'load-more'                   scrolled near the end; the host should pump the next page
+ *
+ * Records are read with `readImageItems` from the shared contract, so the
+ * gallery and every provider agree on the vocab without either re-declaring it.
+ *
+ * @element sol-gallery
+ * @example
+ *   const g = document.querySelector('sol-gallery');
+ *   g.addEventListener('load-more', () => pumpNextPage());
+ *   g.clear(); g.add(pageStore); // …; g.end();
+ */
+import { adopt } from '../core/adopt.js';
+import { define } from '../core/define.js';
+import { CSS as GALLERY_CSS, sheet as GALLERY_SHEET } from './styles/sol-gallery-css.js';
+import { readImageItems } from '../sources/contract.js';
+
+class SolGallery extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    /** @type {Array} flattened, position-ordered items across all pages. */
+    this._items = [];
+  }
+
+  connectedCallback() {
+    if (this._built) return;            // build once; survives re-attach
+    this._built = true;
+    adopt(this.shadowRoot, { sheet: GALLERY_SHEET, css: GALLERY_CSS });
+
+    this._main = document.createElement('div');
+    this._main.className = 'gallery-main';
+    this._status = document.createElement('div');
+    this._status.className = 'gallery-status';
+    this._status.setAttribute('role', 'status');
+    this._status.setAttribute('aria-live', 'polite');
+    this._grid = document.createElement('div');
+    this._grid.className = 'gallery-grid';
+    this._main.append(this._status, this._grid);
+    this.shadowRoot.append(this._main);
+    this._buildLightbox();
+
+    this._renderEmpty('Pick a collection to see its images.');
+  }
+
+  disconnectedCallback() {
+    if (this._io) { this._io.disconnect(); this._io = null; }
+    document.removeEventListener('keydown', this._onKey);
+  }
+
+  setStatus(msg, isError = false) {
+    this._status.textContent = msg || '';
+    if (isError) this._status.setAttribute('data-error', '');
+    else this._status.removeAttribute('data-error');
+  }
+
+  /** Show a centred placeholder line in the grid (cleared by the next page). */
+  _renderEmpty(text) {
+    const empty = document.createElement('div');
+    empty.className = 'gallery-empty';
+    empty.textContent = text;
+    this._grid.replaceChildren(empty);
+    this._emptyEl = empty;
+  }
+
+  /* ── display contract ───────────────────────────────────────────────────── */
+
+  /** Drop everything for a freshly selected collection; show a loading line. */
+  clear() {
+    this._items = [];
+    this._complete = false;
+    this._awaitingPage = false;
+    this._removeSentinel();
+    this._grid.replaceChildren();
+    this._emptyEl = null;
+    this.setStatus('Loading images…');
+  }
+
+  /** Append one page (an rdflib store of schema:ImageObject records). */
+  add(store) {
+    const page = readImageItems(store);
+    this._awaitingPage = false;
+    if (this._emptyEl) { this._emptyEl.remove(); this._emptyEl = null; }
+
+    const start = this._items.length;
+    this._items = this._items.concat(page);
+    for (let i = 0; i < page.length; i++) {
+      this._grid.appendChild(this._thumb(this._items[start + i], start + i));
+    }
+    this.setStatus(this._countLabel());
+    this._armSentinel();                // a page arrived → there may be more
+  }
+
+  /** The host has no more pages: remove the sentinel; show empty if needed. */
+  end() {
+    this._complete = true;
+    this._removeSentinel();
+    if (!this._items.length) {
+      this.setStatus('');
+      this._renderEmpty('This collection has no images in its Commons category.');
+    } else {
+      this.setStatus(this._countLabel());
+    }
+  }
+
+  _countLabel() {
+    const n = this._items.length;
+    return `${n} image${n === 1 ? '' : 's'}`;
+  }
+
+  /* ── lazy paging (the gallery only ASKS; the host fetches) ───────────────── */
+
+  /** Ensure a sentinel + observer exist so reaching the end emits 'load-more'.
+   *  A Load-more button is added as a no-IntersectionObserver fallback. */
+  _armSentinel() {
+    if (this._complete) return;
+    if (!this._sentinel) {
+      this._sentinel = document.createElement('div');
+      this._sentinel.className = 'gallery-sentinel';
+    }
+    this._grid.appendChild(this._sentinel);     // keep it last
+
+    if ('IntersectionObserver' in window) {
+      if (this._io) this._io.disconnect();
+      this._io = new IntersectionObserver((entries) => {
+        if (entries.some((e) => e.isIntersecting)) this._requestMore();
+      }, { root: this._main, rootMargin: '600px' });
+      this._io.observe(this._sentinel);
+    } else if (!this._moreBtn) {
+      this._moreBtn = document.createElement('button');
+      this._moreBtn.type = 'button';
+      this._moreBtn.className = 'gallery-more';
+      this._moreBtn.textContent = 'Load more';
+      this._moreBtn.addEventListener('click', () => this._requestMore());
+      this._main.appendChild(this._moreBtn);
+    }
+  }
+
+  _removeSentinel() {
+    if (this._io) { this._io.disconnect(); this._io = null; }
+    this._sentinel?.remove();
+    this._moreBtn?.remove();
+    this._moreBtn = null;
+  }
+
+  /** Ask the host for the next page (once; re-armed when add() lands). */
+  _requestMore() {
+    if (this._complete || this._awaitingPage) return;
+    this._awaitingPage = true;
+    if (this._io) { this._io.disconnect(); this._io = null; }   // re-armed by add()
+    this.dispatchEvent(new CustomEvent('load-more', { bubbles: true, composed: true }));
+  }
+
+  /* ── thumbnails ──────────────────────────────────────────────────────────── */
+
+  /** One masonry thumbnail button → opens the lightbox at its index. */
+  _thumb(item, index) {
+    const b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'gallery-thumb';
+    b.dataset.index = String(index);
+    b.setAttribute('aria-label', item.caption || 'image');
+    const el = document.createElement('img');
+    el.src = item.thumb;
+    el.alt = item.caption || '';
+    el.loading = 'lazy';
+    if (item.width && item.height) { el.width = item.width; el.height = item.height; }
+    el.addEventListener('error', () => b.remove());
+    b.appendChild(el);
+    b.addEventListener('click', () => this.openLightbox(index));
+    return b;
+  }
+
+  /* ── lightbox ────────────────────────────────────────────────────────────── */
+
+  _buildLightbox() {
+    const lb = document.createElement('div');
+    lb.className = 'gallery-lightbox';
+    lb.hidden = true;
+    lb.setAttribute('role', 'dialog');
+    lb.setAttribute('aria-modal', 'true');
+
+    const img = document.createElement('img');
+    const caption = document.createElement('div');
+    caption.className = 'gallery-lb-caption';
+    const prev = document.createElement('button');
+    prev.type = 'button'; prev.className = 'gallery-lb-btn gallery-lb-prev';
+    prev.textContent = '‹'; prev.setAttribute('aria-label', 'Previous image');
+    const next = document.createElement('button');
+    next.type = 'button'; next.className = 'gallery-lb-btn gallery-lb-next';
+    next.textContent = '›'; next.setAttribute('aria-label', 'Next image');
+    const close = document.createElement('button');
+    close.type = 'button'; close.className = 'gallery-lb-close';
+    close.textContent = '✕'; close.setAttribute('aria-label', 'Close');
+
+    lb.append(close, prev, img, next, caption);
+    this.shadowRoot.appendChild(lb);
+    this._lb = { lb, img, caption, prev, next, close };
+
+    prev.addEventListener('click', () => this.stepLightbox(-1));
+    next.addEventListener('click', () => this.stepLightbox(1));
+    close.addEventListener('click', () => this.closeLightbox());
+    lb.addEventListener('click', (e) => { if (e.target === lb) this.closeLightbox(); });
+    // Click the image to toggle a full-bleed, actual-size (100%) view that pans
+    // via scroll; click again (or page / Esc) to return to fit. Only offered
+    // when the fit view shows fewer pixels than the image actually has.
+    img.addEventListener('click', (e) => { e.stopPropagation(); if (this._canZoom) this.setZoom(!this._lbZoom); });
+    img.addEventListener('load', () => this._refreshZoomable());
+
+    this._onKey = (e) => {
+      if (this._lb.lb.hidden) return;
+      if (e.key === 'Escape') this.closeLightbox();
+      else if (e.key === 'ArrowLeft') this.stepLightbox(-1);
+      else if (e.key === 'ArrowRight') this.stepLightbox(1);
+    };
+    document.addEventListener('keydown', this._onKey);
+  }
+
+  openLightbox(index) {
+    this._lbIndex = index;
+    this.showLightboxImage();
+    this._lb.lb.hidden = false;
+    this._lb.close.focus();
+    // Lazy per-item detail hook: a host may listen and enrich (e.g. Wikidata).
+    const it = this._items[index];
+    if (it) this.dispatchEvent(new CustomEvent('item-opened', {
+      detail: { iri: it.iri }, bubbles: true, composed: true,
+    }));
+  }
+
+  stepLightbox(delta) {
+    const imgs = this._items;
+    if (!imgs.length) return;
+    this._lbIndex = (this._lbIndex + delta + imgs.length) % imgs.length;
+    this.showLightboxImage();
+  }
+
+  /** Decide whether the current (fit) image can usefully zoom: only when its
+   *  natural pixel width exceeds the fit-rendered width. Toggles the no-zoom
+   *  class (hides the zoom-in cursor) and gates the click handler. */
+  _refreshZoomable() {
+    const { lb, img } = this._lb;
+    const fitW = this._lbZoom ? 0 : img.getBoundingClientRect().width;
+    this._canZoom = !this._lbZoom && img.naturalWidth > Math.ceil(fitW) + 1;
+    lb.classList.toggle('no-zoom', !this._canZoom);
+  }
+
+  setZoom(on) {
+    this._lbZoom = on;
+    const { lb, img } = this._lb;
+    lb.classList.toggle('zoomed', on);
+    if (on) {
+      requestAnimationFrame(() => {
+        lb.scrollLeft = Math.max(0, (img.scrollWidth - lb.clientWidth) / 2);
+        lb.scrollTop = Math.max(0, (img.scrollHeight - lb.clientHeight) / 2);
+      });
+    }
+  }
+
+  showLightboxImage() {
+    const it = this._items[this._lbIndex];
+    if (!it) return;
+    this.setZoom(false);                 // each image starts fit-to-screen
+    this._lb.img.src = it.full || it.thumb;
+    this._lb.img.alt = it.caption || '';
+    const bits = [it.caption, it.author, it.license].filter(Boolean);
+    this._lb.caption.textContent = bits.join(' · ');
+    if (it.detailUrl) {
+      this._lb.caption.append(' ');
+      const link = document.createElement('a');
+      link.href = it.detailUrl; link.target = '_blank'; link.rel = 'noopener';
+      link.textContent = 'View on Commons ↗';
+      this._lb.caption.appendChild(link);
+    }
+    const multi = this._items.length > 1;
+    this._lb.prev.style.display = multi ? '' : 'none';
+    this._lb.next.style.display = multi ? '' : 'none';
+    this._refreshZoomable();             // default to no-zoom until the image loads
+  }
+
+  closeLightbox() {
+    this.setZoom(false);
+    this._lb.lb.hidden = true;
+    this._lb.img.removeAttribute('src');
+  }
+}
+
+define('sol-gallery', SolGallery);
+
+export { SolGallery };

package/web/sol-include.js

@@ -0,0 +1,246 @@
+/**
+ * <sol-include> — Fetch and display remote content inline.
+ *
+ * Supports HTML, Markdown, and plain text. Content is sanitized with
+ * DOMPurify by default. An optional CSS selector filters to a section
+ * of the fetched document.
+ *
+ * @element sol-include
+ * @attr {string} source - URL of the resource to fetch (required)
+ * @attr {string} if-logged-in - alternate source used when a user is logged in
+ *                 (a live Solid session OR the window.SolidKitchen dev flag,
+ *                 treated identically); falls back to `source` otherwise.
+ *                 Re-evaluates on sol-login / sol-logout.
+ * @attr {string} selector - CSS selector — show only matching elements
+ * @attr {boolean} raw - show source text verbatim without rendering
+ * @attr {boolean} trusted - skip DOMPurify sanitization
+ *
+ * @example
+ * <sol-include source="https://example.org/readme.md"></sol-include>
+ * <sol-include source="page.html" selector="article"></sol-include>
+ * <sol-include source="guest.html" if-logged-in="owner.html"></sol-include>
+ */
+import { sanitizeHtml } from '../core/utils.js';
+import { define } from '../core/define.js';
+import { adopt } from '../core/adopt.js';
+import { fetchIncludeContent, filterWithSelector } from '../core/include-core.js';
+import { getAuthFetch } from '../core/auth-fetch.js';
+import { CSS as INCLUDE_CSS, sheet as includeSheet } from './styles/sol-include-css.js';
+
+function browserContainer(html) {
+  const div = document.createElement('div');
+  div.innerHTML = html;
+  return div;
+}
+
+/**
+ * Is there an authenticated user? True for a live Solid session (a logged-in
+ * <sol-login>, or any logged-in session in the shared AuthManager), and for the
+ * dev "kitchen" flag — declared as `solid-kitchen` on <sol-default> (or the
+ * legacy `window.SolidKitchen` global) — treated as exactly equivalent to being
+ * logged in. Used by the `if-logged-in` source switch.
+ */
+function isLoggedIn() {
+  try { if (typeof window !== 'undefined' && window.SolidKitchen === true) return true; } catch { /* ignore */ }
+  if (typeof document === 'undefined') return false;
+  if (document.querySelector('sol-default')?.hasAttribute('solid-kitchen')) return true;
+  const login = document.querySelector('sol-login');
+  if (login && login.isLoggedIn) return true;
+  try {
+    const am = window.SolidWebComponents?.AuthManager?.shared;
+    if (am && [...am.sessions.values()].some((s) => s.info?.isLoggedIn)) return true;
+  } catch { /* ignore */ }
+  return false;
+}
+
+/**
+ * Fetch and display remote content inline.
+ *
+ * Supports HTML, Markdown, and plain text. Content is sanitized with
+ * DOMPurify by default.
+ *
+ * @class SolInclude
+ * @extends HTMLElement
+ * @attr {string} source - URL to fetch (required)
+ * @attr {string} selector - CSS selector — show only matching elements
+ * @attr {boolean} raw - show source text verbatim
+ * @attr {boolean} trusted - skip DOMPurify sanitization, render into LIGHT
+ *                 DOM (via a shadow <slot>) so host CSS reaches the content
+ *
+ * Layout: `:host` is a flex column with `flex: 1 1 auto; min-height: 0` and
+ * the `.si-content` wrapper gets the same treatment (matched in both the
+ * shadow and trusted-slotted modes), so a definite parent height propagates
+ * down to components placed inside (sol-pod, sol-menu, etc.). They can then
+ * fill and scroll on their own — sol-include itself never scrolls.
+ */
+class SolInclude extends HTMLElement {
+  static get observedAttributes() {
+    return ['source', 'if-logged-in', 'selector', 'raw', 'trusted'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._abortCtl = null;
+    this._authListener = null;
+  }
+
+  connectedCallback() {
+    if (!this.isConnected) return;
+    // Only watch auth state when an `if-logged-in` alternate is declared, so the
+    // displayed source follows login / logout.
+    if (this.hasAttribute('if-logged-in') && !this._authListener) {
+      this._authListener = () => { if (this.isConnected) this._load(); };
+      document.addEventListener('sol-login', this._authListener);
+      document.addEventListener('sol-logout', this._authListener);
+    }
+    this._load();
+  }
+  attributeChangedCallback(n, oldV, newV)     { if (oldV !== newV && this.isConnected) this._load(); }
+  disconnectedCallback() {
+    this._abortCtl?.abort(); this._abortCtl = null;
+    if (this._authListener) {
+      document.removeEventListener('sol-login', this._authListener);
+      document.removeEventListener('sol-logout', this._authListener);
+      this._authListener = null;
+    }
+  }
+
+  /** The source to show now: the `if-logged-in` alternate when authenticated,
+   *  otherwise the plain `source`. */
+  _effectiveSource() {
+    const alt = this.getAttribute('if-logged-in');
+    if (alt && isLoggedIn()) return alt;
+    return this.getAttribute('source');
+  }
+
+  // ── Main load ─────────────────────────────────────────────────────────────────
+  async _load() {
+    const source   = this._effectiveSource();
+    const selector = this.getAttribute('selector') || '';
+    const raw      = this.hasAttribute('raw');
+    const trusted  = this.hasAttribute('trusted');
+
+    if (!source) { this._show('error', 'No source provided'); return; }
+
+    // Cancel any in-flight load triggered by an earlier attribute change.
+    this._abortCtl?.abort();
+    const ctl = new AbortController();
+    this._abortCtl = ctl;
+
+    this._show('loading', 'Loading…');
+
+    // `login` attribute (CSS selector for a sol-login) overrides auto-discovery.
+    const loginSel = this.getAttribute('login');
+    const loginEl  = loginSel ? document.querySelector(loginSel) : null;
+    const fetchFn  = getAuthFetch(source, { element: loginEl || undefined });
+
+    try {
+      // When a selector is present, defer sanitization so the selector can
+      // match attributes (e.g. RDFa typeof/rel) that DOMPurify would strip.
+      const { type, content } = await fetchIncludeContent(source, {
+        raw,
+        trusted: trusted || !!selector,
+        sanitize: sanitizeHtml,
+        signal: ctl.signal,
+        fetchFn,
+      });
+
+      if (ctl.signal.aborted) return;
+
+      if (type === 'raw') {
+        this._showRaw(content);
+        return;
+      }
+
+      if (selector) {
+        const filtered = filterWithSelector(content, selector, browserContainer);
+        if (ctl.signal.aborted) return;
+        if (filtered === null) {
+          this._show('empty', 'No elements matched selector');
+          return;
+        }
+        this._showHtml(trusted ? filtered : await sanitizeHtml(filtered));
+      } else {
+        this._showHtml(content);
+      }
+    } catch (err) {
+      if (err.name === 'AbortError' || ctl.signal.aborted) return;
+      this._show('error', err.message);
+      this._fireError('load', err.message);
+    }
+  }
+
+  _fireError(kind, message) {
+    this.dispatchEvent(new CustomEvent('sol-error', {
+      bubbles: true, composed: true,
+      detail: { source: 'sol-include', kind, message },
+    }));
+  }
+
+  // ── Display helpers ───────────────────────────────────────────────────────────
+  _showHtml(html) {
+    this._initShadow();
+    const div = document.createElement('div');
+    div.className = 'si-content';
+    div.innerHTML = html;
+    // When the consumer marked the source as `trusted`, render into
+    // LIGHT DOM rather than shadow DOM. Trusted content is, by
+    // definition, page-authored — it should inherit the host's
+    // stylesheets so .my-class rules apply, custom-element CSS lands,
+    // etc. The shadow root contains a <slot> in trusted mode so the
+    // light-DOM child still gets projected into the host's box.
+    // Untrusted content stays in shadow for isolation.
+    if (this.hasAttribute('trusted')) {
+      this.appendChild(div);
+    } else {
+      this.shadowRoot.appendChild(div);
+    }
+  }
+
+  // Remove any prior trusted-mode light-DOM render so reload swaps
+  // cleanly without piling stale content next to the new. Called from
+  // _initShadow on every state transition; the trusted append path
+  // can assume it starts clean.
+  _clearLightContent() {
+    for (const child of Array.from(this.children)) {
+      if (child.classList?.contains('si-content')) child.remove();
+    }
+  }
+
+  _showRaw(text) {
+    this._initShadow();
+    const pre = document.createElement('pre');
+    pre.className = 'si-raw';
+    pre.textContent = text;
+    this.shadowRoot.appendChild(pre);
+  }
+
+  _show(type, message) {
+    this._initShadow();
+    const div = document.createElement('div');
+    div.className = `si-${type}`;
+    if (type === 'error') div.setAttribute('role', 'alert');
+    else if (type === 'loading' || type === 'empty') {
+      div.setAttribute('role', 'status');
+      div.setAttribute('aria-live', 'polite');
+    }
+    div.textContent = message;
+    this.shadowRoot.appendChild(div);
+  }
+
+  // Reset for a fresh render. Drops any prior light-DOM content so
+  // reload doesn't double-stack, then resets the shadow root. In
+  // `trusted` mode the shadow holds a single <slot> so a subsequent
+  // light-DOM append shows through; in untrusted mode there's no
+  // slot, so any light children stay hidden as before.
+  _initShadow() {
+    this._clearLightContent();
+    this.shadowRoot.innerHTML = this.hasAttribute('trusted') ? '<slot></slot>' : '';
+    this.shadowRoot.adoptedStyleSheets = [];
+    adopt(this.shadowRoot, { sheet: includeSheet, css: INCLUDE_CSS });
+  }
+}
+
+define('sol-include', SolInclude);
+export { SolInclude };