yummy-guide-generic-administrate 0.8.8 → 0.8.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 74f5b683cf773df946e0d0e56e1abd66d931e9e5c660afa77c30b80472ae23c6
-  data.tar.gz: e3a282a8a3cfdedf00d02a5071ce9ae325ea164e905931e14ebcdc7f8bf1aad5
+  metadata.gz: 1ed6d8460a0a0e1b9a84b4b69a0e0dfd01195b505b2d9efa984cddf182efea28
+  data.tar.gz: d1d8de5996db5b20c7bbf8d5f822d9f62f900b59c1c6818a9104ac2a876961f1
 SHA512:
-  metadata.gz: 410dbc0171c5cfc6c0b83c12e7943d58a959707d214c13b570f83973941214394741447654ea658df789c3c3b3f20c097be41fdc8d1fa0f8201ecf723f796f8a
-  data.tar.gz: 1f750eec8e2b1561d5dde53484be393dfa9194c0af204c6dc251ae27dd6b7a605880de00fae2db9d8e51dfe7901ba8b55d89a28f50fe5296e7055f513695cd6e
+  metadata.gz: 0b4f2c4caeb356f6758c40a5dbbcd7278d1303cc46970273d3ff3549c410bfba1b16ec163a2debb87649fb0e29c930401847aa73d7db866373c35125bc4e2f95
+  data.tar.gz: 077c2bf515cd0f2b0f46dbf16917eb5dbc781add60f5502b7c027fcfc97867c94ee215eaf5cd54049f4f0d597a1c5f68a7855a11280e54e92106b37a7c3cea84

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

@@ -1,5 +1,9 @@
 (function() {
   var TABLE_SELECTOR = 'table[data-fixed-columns-count]';
+  var CSS_STICKY_TABLE_SELECTOR = '[data-css-sticky-table]';
+  var MAIN_CONTENT_SELECTOR = '.main-content';
+  var STICKY_PAGE_HEADER_SELECTOR = '.main-content__header--sticky-table-layout, [data-reservations-sticky-header], .main-content__header';
+  var STICKY_PAGE_HEADER_HEIGHT_VARIABLE = '--admin-sticky-page-header-height';
   var HANDLE_CLASS = 'admin-column-resizer__handle';
   var HEADER_CLASS = 'admin-column-resizer__header';
   var TABLE_CLASS = 'admin-column-resizer__table';
@@ -19,6 +23,8 @@
   var generatedRuleCount = 0;
   var initializedHandles = new WeakSet();
   var tableStates = new WeakMap();
+  var stickyPageHeaderResizeObservers = new WeakMap();
+  var stickyPageHeaderLayoutFrames = new WeakMap();
   var applyingWidth = false;
 
   function storageScopeForTable(table) {
@@ -78,6 +84,176 @@
     return preciseNumber(rectWidth || element.offsetWidth || 0);
   }
 
+  function pushUnique(array, item) {
+    if (item && array.indexOf(item) === -1) {
+      array.push(item);
+    }
+  }
+
+  function hasCssStickyTable(element) {
+    if (!element) return false;
+
+    return (element.matches && element.matches(CSS_STICKY_TABLE_SELECTOR)) ||
+      !!(element.querySelector && element.querySelector(CSS_STICKY_TABLE_SELECTOR));
+  }
+
+  function closestMainContent(element) {
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) return null;
+
+    if (element.matches && element.matches(MAIN_CONTENT_SELECTOR)) {
+      return element;
+    }
+
+    return element.closest ? element.closest(MAIN_CONTENT_SELECTOR) : null;
+  }
+
+  function collectStickyTableMainContents(root) {
+    var mainContents = [];
+    var element = root && root.nodeType === Node.ELEMENT_NODE ? root : null;
+
+    if (element) {
+      pushUnique(mainContents, closestMainContent(element));
+
+      if (element.matches && element.matches(CSS_STICKY_TABLE_SELECTOR)) {
+        pushUnique(mainContents, closestMainContent(element));
+      }
+    }
+
+    if (root && root.querySelectorAll) {
+      root.querySelectorAll(MAIN_CONTENT_SELECTOR).forEach(function(mainContent) {
+        if (hasCssStickyTable(mainContent)) {
+          pushUnique(mainContents, mainContent);
+        }
+      });
+
+      root.querySelectorAll(CSS_STICKY_TABLE_SELECTOR).forEach(function(tableWrapper) {
+        pushUnique(mainContents, closestMainContent(tableWrapper));
+      });
+    }
+
+    return mainContents;
+  }
+
+  function stickyPageHeader(mainContent) {
+    if (!mainContent) return null;
+
+    return Array.from(mainContent.children).find(function(child) {
+      return child.matches && child.matches(STICKY_PAGE_HEADER_SELECTOR);
+    }) || null;
+  }
+
+  function measuredStickyPageHeaderHeight(mainContent, header) {
+    var previousHeight = mainContent.style.getPropertyValue(STICKY_PAGE_HEADER_HEIGHT_VARIABLE);
+
+    if (previousHeight) {
+      mainContent.style.removeProperty(STICKY_PAGE_HEADER_HEIGHT_VARIABLE);
+    }
+
+    var rectHeight = header.getBoundingClientRect().height;
+    var scrollHeight = header.scrollHeight || 0;
+    var height = Math.max(rectHeight || 0, scrollHeight);
+
+    if (previousHeight) {
+      mainContent.style.setProperty(STICKY_PAGE_HEADER_HEIGHT_VARIABLE, previousHeight);
+    }
+
+    return preciseNumber(height);
+  }
+
+  function refreshStickyPageHeaderLayout(mainContent) {
+    if (!mainContent) return false;
+
+    if (!hasCssStickyTable(mainContent)) {
+      mainContent.style.removeProperty(STICKY_PAGE_HEADER_HEIGHT_VARIABLE);
+      return false;
+    }
+
+    var header = stickyPageHeader(mainContent);
+
+    if (!header) {
+      mainContent.style.removeProperty(STICKY_PAGE_HEADER_HEIGHT_VARIABLE);
+      return false;
+    }
+
+    var height = measuredStickyPageHeaderHeight(mainContent, header);
+
+    if (height > 0) {
+      var value = cssPixelValue(height);
+
+      if (mainContent.style.getPropertyValue(STICKY_PAGE_HEADER_HEIGHT_VARIABLE) !== value) {
+        mainContent.style.setProperty(STICKY_PAGE_HEADER_HEIGHT_VARIABLE, value);
+      }
+    } else {
+      mainContent.style.removeProperty(STICKY_PAGE_HEADER_HEIGHT_VARIABLE);
+    }
+
+    return true;
+  }
+
+  function observeStickyPageHeaderLayout(mainContent) {
+    if (!window.ResizeObserver || !mainContent) return;
+
+    var header = stickyPageHeader(mainContent);
+    var currentObserver = stickyPageHeaderResizeObservers.get(mainContent);
+
+    if (!header) {
+      if (currentObserver) {
+        currentObserver.observer.disconnect();
+        stickyPageHeaderResizeObservers.delete(mainContent);
+      }
+      return;
+    }
+
+    if (currentObserver && currentObserver.header === header) return;
+
+    if (currentObserver) {
+      currentObserver.observer.disconnect();
+    }
+
+    var observer = new ResizeObserver(function() {
+      scheduleStickyPageHeaderLayout(mainContent);
+    });
+
+    observer.observe(header);
+
+    stickyPageHeaderResizeObservers.set(mainContent, {
+      header: header,
+      observer: observer
+    });
+  }
+
+  function scheduleStickyPageHeaderLayout(mainContent) {
+    if (!mainContent || stickyPageHeaderLayoutFrames.has(mainContent)) return;
+
+    var frame = window.requestAnimationFrame(function() {
+      stickyPageHeaderLayoutFrames.delete(mainContent);
+      refreshStickyPageHeaderLayout(mainContent);
+      observeStickyPageHeaderLayout(mainContent);
+    });
+
+    stickyPageHeaderLayoutFrames.set(mainContent, frame);
+  }
+
+  function refreshStickyHeaderLayout(root) {
+    var refreshed = false;
+
+    collectStickyTableMainContents(root || document).forEach(function(mainContent) {
+      refreshed = refreshStickyPageHeaderLayout(mainContent) || refreshed;
+      observeStickyPageHeaderLayout(mainContent);
+    });
+
+    return refreshed;
+  }
+
+  function refreshStickyHeaderLayoutForTable(table) {
+    var mainContent = closestMainContent(table);
+
+    if (!mainContent) return false;
+
+    scheduleStickyPageHeaderLayout(mainContent);
+    return true;
+  }
+
   function viewportHeight() {
     return window.innerHeight || document.documentElement.clientHeight || 0;
   }
@@ -422,6 +598,7 @@
       if (key && storageKeyForTable(table) !== key) return;
 
       applyTableColumnWidth(table, columnId, width);
+      refreshStickyHeaderLayoutForTable(table);
     });
   }
 
@@ -430,6 +607,7 @@
       if (key && storageKeyForTable(table) !== key) return;
 
       clearTableColumnWidth(table, columnId);
+      refreshStickyHeaderLayoutForTable(table);
     });
   }
 
@@ -440,6 +618,8 @@
 
       applyTableColumnWidth(table, columnId, width);
     });
+
+    refreshStickyHeaderLayoutForTable(table);
   }
 
   function applyStoredWidthsToTables(tables) {
@@ -609,6 +789,8 @@
   }
 
   function refreshStickyLeftColumns(sourceTable) {
+    refreshStickyHeaderLayoutForTable(sourceTable);
+
     var api = window.YummyGuideAdministrateStickyLeftColumns;
 
     if (api && typeof api.refreshTable === 'function') {
@@ -671,6 +853,7 @@
       widths[pendingWidth.columnId] = preciseNumber(pendingWidth.width);
       safeWriteWidths(pendingWidth.storageKey, widths);
       refreshStickyLeftColumnsForWidth(pendingWidth);
+      refreshStickyHeaderLayoutForTable(pendingWidth.sourceTable);
       window.requestAnimationFrame(function() {
         stopApplyingWidth(pendingWidth.preview);
       });
@@ -841,6 +1024,7 @@
     });
 
     applyStoredWidthsToTables(configuredTables);
+    refreshStickyHeaderLayout(root);
   }
 
   function initializeFromDocument() {
@@ -864,7 +1048,12 @@
           if (!shouldInitializeForAddedNode(node)) return;
 
           initializeColumnResizer(node);
+          refreshStickyHeaderLayout(node);
         });
+
+        if (mutation.target && mutation.target.nodeType === Node.ELEMENT_NODE) {
+          refreshStickyHeaderLayout(mutation.target);
+        }
       });
     });
 
@@ -874,6 +1063,10 @@
     });
   }
 
+  window.YummyGuideAdministrateColumnResizer = {
+    refreshStickyHeaderLayout: refreshStickyHeaderLayout
+  };
+
   setTimeout(initializeFromDocument, 100);
   setTimeout(initializeFromDocument, 300);
 })();

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

@@ -419,11 +419,6 @@
   cursor: default;
 }
 
-.admin-copy-cell__button[data-behavior="copy-cell"],
-.admin-copy-cell__icon {
-  display: none !important;
-}
-
 .admin-copy-cell__link:hover,
 .admin-copy-cell__link:focus-visible,
 .admin-copy-cell__link:active,

data/lib/yummy_guide/administrate/version.rb

@@ -2,6 +2,6 @@
 
 module YummyGuide
   module Administrate
-    VERSION = "0.8.8"
+    VERSION = "0.8.9"
   end
 end

data/spec/yummy_guide/administrate/collection_helper_spec.rb

@@ -270,6 +270,7 @@ RSpec.describe YummyGuide::Administrate::CollectionHelper do
       expect(cell[:linkable]).to be(false)
       expect(cell[:content]).to include('href="/areas/japan/nagano/matsumoto/articles/test-article"')
       expect(cell[:content]).to include('data-behavior="copy-cell"')
+      expect(cell[:content]).to include('class="admin-copy-cell__icon"')
       expect(cell[:content]).to include('data-copy-text="Page"')
     end
 

data/spec/yummy_guide/administrate/column_resizer_asset_spec.rb

@@ -42,7 +42,6 @@ RSpec.describe "column resizer assets" do
   # 固定ヘッダー複製用の同期処理を持たず、元テーブルの固定左列だけ再計算することを静的に確認する
   it "does not depend on duplicated fixed header synchronization" do
     expect(javascript_source).not_to include("YummyGuideAdministrateStickyTableHeaders")
-    expect(javascript_source).not_to include("refreshStickyHeader")
     expect(javascript_source).not_to include("scheduleStickyRefresh")
     expect(javascript_source).not_to include("table-fixed-header__table")
     expect(javascript_source).to include("refreshStickyLeftColumnsForWidth(pendingWidth)")
@@ -147,7 +146,7 @@ RSpec.describe "column resizer assets" do
     expect(components_source).to include("position: static !important")
     expect(components_source).to include('table[data-mobile-fixed-columns-count="1"] th.sticky-left-mobile')
     expect(components_source).to include("position: sticky !important")
-    expect(components_source).to include("min-inline-size: 100vw !important")
+    expect(components_source).to include("min-inline-size: 0 !important")
     expect(components_source).to include("width: max-content !important")
     expect(components_source).to include("@media (max-width: 767px)")
     expect(components_source).to include(".scroll-table table th.sticky.actions-column")
@@ -166,6 +165,21 @@ RSpec.describe "column resizer assets" do
     expect(components_source).to include("width: var(--admin-sticky-actions-right, 0px)")
   end
 
+  # 固定ページヘッダーの実高さをCSS変数へ反映し、テーブルヘッダー位置を追従させることを静的に確認する
+  it "updates sticky table header offset from measured page header height" do
+    expect(javascript_source).to include("CSS_STICKY_TABLE_SELECTOR = '[data-css-sticky-table]'")
+    expect(javascript_source).to include("STICKY_PAGE_HEADER_HEIGHT_VARIABLE = '--admin-sticky-page-header-height'")
+    expect(javascript_source).to include("function measuredStickyPageHeaderHeight(mainContent, header)")
+    expect(javascript_source).to include("header.getBoundingClientRect().height")
+    expect(javascript_source).to include("header.scrollHeight || 0")
+    expect(javascript_source).to include("mainContent.style.setProperty(STICKY_PAGE_HEADER_HEIGHT_VARIABLE, value)")
+    expect(javascript_source).to include("mainContent.style.removeProperty(STICKY_PAGE_HEADER_HEIGHT_VARIABLE)")
+    expect(javascript_source).to include("new ResizeObserver(function()")
+    expect(javascript_source).to include("refreshStickyHeaderLayoutForTable(table)")
+    expect(javascript_source).to include("refreshStickyHeaderLayoutForTable(pendingWidth.sourceTable)")
+    expect(javascript_source).to include("refreshStickyHeaderLayout: refreshStickyHeaderLayout")
+  end
+
   # 固定ナビがテーブルより前面の不透明なスクロール領域として表示されることを静的に確認する
   it "keeps fixed navigation above sticky tables with an opaque background" do
     expect(components_source).to include("--admin-page-background: #f6f7f7")

data/spec/yummy_guide/administrate/copy_cell_asset_spec.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+RSpec.describe "copy cell assets" do
+  let(:components_source) do
+    File.read(File.expand_path("../../../app/assets/stylesheets/yummy_guide_administrate/components.scss", __dir__))
+  end
+
+  # コピー用ボタンとアイコンをCSSで強制的に隠さないことを静的に確認する
+  it "does not force-hide the copy cell button or icon" do
+    expect(components_source.scan(/\.admin-copy-cell__(?:button|icon)[^{]*\{[^}]*display:\s*none\s*!important/m)).to be_empty
+    expect(components_source).to include(".admin-copy-cell__icon {\n  display: inline-flex;")
+    expect(components_source).to include('mask: image-url("yummy_guide_administrate/icon-copy.svg") center / contain no-repeat;')
+  end
+
+  # テーブルセルではホバーやフォーカス時にコピー操作が表示されることを静的に確認する
+  it "reveals copy cell controls on hover or focus" do
+    expect(components_source).to include("td.cell-data:hover .admin-copy-cell__button:not([disabled])")
+    expect(components_source).to include(".admin-copy-cell:focus-within .admin-copy-cell__link")
+    expect(components_source).to include(".admin-copy-cell__button:focus-visible")
+    expect(components_source).to include("opacity: 1;")
+  end
+
+  # 詳細画面ではコピー操作が常時表示される指定を維持することを静的に確認する
+  it "keeps attribute copy controls visible" do
+    expect(components_source).to match(/\.attribute-data \.admin-copy-cell__link,\s*\.attribute-data \.admin-copy-cell__button:not\(\[disabled\]\) \{\s*opacity: 1;/m)
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: yummy-guide-generic-administrate
 version: !ruby/object:Gem::Version
-  version: 0.8.8
+  version: 0.8.9
 platform: ruby
 authors:
 - akatsuki-kk
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-06-15 00:00:00.000000000 Z
+date: 2026-06-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: administrate
@@ -144,6 +144,7 @@ files:
 - spec/yummy_guide/administrate/application_dashboard_spec.rb
 - spec/yummy_guide/administrate/collection_helper_spec.rb
 - spec/yummy_guide/administrate/column_resizer_asset_spec.rb
+- spec/yummy_guide/administrate/copy_cell_asset_spec.rb
 - spec/yummy_guide/administrate/datetime_filter_parameters_spec.rb
 - spec/yummy_guide/administrate/datetime_input_helper_spec.rb
 - spec/yummy_guide/administrate/fields/json_pretty_field_spec.rb