yummy-guide-generic-administrate 0.8.3 → 0.8.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a6e8b69f0347b22f47b72cf96c4f99c0c398d58a8f118809735f7bafaee65e20
-  data.tar.gz: 37decc40a9672713935cd76fdea50ff20992e6e35298a8096c1ab7625209060b
+  metadata.gz: 3940f84fd25e7fe60419f17273656e50af22465caf4bbfa29e1ac209d03b5bd4
+  data.tar.gz: 3bc3455f747754d483ee5329c5d4991289eaac0630961a808558f551e7f9c819
 SHA512:
-  metadata.gz: b3d6976869de3d91b3affb029c77195053e541513f5f8ebbe4279543dfea132cf2536ec0880d555e2112ea63178ac61140eea4bf43fb3b365f58951e9335aae9
-  data.tar.gz: 81db24d807a65056e6b9ce35c5f5240d30c370b11def34fb2ae6664c7404e850458cd9a6119de8602faf259fcbfe0d42872da16373a0154cdc81c28b0c5da496
+  metadata.gz: b9843e5fdc03dd2e08330368cb267ac888fa1d5327bad40550b44a0960881d6d4cd87b77a0e2cad10f70d3d04f503d88b39192f20f82e4e3adc04910e5af3a7e
+  data.tar.gz: ba1be8f0226de1a9bd37650827529ea7b5c59d2d680f4d31066f86246fcb3085a87b9a5c1b6c91ccce5d7ffd0360e98d5f2bc281a07426f07987edef714a1503

data/README.md

@@ -43,6 +43,8 @@ bundle install
   - datetime フィルターや checkbox group の組み立てを補助する helper
 - `YummyGuide::Administrate::FilterControlsHelper`
   - dashboard の Field 型フィルター定義から Filter ボタンとモーダルフォームを描画する helper
+- `YummyGuide::Administrate::TooltipHelper`
+  - 管理画面内で補足説明 tooltip を描画する helper
 - `YummyGuide::Administrate::DatetimeInputHelper`
   - 管理画面フォーム用の date + time 入力 helper
 - `YummyGuide::Administrate::NumberInputHelper`
@@ -58,6 +60,7 @@ bundle install
   - `filter_form.js`
   - `sticky_left_columns.js`
   - `sticky_table_headers.js`
+  - `tooltips.js`
   - `components.css`
 - 共通 field
   - `YummyGuide::Administrate::Fields::JsonPrettyField`
@@ -109,12 +112,15 @@ class Admin::ApplicationController < Administrate::ApplicationController
   helper YummyGuide::Administrate::FilterControlsHelper
   helper YummyGuide::Administrate::FilterFormHelper
   helper YummyGuide::Administrate::NumberInputHelper
+  helper YummyGuide::Administrate::TooltipHelper
 end
 ```
 
 `NumberInputHelper` は `Administrate::ApplicationController` の view helper として
 自動適用されます。`Administrate::ApplicationController` を継承しない独自 admin
 controller で同じ挙動が必要な場合だけ、上記のように明示的に読み込んでください。
+`TooltipHelper` も `Administrate::ApplicationController` の view helper として
+自動適用されます。
 
 ### Collection partial
 
@@ -461,6 +467,30 @@ Admin/Administrate 画面では、`number_field` / `number_field_tag` を
 `range_field` / `range_field_tag` は対象外で、従来どおり `type="range"` として描画
 されます。raw HTML の `<input type="number">` は helper を通らないため対象外です。
 
+### Tooltip helper
+
+ラベルやボタンの横に補足説明用の tooltip アイコンを表示する場合は、
+`admin_tooltip` を使います。PC では hover / focus 時に表示し、モバイルではタップで
+表示・非表示を切り替えます。
+
+```erb
+<%= f.label :published_at %>
+<%= admin_tooltip("公開日時を過ぎると公開ページに表示されます。") %>
+```
+
+説明本文に改行などの HTML を含める場合は block を渡します。`text` 引数と block を
+同時に指定した場合は block が優先されます。
+
+```erb
+<%= admin_tooltip do %>
+  Add - 調整レコードを追加表示するようにします。<br>
+  Only - 調整レコードのみを表示します。
+<% end %>
+```
+
+block を使わない場合、tooltip 本文はテキストとして扱われ、HTML は描画しません。
+見た目と表示制御には `components.css` と `tooltips.js` の読み込みが必要です。
+
 ### Asset の読み込み
 
 この engine の asset はホストアプリ側で明示的に読み込んでください。
@@ -473,6 +503,7 @@ Admin/Administrate 画面では、`number_field` / `number_field_tag` を
 //= 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
 ```
 
 ```scss

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

@@ -71,6 +71,11 @@
     return preciseNumber(value) + 'px';
   }
 
+  function parsedPixelValue(value) {
+    var parsedValue = parseFloat(value || '0');
+    return Number.isNaN(parsedValue) ? 0 : preciseNumber(parsedValue);
+  }
+
   function measuredWidth(element) {
     if (!element) return 0;
 
@@ -307,6 +312,7 @@
       indexByColumnId: indexByColumnId
     };
     tableStates.set(table, state);
+    refreshCssStickyLeftColumns(table);
 
     return state;
   }
@@ -375,6 +381,7 @@
     table.style.setProperty(columnWidthVariable(index), widthValue);
     setAdjustedColumn(table, index, true);
     applyColgroupWidth(table, state.columnCount, index, widthValue);
+    refreshCssStickyLeftColumns(table);
   }
 
   function clearTableColumnWidth(table, columnId) {
@@ -385,6 +392,65 @@
     table.style.removeProperty(columnWidthVariable(index));
     setAdjustedColumn(table, index, false);
     clearColgroupWidth(table, state.columnCount, index);
+    refreshCssStickyLeftColumns(table);
+  }
+
+  function stickyColumnIndexes(table, className) {
+    var row = table && table.querySelector('thead tr');
+    if (!row) return [];
+
+    return directCells(row).map(function(cell, index) {
+      return cell.classList && cell.classList.contains(className) ? index : null;
+    }).filter(function(index) {
+      return index !== null;
+    });
+  }
+
+  function managedColumnWidth(table, index) {
+    var colgroup = table && table.querySelector('colgroup[data-admin-column-resizer-colgroup], colgroup[data-fixed-header-colgroup]');
+    var col = colgroup && colgroup.children[index];
+
+    return col ? parsedPixelValue(col.style.width) : 0;
+  }
+
+  function stickyColumnWidth(table, header, index, widthVariable) {
+    return measuredWidth(header) ||
+      managedColumnWidth(table, index) ||
+      parsedPixelValue(header && header.style && header.style.getPropertyValue(widthVariable));
+  }
+
+  function applyStickyColumnPosition(table, index, leftVariable, left, widthVariable, width) {
+    Array.from(table.querySelectorAll('thead tr, tbody tr, tfoot tr')).forEach(function(row) {
+      var cell = directCells(row)[index];
+      if (!cell) return;
+
+      cell.style.setProperty(leftVariable, cssPixelValue(left));
+      if (width) {
+        cell.style.setProperty(widthVariable, cssPixelValue(width));
+      }
+    });
+  }
+
+  function refreshCssStickyLeftColumnSet(table, className, leftVariable, widthVariable) {
+    var headerRow = table && table.querySelector('thead tr');
+    if (!headerRow) return;
+
+    var headerCells = directCells(headerRow);
+    var left = 0;
+
+    stickyColumnIndexes(table, className).forEach(function(index) {
+      var width = stickyColumnWidth(table, headerCells[index], index, widthVariable);
+
+      applyStickyColumnPosition(table, index, leftVariable, left, widthVariable, width);
+      left += width;
+    });
+  }
+
+  function refreshCssStickyLeftColumns(table) {
+    if (!table || table.getAttribute('aria-hidden') === 'true' || table.classList.contains(FIXED_HEADER_TABLE_CLASS)) return;
+
+    refreshCssStickyLeftColumnSet(table, 'sticky-left', '--sticky-left', '--sticky-width');
+    refreshCssStickyLeftColumnSet(table, 'sticky-left-mobile', '--sticky-mobile-left', '--sticky-mobile-width');
   }
 
   function applyColumnWidth(columnId, width, key) {

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

@@ -0,0 +1,214 @@
+(function() {
+  var TRIGGER_SELECTOR = "[data-admin-tooltip-trigger='true']";
+  var TOOLTIP_ID = "admin-tooltip";
+  var TOOLTIP_CLASS = "admin-tooltip";
+  var VISIBLE_CLASS = "admin-tooltip--visible";
+  var MOBILE_MEDIA_QUERY = "(max-width: 767px)";
+  var EDGE_GAP = 8;
+  var OFFSET = 8;
+  var activeTrigger = null;
+  var hoveredTrigger = null;
+  var focusedTrigger = null;
+  var tooltipElement = null;
+
+  function isMobile() {
+    return window.matchMedia && window.matchMedia(MOBILE_MEDIA_QUERY).matches;
+  }
+
+  function closestTrigger(target) {
+    if (!target || !target.closest) return null;
+
+    return target.closest(TRIGGER_SELECTOR);
+  }
+
+  function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+  }
+
+  function getTooltipElement() {
+    if (tooltipElement) return tooltipElement;
+
+    tooltipElement = document.createElement("div");
+    tooltipElement.id = TOOLTIP_ID;
+    tooltipElement.className = TOOLTIP_CLASS;
+    tooltipElement.setAttribute("role", "tooltip");
+    document.body.appendChild(tooltipElement);
+
+    return tooltipElement;
+  }
+
+  function tooltipContent(trigger) {
+    var contentId = trigger.getAttribute("data-admin-tooltip-content-id");
+    var template = contentId ? document.getElementById(contentId) : null;
+    if (template) {
+      return {
+        html: template.innerHTML,
+        text: ""
+      };
+    }
+
+    var text = trigger.getAttribute("data-admin-tooltip-text") || "";
+    return {
+      html: "",
+      text: text.trim() ? text : ""
+    };
+  }
+
+  function setTriggerState(trigger, expanded) {
+    if (!trigger) return;
+
+    trigger.setAttribute("aria-expanded", expanded ? "true" : "false");
+
+    if (expanded) {
+      trigger.setAttribute("aria-describedby", TOOLTIP_ID);
+    } else {
+      trigger.removeAttribute("aria-describedby");
+    }
+  }
+
+  function positionTooltip() {
+    if (!activeTrigger || !tooltipElement || !tooltipElement.classList.contains(VISIBLE_CLASS)) return;
+
+    var targetRect = activeTrigger.getBoundingClientRect();
+    tooltipElement.style.left = "0px";
+    tooltipElement.style.top = "0px";
+
+    var tooltipRect = tooltipElement.getBoundingClientRect();
+    var viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+    var viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+    var top = targetRect.top - tooltipRect.height - OFFSET;
+    var placement = "top";
+
+    if (top < EDGE_GAP) {
+      top = targetRect.bottom + OFFSET;
+      placement = "bottom";
+    }
+
+    top = clamp(top, EDGE_GAP, Math.max(EDGE_GAP, viewportHeight - tooltipRect.height - EDGE_GAP));
+
+    var left = targetRect.left + (targetRect.width / 2) - (tooltipRect.width / 2);
+    left = clamp(left, EDGE_GAP, Math.max(EDGE_GAP, viewportWidth - tooltipRect.width - EDGE_GAP));
+
+    var arrowMax = Math.max(10, tooltipRect.width - 10);
+    var arrowLeft = clamp(targetRect.left + (targetRect.width / 2) - left - 4, 10, arrowMax);
+
+    tooltipElement.style.left = Math.round(left) + "px";
+    tooltipElement.style.top = Math.round(top) + "px";
+    tooltipElement.style.setProperty("--admin-tooltip-arrow-left", Math.round(arrowLeft) + "px");
+    tooltipElement.setAttribute("data-admin-tooltip-placement", placement);
+  }
+
+  function showTooltip(trigger) {
+    var content = tooltipContent(trigger);
+    if (!content.html && !content.text) return;
+
+    if (activeTrigger && activeTrigger !== trigger) {
+      hideTooltip();
+    }
+
+    activeTrigger = trigger;
+    tooltipElement = getTooltipElement();
+    if (content.html) {
+      tooltipElement.innerHTML = content.html;
+    } else {
+      tooltipElement.textContent = content.text;
+    }
+    tooltipElement.classList.add(VISIBLE_CLASS);
+    setTriggerState(trigger, true);
+
+    if (window.requestAnimationFrame) {
+      window.requestAnimationFrame(positionTooltip);
+    } else {
+      positionTooltip();
+    }
+  }
+
+  function hideTooltip(trigger) {
+    if (trigger && activeTrigger !== trigger) return;
+
+    setTriggerState(activeTrigger, false);
+
+    if (tooltipElement) {
+      tooltipElement.classList.remove(VISIBLE_CLASS);
+    }
+
+    activeTrigger = null;
+  }
+
+  function toggleTooltip(trigger) {
+    if (activeTrigger === trigger && tooltipElement && tooltipElement.classList.contains(VISIBLE_CLASS)) {
+      hideTooltip(trigger);
+      return;
+    }
+
+    showTooltip(trigger);
+  }
+
+  document.addEventListener("mouseover", function(event) {
+    var trigger = closestTrigger(event.target);
+    if (!trigger || isMobile() || (event.relatedTarget && trigger.contains(event.relatedTarget))) return;
+
+    hoveredTrigger = trigger;
+    showTooltip(trigger);
+  });
+
+  document.addEventListener("mouseout", function(event) {
+    var trigger = closestTrigger(event.target);
+    if (!trigger || isMobile() || (event.relatedTarget && trigger.contains(event.relatedTarget))) return;
+
+    if (hoveredTrigger === trigger) {
+      hoveredTrigger = null;
+    }
+    if (focusedTrigger === trigger) return;
+
+    hideTooltip(trigger);
+  });
+
+  document.addEventListener("focusin", function(event) {
+    var trigger = closestTrigger(event.target);
+    if (!trigger || isMobile()) return;
+
+    focusedTrigger = trigger;
+    showTooltip(trigger);
+  });
+
+  document.addEventListener("focusout", function(event) {
+    var trigger = closestTrigger(event.target);
+    if (!trigger || isMobile()) return;
+
+    if (focusedTrigger === trigger) {
+      focusedTrigger = null;
+    }
+    if (hoveredTrigger === trigger) return;
+
+    hideTooltip(trigger);
+  });
+
+  document.addEventListener("click", function(event) {
+    var trigger = closestTrigger(event.target);
+
+    if (trigger) {
+      if (!isMobile()) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+      toggleTooltip(trigger);
+      return;
+    }
+
+    if (activeTrigger && isMobile()) {
+      hideTooltip();
+    }
+  });
+
+  document.addEventListener("keydown", function(event) {
+    if (event.key !== "Escape") return;
+
+    hideTooltip();
+  });
+
+  window.addEventListener("scroll", positionTooltip, true);
+  window.addEventListener("resize", function() {
+    hideTooltip();
+  });
+})();

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

@@ -0,0 +1,85 @@
+.admin-tooltip-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  margin: 0 0 0 0.25rem;
+  padding: 0;
+  border: 1px solid #7a8594;
+  border-radius: 50%;
+  background: #fff;
+  color: #4b5563;
+  cursor: help;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.admin-tooltip-trigger:hover,
+.admin-tooltip-trigger:focus-visible,
+.admin-tooltip-trigger[aria-expanded="true"] {
+  border-color: #0d6efd;
+  background: #f8fbff;
+  color: #0d6efd;
+  box-shadow: none;
+}
+
+.admin-tooltip-trigger__icon {
+  pointer-events: none;
+}
+
+.admin-tooltip {
+  position: fixed;
+  z-index: 1100;
+  max-width: 280px;
+  padding: 8px 10px;
+  border-radius: 4px;
+  background: #1f2933;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+  color: #fff;
+  font-size: 0.82rem;
+  line-height: 1.45;
+  opacity: 0;
+  overflow-wrap: anywhere;
+  pointer-events: none;
+  transform: translateY(2px);
+  transition: opacity 0.12s ease, transform 0.12s ease;
+  white-space: normal;
+}
+
+.admin-tooltip--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.admin-tooltip::before {
+  content: "";
+  position: absolute;
+  left: var(--admin-tooltip-arrow-left, 50%);
+  width: 8px;
+  height: 8px;
+  background: #1f2933;
+  transform: rotate(45deg);
+}
+
+.admin-tooltip[data-admin-tooltip-placement="top"]::before {
+  bottom: -4px;
+}
+
+.admin-tooltip[data-admin-tooltip-placement="bottom"]::before {
+  top: -4px;
+}
+
+@media screen and (max-width: 767px) {
+  .admin-tooltip-trigger {
+    cursor: pointer;
+  }
+
+  .admin-tooltip {
+    max-width: calc(100vw - 24px);
+    font-size: 0.85rem;
+  }
+}