yummy-guide-generic-administrate 0.6.1 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f3caffae44b6ea10fc063a2cc8fb8a3938e3cc42078c4af3bc2a08d4188cf01a
-  data.tar.gz: cea155304d262445a29199f9c5e57c574600508dca66206f49b81b3d3db66fb2
+  metadata.gz: cef007572ee8fc90b0579c0e6261263bb568d192702eb92ee418976a06404ffc
+  data.tar.gz: be42920844cf830f365d2297e21605ad5191257d5a3f37ba2dd9f364ae16c768
 SHA512:
-  metadata.gz: 6a2e5a4b98e6cea96bfdc9e0cb026212c6ed37f39518800368329cc8ba1fcff202859acb8b3340754b493544b92f33e191d92606de032575c889e436ae39b789
-  data.tar.gz: 669b6a383ff6d184527e7324def8875626dc46dd0b5d9c5d55d3b5f18fd8f4e97188d6a943ffa65e4076a70eefd0389e41abbd7b77d97f9e98466a3c580ecc43
+  metadata.gz: 1f9203647f13a0974af5bd4b0de54ff23c2a8991ce0eb3e065a3c0d561b1f88898c9bc470642c294bf786f5250eab2f9d5780c91b35d3f6b3cc1da9f36e2a305
+  data.tar.gz: b5d15a4f6ca3e708542fab9b1ce320ee76e45f3774bf775394cbff9548f4aca75f945259ef5e1a4c703a5ac5a3baa604a6933a6171868e83633f203698119866

data/README.md

@@ -355,13 +355,14 @@ dashboard の `FILTER_PATH` / `FILTER_CLEAR_PATH` より優先されます。
     ) %>
 ```
 
-標準 Field は `Text`, `Select`, `Checkbox`, `RadioGroup`, `CheckboxGroup`,
-`DateRange`, `DatetimeRange`, `DatetimeLocalRange`, `Custom` です。
+標準 Field は `Text`, `Select`, `Checkbox`, `RadioGroup`, `BooleanRadioGroup`,
+`CheckboxGroup`, `DateRange`, `DatetimeRange`, `DatetimeLocalRange`, `Custom` です。
 主な option は次のとおりです。
 
 - 共通: `label`, `default`, `if`, `class`, `id`, `placeholder`, `inputmode`, `pattern`
 - 選択系: `collection` または `options`, `select_options`
 - checkbox: `checked_value`, `unchecked_value`
+- boolean radio group: `unspecified_label`, `true_label`, `false_label`
 - checkbox group: `group`
 - range: `from`, `to`, `from_default`, `to_default`, `css_class`
 
@@ -379,6 +380,12 @@ FILTER_ATTRIBUTES = {
     label: "Status",
     collection: ->(_view, locals) { locals[:status_collection] },
     select_options: { include_blank: true }
+  ),
+  visible: YummyGuide::Administrate::Filters::BooleanRadioGroup.with_options(
+    label: "Visible",
+    unspecified_label: "-",
+    true_label: "Visible",
+    false_label: "Hidden"
   )
 }.freeze
 ```

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

@@ -0,0 +1,242 @@
+(function() {
+  var STORAGE_KEY = "yummyGuideAdministrate.navigationWidthPx";
+  var LEGACY_STORAGE_KEYS = ["wowTokyo.adminNavigationWidthPx"];
+  var WIDTH_VARIABLE = "--admin-navigation-width";
+  var NAVIGATION_SELECTOR = ".app-container > .navigation, body.admin-body > aside";
+  var HANDLE_CLASS = "admin-navigation-resize-handle";
+  var SCROLL_AREA_CLASS = "admin-navigation-scroll-area";
+  var TOOLTIP_CLASS = "admin-navigation-tooltip";
+  var TOOLTIP_VISIBLE_CLASS = "admin-navigation-tooltip--visible";
+  var RESIZING_BODY_CLASS = "admin-navigation-is-resizing";
+  var RESIZING_NAVIGATION_CLASS = "admin-navigation--resizing";
+  var DESKTOP_MEDIA_QUERY = "(min-width: 768px)";
+  var MIN_WIDTH_PX = 25;
+  var MAX_WIDTH_PX = 250;
+
+  function ready(callback) {
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", callback, { once: true });
+      return;
+    }
+
+    callback();
+  }
+
+  function toArray(nodeList) {
+    return Array.prototype.slice.call(nodeList || []);
+  }
+
+  function isDesktop() {
+    return window.matchMedia(DESKTOP_MEDIA_QUERY).matches;
+  }
+
+  function parseStoredWidth(value) {
+    if (!value) return null;
+
+    var width = parseFloat(value);
+    return Number.isFinite(width) ? width : null;
+  }
+
+  function storedWidthForKey(key) {
+    try {
+      return parseStoredWidth(window.localStorage.getItem(key));
+    } catch (_error) {
+      return null;
+    }
+  }
+
+  function readStoredWidth() {
+    var width = storedWidthForKey(STORAGE_KEY);
+    if (width !== null) return width;
+
+    for (var index = 0; index < LEGACY_STORAGE_KEYS.length; index += 1) {
+      width = storedWidthForKey(LEGACY_STORAGE_KEYS[index]);
+      if (width !== null) return width;
+    }
+
+    return null;
+  }
+
+  function saveWidth(width) {
+    try {
+      window.localStorage.setItem(STORAGE_KEY, Math.round(width) + "px");
+    } catch (_error) {
+      // localStorage may be unavailable in private browsing or restricted contexts.
+    }
+  }
+
+  function clampWidth(width) {
+    return Math.min(Math.max(width, MIN_WIDTH_PX), MAX_WIDTH_PX);
+  }
+
+  function applyWidth(width, body) {
+    var clampedWidth = clampWidth(width);
+    body.style.setProperty(WIDTH_VARIABLE, Math.round(clampedWidth) + "px");
+
+    return clampedWidth;
+  }
+
+  function applyStoredWidth(body) {
+    var storedWidth = readStoredWidth();
+    if (storedWidth === null) return null;
+
+    return applyWidth(storedWidth, body);
+  }
+
+  function resizeWidthFromPointer(event, body, navigation) {
+    var navigationLeft = navigation.getBoundingClientRect().left;
+    return applyWidth(event.clientX - navigationLeft, body);
+  }
+
+  function childWithClass(element, className) {
+    return toArray(element.children).find(function(child) {
+      return child.classList.contains(className);
+    });
+  }
+
+  function setupNavigationScrollArea(navigation) {
+    var existingScrollArea = childWithClass(navigation, SCROLL_AREA_CLASS);
+    if (existingScrollArea) return existingScrollArea;
+
+    var scrollArea = document.createElement("div");
+    var handle = childWithClass(navigation, HANDLE_CLASS);
+
+    scrollArea.className = SCROLL_AREA_CLASS;
+    toArray(navigation.childNodes).forEach(function(node) {
+      if (node === handle) return;
+      scrollArea.appendChild(node);
+    });
+    navigation.insertBefore(scrollArea, handle || null);
+
+    return scrollArea;
+  }
+
+  function setupNavigationTooltips(container) {
+    var tooltipTargets = toArray(container.querySelectorAll("a, button"));
+    if (tooltipTargets.length === 0) return;
+
+    var tooltip = document.createElement("div");
+    var activeTarget = null;
+
+    tooltip.className = TOOLTIP_CLASS;
+    tooltip.setAttribute("role", "tooltip");
+    document.body.appendChild(tooltip);
+
+    function hideTooltip() {
+      tooltip.classList.remove(TOOLTIP_VISIBLE_CLASS);
+      activeTarget = null;
+    }
+
+    function positionTooltip() {
+      if (!activeTarget || !isDesktop()) {
+        hideTooltip();
+        return;
+      }
+
+      var targetRect = activeTarget.getBoundingClientRect();
+      var tooltipRect = tooltip.getBoundingClientRect();
+      var top = Math.min(
+        Math.max(targetRect.top + (targetRect.height / 2) - (tooltipRect.height / 2), 8),
+        window.innerHeight - tooltipRect.height - 8
+      );
+      var left = Math.min(targetRect.right + 8, window.innerWidth - tooltipRect.width - 8);
+
+      tooltip.style.left = Math.max(left, 8) + "px";
+      tooltip.style.top = top + "px";
+    }
+
+    function showTooltip(target) {
+      var label = target.textContent.trim();
+      if (!label || !isDesktop()) return;
+
+      activeTarget = target;
+      tooltip.textContent = label;
+      tooltip.classList.add(TOOLTIP_VISIBLE_CLASS);
+      positionTooltip();
+    }
+
+    tooltipTargets.forEach(function(target) {
+      target.addEventListener("mouseenter", function() {
+        showTooltip(target);
+      });
+      target.addEventListener("mouseleave", hideTooltip);
+      target.addEventListener("focus", function() {
+        showTooltip(target);
+      });
+      target.addEventListener("blur", hideTooltip);
+    });
+
+    window.addEventListener("resize", positionTooltip);
+    window.addEventListener("scroll", positionTooltip, true);
+  }
+
+  function addResizeHandle(body, navigation) {
+    if (navigation.querySelector("." + HANDLE_CLASS)) return;
+
+    var handle = document.createElement("div");
+    var latestWidth = null;
+
+    handle.className = HANDLE_CLASS;
+    handle.setAttribute("role", "separator");
+    handle.setAttribute("aria-orientation", "vertical");
+    handle.setAttribute("aria-label", "Resize navigation");
+    navigation.appendChild(handle);
+
+    handle.addEventListener("pointerdown", function(event) {
+      if (!isDesktop() || (event.pointerType === "mouse" && event.button !== 0)) return;
+
+      event.preventDefault();
+      latestWidth = navigation.getBoundingClientRect().width;
+      body.classList.add(RESIZING_BODY_CLASS);
+      navigation.classList.add(RESIZING_NAVIGATION_CLASS);
+      handle.setPointerCapture(event.pointerId);
+
+      function onPointerMove(moveEvent) {
+        latestWidth = resizeWidthFromPointer(moveEvent, body, navigation);
+      }
+
+      function stopResize() {
+        document.removeEventListener("pointermove", onPointerMove);
+        document.removeEventListener("pointerup", stopResize);
+        document.removeEventListener("pointercancel", stopResize);
+        body.classList.remove(RESIZING_BODY_CLASS);
+        navigation.classList.remove(RESIZING_NAVIGATION_CLASS);
+
+        if (latestWidth !== null) saveWidth(latestWidth);
+        latestWidth = null;
+      }
+
+      document.addEventListener("pointermove", onPointerMove);
+      document.addEventListener("pointerup", stopResize);
+      document.addEventListener("pointercancel", stopResize);
+    });
+  }
+
+  function setupResizableNavigation() {
+    var body = document.querySelector("body.admin-body") || document.body;
+    var navigation = document.querySelector(NAVIGATION_SELECTOR);
+    var scrollArea = null;
+    var resizeAnimationFrame = null;
+
+    if (!body || !navigation || navigation.dataset.resizableNavigationInitialized === "true") return;
+
+    navigation.dataset.resizableNavigationInitialized = "true";
+    applyStoredWidth(body);
+    scrollArea = setupNavigationScrollArea(navigation);
+    setupNavigationTooltips(scrollArea);
+    addResizeHandle(body, navigation);
+
+    window.addEventListener("resize", function() {
+      if (resizeAnimationFrame) {
+        window.cancelAnimationFrame(resizeAnimationFrame);
+      }
+
+      resizeAnimationFrame = window.requestAnimationFrame(function() {
+        applyStoredWidth(body);
+        resizeAnimationFrame = null;
+      });
+    });
+  }
+
+  ready(setupResizableNavigation);
+})();

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

@@ -0,0 +1,156 @@
+@media screen and (min-width: 768px) {
+  .app-container > .navigation,
+  body.admin-body > aside {
+    --admin-navigation-default-width: 240px;
+    align-self: flex-start;
+    box-sizing: border-box;
+    flex: 0 0 clamp(25px, var(--admin-navigation-width, var(--admin-navigation-default-width)), 250px);
+    max-height: calc(100vh - 2rem);
+    min-width: 25px;
+    max-width: 250px;
+    overflow: visible;
+    position: sticky;
+    top: 1rem;
+    width: clamp(25px, var(--admin-navigation-width, var(--admin-navigation-default-width)), 250px);
+  }
+
+  body.admin-body > aside:not(.navigation) {
+    --admin-navigation-default-width: 13rem;
+  }
+
+  .app-container > .navigation {
+    max-height: calc(100vh - 3em);
+    max-height: calc(100dvh - 3em);
+    top: 1.5em;
+  }
+
+  .app-container > .main-content,
+  body.admin-body > main.admin-main {
+    flex: 1 1 auto;
+    min-width: 0;
+    position: relative;
+    z-index: 1;
+    width: auto;
+  }
+
+  body.admin-body > main.main-content {
+    width: auto;
+  }
+
+  .admin-navigation-resize-handle {
+    bottom: 0;
+    cursor: col-resize;
+    position: absolute;
+    right: 0;
+    top: 0;
+    touch-action: none;
+    width: 8px;
+    z-index: 2;
+
+    &::after {
+      background-color: transparent;
+      bottom: 0;
+      content: "";
+      left: 3px;
+      position: absolute;
+      top: 0;
+      transition: background-color 0.15s ease;
+      width: 2px;
+    }
+
+    &:hover::after {
+      background-color: #9aa8ba;
+    }
+  }
+
+  .admin-navigation-scroll-area {
+    max-height: inherit;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  .admin-navigation--resizing .admin-navigation-resize-handle::after {
+    background-color: #5d7596;
+  }
+
+  .admin-navigation-scroll-area .menubar,
+  .admin-navigation-scroll-area .menubar a,
+  .admin-navigation-scroll-area .menubar__group-label,
+  .admin-navigation-scroll-area .navigation__link,
+  .admin-navigation-scroll-area .navigation__link__secondary {
+    white-space: nowrap;
+  }
+
+  .admin-navigation-scroll-area .menubar {
+    margin-right: 0;
+  }
+
+  .admin-navigation-scroll-area .menubar li.menubar__item {
+    padding-left: 0;
+  }
+
+  .admin-navigation-scroll-area .menubar li a,
+  .admin-navigation-scroll-area .navigation__link {
+    box-sizing: border-box;
+    margin-left: 0;
+    margin-right: 0;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .admin-navigation-scroll-area .menubar li.menubar__item a {
+    padding-left: 36px;
+  }
+
+  .admin-navigation-scroll-area .button_to {
+    margin: 0;
+  }
+
+  .admin-navigation-scroll-area .btn_public,
+  .admin-navigation-scroll-area .btn_logout {
+    box-sizing: border-box;
+    margin-left: 0;
+    margin-right: 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: clip;
+    white-space: nowrap;
+    width: 100%;
+  }
+
+  .admin-navigation-tooltip {
+    background-color: #1f2933;
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+    color: #fff;
+    font-size: 0.85rem;
+    line-height: 1.4;
+    max-width: 260px;
+    opacity: 0;
+    padding: 6px 8px;
+    pointer-events: none;
+    position: fixed;
+    transform: translateX(-2px);
+    transition: opacity 0.12s ease, transform 0.12s ease;
+    white-space: nowrap;
+    z-index: 1000;
+  }
+
+  .admin-navigation-tooltip--visible {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  body.admin-navigation-is-resizing,
+  body.admin-navigation-is-resizing * {
+    cursor: col-resize !important;
+    user-select: none;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .admin-navigation-resize-handle {
+    display: none;
+  }
+}

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

@@ -679,3 +679,5 @@ table[data-fixed-columns-count] [data-fixed-header-column-min-width] {
     grid-template-columns: 1fr;
   }
 }
+
+@import "resizable_navigation";

data/lib/yummy_guide/administrate/engine.rb

@@ -14,6 +14,7 @@ module YummyGuide
           yummy_guide_administrate/filter_controls.js
           yummy_guide_administrate/filter_form.js
           yummy_guide_administrate/sticky_left_columns.js
+          yummy_guide_administrate/resizable_navigation.js
           yummy_guide_administrate/sticky_table_headers.js
         ]
       end

data/lib/yummy_guide/administrate/filters.rb

@@ -152,6 +152,39 @@ module YummyGuide
         end
       end
 
+      class BooleanRadioGroup < Base
+        protected
+
+        def input_cell(view_context, _form, scope, current_values, locals)
+          selected = current_value(current_values).to_s
+          controls = boolean_options(view_context, locals).map do |label, value|
+            value_string = value.to_s
+            id = "#{scope}_#{name}_#{value_string.presence || "unspecified"}".parameterize(separator: "_")
+
+            view_context.content_tag(:label, style: "display: inline-flex; align-items: center; gap: 6px;") do
+              view_context.safe_join([
+                view_context.radio_button_tag("#{scope}[#{name}]", value, selected == value_string, id: id),
+                view_context.content_tag(:span, label)
+              ])
+            end
+          end
+
+          view_context.content_tag(:td) do
+            view_context.content_tag(:div, view_context.safe_join(controls), style: "display: flex; align-items: center; gap: 12px; flex-wrap: wrap;")
+          end
+        end
+
+        private
+
+        def boolean_options(view_context, locals)
+          [
+            [evaluate_option(options.fetch(:unspecified_label, "Unspecified"), view_context, locals), ""],
+            [evaluate_option(options.fetch(:true_label, "true"), view_context, locals), "true"],
+            [evaluate_option(options.fetch(:false_label, "false"), view_context, locals), "false"]
+          ]
+        end
+      end
+
       class CheckboxGroup < Base
         protected
 

data/lib/yummy_guide/administrate/version.rb

@@ -2,6 +2,6 @@
 
 module YummyGuide
   module Administrate
-    VERSION = "0.6.1"
+    VERSION = "0.7.0"
   end
 end

data/spec/yummy_guide/administrate/filter_controls_helper_spec.rb

@@ -49,6 +49,38 @@ RSpec.describe YummyGuide::Administrate::FilterControlsHelper do
       expect(document.at_css('select[name="search_options[status]"] option[selected]')["value"]).to eq("closed")
     end
 
+    # boolean radio group が未指定・true・falseを横並びで描画し、ラベルと選択状態を反映することを確認する
+    it "renders boolean radio group controls with custom labels" do
+      dashboard = Class.new
+      dashboard.const_set(
+        :FILTER_ATTRIBUTES,
+        {
+          visible: YummyGuide::Administrate::Filters::BooleanRadioGroup.with_options(
+            label: "Visible",
+            unspecified_label: "-",
+            true_label: "Visible",
+            false_label: "Hidden"
+          )
+        }.freeze
+      )
+
+      html = helper_host.admin_filter_controls(
+        dashboard: dashboard,
+        path: "/admin/resources",
+        search_options: { visible: "false" }
+      )
+      document = fragment(html)
+
+      wrapper = document.at_css('input[name="search_options[visible]"]').ancestors("div").first
+
+      expect(document.at_css('input[type="radio"][name="search_options[visible]"][value=""]')).to be_present
+      expect(document.at_css('input[type="radio"][name="search_options[visible]"][value="true"]')).to be_present
+      expect(document.at_css('input[type="radio"][name="search_options[visible]"][value="false"]')).to be_present
+      expect(document.at_css('input[type="radio"][name="search_options[visible]"][value="false"]')["checked"]).to eq("checked")
+      expect(wrapper["style"]).to include("display: flex")
+      expect(document.text).to include("-", "Visible", "Hidden")
+    end
+
     # dashboard に定義した FILTER_PATH をフィルター送信先として利用できることを確認する
     it "uses dashboard filter path when no explicit path is passed" do
       dashboard = Class.new

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: yummy-guide-generic-administrate
 version: !ruby/object:Gem::Version
-  version: 0.6.1
+  version: 0.7.0
 platform: ruby
 authors:
 - akatsuki-kk
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-05-27 00:00:00.000000000 Z
+date: 2026-05-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: administrate
@@ -95,10 +95,12 @@ files:
 - app/assets/javascripts/yummy_guide_administrate/filter_controls.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/resizable_navigation.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/_datetime_input.scss
 - app/assets/stylesheets/yummy_guide_administrate/_fixed_submit_actions.scss
+- app/assets/stylesheets/yummy_guide_administrate/_resizable_navigation.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