yummy-guide-generic-administrate 0.8.7 → 0.8.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0520a5cdee147e08194dab9b3db2bd7c07a1ab16378069dd33075092a0d26fa5
-  data.tar.gz: 929494186a5804c39b86503635520ec5b0a5898fc2c306cdd679787dac48b361
+  metadata.gz: 74f5b683cf773df946e0d0e56e1abd66d931e9e5c660afa77c30b80472ae23c6
+  data.tar.gz: e3a282a8a3cfdedf00d02a5071ce9ae325ea164e905931e14ebcdc7f8bf1aad5
 SHA512:
-  metadata.gz: 043eb9eae3d408ef080935b7ab1072f8f5df4e965549f6b8285c5b3f0dd0e50408c92f0174bac1ede3dceaaee976c107bc900cacb389e294bb66cf3882fe2767
-  data.tar.gz: 2cf1472d84a48a940408f1dec4138966f0efd331c0097f3152ccbaa9564e8faf74a246dcf0b195a63393f1934299961a0b334a1b4dc4e66ccea34b2f14bc400f
+  metadata.gz: 410dbc0171c5cfc6c0b83c12e7943d58a959707d214c13b570f83973941214394741447654ea658df789c3c3b3f20c097be41fdc8d1fa0f8201ecf723f796f8a
+  data.tar.gz: 1f750eec8e2b1561d5dde53484be393dfa9194c0af204c6dc251ae27dd6b7a605880de00fae2db9d8e51dfe7901ba8b55d89a28f50fe5296e7055f513695cd6e

data/README.md

@@ -51,7 +51,6 @@ bundle install
   - 管理画面フォーム用の number input text 化 helper
 - 共通 partial / assets
   - collection partial
-  - fixed table header partial
   - filter form partial
   - `clipboards.js`
   - `datetime_input.js`
@@ -59,7 +58,6 @@ bundle install
   - `filter_controls.js`
   - `filter_form.js`
   - `sticky_left_columns.js`
-  - `sticky_table_headers.js`
   - `tooltips.js`
   - `components.css`
 - 共通 field
@@ -143,18 +141,27 @@ engine の共通 partial に委譲します。
 #### 1. 最小構成
 
 gem 付属の collection partial をそのまま使う場合、table wrapper と table 本体に
-必要な `data-*` 属性はすでに入っています。そのため、JS / CSS を読み込めば固定
-ヘッダーとカラム幅調整は自動で有効になります。カラム幅調整を使う場合は
+必要な `data-*` 属性はすでに入っています。`data-css-sticky-table` は sticky 対象の
+識別子として使い、wrapper 自体には縦横スクロールを持たせません。そのため、ページ
+スクロールに合わせて `thead th` が sticky で固定されます。カラム幅調整を使う場合は
 `yummy_guide_administrate/column_resizer.js` も読み込んでください。
 
 内部的には以下のような構造になります。
 
 ```erb
-<div class="scroll-table" data-fixed-header-scroll>
+<% table_definition = yummy_guide_administrate_collection_table_definition(
+     page: page,
+     collection_presenter: collection_presenter
+   ) %>
+
+<div class="scroll-table" data-css-sticky-table>
   <table
     aria-labelledby="<%= table_title %>"
-    data-fixed-columns-count="<%= yummy_guide_administrate_collection_table_fixed_columns_count(page: page, collection_presenter: collection_presenter) %>"
-    data-fixed-header-source
+    data-fixed-columns-count="<%= table_definition.fixed_columns_count %>"
+    data-mobile-fixed-columns-count="<%= table_definition.mobile_fixed_columns_count %>"
+    <% if table_definition.table_style.present? %>
+      style="<%= table_definition.table_style %>"
+    <% end %>
   >
     ...
   </table>
@@ -163,63 +170,39 @@ gem 付属の collection partial をそのまま使う場合、table wrapper と
 
 複数画面で幅設定を共有したい場合は、render local に `column_width_storage_scope: "admin.reservations"` のような任意の scope 名を渡してください。
 
-#### 2. ヘッダー位置を明示したい場合
-
-固定ヘッダーの表示位置をページ上部の特定箇所に合わせたい場合は、
-`data-fixed-table-header` を持つ slot を `.main-content` 配下に置きます。
-gem には専用 partial があります。
-
-```erb
-<header class="main-content__header">
-  <h1 id="page-title">Articles</h1>
-  <%= render "yummy_guide/administrate/administrate/application/fixed_table_header" %>
-</header>
-
-<section class="main-content__body main-content__body--flush">
-  <%= render "yummy_guide/administrate/administrate/application/collection",
-             collection_presenter: collection_presenter,
-             page: page,
-             resources: resources,
-             table_title: "page-title",
-             namespace: :admin,
-             resource_class: resource_class,
-             collection_field_name: resource_name %>
-</section>
-```
-
-`fixed_table_header` partial 自体は以下の 1 行です。
-
-```erb
-<div class="yummy-guide-administrate-fixed-table-header" data-fixed-table-header hidden></div>
-```
-
-この slot を置かない場合でも、JS が table の直前に自動生成します。配置を制御
-したいときだけ明示してください。desktop では LMJ と同じく、`main-content__body--flush`
-と組み合わせることで fixed header のクリップ幅が一覧 body と揃い、一覧 wrapper
-自体には縦スクロールを持たせません。
-
-#### 3. 自前の table partial を使う場合
+#### 2. 自前の table partial を使う場合
 
 独自の collection partial を書く場合は、少なくとも以下を満たしてください。
 
-- 横スクロール wrapper に `data-fixed-header-scroll` を付ける
-- table に `data-fixed-header-source` を付ける
+- table wrapper に `data-css-sticky-table` を付ける
+- `data-css-sticky-table` を付けた wrapper に縦横スクロールを持たせない
 - table に `data-fixed-columns-count` を付ける
+- table に `data-mobile-fixed-columns-count` を付ける
+- 固定列数・列幅・固定列class/styleは `yummy_guide_administrate_collection_table_definition` から参照する
 - header の `aria-labelledby` がページタイトルと対応している
 
 ```erb
-<%= render "yummy_guide/administrate/administrate/application/fixed_table_header" %>
+<% table_definition = yummy_guide_administrate_collection_table_definition(
+     page: page,
+     collection_presenter: collection_presenter,
+     column_names: %i[id name]
+   ) %>
 
-<div class="scroll-table" data-fixed-header-scroll>
+<div class="scroll-table" data-css-sticky-table>
   <table
     aria-labelledby="page-title"
-    data-fixed-header-source
-    data-fixed-columns-count="<%= yummy_guide_administrate_collection_table_fixed_columns_count(page: page, collection_presenter: collection_presenter) %>"
+    data-fixed-columns-count="<%= table_definition.fixed_columns_count %>"
+    data-mobile-fixed-columns-count="<%= table_definition.mobile_fixed_columns_count %>"
+    <% if table_definition.table_style.present? %>
+      style="<%= table_definition.table_style %>"
+    <% end %>
   >
     <thead>
       <tr>
-        <th>ID</th>
-        <th>Name</th>
+        <% id_column = table_definition.sticky_column(:id) %>
+        <th class="<%= id_column[:class] %>" style="<%= id_column[:style] %>">ID</th>
+        <% name_column = table_definition.sticky_column(:name) %>
+        <th class="<%= name_column[:class] %>" style="<%= name_column[:style] %>">Name</th>
         <th class="sticky actions-column">Actions</th>
       </tr>
     </thead>
@@ -502,7 +485,6 @@ block を使わない場合、tooltip 本文はテキストとして扱われ、
 //= require yummy_guide_administrate/filter_controls
 //= require yummy_guide_administrate/filter_form
 //= require yummy_guide_administrate/sticky_left_columns
-//= require yummy_guide_administrate/sticky_table_headers
 //= require yummy_guide_administrate/tooltips
 ```
 

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

@@ -6,7 +6,6 @@
   var DRAGGING_BODY_CLASS = 'admin-column-resizer--dragging';
   var APPLYING_BODY_CLASS = 'admin-column-resizer--applying';
   var PREVIEW_CLASS = 'admin-column-resizer__preview';
-  var FIXED_HEADER_TABLE_CLASS = 'table-fixed-header__table';
   var ADJUSTED_COLUMNS_ATTRIBUTE = 'data-admin-column-resizer-adjusted-columns';
   var STORAGE_PREFIX = 'yummyGuideAdminColumnWidths:v1:';
   var STYLE_ELEMENT_ID = 'admin-column-resizer-rules';
@@ -20,14 +19,10 @@
   var generatedRuleCount = 0;
   var initializedHandles = new WeakSet();
   var tableStates = new WeakMap();
-  var stickyRefreshFrame = null;
-  var stickyRefreshCallbacks = [];
   var applyingWidth = false;
 
   function storageScopeForTable(table) {
-    var sourceTable = matchingSourceTable(table);
-    var scopedTable = sourceTable || table;
-    var scope = scopedTable && scopedTable.getAttribute('data-column-resizer-storage-scope');
+    var scope = table && table.getAttribute('data-column-resizer-storage-scope');
 
     return scope || window.location.pathname;
   }
@@ -115,39 +110,15 @@
       .replace(/\s+/g, ' ');
   }
 
-  function headerSignature(table) {
-    return columnHeaders(table).map(function(header, index) {
-      return normalizedIdentifier(header.dataset.columnId || headerLabel(header) || ('column_' + (index + 1)));
-    }).join('__');
-  }
-
-  function matchingSourceTable(table) {
-    if (!table) return null;
-    if (!table.classList.contains(FIXED_HEADER_TABLE_CLASS)) return null;
-
-    var signature = headerSignature(table);
-    return sourceTables().find(function(sourceTable) {
-      return headerSignature(sourceTable) === signature;
-    }) || null;
-  }
-
   function tableIdentifier(table) {
     if (table.dataset.adminColumnResizerTableId) return table.dataset.adminColumnResizerTableId;
 
-    var sourceTable = matchingSourceTable(table);
-    if (sourceTable) {
-      table.dataset.adminColumnResizerTableId = tableIdentifier(sourceTable);
-      return table.dataset.adminColumnResizerTableId;
-    }
-
     var tableLabel = table.id ||
       table.getAttribute('aria-labelledby') ||
-      table.getAttribute('data-admin-column-resizer-table') ||
-      table.getAttribute('data-fixed-header-source');
+      table.getAttribute('data-admin-column-resizer-table');
 
     if (!tableLabel) {
-      var index = sourceTables().indexOf(table);
-      tableLabel = 'table_' + (index >= 0 ? index + 1 : allTrackedTables().indexOf(table) + 1);
+      tableLabel = 'table_' + (allTrackedTables().indexOf(table) + 1);
     }
 
     table.dataset.adminColumnResizerTableId = normalizedIdentifier(tableLabel);
@@ -259,19 +230,12 @@
     return Array.from(document.querySelectorAll(TABLE_SELECTOR));
   }
 
-  function sourceTables() {
-    return allTrackedTables().filter(function(table) {
-      return table.getAttribute('aria-hidden') !== 'true' && !table.classList.contains(FIXED_HEADER_TABLE_CLASS);
-    });
-  }
-
   function stateForTable(table) {
     return tableStates.get(table) || configureTable(table);
   }
 
   function ensureManagedColgroup(table, columnCount) {
-    var fixedHeaderColgroup = table.querySelector('colgroup[data-fixed-header-colgroup]');
-    var colgroup = fixedHeaderColgroup || table.querySelector('colgroup[data-admin-column-resizer-colgroup]');
+    var colgroup = table.querySelector('colgroup[data-admin-column-resizer-colgroup]');
 
     if (!colgroup) {
       colgroup = document.createElement('colgroup');
@@ -407,7 +371,7 @@
   }
 
   function managedColumnWidth(table, index) {
-    var colgroup = table && table.querySelector('colgroup[data-admin-column-resizer-colgroup], colgroup[data-fixed-header-colgroup]');
+    var colgroup = table && table.querySelector('colgroup[data-admin-column-resizer-colgroup]');
     var col = colgroup && colgroup.children[index];
 
     return col ? parsedPixelValue(col.style.width) : 0;
@@ -447,7 +411,7 @@
   }
 
   function refreshCssStickyLeftColumns(table) {
-    if (!table || table.getAttribute('aria-hidden') === 'true' || table.classList.contains(FIXED_HEADER_TABLE_CLASS)) return;
+    if (!table || table.getAttribute('aria-hidden') === 'true') return;
 
     refreshCssStickyLeftColumnSet(table, 'sticky-left', '--sticky-left', '--sticky-width');
     refreshCssStickyLeftColumnSet(table, 'sticky-left-mobile', '--sticky-mobile-left', '--sticky-mobile-width');
@@ -491,41 +455,10 @@
     });
   }
 
-  function dispatchStickyRefresh() {
-    stickyRefreshFrame = null;
-    window.dispatchEvent(new Event('resize'));
-
-    var callbacks = stickyRefreshCallbacks;
-    stickyRefreshCallbacks = [];
-    callbacks.forEach(function(callback) {
-      callback();
-    });
-  }
-
-  function scheduleStickyRefresh(callback) {
-    if (callback) {
-      stickyRefreshCallbacks.push(callback);
-    }
-
-    if (stickyRefreshFrame) return;
-
-    stickyRefreshFrame = window.requestAnimationFrame(dispatchStickyRefresh);
-  }
-
   function sourceTableForHandle(handle) {
-    var header = handle.closest('th');
-    if (!header) return null;
-
     var table = handle.closest(TABLE_SELECTOR);
-    var columnId = headerColumnId(header);
 
-    if (table && table.getAttribute('aria-hidden') !== 'true' && !table.classList.contains(FIXED_HEADER_TABLE_CLASS)) {
-      return table;
-    }
-
-    return sourceTables().find(function(sourceTable) {
-      return columnHeader(sourceTable, columnId);
-    }) || matchingSourceTable(table) || null;
+    return table && table.getAttribute('aria-hidden') !== 'true' ? table : null;
   }
 
   function previewBoundsForTable(table, header) {
@@ -533,10 +466,8 @@
     var tableRect = table.getBoundingClientRect();
     var scrollContainer = table.closest('.sticky-table-scroll, .scroll-table, .home-table__wrapper');
     var scrollRect = scrollContainer ? scrollContainer.getBoundingClientRect() : tableRect;
-    var headerTable = header.closest(TABLE_SELECTOR);
-    var fromFixedHeader = headerTable && headerTable.classList.contains(FIXED_HEADER_TABLE_CLASS);
     var viewportBottom = viewportHeight();
-    var top = fromFixedHeader ? headerRect.top : Math.max(tableRect.top, scrollRect.top);
+    var top = Math.max(tableRect.top, scrollRect.top);
     var bottom = Math.min(viewportBottom, Math.max(tableRect.bottom, scrollRect.bottom, headerRect.bottom));
 
     top = Math.max(0, Math.min(top, viewportBottom));
@@ -551,6 +482,10 @@
     };
   }
 
+  function previewParentForTable(table) {
+    return table.closest('.main-content, .admin-main') || document.body;
+  }
+
   function updateDragPreview(preview, width) {
     if (!preview) return;
 
@@ -567,7 +502,7 @@
     element.style.top = cssPixelValue(bounds.top);
     element.style.height = cssPixelValue(bounds.height);
 
-    document.body.appendChild(element);
+    previewParentForTable(table).appendChild(element);
 
     var preview = {
       element: element
@@ -673,37 +608,6 @@
     });
   }
 
-  function refreshStickyHeaderColumn(pendingWidth, callback) {
-    var api = window.YummyGuideAdministrateStickyTableHeaders;
-
-    if (api && typeof api.refreshColumnWidth === 'function') {
-      var refreshed = api.refreshColumnWidth({
-        sourceTable: pendingWidth.sourceTable,
-        columnId: pendingWidth.columnId,
-        width: pendingWidth.width
-      });
-
-      if (refreshed) {
-        window.requestAnimationFrame(callback);
-        return;
-      }
-    }
-
-    scheduleStickyRefresh(callback);
-  }
-
-  function refreshStickyHeaderTable(sourceTable, callback) {
-    var api = window.YummyGuideAdministrateStickyTableHeaders;
-
-    if (api && typeof api.refreshTable === 'function') {
-      var refreshed = api.refreshTable(sourceTable, callback);
-
-      if (refreshed) return;
-    }
-
-    scheduleStickyRefresh(callback);
-  }
-
   function refreshStickyLeftColumns(sourceTable) {
     var api = window.YummyGuideAdministrateStickyLeftColumns;
 
@@ -767,7 +671,7 @@
       widths[pendingWidth.columnId] = preciseNumber(pendingWidth.width);
       safeWriteWidths(pendingWidth.storageKey, widths);
       refreshStickyLeftColumnsForWidth(pendingWidth);
-      refreshStickyHeaderColumn(pendingWidth, function() {
+      window.requestAnimationFrame(function() {
         stopApplyingWidth(pendingWidth.preview);
       });
     } catch (error) {
@@ -888,15 +792,12 @@
     clearColumnWidth(columnId, key);
     startApplyingWidth();
     if (sourceTable) {
-      refreshStickyHeaderTable(sourceTable, function() {
-        refreshStickyLeftColumns(sourceTable);
-        stopApplyingWidth(null);
-      });
-    } else {
-      scheduleStickyRefresh(function() {
-        stopApplyingWidth(null);
-      });
+      refreshStickyLeftColumns(sourceTable);
     }
+
+    window.requestAnimationFrame(function() {
+      stopApplyingWidth(null);
+    });
   }
 
   function stopHandleClick(event) {

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

@@ -1,4 +1,4 @@
-table.admin-column-resizer__table:not(.table-fixed-header__table) {
+table.admin-column-resizer__table {
   table-layout: auto !important;
   width: max-content !important;
   min-width: 100% !important;
@@ -56,7 +56,7 @@ table.admin-column-resizer__table:not(.table-fixed-header__table) {
 
 .admin-column-resizer__preview {
   position: fixed;
-  z-index: 10000;
+  z-index: var(--admin-column-resizer-preview-z-index, 14);
   box-sizing: border-box;
   pointer-events: none;
   background: rgba(37, 99, 235, 0.12);
@@ -67,14 +67,6 @@ table.admin-column-resizer__table:not(.table-fixed-header__table) {
   will-change: width;
 }
 
-[data-fixed-table-header] .admin-column-resizer__handle {
-  pointer-events: auto;
-}
-
-[data-fixed-table-header] .table-fixed-header__table th.admin-column-resizer__header:not(.sticky):not(.sticky-left) {
-  position: relative;
-}
-
 @media (pointer: coarse), screen and (max-width: 767px) {
   .admin-column-resizer__handle {
     right: -14px;

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

@@ -3,15 +3,30 @@
   body.admin-body > aside {
     --admin-navigation-default-width: 240px;
     align-self: flex-start;
+    background: var(--admin-page-background, #f6f7f7);
+    box-shadow:
+      calc(0px - var(--admin-layout-inline-padding, 0px)) 0 0 var(--admin-layout-inline-padding, 0px) var(--admin-page-background, #f6f7f7),
+      0 calc(0px - var(--admin-navigation-top, 1rem)) 0 var(--admin-navigation-top, 1rem) var(--admin-page-background, #f6f7f7),
+      0 var(--admin-navigation-bottom, 1rem) 0 var(--admin-navigation-bottom, 1rem) var(--admin-page-background, #f6f7f7);
     box-sizing: border-box;
+    display: flex;
     flex: 0 0 clamp(25px, var(--admin-navigation-width, var(--admin-navigation-default-width)), 250px);
-    max-height: calc(100vh - 2rem);
+    flex-direction: column;
+    bottom: var(--admin-navigation-bottom, 1rem);
+    height: calc(100vh - var(--admin-navigation-top, 1rem) - var(--admin-navigation-bottom, 1rem));
+    height: calc(100dvh - var(--admin-navigation-top, 1rem) - var(--admin-navigation-bottom, 1rem));
+    max-height: calc(100vh - var(--admin-navigation-top, 1rem) - var(--admin-navigation-bottom, 1rem));
+    max-height: calc(100dvh - var(--admin-navigation-top, 1rem) - var(--admin-navigation-bottom, 1rem));
+    min-height: 0;
     min-width: 25px;
     max-width: 250px;
-    overflow: visible;
-    position: sticky;
-    top: 1rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: fixed;
+    top: var(--admin-navigation-top, 1rem);
+    left: var(--admin-layout-inline-padding, 0);
     width: clamp(25px, var(--admin-navigation-width, var(--admin-navigation-default-width)), 250px);
+    z-index: var(--admin-navigation-z-index, 40);
   }
 
   body.admin-body > aside:not(.navigation) {
@@ -19,22 +34,28 @@
   }
 
   .app-container > .navigation {
-    max-height: calc(100vh - 3em);
-    max-height: calc(100dvh - 3em);
-    top: 1.5em;
+    top: var(--admin-navigation-top, 1.5rem);
   }
 
-  .app-container > .main-content,
-  body.admin-body > main.admin-main {
-    flex: 1 1 auto;
+  .app-container > .main-content {
+    flex: 0 0 calc(100% - var(--admin-main-left-offset, 0px));
+    margin-left: var(--admin-main-left-offset, 0);
     min-width: 0;
     position: relative;
+    inline-size: calc(100% - var(--admin-main-left-offset, 0px));
+    max-inline-size: calc(100% - var(--admin-main-left-offset, 0px));
+    width: calc(100% - var(--admin-main-left-offset, 0px));
     z-index: 1;
-    width: auto;
   }
 
-  body.admin-body > main.main-content {
-    width: auto;
+  body.admin-body > main.admin-main {
+    box-sizing: border-box;
+    margin-left: var(--admin-sticky-page-header-left, var(--admin-main-left-offset, 0px));
+    min-width: 0;
+    position: relative;
+    max-inline-size: calc(100% - var(--admin-sticky-page-header-left, var(--admin-main-left-offset, 0px)) - var(--admin-layout-inline-padding, 0px));
+    width: calc(100% - var(--admin-sticky-page-header-left, var(--admin-main-left-offset, 0px)) - var(--admin-layout-inline-padding, 0px));
+    z-index: 1;
   }
 
   .admin-navigation-resize-handle {
@@ -68,12 +89,21 @@
   }
 
   .admin-navigation-scroll-area {
+    background: inherit;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
     max-height: inherit;
+    min-height: 0;
     overflow-x: hidden;
     overflow-y: auto;
     overscroll-behavior: contain;
   }
 
+  .admin-navigation-scroll-area > * {
+    flex: 0 0 auto;
+  }
+
   .admin-navigation-scroll-area .menubar,
   .admin-navigation-scroll-area .menubar a,
   .admin-navigation-scroll-area .menubar__group-label,
@@ -108,12 +138,15 @@
   }
 
   .admin-navigation-scroll-area .button_to {
+    flex: 0 0 auto;
     margin: 0;
   }
 
+  .admin-navigation-scroll-area .loginas,
   .admin-navigation-scroll-area .btn_public,
   .admin-navigation-scroll-area .btn_logout {
     box-sizing: border-box;
+    flex: 0 0 auto;
     margin-left: 0;
     margin-right: 0;
     min-width: 0;