yummy-guide-generic-administrate 0.3.0 → 0.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 12a0170a3f475fc86fa867a2dcdbbb558cce85d0b1024687cbcc84a4cdbc5501
-  data.tar.gz: bb0c145f4aaea534a02bff5f173e7917172193b6cca10f9a865cd4b2ebd6eda8
+  metadata.gz: 2e28359ae136f4efa7cb334c6cb9eb4f3001371d02b8104c68bf8924fa052692
+  data.tar.gz: 7f38757520d5d46d9a7fbd1f095e0659a31d65be38f9cc91baa08f4e7e7a4228
 SHA512:
-  metadata.gz: 35cec1573335c70b7779deb4cc9c492ff045a3acf785c5fac447789b1a80c6e7dac5b61423978a2a9751c7df6fb4c880aa5560d14652cd06fe6b8addec743530
-  data.tar.gz: 391aaee40d54f4f9ab58513d53bedfa9cdffd3a02f882ab679a690f394e9ea289927b34eb86b10da444348ddf8e34976c6482fa328810934240242a7dc091e76
+  metadata.gz: 3fcc34c49df48b58a1c81f1d14dc31ea0fc6df8b950a8390a86cace55d3adbbd1067f9326ffb12dd821524230e226d0c9db6771224c02230252adb4b29493977
+  data.tar.gz: 23dfaaf929e5bbd3afa4fa422ffe3a13bb3a45c5f5190a317884359ad56173b514a7052cd569d27e17cd28632bdd229819b343530159a4cf71ba615dc60f4e77

data/app/assets/javascripts/yummy_guide_administrate/sticky_table_headers.js

@@ -1,13 +1,14 @@
 (function() {
-  var TABLE_SELECTOR = "table[data-fixed-columns-count]";
-  var WRAPPER_SELECTOR = "[data-fixed-header-scroll], .scroll-table, .table-wrap, .af__table__content";
+  var TABLE_SELECTOR = 'table[data-fixed-columns-count]';
+  var WRAPPER_SELECTOR = '[data-fixed-header-scroll], .scroll-table, .home-table__wrapper, .table-wrap, .af__table__content';
   var resizeObservers = new WeakMap();
   var observedScrolls = new WeakMap();
+  var observedFixedScrolls = new WeakMap();
   var scrollSyncStates = new WeakMap();
 
   function directCells(row) {
     return Array.from(row.children).filter(function(cell) {
-      return cell.tagName === "TH" || cell.tagName === "TD";
+      return cell.tagName === 'TH' || cell.tagName === 'TD';
     });
   }
 
@@ -16,7 +17,7 @@
   }
 
   function cssPixelValue(value) {
-    return preciseNumber(value) + "px";
+    return preciseNumber(value) + 'px';
   }
 
   function measuredWidth(element) {
@@ -35,7 +36,7 @@
   }
 
   function fixedColumnsCount(table) {
-    var parsedCount = parseInt(table.dataset.fixedColumnsCount || "0", 10);
+    var parsedCount = parseInt(table.dataset.fixedColumnsCount || '0', 10);
     return Number.isNaN(parsedCount) ? 0 : Math.max(parsedCount, 0);
   }
 
@@ -55,23 +56,24 @@
     if (!element) return false;
 
     var styles = window.getComputedStyle(element);
-    return styles.display !== "none" && styles.visibility !== "hidden" && element.getClientRects().length > 0;
+    return styles.display !== 'none' && styles.visibility !== 'hidden' && element.getClientRects().length > 0;
   }
 
   function trackedTablesInWrapper(scroll) {
     return Array.from(scroll.querySelectorAll(TABLE_SELECTOR)).filter(function(table) {
-      return table.getAttribute("aria-hidden") !== "true" && !table.classList.contains("table-fixed-header__table");
+      return table.getAttribute('aria-hidden') !== 'true' && !table.classList.contains('table-fixed-header__table');
     });
   }
 
   function isSourceTableCandidate(table) {
-    return table.getAttribute("aria-hidden") !== "true" &&
-      !table.classList.contains("table-fixed-header__table") &&
-      !table.closest("[data-fixed-table-header]");
+    return table.getAttribute('aria-hidden') !== 'true' &&
+      !table.classList.contains('table-fixed-header__table') &&
+      !table.closest('[data-fixed-table-header]');
   }
 
   function activeSourceTable(scroll) {
     var tables = trackedTablesInWrapper(scroll);
+
     return tables.find(isVisible) || tables[0] || null;
   }
 
@@ -79,14 +81,16 @@
     var existingWrapper = table.closest(WRAPPER_SELECTOR);
 
     if (existingWrapper) {
-      existingWrapper.setAttribute("data-fixed-header-scroll", "");
-      existingWrapper.classList.add("sticky-table-scroll");
+      existingWrapper.setAttribute('data-fixed-header-scroll', '');
+      if (!existingWrapper.classList.contains('home-table__wrapper')) {
+        existingWrapper.classList.add('sticky-table-scroll');
+      }
       return existingWrapper;
     }
 
-    var wrapper = document.createElement("div");
-    wrapper.className = "scroll-table sticky-table-scroll";
-    wrapper.setAttribute("data-fixed-header-scroll", "");
+    var wrapper = document.createElement('div');
+    wrapper.className = 'scroll-table sticky-table-scroll';
+    wrapper.setAttribute('data-fixed-header-scroll', '');
     table.parentNode.insertBefore(wrapper, table);
     wrapper.appendChild(table);
 
@@ -95,40 +99,40 @@
 
   function autoFixedHeaderSlot(scroll) {
     var sibling = scroll.previousElementSibling;
-    if (!sibling || !sibling.hasAttribute("data-auto-fixed-table-header")) return null;
+    if (!sibling || !sibling.hasAttribute('data-auto-fixed-table-header')) return null;
 
     return sibling;
   }
 
   function explicitFixedHeaderSlot(scroll) {
-    var mainContent = scroll.closest(".main-content");
+    var mainContent = scroll.closest('.main-content');
     if (!mainContent) return null;
 
-    return Array.from(mainContent.querySelectorAll("[data-fixed-table-header]")).find(function(slot) {
-      return !slot.hasAttribute("data-auto-fixed-table-header");
+    return Array.from(mainContent.querySelectorAll('[data-fixed-table-header]')).find(function(slot) {
+      return !slot.hasAttribute('data-auto-fixed-table-header');
     }) || null;
   }
 
   function prepareFixedHeaderSlot(slot, inline) {
-    slot.classList.add("table-fixed-header-slot");
+    slot.classList.add('table-fixed-header-slot');
 
     if (inline) {
-      slot.setAttribute("data-fixed-header-inline", "true");
+      slot.setAttribute('data-fixed-header-inline', 'true');
     } else {
-      slot.removeAttribute("data-fixed-header-inline");
+      slot.removeAttribute('data-fixed-header-inline');
     }
   }
 
   function numericPixelValue(value) {
-    var parsedValue = parseFloat(value || "0");
+    var parsedValue = parseFloat(value || '0');
     return Number.isNaN(parsedValue) ? 0 : parsedValue;
   }
 
   function syncAutoSlotGap(slot) {
     if (!slot) return;
 
-    if (!slot.hasAttribute("data-auto-fixed-table-header")) {
-      slot.style.removeProperty("margin-bottom");
+    if (!slot.hasAttribute('data-auto-fixed-table-header')) {
+      slot.style.removeProperty('margin-bottom');
       return;
     }
 
@@ -136,8 +140,8 @@
     if (!parent) return;
 
     var parentStyles = window.getComputedStyle(parent);
-    var isColumnFlex = parentStyles.display === "flex" && parentStyles.flexDirection.indexOf("column") === 0;
-    var isGrid = parentStyles.display === "grid";
+    var isColumnFlex = parentStyles.display === 'flex' && parentStyles.flexDirection.indexOf('column') === 0;
+    var isGrid = parentStyles.display === 'grid';
     var gap = numericPixelValue(parentStyles.rowGap || parentStyles.gap);
 
     if ((isColumnFlex || isGrid) && gap > 0) {
@@ -145,28 +149,30 @@
       return;
     }
 
-    slot.style.removeProperty("margin-bottom");
+    slot.style.removeProperty('margin-bottom');
   }
 
   function ensureFixedHeaderScrollViewport(slot) {
-    var fixedScroll = slot.querySelector(".table-fixed-header__scroll");
+    var fixedScroll = slot.querySelector('.table-fixed-header__scroll');
+
     if (fixedScroll) return fixedScroll;
 
-    fixedScroll = document.createElement("div");
-    fixedScroll.className = "table-fixed-header__scroll";
-    slot.innerHTML = "";
+    fixedScroll = document.createElement('div');
+    fixedScroll.className = 'table-fixed-header__scroll';
+    slot.innerHTML = '';
     slot.appendChild(fixedScroll);
 
     return fixedScroll;
   }
 
   function ensureFixedHeaderSpacer(fixedScroll) {
-    var spacer = fixedScroll.querySelector(".table-fixed-header__spacer");
+    var spacer = fixedScroll.querySelector('.table-fixed-header__spacer');
+
     if (spacer) return spacer;
 
-    spacer = document.createElement("div");
-    spacer.className = "table-fixed-header__spacer";
-    spacer.setAttribute("aria-hidden", "true");
+    spacer = document.createElement('div');
+    spacer.className = 'table-fixed-header__spacer';
+    spacer.setAttribute('aria-hidden', 'true');
     fixedScroll.appendChild(spacer);
 
     return spacer;
@@ -185,10 +191,10 @@
       return autoSlot;
     }
 
-    autoSlot = document.createElement("div");
-    autoSlot.className = "table-fixed-header-slot";
-    autoSlot.setAttribute("data-fixed-table-header", "");
-    autoSlot.setAttribute("data-auto-fixed-table-header", "true");
+    autoSlot = document.createElement('div');
+    autoSlot.className = 'table-fixed-header-slot';
+    autoSlot.setAttribute('data-fixed-table-header', '');
+    autoSlot.setAttribute('data-auto-fixed-table-header', 'true');
     autoSlot.hidden = true;
     scroll.parentNode.insertBefore(autoSlot, scroll);
 
@@ -196,24 +202,28 @@
   }
 
   function closestMainContentHeader(scroll) {
-    var mainContent = scroll.closest(".main-content");
+    var mainContent = scroll.closest('.main-content');
     if (!mainContent) return null;
 
-    return mainContent.querySelector(".main-content__header");
+    return mainContent.querySelector('.main-content__header');
   }
 
   function syncStickyPageHeader(scroll, slot) {
     var header = closestMainContentHeader(scroll);
     if (!header) {
-      slot.style.top = "0px";
+      slot.style.top = '0px';
       syncAutoSlotGap(slot);
       return;
     }
 
-    if (slot.hasAttribute("data-auto-fixed-table-header")) {
-      slot.style.top = Math.ceil(header.getBoundingClientRect().height) + "px";
+    if (!header.classList.contains('reservations-list-header')) {
+      header.classList.add('main-content__header--sticky-table-layout');
+    }
+
+    if (slot.hasAttribute('data-auto-fixed-table-header')) {
+      slot.style.top = Math.ceil(header.getBoundingClientRect().height) + 'px';
     } else {
-      slot.style.top = "0px";
+      slot.style.top = '0px';
     }
 
     syncAutoSlotGap(slot);
@@ -222,53 +232,111 @@
   function syncFixedHeaderScroll(scroll, fixedScroll, scrollLeft) {
     if (!scroll || !fixedScroll) return;
 
-    var left = typeof scrollLeft === "number" ? scrollLeft : scroll.scrollLeft;
+    var left = typeof scrollLeft === 'number' ? scrollLeft : scroll.scrollLeft;
+    var state = ensureScrollSyncState(scroll);
+    var currentLeft = preciseNumber(fixedScroll.scrollLeft);
+
+    if (Math.abs(currentLeft - left) < 0.5) {
+      state.ignoredFixedScrollLeft = null;
+      return;
+    }
+
+    state.ignoredFixedScrollLeft = preciseNumber(left);
     fixedScroll.scrollLeft = left;
   }
 
+  function syncSourceScroll(scroll, fixedScroll, scrollLeft) {
+    if (!scroll || !fixedScroll) return;
+
+    var left = typeof scrollLeft === 'number' ? scrollLeft : fixedScroll.scrollLeft;
+    var state = ensureScrollSyncState(scroll);
+    var currentLeft = preciseNumber(scroll.scrollLeft);
+
+    if (Math.abs(currentLeft - left) < 0.5) {
+      state.ignoredSourceScrollLeft = null;
+      return;
+    }
+
+    state.ignoredSourceScrollLeft = preciseNumber(left);
+    scroll.scrollLeft = left;
+  }
+
+  function ensureScrollSyncState(scroll) {
+    var state = scrollSyncStates.get(scroll);
+
+    if (state) return state;
+
+    state = {
+      sourceFrame: null,
+      fixedFrame: null,
+      sourceScrollLeft: 0,
+      fixedScrollLeft: 0,
+      ignoredSourceScrollLeft: null,
+      ignoredFixedScrollLeft: null
+    };
+
+    scrollSyncStates.set(scroll, state);
+    return state;
+  }
+
+  function consumeIgnoredScrollLeft(state, key, scrollLeft) {
+    if (!state || state[key] === null || typeof state[key] === 'undefined') return false;
+
+    var ignoredLeft = state[key];
+    state[key] = null;
+
+    return Math.abs(ignoredLeft - preciseNumber(scrollLeft)) < 0.5;
+  }
+
   function fixedHeaderTableClassName(sourceTable) {
     var excludedClasses = {
-      "table-with-fixed-header": true,
-      "table-fixed-header__table": true
+      'table-with-fixed-header': true,
+      'home-table--with-fixed-header': true,
+      'table-fixed-header__table': true,
+      'home-table--fixed-header': true
     };
 
     var classes = sourceTable.className ? sourceTable.className.split(/\s+/).filter(function(className) {
       return className && !excludedClasses[className];
     }) : [];
 
-    classes.push("table-fixed-header__table");
+    classes.push('table-fixed-header__table');
+    if (sourceTable.classList.contains('home-table')) {
+      classes.push('home-table--fixed-header');
+    }
 
-    return Array.from(new Set(classes)).join(" ");
+    return Array.from(new Set(classes)).join(' ');
   }
 
   function applyColGroup(table, widths) {
     if (!table || !widths.length) return;
 
-    var colgroup = table.querySelector("colgroup[data-fixed-header-colgroup]");
+    var colgroup = table.querySelector('colgroup[data-fixed-header-colgroup]');
+
     if (!colgroup) {
-      colgroup = document.createElement("colgroup");
-      colgroup.setAttribute("data-fixed-header-colgroup", "true");
+      colgroup = document.createElement('colgroup');
+      colgroup.setAttribute('data-fixed-header-colgroup', 'true');
       table.insertBefore(colgroup, table.firstChild);
     }
 
-    colgroup.innerHTML = "";
+    colgroup.innerHTML = '';
 
     widths.forEach(function(width) {
-      var col = document.createElement("col");
+      var col = document.createElement('col');
       col.style.width = cssPixelValue(width);
       colgroup.appendChild(col);
     });
   }
 
   function applyFixedHeaderCellWidths(fixedTable, widths) {
-    var headerRow = fixedTable && fixedTable.querySelector("thead tr");
+    var headerRow = fixedTable && fixedTable.querySelector('thead tr');
     if (!headerRow) return;
 
     directCells(headerRow).forEach(function(cell, index) {
       var width = widths[index];
       if (!width) {
-        cell.style.removeProperty("width");
-        cell.style.removeProperty("min-width");
+        cell.style.removeProperty('width');
+        cell.style.removeProperty('min-width');
         return;
       }
 
@@ -279,13 +347,13 @@
 
   function widthCandidateRows(sourceTable, headerCellCount) {
     var candidates = [];
-    var headerRow = sourceTable.querySelector("thead tr");
+    var headerRow = sourceTable.querySelector('thead tr');
 
     if (headerRow) {
       candidates.push(headerRow);
     }
 
-    Array.from(sourceTable.querySelectorAll("tbody tr, tfoot tr")).forEach(function(row) {
+    Array.from(sourceTable.querySelectorAll('tbody tr, tfoot tr')).forEach(function(row) {
       var cells = directCells(row);
       if (cells.length !== headerCellCount || cells.some(function(cell) { return cell.colSpan > 1; })) return;
 
@@ -296,7 +364,7 @@
   }
 
   function hasMeasurableDataRow(sourceTable, headerCellCount) {
-    return Array.from(sourceTable.querySelectorAll("tbody tr, tfoot tr")).some(function(row) {
+    return Array.from(sourceTable.querySelectorAll('tbody tr, tfoot tr')).some(function(row) {
       var cells = directCells(row);
       return cells.length === headerCellCount && !cells.some(function(cell) { return cell.colSpan > 1; });
     });
@@ -305,7 +373,7 @@
   function removeGeneratedColGroup(table) {
     if (!table) return;
 
-    var colgroup = table.querySelector("colgroup[data-fixed-header-colgroup]");
+    var colgroup = table.querySelector('colgroup[data-fixed-header-colgroup]');
     if (colgroup) {
       colgroup.remove();
     }
@@ -314,11 +382,11 @@
   function generatedColGroupWidths(table, expectedCount) {
     if (!table) return [];
 
-    var colgroup = table.querySelector("colgroup[data-fixed-header-colgroup]");
+    var colgroup = table.querySelector('colgroup[data-fixed-header-colgroup]');
     if (!colgroup) return [];
 
     var widths = Array.from(colgroup.children).map(function(col) {
-      var inlineWidth = parseFloat(col.style.width || "0");
+      var inlineWidth = parseFloat(col.style.width || '0');
       return Number.isNaN(inlineWidth) ? 0 : preciseNumber(inlineWidth);
     });
 
@@ -327,7 +395,7 @@
     return widths;
   }
 
-  function clearFixedHeaderState(slot, sourceTable) {
+  function clearFixedHeaderState(slot, scroll, sourceTable) {
     if (slot) {
       slot.hidden = true;
     }
@@ -335,13 +403,21 @@
     if (!sourceTable) return;
 
     removeGeneratedColGroup(sourceTable);
-    sourceTable.classList.remove("table-with-fixed-header");
+    sourceTable.classList.remove('table-with-fixed-header');
+
+    if (sourceTable.classList.contains('home-table')) {
+      sourceTable.classList.remove('home-table--with-fixed-header');
+
+      if (scroll) {
+        scroll.classList.remove('home-table__wrapper--fixed-header-ready');
+      }
+    }
   }
 
   function measuredColumnWidths(sourceTable, fixedTable, options) {
     var settings = options || {};
-    var sourceHead = sourceTable.querySelector("thead");
-    var sourceRow = sourceHead && sourceHead.querySelector("tr");
+    var sourceHead = sourceTable.querySelector('thead');
+    var sourceRow = sourceHead && sourceHead.querySelector('tr');
 
     if (!sourceRow) return [];
 
@@ -362,7 +438,7 @@
     }
 
     if (!widths.some(Boolean) && fixedTable && settings.allowFixedTableFallback !== false) {
-      var fixedRow = fixedTable.querySelector("thead tr");
+      var fixedRow = fixedTable.querySelector('thead tr');
       var fixedCells = fixedRow ? directCells(fixedRow) : [];
 
       fixedCells.forEach(function(cell, index) {
@@ -374,12 +450,12 @@
   }
 
   function applyFixedHeaderStickyColumns(sourceTable, fixedTable, widths) {
-    var headerRow = fixedTable.querySelector("thead tr");
+    var headerRow = fixedTable.querySelector('thead tr');
     if (!headerRow) return;
 
     directCells(headerRow).forEach(function(cell) {
-      cell.classList.remove("sticky-left", "sticky-left--last");
-      cell.style.removeProperty("left");
+      cell.classList.remove('sticky-left', 'sticky-left--last');
+      cell.style.removeProperty('left');
     });
 
     var count = fixedColumnsCount(sourceTable);
@@ -388,9 +464,9 @@
     var offsets = stickyOffsets(widths.slice(0, count));
 
     directCells(headerRow).slice(0, offsets.length).forEach(function(cell, index) {
-      cell.classList.add("sticky-left");
+      cell.classList.add('sticky-left');
       if (index === offsets.length - 1) {
-        cell.classList.add("sticky-left--last");
+        cell.classList.add('sticky-left--last');
       }
       cell.style.left = cssPixelValue(offsets[index]);
     });
@@ -399,36 +475,36 @@
   function buildFixedTableHeader(slot, scroll, sourceTable) {
     if (!slot || !scroll || !sourceTable) return;
 
-    var sourceHead = sourceTable.querySelector("thead");
+    var sourceHead = sourceTable.querySelector('thead');
     if (!sourceHead) {
-      clearFixedHeaderState(slot, sourceTable);
+      clearFixedHeaderState(slot, scroll, sourceTable);
       return;
     }
 
-    var sourceRow = sourceHead.querySelector("tr");
+    var sourceRow = sourceHead.querySelector('tr');
     var headerCells = sourceRow ? directCells(sourceRow) : [];
     var hasDataRow = hasMeasurableDataRow(sourceTable, headerCells.length);
 
     if (!headerCells.length) {
-      clearFixedHeaderState(slot, sourceTable);
+      clearFixedHeaderState(slot, scroll, sourceTable);
       return;
     }
 
     var fixedScroll = ensureFixedHeaderScrollViewport(slot);
-    var fixedTable = fixedScroll.querySelector(".table-fixed-header__table");
+    var fixedTable = fixedScroll.querySelector('.table-fixed-header__table');
     var fixedSpacer = ensureFixedHeaderSpacer(fixedScroll);
 
     if (!fixedTable) {
-      fixedTable = document.createElement("table");
-      fixedTable.setAttribute("aria-hidden", "true");
+      fixedTable = document.createElement('table');
+      fixedTable.setAttribute('aria-hidden', 'true');
     }
 
     fixedTable.className = fixedHeaderTableClassName(sourceTable);
-    fixedTable.dataset.fixedColumnsCount = sourceTable.dataset.fixedColumnsCount || "0";
+    fixedTable.dataset.fixedColumnsCount = sourceTable.dataset.fixedColumnsCount || '0';
     fixedTable.innerHTML = sourceHead.outerHTML;
 
     if (fixedTable.parentNode !== fixedScroll) {
-      fixedScroll.innerHTML = "";
+      fixedScroll.innerHTML = '';
       fixedScroll.appendChild(fixedTable);
       fixedScroll.appendChild(fixedSpacer);
     }
@@ -436,9 +512,8 @@
     var widths = measuredColumnWidths(sourceTable, fixedTable, {
       allowFixedTableFallback: hasDataRow
     });
-
     if (!widths.some(Boolean)) {
-      clearFixedHeaderState(slot, sourceTable);
+      clearFixedHeaderState(slot, scroll, sourceTable);
       return;
     }
 
@@ -449,15 +524,20 @@
 
     var fixedScrollWidth = measuredTableWidth(sourceTable, widths);
 
-    fixedTable.style.transform = "";
-    fixedTable.style.marginLeft = "";
+    fixedTable.style.transform = '';
+    fixedTable.style.marginLeft = '';
     fixedTable.style.width = cssPixelValue(fixedScrollWidth);
-    fixedSpacer.style.width = "0px";
-    fixedSpacer.style.minWidth = "0px";
+    fixedSpacer.style.width = '0px';
+    fixedSpacer.style.minWidth = '0px';
     syncStickyPageHeader(scroll, slot);
     syncFixedHeaderScroll(scroll, fixedScroll);
 
-    sourceTable.classList.add("table-with-fixed-header");
+    sourceTable.classList.add('table-with-fixed-header');
+    if (sourceTable.classList.contains('home-table')) {
+      sourceTable.classList.add('home-table--with-fixed-header');
+      scroll.classList.add('home-table__wrapper--fixed-header-ready');
+    }
+
     slot.hidden = false;
   }
 
@@ -480,35 +560,57 @@
     });
   }
 
-  function observeFixedHeaderScroll(scroll) {
+  function observeSourceScroll(scroll) {
     if (observedScrolls.has(scroll)) return;
 
-    scroll.addEventListener("scroll", function() {
-      var state = scrollSyncStates.get(scroll) || {};
+    scroll.addEventListener('scroll', function() {
+      var state = ensureScrollSyncState(scroll);
+      if (consumeIgnoredScrollLeft(state, 'ignoredSourceScrollLeft', scroll.scrollLeft)) return;
+
       state.scrollLeft = scroll.scrollLeft;
+      state.sourceScrollLeft = scroll.scrollLeft;
 
-      if (state.frame) return;
+      if (state.sourceFrame) return;
 
-      state.frame = window.requestAnimationFrame(function() {
+      state.sourceFrame = window.requestAnimationFrame(function() {
         var slot = ensureFixedHeaderSlot(scroll);
-        state.frame = null;
-        syncFixedHeaderScroll(scroll, slot.querySelector(".table-fixed-header__scroll"), state.scrollLeft);
+        state.sourceFrame = null;
+        syncFixedHeaderScroll(scroll, ensureFixedHeaderScrollViewport(slot), state.sourceScrollLeft);
       });
-
-      scrollSyncStates.set(scroll, state);
     }, { passive: true });
 
     observedScrolls.set(scroll, true);
   }
 
+  function observeFixedHeaderViewport(scroll, fixedScroll) {
+    if (!fixedScroll || observedFixedScrolls.get(fixedScroll) === scroll) return;
+
+    fixedScroll.addEventListener('scroll', function() {
+      var state = ensureScrollSyncState(scroll);
+      if (consumeIgnoredScrollLeft(state, 'ignoredFixedScrollLeft', fixedScroll.scrollLeft)) return;
+
+      state.fixedScrollLeft = fixedScroll.scrollLeft;
+
+      if (state.fixedFrame) return;
+
+      state.fixedFrame = window.requestAnimationFrame(function() {
+        state.fixedFrame = null;
+        syncSourceScroll(scroll, fixedScroll, state.fixedScrollLeft);
+      });
+    }, { passive: true });
+
+    observedFixedScrolls.set(fixedScroll, scroll);
+  }
+
   function initializeFixedHeaderForScroll(scroll) {
     var sourceTable = activeSourceTable(scroll);
     if (!sourceTable) return;
 
     var slot = ensureFixedHeaderSlot(scroll);
     buildFixedTableHeader(slot, scroll, sourceTable);
+    observeFixedHeaderViewport(scroll, slot.querySelector('.table-fixed-header__scroll'));
     observeFixedHeader(scroll);
-    observeFixedHeaderScroll(scroll);
+    observeSourceScroll(scroll);
   }
 
   function initializeFixedHeaders(root) {
@@ -545,14 +647,14 @@
     initializeFixedHeaders(document);
   }
 
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", initializeFromDocument);
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeFromDocument);
   } else {
     initializeFromDocument();
   }
 
-  document.addEventListener("turbo:load", initializeFromDocument);
-  window.addEventListener("resize", initializeFromDocument);
+  document.addEventListener('turbo:load', initializeFromDocument);
+  window.addEventListener('resize', initializeFromDocument);
 
   if (window.MutationObserver) {
     var mutationObserver = new MutationObserver(function(mutations) {

data/app/assets/stylesheets/yummy_guide_administrate/components.scss

@@ -7,7 +7,9 @@
 .scroll-table table th,
 .scroll-table table td,
 .sticky-table-scroll table th,
-.sticky-table-scroll table td {
+.sticky-table-scroll table td,
+.home-table th,
+.home-table td {
   vertical-align: middle;
 }
 
@@ -171,19 +173,23 @@ td.cell-data:hover .admin-copy-cell__button:not([disabled]),
 .scroll-table table th.sticky-left,
 .scroll-table table td.sticky-left,
 .sticky-table-scroll table th.sticky-left,
-.sticky-table-scroll table td.sticky-left {
+.sticky-table-scroll table td.sticky-left,
+.home-table th.sticky-left,
+.home-table td.sticky-left {
   position: sticky;
   background-clip: padding-box;
 }
 
 .scroll-table table th.sticky-left,
-.sticky-table-scroll table th.sticky-left {
+.sticky-table-scroll table th.sticky-left,
+.home-table th.sticky-left {
   z-index: 4;
   background-color: #121012;
 }
 
 .scroll-table table td.sticky-left,
-.sticky-table-scroll table td.sticky-left {
+.sticky-table-scroll table td.sticky-left,
+.home-table td.sticky-left {
   z-index: 3;
   background-color: var(--sticky-cell-background, #fff);
 }
@@ -191,7 +197,9 @@ td.cell-data:hover .admin-copy-cell__button:not([disabled]),
 .scroll-table table th.sticky-left::after,
 .scroll-table table td.sticky-left::after,
 .sticky-table-scroll table th.sticky-left::after,
-.sticky-table-scroll table td.sticky-left::after {
+.sticky-table-scroll table td.sticky-left::after,
+.home-table th.sticky-left::after,
+.home-table td.sticky-left::after {
   content: "";
   position: absolute;
   top: -1px;
@@ -205,14 +213,18 @@ td.cell-data:hover .admin-copy-cell__button:not([disabled]),
 .scroll-table table th.sticky-left--last,
 .scroll-table table td.sticky-left--last,
 .sticky-table-scroll table th.sticky-left--last,
-.sticky-table-scroll table td.sticky-left--last {
+.sticky-table-scroll table td.sticky-left--last,
+.home-table th.sticky-left--last,
+.home-table td.sticky-left--last {
   box-shadow: 6px 0 8px -8px rgba(0, 0, 0, 0.35);
 }
 
 .scroll-table table th.sticky,
 .scroll-table table td.sticky,
 .sticky-table-scroll table th.sticky,
-.sticky-table-scroll table td.sticky {
+.sticky-table-scroll table td.sticky,
+.home-table th.sticky,
+.home-table td.sticky {
   position: sticky;
   right: 0;
   background-color: inherit;
@@ -223,7 +235,9 @@ td.cell-data:hover .admin-copy-cell__button:not([disabled]),
 .scroll-table table th.sticky::before,
 .scroll-table table td.sticky::before,
 .sticky-table-scroll table th.sticky::before,
-.sticky-table-scroll table td.sticky::before {
+.sticky-table-scroll table td.sticky::before,
+.home-table th.sticky::before,
+.home-table td.sticky::before {
   content: "";
   position: absolute;
   top: -1px;
@@ -235,12 +249,14 @@ td.cell-data:hover .admin-copy-cell__button:not([disabled]),
 }
 
 .scroll-table table th.sticky,
-.sticky-table-scroll table th.sticky {
+.sticky-table-scroll table th.sticky,
+.home-table th.sticky {
   z-index: 5;
 }
 
 .scroll-table table td.sticky,
-.sticky-table-scroll table td.sticky {
+.sticky-table-scroll table td.sticky,
+.home-table td.sticky {
   z-index: 4;
   background-color: var(--sticky-cell-background, #fff);
 }
@@ -253,7 +269,8 @@ td.cell-data:hover .admin-copy-cell__button:not([disabled]),
 }
 
 td.actions-column .sticky__item,
-.sticky-table-scroll td.actions-column .sticky__item {
+.sticky-table-scroll td.actions-column .sticky__item,
+.home-table td.actions-column .sticky__item {
   width: max-content;
 }
 
@@ -294,7 +311,8 @@ td.actions-column .sticky__item,
   top: 0;
 }
 
-.table-with-fixed-header thead {
+.table-with-fixed-header thead,
+.home-table--with-fixed-header thead {
   display: none;
 }
 
@@ -386,6 +404,27 @@ td.actions-column .sticky__item,
   box-shadow: 6px 0 8px -8px rgba(0, 0, 0, 0.35);
 }
 
+
+.home-table--fixed-header {
+  table-layout: fixed;
+}
+
+.home-table--fixed-header th {
+  position: static;
+  top: auto;
+  z-index: auto;
+  border: 1px solid #121012;
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.home-table--fixed-header th.sticky {
+  position: sticky;
+  right: 0;
+  z-index: 5;
+}
+
 .yummy-guide-administrate-filter-form {
   display: flex;
   flex-direction: column;

data/lib/yummy_guide/administrate/version.rb

@@ -2,6 +2,6 @@
 
 module YummyGuide
   module Administrate
-    VERSION = "0.3.0"
+    VERSION = "0.3.2"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: yummy-guide-generic-administrate
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.3.2
 platform: ruby
 authors:
 - akatsuki-kk