yummy-guide-generic-administrate 0.8.1 → 0.8.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e0c5692ebb60bfcc4d51157cdca7e52f974523f546c0d75ab5e3b350815a5316
-  data.tar.gz: 9f398e159619da8c35955fcaaa0a2d2c7a1df5249154486c95326a5fe99e6b1d
+  metadata.gz: 55b8c25b868ffa217ed45c64c2c0b53aa46bdb9d60094c022d9979cdd7a4e013
+  data.tar.gz: 4889ad38b64d46b34ce69f7e5cb4819c53d71a9c13636096dc94a5721e94fa87
 SHA512:
-  metadata.gz: 92ea6916e4083ad8dc0301f48df920d11f63a7f028846fbbdd6d9886b7b29eb30f0e812e2fa413b8db23de600050460867ec9a93d0d799124032619cc552b3fb
-  data.tar.gz: 688558efd455e8a364b0a7a070e2f088fdd4adb6684a4b143e37438cd8a5d8192f49918d834afba7478851b075c1984570e5d6666bdd04850f229167102a03fe
+  metadata.gz: e85e0d5ef1a103b6f72b9544dabc6ec02118bd4c845c2dabffaa47e4b4d66de21cf227277e196ee70c4285aa76721766d9c8a465665c233e7e22a68ba32d9b2a
+  data.tar.gz: 508817a41590cac77f1b1f3ecfbb676784ee6e5655dd1336f2e0216c5700100c9c66f6a36c56830c4f8ee611a0ae117cf2a6ee220b82eb5b77913af54d50e708

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

@@ -16,6 +16,7 @@
   var dragState = null;
   var dragPreviewFrame = null;
   var widthApplyFrame = null;
+  var pendingWidthApply = null;
   var generatedRuleCount = 0;
   var initializedHandles = new WeakSet();
   var tableStates = new WeakMap();
@@ -568,6 +569,30 @@
     return event.pointerType !== 'mouse' || event.button === 0;
   }
 
+  function stopDragging(removePreview) {
+    if (!dragState) return null;
+
+    if (dragPreviewFrame) {
+      window.cancelAnimationFrame(dragPreviewFrame);
+      dragPreviewFrame = null;
+    }
+
+    if (removePreview) {
+      removeDragPreview();
+    }
+
+    releaseDragPointerCapture();
+
+    var completedDrag = dragState;
+    dragState = null;
+    document.body.classList.remove(DRAGGING_BODY_CLASS);
+    document.removeEventListener('pointermove', handleDragMove);
+    document.removeEventListener('pointerup', finishDrag);
+    document.removeEventListener('pointercancel', finishDrag);
+
+    return completedDrag;
+  }
+
   function scheduleDragWidth(width) {
     dragState.currentWidth = width;
     dragState.moved = dragState.moved || Math.abs(width - dragState.startWidth) > 2;
@@ -601,6 +626,18 @@
     scheduleStickyRefresh(callback);
   }
 
+  function refreshStickyHeaderTable(sourceTable, callback) {
+    var api = window.YummyGuideAdministrateStickyTableHeaders;
+
+    if (api && typeof api.refreshTable === 'function') {
+      var refreshed = api.refreshTable(sourceTable, callback);
+
+      if (refreshed) return;
+    }
+
+    scheduleStickyRefresh(callback);
+  }
+
   function refreshStickyLeftColumns(sourceTable) {
     var api = window.YummyGuideAdministrateStickyLeftColumns;
 
@@ -609,19 +646,61 @@
     }
   }
 
-  function stopApplyingWidth(preview) {
-    removePreview(preview);
+  function refreshStickyLeftColumnsForWidth(pendingWidth) {
+    var api = window.YummyGuideAdministrateStickyLeftColumns;
+
+    if (!api) return;
+
+    if (typeof api.refreshColumnWidth === 'function') {
+      var refreshed = api.refreshColumnWidth({
+        sourceTable: pendingWidth.sourceTable,
+        columnId: pendingWidth.columnId,
+        width: pendingWidth.width
+      });
+
+      if (refreshed) return;
+    }
+
+    refreshStickyLeftColumns(pendingWidth.sourceTable);
+  }
+
+  function startApplyingWidth() {
+    applyingWidth = true;
+    document.body.classList.add(APPLYING_BODY_CLASS);
+  }
+
+  function stopApplyingState() {
     applyingWidth = false;
     document.body.classList.remove(APPLYING_BODY_CLASS);
   }
 
+  function stopApplyingWidth(preview) {
+    removePreview(preview);
+    pendingWidthApply = null;
+    stopApplyingState();
+  }
+
+  function cancelPendingWidthApply() {
+    if (widthApplyFrame) {
+      window.cancelAnimationFrame(widthApplyFrame);
+      widthApplyFrame = null;
+    }
+
+    if (pendingWidthApply) {
+      removePreview(pendingWidthApply.preview);
+      pendingWidthApply = null;
+    }
+
+    stopApplyingState();
+  }
+
   function applyPendingWidth(pendingWidth) {
     try {
       var widths = safeReadWidths(pendingWidth.storageKey);
       applyColumnWidth(pendingWidth.columnId, pendingWidth.width, pendingWidth.storageKey);
       widths[pendingWidth.columnId] = preciseNumber(pendingWidth.width);
       safeWriteWidths(pendingWidth.storageKey, widths);
-      refreshStickyLeftColumns(pendingWidth.sourceTable);
+      refreshStickyLeftColumnsForWidth(pendingWidth);
       refreshStickyHeaderColumn(pendingWidth, function() {
         stopApplyingWidth(pendingWidth.preview);
       });
@@ -632,8 +711,8 @@
   }
 
   function schedulePendingWidthApply(pendingWidth) {
-    applyingWidth = true;
-    document.body.classList.add(APPLYING_BODY_CLASS);
+    pendingWidthApply = pendingWidth;
+    startApplyingWidth();
 
     widthApplyFrame = window.requestAnimationFrame(function() {
       widthApplyFrame = window.requestAnimationFrame(function() {
@@ -705,6 +784,8 @@
     }
 
     flushDragPreview();
+    var pointerCancelled = event && event.type === 'pointercancel';
+    var shouldApplyWidth = dragState.moved && !pointerCancelled;
 
     var pendingWidth = {
       columnId: dragState.columnId,
@@ -714,12 +795,9 @@
       preview: dragState.preview
     };
 
-    releaseDragPointerCapture();
-    dragState = null;
-    document.body.classList.remove(DRAGGING_BODY_CLASS);
-    document.removeEventListener('pointermove', handleDragMove);
-    document.removeEventListener('pointerup', finishDrag);
-    document.removeEventListener('pointercancel', finishDrag);
+    stopDragging(!shouldApplyWidth);
+    if (!shouldApplyWidth) return;
+
     schedulePendingWidthApply(pendingWidth);
   }
 
@@ -733,6 +811,8 @@
 
     event.preventDefault();
     event.stopPropagation();
+    cancelPendingWidthApply();
+    stopDragging(true);
 
     var sourceTable = sourceTableForHandle(handle);
     var key = storageKeyForTable(sourceTable || handle.closest(TABLE_SELECTOR));
@@ -740,7 +820,17 @@
     delete widths[columnId];
     safeWriteWidths(key, widths);
     clearColumnWidth(columnId, key);
-    scheduleStickyRefresh();
+    startApplyingWidth();
+    if (sourceTable) {
+      refreshStickyHeaderTable(sourceTable, function() {
+        refreshStickyLeftColumns(sourceTable);
+        stopApplyingWidth(null);
+      });
+    } else {
+      scheduleStickyRefresh(function() {
+        stopApplyingWidth(null);
+      });
+    }
   }
 
   function stopHandleClick(event) {

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

@@ -25,6 +25,37 @@
     return preciseNumber(value) + "px";
   }
 
+  function headerColumnId(header) {
+    return header.dataset.adminColumnResizerColumnId || header.dataset.columnId || "";
+  }
+
+  function columnIndex(headerCells, columnId) {
+    if (!columnId) return -1;
+
+    return headerCells.findIndex(function(header) {
+      return headerColumnId(header) === columnId;
+    });
+  }
+
+  function widthOverride(headerCells, options) {
+    var settings = options || {};
+    var width = parseFloat(settings.width);
+    var index = columnIndex(headerCells, settings.columnId);
+
+    if (index < 0 || Number.isNaN(width)) return null;
+
+    return {
+      index: index,
+      width: preciseNumber(width)
+    };
+  }
+
+  function applyWidthOverride(widths, override) {
+    if (!override || override.index >= widths.length) return;
+
+    widths[override.index] = override.width;
+  }
+
   function resetStickyColumns(table) {
     table.querySelectorAll(".sticky-left").forEach(function(cell) {
       cell.classList.remove("sticky-left", "sticky-left--last");
@@ -47,15 +78,18 @@
     return window.matchMedia && window.matchMedia(MOBILE_MEDIA_QUERY).matches;
   }
 
-  function stickyOffsets(table, count) {
+  function stickyOffsets(table, count, options) {
     var headerRow = table.querySelector("thead tr");
     if (!headerRow) return [];
 
-    var widths = directCells(headerRow).slice(0, count).map(function(cell) {
+    var headerCells = directCells(headerRow);
+    var override = widthOverride(headerCells, options);
+    var widths = headerCells.slice(0, count).map(function(cell) {
       return measuredWidth(cell);
     });
+    var hasMeasuredWidth = widths.some(Boolean);
 
-    if (!widths.some(Boolean)) {
+    if (!hasMeasuredWidth) {
       Array.from(table.querySelectorAll("tbody tr, tfoot tr")).some(function(row) {
         var cells = directCells(row);
         if (cells.length < count || cells.some(function(cell) { return cell.colSpan > 1; })) return false;
@@ -67,6 +101,8 @@
       });
     }
 
+    applyWidthOverride(widths, override);
+
     var offsets = [];
     var currentLeft = 0;
 
@@ -78,13 +114,13 @@
     return offsets;
   }
 
-  function applyStickyColumns(table) {
+  function applyStickyColumns(table, options) {
     resetStickyColumns(table);
 
     var count = fixedColumnsCount(table);
     if (count === 0) return;
 
-    var offsets = stickyOffsets(table, count);
+    var offsets = stickyOffsets(table, count, options);
     if (offsets.length === 0) return;
 
     table.querySelectorAll("thead tr, tbody tr, tfoot tr").forEach(function(row) {
@@ -127,6 +163,21 @@
     return true;
   }
 
+  function refreshColumnWidth(options) {
+    var settings = options || {};
+    var table = settings.sourceTable;
+
+    if (!table) return false;
+
+    suppressResizeApply(table);
+    applyStickyColumns(table, {
+      columnId: settings.columnId,
+      width: settings.width
+    });
+
+    return true;
+  }
+
   function observeStickyColumns(table) {
     if (!window.ResizeObserver || resizeObservers.has(table)) return;
 
@@ -181,6 +232,7 @@
   window.addEventListener("resize", initializeFromDocument);
 
   window.YummyGuideAdministrateStickyLeftColumns = {
+    refreshColumnWidth: refreshColumnWidth,
     refreshTable: refreshTable
   };
 

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

@@ -678,6 +678,22 @@
     return true;
   }
 
+  function refreshTable(sourceTable, callback) {
+    if (!sourceTable) return false;
+
+    var scroll = sourceTable.closest(WRAPPER_SELECTOR);
+    if (!scroll) return false;
+
+    suppressResizeBuild(scroll);
+    initializeFixedHeaderForScroll(scroll);
+
+    if (callback) {
+      window.requestAnimationFrame(callback);
+    }
+
+    return true;
+  }
+
   function buildFixedTableHeader(slot, scroll, sourceTable) {
     if (!slot || !scroll || !sourceTable) return;
 
@@ -870,7 +886,8 @@
   window.addEventListener('resize', initializeFromDocument);
 
   window.YummyGuideAdministrateStickyTableHeaders = {
-    refreshColumnWidth: refreshColumnWidth
+    refreshColumnWidth: refreshColumnWidth,
+    refreshTable: refreshTable
   };
 
   if (window.MutationObserver) {

data/lib/yummy_guide/administrate/version.rb

@@ -2,6 +2,6 @@
 
 module YummyGuide
   module Administrate
-    VERSION = "0.8.1"
+    VERSION = "0.8.2"
   end
 end

data/spec/yummy_guide/administrate/column_resizer_asset_spec.rb

@@ -59,6 +59,22 @@ RSpec.describe "column resizer assets" do
     expect(javascript_source).not_to include("applyColumnWidth(dragState.columnId, dragState.currentWidth")
   end
 
+  # ハンドルのクリックやダブルクリックで、ドラッグ完了扱いの幅適用が予約されないことを静的に確認する
+  it "does not apply a width when the pointer did not move" do
+    expect(javascript_source).to include("var shouldApplyWidth = dragState.moved && !pointerCancelled")
+    expect(javascript_source).to include("stopDragging(!shouldApplyWidth)")
+    expect(javascript_source).to include("if (!shouldApplyWidth) return")
+  end
+
+  # ダブルクリックの幅リセット前に、未実行の幅適用予約とプレビューを破棄することを静的に確認する
+  it "cancels pending width application before resetting a column" do
+    expect(javascript_source).to include("function cancelPendingWidthApply()")
+    expect(javascript_source).to include("window.cancelAnimationFrame(widthApplyFrame)")
+    expect(javascript_source).to include("removePreview(pendingWidthApply.preview)")
+    expect(javascript_source).to include("pendingWidthApply = null")
+    expect(javascript_source).to include("cancelPendingWidthApply()")
+  end
+
   # ドラッグ中の調整後幅を半透明カラムで表示するCSSがあることを確認する
   it "defines a translucent column preview" do
     expect(stylesheet_source).to include(".admin-column-resizer__preview")
@@ -83,6 +99,7 @@ RSpec.describe "column resizer assets" do
   # 幅の適用中だけ待機カーソルを表示することを静的に確認する
   it "shows a wait cursor while applying the final width" do
     expect(javascript_source).to include("APPLYING_BODY_CLASS = 'admin-column-resizer--applying'")
+    expect(javascript_source).to include("function startApplyingWidth()")
     expect(javascript_source).to include("document.body.classList.add(APPLYING_BODY_CLASS)")
     expect(javascript_source).to include("document.body.classList.remove(APPLYING_BODY_CLASS)")
     expect(stylesheet_source).to include(".admin-column-resizer--applying")
@@ -105,6 +122,7 @@ RSpec.describe "column resizer assets" do
     expect(javascript_source).to include("api.refreshColumnWidth({")
     expect(sticky_table_headers_source).to include("window.YummyGuideAdministrateStickyTableHeaders = {")
     expect(sticky_table_headers_source).to include("refreshColumnWidth: refreshColumnWidth")
+    expect(sticky_table_headers_source).to include("refreshTable: refreshTable")
     expect(sticky_table_headers_source).to include("function refreshColumnWidth(options)")
     expect(sticky_table_headers_source).to include("applySourceColumnMinWidth(sourceTable, columnIndex, columnCount, width)")
     expect(sticky_table_headers_source).to include("applyFixedHeaderCellWidth(fixedTable, columnIndex, width)")
@@ -114,11 +132,52 @@ RSpec.describe "column resizer assets" do
   # 幅適用後の固定左列追従もResizeObserverの重複再計算に頼らないことを静的に確認する
   it "refreshes sticky left columns directly after applying a width" do
     expect(javascript_source).to include("window.YummyGuideAdministrateStickyLeftColumns")
+    expect(javascript_source).to include("api.refreshColumnWidth({")
+    expect(javascript_source).to include("sourceTable: pendingWidth.sourceTable")
+    expect(javascript_source).to include("columnId: pendingWidth.columnId")
+    expect(javascript_source).to include("width: pendingWidth.width")
     expect(javascript_source).to include("api.refreshTable(sourceTable)")
     expect(javascript_source).to include("refreshStickyLeftColumns(pendingWidth.sourceTable)")
     expect(sticky_left_columns_source).to include("window.YummyGuideAdministrateStickyLeftColumns = {")
+    expect(sticky_left_columns_source).to include("refreshColumnWidth: refreshColumnWidth")
     expect(sticky_left_columns_source).to include("refreshTable: refreshTable")
     expect(sticky_left_columns_source).to include("function refreshTable(table)")
+    expect(sticky_left_columns_source).to include("function refreshColumnWidth(options)")
     expect(sticky_left_columns_source).to include("suppressResizeApply(table)")
   end
+
+  # 固定5列の4列目を調整した直後に5列目のleftが古い幅で残らないことを静的に確認する
+  it "uses the resized fixed column width when recalculating sticky-left offsets" do
+    expect(sticky_left_columns_source).to include("function widthOverride(headerCells, options)")
+    expect(sticky_left_columns_source).to include("columnIndex(headerCells, settings.columnId)")
+    expect(sticky_left_columns_source).to include("width: preciseNumber(width)")
+    expect(sticky_left_columns_source).to include("var hasMeasuredWidth = widths.some(Boolean)")
+    expect(sticky_left_columns_source).to include("applyWidthOverride(widths, override)")
+    expect(sticky_left_columns_source).to include("var offsets = stickyOffsets(table, count, options)")
+  end
+
+  # 幅リセット時は明示幅がないため、クリア後に通常の固定左列再計算へ戻すことを静的に確認する
+  it "recalculates sticky-left offsets after clearing a column width" do
+    expect(javascript_source).to include("clearColumnWidth(columnId, key)")
+    expect(javascript_source).to include("refreshStickyHeaderTable(sourceTable, function()")
+    expect(javascript_source).to include("refreshStickyLeftColumns(sourceTable)")
+  end
+
+  # ダブルクリックで幅リセットした時も、固定列同期が完了するまで待機カーソルを表示することを静的に確認する
+  it "shows a wait cursor while resetting a column width" do
+    expect(javascript_source).to include("clearColumnWidth(columnId, key)")
+    expect(javascript_source).to include("startApplyingWidth()")
+    expect(javascript_source).to include("stopApplyingWidth(null)")
+    expect(javascript_source).to include("scheduleStickyRefresh(function()")
+  end
+
+  # 幅リセット時は固定ヘッダーの管理幅を先に作り直してから固定左列を再計算することを静的に確認する
+  it "rebuilds fixed headers before refreshing sticky-left columns after clearing a width" do
+    expect(javascript_source).to include("function refreshStickyHeaderTable(sourceTable, callback)")
+    expect(javascript_source).to include("api.refreshTable(sourceTable, callback)")
+    expect(javascript_source).to include("scheduleStickyRefresh(callback)")
+    expect(sticky_table_headers_source).to include("function refreshTable(sourceTable, callback)")
+    expect(sticky_table_headers_source).to include("initializeFixedHeaderForScroll(scroll)")
+    expect(sticky_table_headers_source).to include("window.requestAnimationFrame(callback)")
+  end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: yummy-guide-generic-administrate
 version: !ruby/object:Gem::Version
-  version: 0.8.1
+  version: 0.8.2
 platform: ruby
 authors:
 - akatsuki-kk