yummy-guide-generic-administrate 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b78001f457aaa653797c44c84f1d169f7e870932e5b7ea43ae1d3994ecab9747
-  data.tar.gz: 437ffe942299cbda22d3eca1e72ecc625069880862848b94d3da3520cb3ecf12
+  metadata.gz: 1094484e89c98a0f68d56b6536786231e367755b9c3d260340180c688cff1b89
+  data.tar.gz: 46974073ea46232ca7482666c6ca8d1cbfedbee943b95783e0d7ad4d5c56ef77
 SHA512:
-  metadata.gz: 8a8b10627365f4b549f43701974d3e8ab0066d6a656bdab19fbe310dce3ed258b1b80e58db16ce72219bda72030f9269fd71a752324a016cc44426464d64d0c4
-  data.tar.gz: 589d405d80686573b6fd8efd2a45795861e010203b703f85e1a0c142dec044c8cf603189480f1adfd581c8fc24c61690a56335c1b487d3be869322c7644bdc91
+  metadata.gz: 56fe590e3c211b91e7235a98e389700d8eed1fd2c636bf6a654f4f84696429ebf4c4fb81a7cddd752f20c1bbad21bb4a463de23b535a47c84be201daccbfb6a6
+  data.tar.gz: af71f0ebb0e6f825f59ead48d3d0b4292313740aa58ea244b875f7cff2c3957a4d12329000fc5e95f8c2e3fe065e4fecde0e8e75aa19ca1ca3532410a15bdf00

data/README.md

@@ -43,9 +43,12 @@ bundle install
   - datetime フィルターや checkbox group の組み立てを補助する helper
 - 共通 partial / assets
   - collection partial
+  - fixed table header partial
   - filter form partial
+  - `clipboards.js`
   - `filter_form.js`
   - `sticky_left_columns.js`
+  - `sticky_table_headers.js`
   - `components.css`
 - 共通 field
   - `YummyGuide::Administrate::Fields::JsonPrettyField`
@@ -113,6 +116,104 @@ engine の共通 partial に委譲します。
            collection_field_name: collection_field_name %>
 ```
 
+### 固定ヘッダーの設定
+
+#### 1. 最小構成
+
+gem 付属の collection partial をそのまま使う場合、table wrapper と table 本体に
+必要な `data-*` 属性はすでに入っています。そのため、JS / CSS を読み込めば固定
+ヘッダーは自動で有効になります。
+
+内部的には以下のような構造になります。
+
+```erb
+<div class="scroll-table" data-fixed-header-scroll>
+  <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
+  >
+    ...
+  </table>
+</div>
+```
+
+#### 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">
+  <%= 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 data-fixed-table-header hidden></div>
+```
+
+この slot を置かない場合でも、JS が table の直前に自動生成します。配置を制御
+したいときだけ明示してください。
+
+#### 3. 自前の table partial を使う場合
+
+独自の collection partial を書く場合は、少なくとも以下を満たしてください。
+
+- 横スクロール wrapper に `data-fixed-header-scroll` を付ける
+- table に `data-fixed-header-source` を付ける
+- table に `data-fixed-columns-count` を付ける
+- header の `aria-labelledby` がページタイトルと対応している
+
+```erb
+<%= render "yummy_guide/administrate/administrate/application/fixed_table_header" %>
+
+<div class="scroll-table" data-fixed-header-scroll>
+  <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) %>"
+  >
+    <thead>
+      <tr>
+        <th>ID</th>
+        <th>Name</th>
+        <th class="sticky actions-column">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% resources.each do |resource| %>
+        <tr>
+          <td><%= resource.id %></td>
+          <td><%= resource.name %></td>
+          <td class="sticky actions-column">
+            <%= link_to "Show", [:admin, resource] %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+```
+
+`sticky actions-column` を action 列に付けると、右端列も固定できます。
+左端の固定列数は dashboard 側の `INDEX_FIXED_COLUMNS_COUNT` で制御します。
+
 ### Datetime filter
 
 filter form の枠と datetime 入力 partial を組み合わせて利用できます。
@@ -157,8 +258,10 @@ end
 この engine の asset はホストアプリ側で明示的に読み込んでください。
 
 ```js
+//= require yummy_guide_administrate/clipboards
 //= require yummy_guide_administrate/filter_form
 //= require yummy_guide_administrate/sticky_left_columns
+//= require yummy_guide_administrate/sticky_table_headers
 ```
 
 ```scss

data/app/assets/images/yummy_guide_administrate/icon-copy.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
+  <rect x="5.25" y="2.25" width="8.5" height="10.5" rx="1.5" stroke="currentColor" stroke-width="1.25"/>
+  <path d="M3.75 5.25H3A1.75 1.75 0 0 0 1.25 7v6A1.75 1.75 0 0 0 3 14.75h5A1.75 1.75 0 0 0 9.75 13v-.75" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+</svg>

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

@@ -0,0 +1,81 @@
+(function() {
+  function dispatchCopyEvent(name, detail) {
+    document.dispatchEvent(new CustomEvent(name, { detail: detail }));
+  }
+
+  function showCopiedFeedback(trigger) {
+    var container = trigger.closest(".admin-copy-cell");
+    if (!container) return;
+
+    var feedback = container.querySelector("[data-role='copy-feedback']");
+    if (!feedback) return;
+
+    feedback.textContent = "Copied";
+    container.classList.add("is-copied");
+
+    if (container.copyFeedbackTimer) {
+      clearTimeout(container.copyFeedbackTimer);
+    }
+
+    container.copyFeedbackTimer = setTimeout(function() {
+      container.classList.remove("is-copied");
+      feedback.textContent = "";
+      container.copyFeedbackTimer = null;
+    }, 1600);
+  }
+
+  function copyText(text) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      return navigator.clipboard.writeText(text);
+    }
+
+    return new Promise(function(resolve, reject) {
+      try {
+        var input = document.createElement("textarea");
+        input.value = text;
+        input.setAttribute("readonly", "");
+        input.style.position = "absolute";
+        input.style.left = "-9999px";
+        document.body.appendChild(input);
+        input.select();
+        document.execCommand("copy");
+        document.body.removeChild(input);
+        resolve();
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  function copyCell(trigger) {
+    var text = trigger.getAttribute("data-copy-text");
+    if (!text) return;
+
+    copyText(text).then(function() {
+      showCopiedFeedback(trigger);
+      dispatchCopyEvent("yummy-guide-administrate:copied", {
+        text: text,
+        trigger: trigger
+      });
+    }).catch(function(error) {
+      dispatchCopyEvent("yummy-guide-administrate:copy-error", {
+        text: text,
+        trigger: trigger,
+        error: error
+      });
+    });
+  }
+
+  document.addEventListener("click", function(event) {
+    var trigger = event.target.closest("[data-behavior='copy-cell']");
+    if (!trigger) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+    if (typeof event.stopImmediatePropagation === "function") {
+      event.stopImmediatePropagation();
+    }
+
+    copyCell(trigger);
+  }, true);
+})();

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

@@ -130,12 +130,31 @@
   }
 
   if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", initializeFromDocument, { once: true });
+    document.addEventListener("DOMContentLoaded", initializeFromDocument);
   } else {
     initializeFromDocument();
   }
 
   document.addEventListener("turbo:load", initializeFromDocument);
   window.addEventListener("resize", initializeFromDocument);
-})();
 
+  if (window.MutationObserver) {
+    var mutationObserver = new MutationObserver(function(mutations) {
+      mutations.forEach(function(mutation) {
+        mutation.addedNodes.forEach(function(node) {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            initializeStickyColumns(node);
+          }
+        });
+      });
+    });
+
+    mutationObserver.observe(document.documentElement, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  setTimeout(initializeFromDocument, 100);
+  setTimeout(initializeFromDocument, 300);
+})();