drive 0.23.0 → 0.24.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 58e9f6a2677e071843a4bf8f1ad9f8b1946c522461888b0accb86924d20a6ded
-  data.tar.gz: ec1a65b60c6f8171253c83b382f18194fcb96af344872dd139c78f75a0aef32e
+  metadata.gz: 997efef34fcfa1c15ac00a55be7dbc1d4859550071a8f2e3dd183d136537ebaf
+  data.tar.gz: 5901698e48b529d2bcbec483d3b750f66c476f346c03e11767f43dabba021c9b
 SHA512:
-  metadata.gz: 6d311ad2ade0e6b7a4a18b61d6c0211d155c4228c40c8d27eafedd8b9a9aa6a91ec08d449181ea144593109666623bfa25e9ffc206076862470104be77f30e50
-  data.tar.gz: 5d815b355a96036c180dfdd61b999fd18f3d2042813f3c4b1ebcebbf624cb1c712ef8ec7465e56f8330ac33944182c0460159b2a7d1688cef46acfb70adb98ed
+  metadata.gz: 1810c82f86dc0cb889f86468e74d9927618f1b0b2d5cfd879afe593b016051ebca9577069d2d5f8b73046c325146ca9bcfe839fe08a809af800193404fe956e2
+  data.tar.gz: 3b2d8fd49ccbda6b77c223e01876ede32b805968065c4e9fea8f3bbc8e248c2e5ece52a4cefebd5659dc8c64c1298e1be4c697dce8f1e965f00937460ef5ac0a

data/CHANGELOG.md

@@ -6,6 +6,11 @@ For more information about changelogs, check [Keep a Changelog](http://keepachan
 
 ## [Unreleased]
 
+## 0.24.0 - 2026-11-09
+
+* [FEATURE] `easy/report_head`: the head of a report or list as a partial, with its heading, switches, search and a sort
+  button, flipped in the browser by `easy/report_sort`.
+
 ## 0.23.0 - 2026-11-09
 
 * [FEATURE] A `calendar` icon in the sprite.

data/app/assets/javascripts/easy/report_sort.js

@@ -0,0 +1,44 @@
+// The sort button of easy/report_head: flips the list named by data-sort-list by each row's data-sort, remembered in
+// this browser. ES5 alone. A page that redraws its list calls window.easyReportSort() after. Without this script the
+// list stays as the server sent it, and the button hidden.
+(function () {
+  function saved(head) {
+    try { return localStorage.getItem('report-sort:' + head.getAttribute('data-sort-list')); } catch (blocked) { return null; }
+  }
+
+  function save(head, order) {
+    try { localStorage.setItem('report-sort:' + head.getAttribute('data-sort-list'), order); } catch (blocked) { return; }
+  }
+
+  function order(head) { return head.easyOrder || saved(head) || head.getAttribute('data-sort-default'); }
+
+  function compared(a, b) {
+    return a.getAttribute('data-sort').localeCompare(b.getAttribute('data-sort'), undefined, { numeric: true });
+  }
+
+  function apply(head) {
+    var list = document.querySelector(head.getAttribute('data-sort-list')), item = head.querySelector('.sort-button-item');
+    if (!list || !item) { return; }
+    var way = order(head), newest = way === 'newest';
+    Array.prototype.slice.call(list.children).filter(function (row) { return row.hasAttribute('data-sort'); })
+      .sort(function (a, b) { return newest ? compared(b, a) : compared(a, b); })
+      .forEach(function (row) { list.appendChild(row); });
+    item.hidden = false;
+    item.querySelector('.js-sort-label').textContent = newest ? 'Newest first' : 'Oldest first';
+    var icon = item.querySelector('use'), ref = icon.getAttribute('href').split('#')[0] + '#i-' + way;
+    icon.setAttribute('href', ref);
+    icon.setAttribute('xlink:href', ref);
+  }
+
+  window.easyReportSort = function () { Array.prototype.forEach.call(document.querySelectorAll('[data-sort-list]'), apply); };
+
+  document.addEventListener('click', function (event) {
+    var button = event.target.closest && event.target.closest('.js-sort'), head = button && button.closest('[data-sort-list]');
+    if (!head) { return; }
+    head.easyOrder = order(head) === 'newest' ? 'oldest' : 'newest';
+    save(head, head.easyOrder);
+    apply(head);
+  });
+
+  window.easyReportSort();
+}());

data/app/assets/stylesheets/easy/components.css

@@ -91,7 +91,10 @@
 .word-search:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}
 .word-search .i{color:var(--color-text-muted);margin-right:8px;flex:none}
 .word-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--color-text);font:inherit;font-size:16px;padding:5px 0;outline:0}
-.switches li.sort-button-item{margin:0 0 0 auto;padding:0;border:0;background:none}
+.switches li.sort-button-item{margin:6px 0 6px auto;padding:0;border:0;background:none}
+.sort-button-item .sort-button{margin:0}
+@media (max-width:600px){.switches li.sort-button-item{margin-left:6px}}
+.report-search[hidden]{display:none}
 .sort-button{flex:none;margin:6px 0 6px 12px;display:inline-flex;align-items:center;border:0;border-radius:8px;background:none;color:var(--color-text);font:inherit;font-size:15px;font-weight:600;padding:8px 4px;cursor:pointer;white-space:nowrap}
 .sort-button .i{margin-right:8px}
 .sort-button:hover{color:var(--color-primary)}

data/app/views/easy/_report_head.html.erb

@@ -0,0 +1,19 @@
+<%# locals: (heading: nil, heading_id: nil, before: nil, switches_id: "switches", switches: [], after: nil, search: nil, search_label: search, sort_list: nil, sort_default: "newest") -%>
+<%# The head of a report or list: its heading, its switches (each { state:, css:, icon:, count:, label:, off: }), with the
+    sort button at their end, and a search. before and after go above and below the switches. sort_list is the list the
+    button flips by each row's data-sort (easy/report_sort); without it the page sorts by itself. -%>
+<%= tag.section class: "report-head", data: { sort_list:, sort_default: (sort_default if sort_list) }.compact do %>
+  <% if heading %><%= tag.h2 heading, id: heading_id %><% end %>
+  <%= before %>
+  <% if switches.any? %>
+    <%= tag.ul class: "switches levels", id: switches_id do %>
+      <% switches.each do |item| %>
+        <%= tag.li class: item[:css], data: { state: item[:state], off: item[:off] }.compact do %><% if item[:icon] %><%= easy_icon item[:icon] %><% end %><span class="n"><%= item[:count] %></span> <%= item[:label] %><% end %>
+      <% end %>
+      <li class="sort-button-item" hidden><button type="button" class="sort-button js-sort"><%= easy_icon sort_default %><span class="js-sort-label"><%= sort_default.capitalize %> first</span></button></li>
+    <% end %>
+  <% end %>
+  <%= after %>
+  <% if search %><label class="word-search report-search js-words" hidden><%= easy_icon "search" %><input type="search" placeholder="<%= search %>" aria-label="<%= search_label %>" autocomplete="off" spellcheck="false"></label><% end %>
+<% end %>
+<% if sort_list %><%= javascript_include_tag "easy/report_sort", defer: true %><% end %>

data/lib/drive/version.rb

@@ -1,4 +1,4 @@
 module Drive
   # Version of the gem, read by the gemspec.
-  VERSION = '0.23.0'.freeze
+  VERSION = '0.24.0'.freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: drive
 version: !ruby/object:Gem::Version
-  version: 0.23.0
+  version: 0.24.0
 platform: ruby
 authors:
 - claudiob
@@ -41,6 +41,7 @@ files:
 - app/assets/javascripts/easy/konami.js
 - app/assets/javascripts/easy/modal.js
 - app/assets/javascripts/easy/pin_code.js
+- app/assets/javascripts/easy/report_sort.js
 - app/assets/javascripts/easy/rotating_placeholder.js
 - app/assets/stylesheets/easy/base.css
 - app/assets/stylesheets/easy/components.css
@@ -58,6 +59,7 @@ files:
 - app/views/easy/_flyer.html.erb
 - app/views/easy/_modal.html.erb
 - app/views/easy/_pin_code.html.erb
+- app/views/easy/_report_head.html.erb
 - app/views/easy/mailer/_code.html.erb
 - app/views/easy/mailer/_code.text.erb
 - app/views/layouts/drive/errors.html.erb