yummy-guide-generic-administrate 0.3.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b442ee0d24ba8d34271193cdbc8c2da175d5b91b3a2b847706ce5f5c316eff66
-  data.tar.gz: cc6d60ef4a0b80f2561638de33ce7abef3908ba1064c77c2c94e628d47dec970
+  metadata.gz: 7a900e85ac77c86b162da45de406b17c80f1aa18340da95f6d02ac45ca8ce259
+  data.tar.gz: 80d5fca1e0d8248f26906395613ff1974b0704d306cece30985f2ebf954a7b67
 SHA512:
-  metadata.gz: ad2200cef92ab686ffb9fabee36c87672ff48dc1a507406995057effa3afff4bad625eb7fbaad8011ddf4ffa8eb93b5b95af2455436f131fabbdc18a8ff55873
-  data.tar.gz: 2502a4c2723a4d8fc25ca7d1ba5fd10aff5a2002dbfff58f5c698d042b21e21ebd0597c863463ec1b086934b3450e56088e718d5fddae8a8b1a861bd02bf08c5
+  metadata.gz: 105bcc475d2ac342e51ff9765dda3ca8e3709949a1b72d471182ec90c6a3df1fe17bc014a09bce4ef27f4976e0dddc41d2457ea4b2b8424345a5cb4a24c69cfe
+  data.tar.gz: afca6ea454ec4ddb804234954df68ab30790a58bc109a8555afaab9d012fd480aed5c3cff3d749cd5ca001851d10a0d788f82180821877f60be0ef83fcd1d155

data/README.md

@@ -151,7 +151,7 @@ gem には専用 partial があります。
   <%= render "yummy_guide/administrate/administrate/application/fixed_table_header" %>
 </header>
 
-<section class="main-content__body">
+<section class="main-content__body main-content__body--flush">
   <%= render "yummy_guide/administrate/administrate/application/collection",
              collection_presenter: collection_presenter,
              page: page,
@@ -166,11 +166,12 @@ gem には専用 partial があります。
 `fixed_table_header` partial 自体は以下の 1 行です。
 
 ```erb
-<div data-fixed-table-header hidden></div>
+<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 と揃います。
 
 #### 3. 自前の table partial を使う場合
 

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

@@ -3,6 +3,7 @@
   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) {
@@ -232,10 +233,61 @@
     if (!scroll || !fixedScroll) return;
 
     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,
@@ -508,35 +560,57 @@
     });
   }
 
-  function observeFixedHeaderScroll(scroll) {
+  function observeSourceScroll(scroll) {
     if (observedScrolls.has(scroll)) return;
 
     scroll.addEventListener('scroll', function() {
-      var state = scrollSyncStates.get(scroll) || {};
+      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) {

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

@@ -1,5 +1,79 @@
 @import "fixed_submit_actions";
 
+@media screen and (min-width: 768px) {
+  .app-container {
+    --app-container-block-padding: 1.5em;
+    align-items: flex-start;
+    gap: 1.5em;
+    min-height: 100vh;
+    min-height: 100dvh;
+    height: auto;
+    overflow: visible;
+    box-sizing: border-box;
+    margin-left: 0;
+    margin-right: 0;
+    max-width: 100%;
+    padding: var(--app-container-block-padding) 1.5em;
+  }
+
+  .navigation {
+    display: flex;
+    flex: 0 0 240px;
+    flex-direction: column;
+    width: 240px;
+    max-width: 240px;
+    height: auto;
+    max-height: calc(100vh - 3em);
+    max-height: calc(100dvh - 3em);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    position: sticky;
+    top: 1.5em;
+    align-self: flex-start;
+  }
+
+  .navigation .navigation__link__secondary {
+    margin-left: 0;
+  }
+
+  .main-content {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: calc(100vh - (var(--app-container-block-padding) + var(--app-container-block-padding)));
+    min-height: calc(100dvh - (var(--app-container-block-padding) + var(--app-container-block-padding)));
+    height: auto;
+    overflow: visible;
+    margin-bottom: 0;
+    padding-bottom: 1rem;
+  }
+
+  .main-content__header--sticky-table-layout {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    flex-wrap: wrap;
+    overflow-x: hidden;
+    background: #fff;
+  }
+
+  .main-content__body--flush {
+    padding: 0 0.5em 1rem;
+  }
+
+  .table-fixed-header-slot[data-fixed-header-inline="true"] {
+    flex-basis: calc(100% + 4rem - 1em);
+    flex-shrink: 0;
+    margin: 0 calc(-2rem + 0.5em) -1rem;
+    overflow-x: hidden;
+    background: #fff;
+  }
+
+  .table-fixed-header-slot[data-fixed-header-inline="true"] .home-table--fixed-header {
+    min-width: 100%;
+    margin: 0;
+  }
+}
+
 .scroll-table {
   overflow-x: auto;
 }
@@ -419,6 +493,7 @@ td.actions-column .sticky__item,
   word-break: break-word;
 }
 
+
 .home-table--fixed-header th.sticky {
   position: sticky;
   right: 0;

data/lib/yummy_guide/administrate/version.rb

@@ -2,6 +2,6 @@
 
 module YummyGuide
   module Administrate
-    VERSION = "0.3.1"
+    VERSION = "0.4.0"
   end
 end

metadata

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