infotable 1.3.0 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f5df1bcdf9da714e75a1f5b2f39681f69de99243954eefa1a936e1895d93370b
-  data.tar.gz: 8e0d96b405da00978ceaa3090a30dd310a1d6edc5ae1591ac50e96bede219bd7
+  metadata.gz: 61eaa702c985b223c91d6da00bf84515ba067ad2a7d8dd3b6fde0c5e9eac7603
+  data.tar.gz: edda1595d51b8ae913cecd87315a01ebf2f8788df68578ff3b45086b04c942d6
 SHA512:
-  metadata.gz: ca2f4b93b865921e6d8b8d62d8fabd3d935cd6db93600e3ecd2934df6d58e17930cb22bbf1f4bddeaa78c28dbedba7a3e6a4ff205320f144488dcffd432c950a
-  data.tar.gz: 2d86610f937536dca157b8d99ee9265f77e652ea0772ef3c96fc0306dd7a3f3b3d2712bd8524b427e548f600b63f5694efbc636f818ba1afd4e737b54cc34332
+  metadata.gz: 7e612ced33027a865095124cad1c1f2798abaab7238cb4c073da90625a7adbfa1068f5ca216e2e753766085ad5e43b6d1723255773ebc9e10dc3acfa63150634
+  data.tar.gz: 73c8657018df5e58536b75b27e5624ef4868c5a2fb29f72d87a7a258a8cb813c51184188d1b2b6bc9de576cf94605eab850cee545bf76e71eaf53198b0fe2a32

data/README.md

@@ -417,6 +417,11 @@ checkbox_column
 # Override global height settings for this table
 table_min_height "500px"
 table_max_height "700px"
+
+# Or size the table to the window: it grows until its bottom (with the pagination) sits
+# 16px above the bottom of the viewport, and follows window resizes. table_min_height is the floor.
+table_height :fill
+table_height :fill, offset: 32   # keep 32px free below
 ```
 
 #### Infinite Scroll

data/app/assets/javascripts/infotable/controllers/drawer_controller.js

@@ -4,7 +4,7 @@ import Sortable from "sortablejs"
 // Drawer controller for the filter drawer and column visibility
 // Handles opening/closing the right-side drawer with smooth animations
 export default class extends Controller {
-  static targets = ["drawer", "content", "tabButton", "tabContent", "panelTitle", "columnBadge", "columnList"]
+  static targets = ["rail", "drawer", "content", "tabButton", "tabContent", "panelTitle", "columnBadge", "columnList"]
   static values = {
     open: { type: Boolean, default: false },
     currentTab: { type: String, default: "filters" }
@@ -146,12 +146,40 @@ export default class extends Controller {
 
 
 
+  // Rail buttons: open the tab, or collapse the drawer when that tab is already showing
+  toggleFilters(event) {
+    this.toggleTab(event, "filters")
+  }
+
+  toggleColumns(event) {
+    this.toggleTab(event, "columns")
+  }
+
+  // Click on the rail itself (outside its buttons): toggle the drawer on its default tab
+  toggleRail(event) {
+    if (event.target.closest("button, a")) return
+
+    const hasFiltersTab = this.tabContentTargets.some(content => content.dataset.tab === "filters")
+    this.toggleTab(event, hasFiltersTab ? "filters" : "columns")
+  }
+
+  toggleTab(event, tab) {
+    event?.preventDefault()
+    if (this.openValue && this.currentTabValue === tab) {
+      this.openValue = false
+    } else {
+      this.currentTabValue = tab
+      this.openValue = true
+    }
+  }
+
   showDrawer() {
     // Slide in drawer from its side using inline transform
     this.previouslyFocused = document.activeElement
     this.drawerTarget.inert = false
     this.drawerTarget.removeAttribute("aria-hidden")
     this.drawerTarget.style.transform = "translateX(0)"
+    this.shiftRail(true)
     this.drawerTarget.querySelector("input:not([type=hidden]), select, button")?.focus({ preventScroll: true })
   }
 
@@ -163,6 +191,15 @@ export default class extends Controller {
 
     // Slide out drawer to its side (data-drawer-side) using inline transform
     this.drawerTarget.style.transform = this.drawerTarget.dataset.drawerSide === "left" ? "translateX(-100%)" : "translateX(100%)"
+    this.shiftRail(false)
+  }
+
+  // `toolbar :rail`: the rail slides left so it stays visible next to a right-hand drawer
+  shiftRail(open) {
+    if (!this.hasRailTarget || this.drawerTarget.dataset.drawerSide === "left") return
+
+    this.railTarget.style.transform = open ? `translateX(-${this.drawerTarget.offsetWidth}px)` : ""
+    this.railTarget.classList.toggle("shadow-lg", open)
   }
 
   closeOnEscape(event) {
@@ -187,6 +224,11 @@ export default class extends Controller {
       return
     }
 
+    // The rail's buttons toggle the drawer themselves
+    if (this.hasRailTarget && this.railTarget.contains(event.target)) {
+      return
+    }
+
     // Don't close if clicking on buttons that open the drawer
     const clickedElement = event.target.closest('button[data-action*="infotable--drawer#open"]')
     if (clickedElement) {

data/app/assets/javascripts/infotable/controllers/table_controller.js

@@ -37,6 +37,11 @@ export default class extends Controller {
     // Fill the search box and the filter drawer from the page URL (the server already loaded the frame with it)
     if (this.urlStateValue) this.applyUrlStateToControls()
 
+    // `table_height :fill`: size the rows area to the window, now and on resize
+    this.boundFitHeight = this.fitHeight.bind(this)
+    window.addEventListener("resize", this.boundFitHeight)
+    this.fitHeight()
+
     // Listen for turbo frame loads to reapply order and visibility
     this.boundApplyOrderAndVisibility = this.applyOrderAndVisibility.bind(this)
     this.element.addEventListener("turbo:frame-load", this.boundApplyOrderAndVisibility)
@@ -51,9 +56,30 @@ export default class extends Controller {
     this.element.removeEventListener("turbo:frame-load", this.boundApplyOrderAndVisibility)
     document.removeEventListener("infotable:columns-changed", this.boundUpdateExportLink)
     document.removeEventListener("infotable:filters-changed", this.boundUpdateExportLink)
+    window.removeEventListener("resize", this.boundFitHeight)
+    cancelAnimationFrame(this.fitFrame)
     clearTimeout(this.searchTimeout)
   }
 
+  // Cap the rows area (`[data-fill-height]`) so that it, plus whatever follows it in the frame
+  // (pagination), ends `data-fill-offset` px above the bottom of the window. Measured from the
+  // top of the page, so it does not depend on the current scroll position. min-height still wins.
+  fitHeight() {
+    cancelAnimationFrame(this.fitFrame)
+    this.fitFrame = requestAnimationFrame(() => {
+      this.element.querySelectorAll("[data-fill-height]").forEach(area => {
+        let below = 0
+        for (let sibling = area.nextElementSibling; sibling; sibling = sibling.nextElementSibling) {
+          below += sibling.offsetHeight
+        }
+
+        const top = area.getBoundingClientRect().top + window.scrollY
+        const offset = parseInt(area.dataset.fillOffset, 10) || 0
+        area.style.maxHeight = `${Math.max(window.innerHeight - top - below - offset, 0)}px`
+      })
+    })
+  }
+
   // Apply both order and visibility (used for turbo frame loads)
   applyOrderAndVisibility() {
     this.applyColumnOrder()
@@ -73,6 +99,7 @@ export default class extends Controller {
 
   // Handle turbo frame load
   handleFrameLoad(event) {
+    this.fitHeight()
     this.updateFilterCount(event.target)
     // rows matching the current filters, when the server knows it (not with countless pagination)
     const total = parseInt(event.target.querySelector("[data-total-count]")?.dataset.totalCount, 10)

data/app/helpers/infotable/tables_helper.rb

@@ -258,7 +258,7 @@ module Infotable
 
       {
         style: "#{side}: 0; width: #{width}; max-width: 90%; transform: translateX(#{hidden});",
-        class: "absolute top-0 bottom-0 bg-white dark:bg-gray-900 #{side == 'left' ? 'border-r rounded-l-xl' : 'border-l rounded-r-xl'} border-indigo-200 dark:border-indigo-800 shadow-2xl transition-all duration-300 ease-in-out z-50",
+        class: "absolute top-0 bottom-0 bg-white dark:bg-gray-900 #{side == 'left' ? 'border-r rounded-r-xl' : 'border-l rounded-l-xl'} border-gray-200 dark:border-gray-700 shadow-xl transition-all duration-300 ease-in-out z-50",
         role: "dialog",
         inert: true, # closed drawer is off-screen: keep it out of the tab order (JS toggles it)
         aria: { label: I18n.t("infotable.drawer.label"), hidden: true },

data/app/views/infotable/tables/_filter_drawer.html.erb

@@ -6,7 +6,7 @@
     end %>
 <div class="flex flex-col h-full">
   <%# Drawer Content - Scrollable %>
-  <div class="flex-1 overflow-y-auto px-4 py-4">
+  <div class="flex-1 overflow-y-auto px-4 py-4 bg-gray-50 dark:bg-gray-950">
     <form id="filter-form-<%= table_name %>"
           action="<%= infotable_table_data_path(table_name: table_name) %>"
           method="get"
@@ -29,8 +29,8 @@
 
       <%# Render filter for each filterable column %>
       <% table_class.filterable_columns.each do |column| %>
-        <div class="group p-4 bg-white dark:bg-gray-900 rounded-lg border border-gray-100 dark:border-gray-800 hover:border-indigo-200 dark:hover:border-indigo-700 transition-all duration-150">
-          <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+        <div class="group p-4 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm hover:border-indigo-300 dark:hover:border-indigo-700 transition-all duration-150">
+          <label class="block text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400 mb-2">
             <%= column[:label] %>
           </label>
 

data/app/views/infotable/tables/_rail.html.erb

@@ -2,10 +2,10 @@
 <% button = "relative flex items-center justify-center w-10 h-10 rounded-lg text-gray-500 dark:text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-950 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors" %>
 <% icon = "w-5 h-5" %>
 <% filter_count = initial_state[:filters].respond_to?(:keys) ? initial_state[:filters].keys.size : 0 %>
-<aside class="flex flex-col items-center shrink-0 w-14 py-3 gap-1 border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900" aria-label="<%= t('infotable.drawer.label') %>">
+<aside data-infotable--drawer-target="rail" data-action="click->infotable--drawer#toggleRail" class="cursor-pointer relative z-40 flex flex-col items-center shrink-0 w-14 py-3 gap-1 transition-all duration-300 ease-in-out border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900" aria-label="<%= t('infotable.drawer.label') %>">
   <% if table_class.filterable_columns.any? && table_class.filters_button_visible? %>
     <button type="button"
-            data-action="click->infotable--drawer#openFilters"
+            data-action="click->infotable--drawer#toggleFilters"
             title="<%= t('infotable.table.buttons.filters') %>"
             aria-label="<%= t('infotable.table.buttons.filters') %>"
             class="<%= button %>">
@@ -18,7 +18,7 @@
   <% end %>
 
   <button type="button"
-          data-action="click->infotable--drawer#openColumns"
+          data-action="click->infotable--drawer#toggleColumns"
           title="<%= t('infotable.table.buttons.columns') %>"
           aria-label="<%= t('infotable.table.buttons.columns') %>"
           class="<%= button %>">

data/app/views/infotable/tables/show.html.erb

@@ -4,6 +4,7 @@
   <% active_filters = infotable_active_filters(@table_class, @filters, @search) %>
   <%= render "infotable/tables/active_filters", chips: active_filters, table_name: params[:table_name] %>
   <div<% if @pagy && !@table_class.countless? %> data-total-count="<%= @pagy.count %>"<% end %> class="relative overflow-y-auto overflow-x-auto scroll-smooth [scrollbar-width:thin] [scrollbar-color:#cbd5e1_#f1f5f9] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-track]:bg-slate-100 [&::-webkit-scrollbar-thumb]:bg-slate-300 [&::-webkit-scrollbar-thumb]:rounded [&::-webkit-scrollbar-thumb:hover]:bg-slate-400 dark:[scrollbar-color:#475569_#1e293b] dark:[&::-webkit-scrollbar-track]:bg-slate-800 dark:[&::-webkit-scrollbar-thumb]:bg-slate-600"
+       <% if @table_class.fill_height? %>data-fill-height data-fill-offset="<%= @table_class.fill_offset %>"<% end %>
        style="min-height: <%= @table_class.min_height %>; max-height: <%= @table_class.max_height %>;">
 
     <% if @records.any? %>

data/lib/infotable/base.rb

@@ -13,7 +13,8 @@ module Infotable
         subclass.sort_settings = {}
         subclass.height_settings = {
           min_height: nil, # nil means use global config
-          max_height: nil  # nil means use global config
+          max_height: nil, # nil means use global config
+          fill_offset: nil # Integer when the table fills the viewport (table_height :fill)
         }
         subclass.infinite_scroll_settings = {
           enabled: false
@@ -257,6 +258,30 @@ module Infotable
         @height_settings[:max_height] = value
       end
 
+      # Size the table to the viewport: the rows area grows until the bottom of the table (and its
+      # pagination) sits `offset` pixels above the bottom of the window, and follows window resizes.
+      # table_min_height still applies as a floor. :fixed (default) uses table_max_height.
+      # @example
+      #   table_height :fill
+      #   table_height :fill, offset: 32
+      def table_height(mode, offset: 16)
+        unless [ :fill, :fixed ].include?(mode)
+          raise ArgumentError, "Invalid table height: #{mode}. Must be one of fill, fixed"
+        end
+        raise ArgumentError, "offset must be a non-negative Integer" unless offset.is_a?(Integer) && offset >= 0
+
+        @height_settings[:fill_offset] = mode == :fill ? offset : nil
+      end
+
+      # Pixels to keep free below the table when it fills the viewport, nil for a fixed height
+      def fill_offset
+        @height_settings[:fill_offset]
+      end
+
+      def fill_height?
+        !fill_offset.nil?
+      end
+
       # Enable/disable infinite scroll
       def infinite_scroll(enabled)
         @infinite_scroll_settings[:enabled] = enabled

data/lib/infotable/version.rb

@@ -1,3 +1,3 @@
 module Infotable
-  VERSION = "1.3.0"
+  VERSION = "1.4.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: infotable
 version: !ruby/object:Gem::Version
-  version: 1.3.0
+  version: 1.4.0
 platform: ruby
 authors:
 - Jakub Cieślar