https://gamerun.ai/gr-modules/summaries.js

1/* gr-module: summaries
2 * Reimplements the Squarespace summary-v2 AUTOGRID layout engine
3 * (.sqs-block-summary-v2 .sqs-gallery-design-autogrid).
4 *
5 * The captured DOM froze JS-computed inline styles at a 1440px viewport
6 * (item width/margins in %, thumbnail img width/height in px). This module
7 * recomputes them from each block's own data attributes, matching the live
8 * Squarespace gallery-layout-autogrid behavior measured at
9 * 375/500/640/768/900/1100/1280/1440/1680/1920/2400:
10 *
11 *   cols      = max(1, floor(containerClientWidth / data-column-width))
12 *   gutterPct = data-gutter / containerClientWidth * 100      (toPrecision(6))
13 *   itemPct   = (100 - (cols - 1) * gutterPct) / cols         (toPrecision(6))
14 *   item i:   width itemPct% (100% when 1 col), margin-bottom gutterPct%,
15 *             margin-right gutterPct% (0% on last-in-row or 1 col),
16 *             clear:left on first-in-row, float:left
17 *   list:     margin-bottom: -gutterPct%
18 *
19 * Frozen thumbnail px sizes are neutralized by summaries.css (the inline
20 * padding-bottom ratio wrapper scales with the item, and the img fills it).
21 */
22(function () {
23  'use strict';
24
25  var SEL_WRAPPER = '.sqs-block-summary-v2 .summary-block-wrapper[data-design="autogrid"]';
26
27  // Match live Squarespace number formatting (6 significant digits).
28  function fmt(x) {
29    return String(Number(x.toPrecision(6)));
30  }
31
32  function layoutBlock(wrapper) {
33    var list = wrapper.querySelector('.summary-item-list');
34    if (!list) return;
35    var items = list.querySelectorAll('.summary-item');
36    if (!items.length) return;
37
38    var colWidth = parseFloat(wrapper.getAttribute('data-column-width'));
39    var gutter = parseFloat(wrapper.getAttribute('data-gutter'));
40
41    // Self-calibration fallback: derive the frozen column count and gutter
42    // from the captured inline styles if the data attributes are absent.
43    if (!colWidth || colWidth <= 0 || isNaN(gutter) || gutter < 0) {
44      var w0 = parseFloat(items[0].style.width);   // e.g. 30.3145 (%)
45      var g0 = parseFloat(items[0].style.marginBottom); // e.g. 4.5283 (%)
46      if (!w0 || isNaN(g0)) return; // nothing to calibrate from; leave frozen
47      var cols0 = Math.max(1, Math.round((100 + g0) / (w0 + g0)));
48      var cw0 = wrapper.clientWidth;
49      if (!cw0) return;
50      if (isNaN(gutter) || gutter < 0) gutter = (g0 / 100) * cw0;
51      if (!colWidth || colWidth <= 0) colWidth = cw0 / cols0;
52    }
53
54    var cw = wrapper.clientWidth; // integer, matches live computation base
55    if (!cw) return; // hidden / display:none — retry on next resize
56
57    var cols = Math.max(1, Math.floor(cw / colWidth));
58    var gutterPct = (gutter / cw) * 100;
59    var itemPct = (100 - (cols - 1) * gutterPct) / cols;
60    var g = fmt(gutterPct);
61    var iw = cols === 1 ? '100' : fmt(itemPct);
62
63    list.style.marginBottom = '-' + g + '%';
64
65    for (var i = 0; i < items.length; i++) {
66      var it = items[i];
67      var lastInRow = cols === 1 || i % cols === cols - 1;
68      it.style.width = iw + '%';
69      it.style.marginBottom = g + '%';
70      it.style.marginRight = lastInRow ? '0%' : g + '%';
71      it.style.clear = i % cols === 0 ? 'left' : '';
72      it.style.float = 'left';
73    }
74  }
75
76  function layoutAll() {
77    var wrappers = document.querySelectorAll(SEL_WRAPPER);
78    if (!wrappers.length) return; // no-op on pages without autogrid summaries
79    for (var i = 0; i < wrappers.length; i++) {
80      try {
81        layoutBlock(wrappers[i]);
82      } catch (e) {
83        /* never break other modules */
84      }
85    }
86  }
87
88  var resizeTimer = null;
89  function onResize() {
90    if (resizeTimer) clearTimeout(resizeTimer);
91    resizeTimer = setTimeout(layoutAll, 60);
92  }
93
94  function init() {
95    layoutAll();
96    // Re-run after full load in case late assets change container width
97    // (e.g. scrollbar appearing once content lays out).
98    window.addEventListener('load', layoutAll);
99    window.addEventListener('resize', onResize);
100    window.addEventListener('orientationchange', onResize);
101  }
102
103  if (document.readyState === 'loading') {
104    document.addEventListener('DOMContentLoaded', init);
105  } else {
106    init();
107  }
108})();