yummy-guide-generic-administrate 0.2.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 473c94cf71c0941c5c1126338391f17de4ddb8f6f357a14db879008575fd5902
-  data.tar.gz: 5a4fb4e5a0ba633c27ca3ccca0150d91b397219b069f8db9a3e9d4b9287557f2
+  metadata.gz: 12a0170a3f475fc86fa867a2dcdbbb558cce85d0b1024687cbcc84a4cdbc5501
+  data.tar.gz: bb0c145f4aaea534a02bff5f173e7917172193b6cca10f9a865cd4b2ebd6eda8
 SHA512:
-  metadata.gz: b8e09eb75afdb7f9957973afb70a8cb44d2bb30c3d0c434df7f982b6e464086d877bf2e5f3089192118f04aba384f6311658c9cf45735b24f4418207803dcfd9
-  data.tar.gz: '0810e4924d10070acc6f51e095c5a72b0b8b7ca73fb3c77ca23617e0d8598813e65f3ad4204b3b12efdade3425713f8801bf7ac6c1458dbe8ba30fe38944ab19'
+  metadata.gz: 35cec1573335c70b7779deb4cc9c492ff045a3acf785c5fac447789b1a80c6e7dac5b61423978a2a9751c7df6fb4c880aa5560d14652cd06fe6b8addec743530
+  data.tar.gz: 391aaee40d54f4f9ab58513d53bedfa9cdffd3a02f882ab679a690f394e9ea289927b34eb86b10da444348ddf8e34976c6482fa328810934240242a7dc091e76

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/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;
 }

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.0"
   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.0
 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