yummy-guide-generic-administrate 0.2.1 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 473c94cf71c0941c5c1126338391f17de4ddb8f6f357a14db879008575fd5902
-  data.tar.gz: 5a4fb4e5a0ba633c27ca3ccca0150d91b397219b069f8db9a3e9d4b9287557f2
+  metadata.gz: b442ee0d24ba8d34271193cdbc8c2da175d5b91b3a2b847706ce5f5c316eff66
+  data.tar.gz: cc6d60ef4a0b80f2561638de33ce7abef3908ba1064c77c2c94e628d47dec970
 SHA512:
-  metadata.gz: b8e09eb75afdb7f9957973afb70a8cb44d2bb30c3d0c434df7f982b6e464086d877bf2e5f3089192118f04aba384f6311658c9cf45735b24f4418207803dcfd9
-  data.tar.gz: '0810e4924d10070acc6f51e095c5a72b0b8b7ca73fb3c77ca23617e0d8598813e65f3ad4204b3b12efdade3425713f8801bf7ac6c1458dbe8ba30fe38944ab19'
+  metadata.gz: ad2200cef92ab686ffb9fabee36c87672ff48dc1a507406995057effa3afff4bad625eb7fbaad8011ddf4ffa8eb93b5b95af2455436f131fabbdc18a8ff55873
+  data.tar.gz: 2502a4c2723a4d8fc25ca7d1ba5fd10aff5a2002dbfff58f5c698d042b21e21ebd0597c863463ec1b086934b3450e56088e718d5fddae8a8b1a861bd02bf08c5

data/README.md

@@ -46,6 +46,7 @@ bundle install
   - fixed table header partial
   - filter form partial
   - `clipboards.js`
+  - `fixed_submit_actions.js`
   - `filter_form.js`
   - `sticky_left_columns.js`
   - `sticky_table_headers.js`
@@ -259,6 +260,7 @@ end
 
 ```js
 //= require yummy_guide_administrate/clipboards
+//= require yummy_guide_administrate/fixed_submit_actions
 //= require yummy_guide_administrate/filter_form
 //= require yummy_guide_administrate/sticky_left_columns
 //= require yummy_guide_administrate/sticky_table_headers
@@ -268,6 +270,56 @@ end
  *= require yummy_guide_administrate/components
 ```
 
+### 固定更新ボタン
+
+管理画面の `new` / `edit` 系フォームでは、submit セクションを画面下に固定表示できます。
+この機能は `fixed_submit_actions.js` と `components.css` に含まれる style によって動作します。
+
+#### 固定対象を明示指定する場合
+
+固定したい submit セクションに `data-fixed-submit-actions="true"` を付けます。
+
+```erb
+<div class="form-actions" data-fixed-submit-actions="true">
+  <%= f.submit %>
+</div>
+```
+
+この指定がある場合、gem はその submit セクションを最優先で固定対象にします。
+1 ページに複数フォームがあっても、明示指定した submit セクションだけが固定表示されます。
+
+#### 設定しなかった場合の挙動
+
+`data-fixed-submit-actions="true"` が 1 件もない場合、gem は admin の `new` / `edit`
+ページで submit セクションを自動選択します。
+
+- 各フォーム内の `.form-actions` / `.form_submit` を候補にする
+- `form-actions--top` が付いた上部 submit は除外する
+- `data-fixed-submit-exclude="true"` が付いた submit セクションも除外する
+- 各フォームでは最後の submit セクションだけを候補にする
+- 複数フォームがあるページでは、現在表示中のフォームに対応する submit を固定する
+
+上部 submit と下部 submit の両方があるフォームでは、下部 submit が自動で選ばれます。
+
+#### fixed 帯に表示されるボタン
+
+fixed 帯には submit セクションのクローンを表示します。
+
+- 元のフォーム内ボタンの見た目は変更しない
+- fixed 帯にだけ大きいボタンサイズを適用する
+- 1 つの submit セクションに複数 submit ボタンがある場合は全部表示する
+
+#### 自動選択から除外したい場合
+
+自動選択の候補から外したい submit セクションには、`data-fixed-submit-exclude="true"`
+を付けます。
+
+```erb
+<div class="form-actions" data-fixed-submit-exclude="true">
+  <%= f.submit "Preview" %>
+</div>
+```
+
 ### Custom field
 
 dashboard から共通 field を利用できます。

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

@@ -0,0 +1,324 @@
+(function() {
+  var ACTION_SELECTOR = ".form-actions, .form_submit";
+  var EXPLICIT_ACTION_SELECTOR = '[data-fixed-submit-actions="true"]';
+  var SUBMIT_SELECTOR = 'input[type="submit"], button[type="submit"], button.async-form__submit';
+  var scheduled = false;
+  var bar = null;
+  var barActions = null;
+  var observedAction = null;
+  var observer = null;
+
+  function toArray(nodeList) {
+    return Array.prototype.slice.call(nodeList || []);
+  }
+
+  function matchesSelector(element, selector) {
+    if (!element || element.nodeType !== 1) return false;
+
+    var proto = Element.prototype;
+    var matcher = proto.matches || proto.msMatchesSelector || proto.webkitMatchesSelector;
+    return matcher ? matcher.call(element, selector) : false;
+  }
+
+  function closest(element, selector) {
+    var current = element;
+
+    while (current && current.nodeType === 1) {
+      if (matchesSelector(current, selector)) return current;
+      current = current.parentElement;
+    }
+
+    return null;
+  }
+
+  function isVisible(element) {
+    if (!element) return false;
+
+    var styles = window.getComputedStyle(element);
+    return styles.display !== "none" &&
+      styles.visibility !== "hidden" &&
+      element.getClientRects().length > 0;
+  }
+
+  function containsSubmitControl(element) {
+    return !!element && !!element.querySelector(SUBMIT_SELECTOR);
+  }
+
+  function isAutoTargetPage() {
+    var path = window.location.pathname || "";
+
+    return path.indexOf("/admin/") === 0 &&
+      (path.indexOf("/new") !== -1 || path.indexOf("/edit") !== -1);
+  }
+
+  function isIgnoredAction(action) {
+    return action.classList.contains("form-actions--top") ||
+      action.getAttribute("data-fixed-submit-exclude") === "true";
+  }
+
+  function explicitInstance() {
+    var action = toArray(document.querySelectorAll(".main-content " + EXPLICIT_ACTION_SELECTOR)).find(function(candidate) {
+      return containsSubmitControl(candidate) && !isIgnoredAction(candidate);
+    });
+    var form = closest(action, "form");
+
+    if (!action || !form || !containsSubmitControl(action) || isIgnoredAction(action)) {
+      return null;
+    }
+
+    return {
+      form: form,
+      action: action
+    };
+  }
+
+  function actionCandidates(form) {
+    return toArray(form.querySelectorAll(ACTION_SELECTOR)).filter(function(action) {
+      return closest(action, "form") === form &&
+        containsSubmitControl(action) &&
+        !isIgnoredAction(action);
+    });
+  }
+
+  function autoInstances() {
+    return toArray(document.querySelectorAll(".main-content form")).map(function(form) {
+      var candidates = actionCandidates(form);
+      var action = candidates[candidates.length - 1];
+
+      if (!action) return null;
+
+      return {
+        form: form,
+        action: action
+      };
+    }).filter(Boolean);
+  }
+
+  function anchorPosition() {
+    var header = document.querySelector(".main-content__header");
+    var headerBottom = header && isVisible(header) ? header.getBoundingClientRect().bottom : 0;
+    var viewportAnchor = Math.min(window.innerHeight * 0.35, 320);
+
+    return Math.min(
+      Math.max(headerBottom + 24, viewportAnchor),
+      Math.max(window.innerHeight - 48, 0)
+    );
+  }
+
+  function visibleInstances(instances) {
+    return instances.map(function(instance) {
+      instance.formRect = instance.form.getBoundingClientRect();
+      instance.actionRect = instance.action.getBoundingClientRect();
+      return instance;
+    }).filter(function(instance) {
+      return isVisible(instance.form) &&
+        isVisible(instance.action) &&
+        instance.formRect.bottom > 0 &&
+        instance.formRect.top < window.innerHeight;
+    });
+  }
+
+  function selectAutoInstance(instances) {
+    if (!instances.length) return null;
+
+    var anchorY = anchorPosition();
+    var containing = instances.filter(function(instance) {
+      return instance.formRect.top <= anchorY && instance.formRect.bottom > anchorY;
+    });
+
+    if (containing.length) {
+      return containing.sort(function(left, right) {
+        return right.formRect.top - left.formRect.top;
+      })[0];
+    }
+
+    var below = instances.filter(function(instance) {
+      return instance.formRect.top > anchorY;
+    });
+
+    if (below.length) {
+      return below.sort(function(left, right) {
+        return left.formRect.top - right.formRect.top;
+      })[0];
+    }
+
+    return instances.sort(function(left, right) {
+      return right.formRect.bottom - left.formRect.bottom;
+    })[0];
+  }
+
+  function currentInstance() {
+    var explicit = explicitInstance();
+    if (explicit) return explicit;
+
+    if (!isAutoTargetPage()) return null;
+
+    return selectAutoInstance(visibleInstances(autoInstances()));
+  }
+
+  function ensureBar() {
+    if (bar) return;
+
+    bar = document.createElement("div");
+    bar.className = "admin-fixed-submit-bar";
+    bar.hidden = true;
+
+    barActions = document.createElement("div");
+    barActions.className = "admin-fixed-submit-bar__actions";
+    bar.appendChild(barActions);
+
+    document.body.appendChild(bar);
+  }
+
+  function hideBar() {
+    ensureBar();
+    bar.hidden = true;
+    bar.style.removeProperty("--fixed-submit-left");
+    bar.style.removeProperty("--fixed-submit-width");
+    barActions.innerHTML = "";
+  }
+
+  function stripIds(node) {
+    if (!node || node.nodeType !== 1) return;
+
+    node.removeAttribute("id");
+    toArray(node.querySelectorAll("[id]")).forEach(function(child) {
+      child.removeAttribute("id");
+    });
+  }
+
+  function syncCloneControls(clone, sourceAction) {
+    var sourceControls = toArray(sourceAction.querySelectorAll(SUBMIT_SELECTOR));
+    var cloneControls = toArray(clone.querySelectorAll(SUBMIT_SELECTOR));
+
+    cloneControls.forEach(function(cloneControl, index) {
+      var sourceControl = sourceControls[index];
+
+      if (!sourceControl) {
+        cloneControl.remove();
+        return;
+      }
+
+      if (cloneControl.tagName === "INPUT") {
+        cloneControl.type = "button";
+      } else if (cloneControl.tagName === "BUTTON") {
+        cloneControl.type = "button";
+      }
+
+      cloneControl.disabled = !!sourceControl.disabled;
+
+      cloneControl.addEventListener("click", function(event) {
+        event.preventDefault();
+        if (sourceControl.disabled) return;
+        sourceControl.click();
+      });
+    });
+  }
+
+  function renderClone(instance) {
+    ensureBar();
+    barActions.innerHTML = "";
+
+    var clone = instance.action.cloneNode(true);
+    stripIds(clone);
+    clone.removeAttribute("data-fixed-submit-actions");
+    clone.classList.add("admin-fixed-submit-bar__action-clone");
+    syncCloneControls(clone, instance.action);
+
+    barActions.appendChild(clone);
+  }
+
+  function fixedFrame(instance) {
+    var mainContent = closest(instance.form, ".main-content") || document.querySelector(".main-content");
+    var section = closest(instance.action, ".main-content__body") || closest(instance.form, ".main-content__body") || instance.form;
+    var viewportMargin = window.innerWidth <= 767 ? 8 : 16;
+    var mainRect = mainContent ? mainContent.getBoundingClientRect() : { left: 0, right: window.innerWidth };
+    var sectionRect = section.getBoundingClientRect();
+    var left = Math.max(mainRect.left, sectionRect.left, viewportMargin);
+    var right = Math.min(mainRect.right, sectionRect.right, window.innerWidth - viewportMargin);
+
+    return {
+      left: Math.max(left, viewportMargin),
+      width: Math.max(right - left, 0)
+    };
+  }
+
+  function shouldPin(instance) {
+    var actionRect = instance.action.getBoundingClientRect();
+    var revealThreshold = Math.min(96, Math.max(48, actionRect.height));
+
+    return isVisible(instance.form) &&
+      isVisible(instance.action) &&
+      instance.form.getBoundingClientRect().bottom > 0 &&
+      instance.form.getBoundingClientRect().top < window.innerHeight &&
+      actionRect.top > window.innerHeight - revealThreshold;
+  }
+
+  function observeAction(action) {
+    if (observedAction === action) return;
+
+    if (observer) observer.disconnect();
+
+    observedAction = action;
+    if (!action) return;
+
+    observer = new MutationObserver(function() {
+      scheduleSync();
+    });
+
+    observer.observe(action, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      characterData: true
+    });
+  }
+
+  function sync() {
+    var instance = currentInstance();
+
+    if (!instance) {
+      observeAction(null);
+      hideBar();
+      return;
+    }
+
+    observeAction(instance.action);
+
+    if (!shouldPin(instance)) {
+      hideBar();
+      return;
+    }
+
+    var frame = fixedFrame(instance);
+    if (frame.width <= 0) {
+      hideBar();
+      return;
+    }
+
+    renderClone(instance);
+    bar.style.setProperty("--fixed-submit-left", frame.left + "px");
+    bar.style.setProperty("--fixed-submit-width", frame.width + "px");
+    bar.hidden = false;
+  }
+
+  function scheduleSync() {
+    if (scheduled) return;
+
+    scheduled = true;
+    (window.requestAnimationFrame || window.setTimeout)(function() {
+      scheduled = false;
+      sync();
+    }, 16);
+  }
+
+  function initialize() {
+    ensureBar();
+    scheduleSync();
+  }
+
+  document.addEventListener("DOMContentLoaded", initialize);
+  window.addEventListener("load", scheduleSync);
+  window.addEventListener("scroll", scheduleSync, { passive: true });
+  window.addEventListener("resize", scheduleSync);
+})();

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

@@ -1,13 +1,13 @@
 (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 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 +16,7 @@
   }
 
   function cssPixelValue(value) {
-    return preciseNumber(value) + "px";
+    return preciseNumber(value) + 'px';
   }
 
   function measuredWidth(element) {
@@ -35,7 +35,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 +55,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 +80,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 +98,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 +139,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 +148,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 +190,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 +201,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 +231,60 @@
   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;
+
     fixedScroll.scrollLeft = left;
   }
 
   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 +295,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 +312,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 +321,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 +330,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 +343,7 @@
     return widths;
   }
 
-  function clearFixedHeaderState(slot, sourceTable) {
+  function clearFixedHeaderState(slot, scroll, sourceTable) {
     if (slot) {
       slot.hidden = true;
     }
@@ -335,13 +351,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 +386,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 +398,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 +412,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 +423,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 +460,8 @@
     var widths = measuredColumnWidths(sourceTable, fixedTable, {
       allowFixedTableFallback: hasDataRow
     });
-
     if (!widths.some(Boolean)) {
-      clearFixedHeaderState(slot, sourceTable);
+      clearFixedHeaderState(slot, scroll, sourceTable);
       return;
     }
 
@@ -449,15 +472,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;
   }
 
@@ -483,7 +511,7 @@
   function observeFixedHeaderScroll(scroll) {
     if (observedScrolls.has(scroll)) return;
 
-    scroll.addEventListener("scroll", function() {
+    scroll.addEventListener('scroll', function() {
       var state = scrollSyncStates.get(scroll) || {};
       state.scrollLeft = scroll.scrollLeft;
 
@@ -492,7 +520,7 @@
       state.frame = window.requestAnimationFrame(function() {
         var slot = ensureFixedHeaderSlot(scroll);
         state.frame = null;
-        syncFixedHeaderScroll(scroll, slot.querySelector(".table-fixed-header__scroll"), state.scrollLeft);
+        syncFixedHeaderScroll(scroll, slot.querySelector('.table-fixed-header__scroll'), state.scrollLeft);
       });
 
       scrollSyncStates.set(scroll, state);
@@ -545,14 +573,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/_fixed_submit_actions.scss

@@ -0,0 +1,45 @@
+.admin-fixed-submit-bar {
+  position: fixed;
+  left: var(--fixed-submit-left, 0);
+  width: var(--fixed-submit-width, 100%);
+  bottom: 0;
+  z-index: 20;
+  padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
+  background: #fff;
+  border-top: 1px solid #d9dde8;
+  box-sizing: border-box;
+
+  @media screen and (max-width: 767px) {
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
+  }
+}
+
+.admin-fixed-submit-bar[hidden] {
+  display: none !important;
+}
+
+.admin-fixed-submit-bar__actions,
+.admin-fixed-submit-bar__action-clone {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.admin-fixed-submit-bar__action-clone,
+.admin-fixed-submit-bar__action-clone.form-actions,
+.admin-fixed-submit-bar__action-clone.form_submit {
+  margin: 0;
+}
+
+.admin-fixed-submit-bar__actions input[type="submit"],
+.admin-fixed-submit-bar__actions input[type="button"],
+.admin-fixed-submit-bar__actions button[type="submit"],
+.admin-fixed-submit-bar__actions button[type="button"],
+.admin-fixed-submit-bar__actions .async-form__submit {
+  min-width: 20rem;
+  min-height: 3.5rem;
+  font-size: 1.5em;
+  font-weight: 600;
+}

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

@@ -1,3 +1,5 @@
+@import "fixed_submit_actions";
+
 .scroll-table {
   overflow-x: auto;
 }
@@ -5,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;
 }
 
@@ -169,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);
 }
@@ -189,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;
@@ -203,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;
@@ -221,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;
@@ -233,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);
 }
@@ -251,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;
 }
 
@@ -292,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;
 }
 
@@ -384,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/engine.rb

@@ -9,6 +9,7 @@ module YummyGuide
         app.config.assets.precompile += %w[
           yummy_guide_administrate/components.css
           yummy_guide_administrate/clipboards.js
+          yummy_guide_administrate/fixed_submit_actions.js
           yummy_guide_administrate/filter_form.js
           yummy_guide_administrate/sticky_left_columns.js
           yummy_guide_administrate/sticky_table_headers.js

data/lib/yummy_guide/administrate/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: yummy-guide-generic-administrate
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.3.1
 platform: ruby
 authors:
 - akatsuki-kk
@@ -92,8 +92,10 @@ files:
 - app/assets/images/yummy_guide_administrate/icon-copy.svg
 - app/assets/javascripts/yummy_guide_administrate/clipboards.js
 - app/assets/javascripts/yummy_guide_administrate/filter_form.js
+- app/assets/javascripts/yummy_guide_administrate/fixed_submit_actions.js
 - app/assets/javascripts/yummy_guide_administrate/sticky_left_columns.js
 - app/assets/javascripts/yummy_guide_administrate/sticky_table_headers.js
+- app/assets/stylesheets/yummy_guide_administrate/_fixed_submit_actions.scss
 - app/assets/stylesheets/yummy_guide_administrate/components.scss
 - app/controllers/concerns/yummy_guide/administrate/datetime_filter_parameters.rb
 - app/controllers/concerns/yummy_guide/administrate/default_sorting.rb