Custom rating star rendering

opatry · May 20, 2024 · ee15ddf · ee15ddf
1 parent 14bdde0
commit ee15ddf
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 12 deletions.
diff --git a/content/index.html.erb b/content/index.html.erb
@@ -122,9 +122,34 @@ unless cover.nil?
           field: "rating",
           title: "Note",
           responsive: 2,
-          formatter: "star",
-          formatterParams: {
-            stars: 10
+          formatter: function(cell, formatterParams, onRendered) {
+            var maxStars = 10;
+            var value = cell.getValue();
+            value = value && !isNaN(value) ? parseInt(value) : 0;
+            value = Math.max(0, Math.min(value, maxStars));
+            var element = cell.getElement();
+
+            var starActive = '<%= star_svg(filled: true, params: { size: 16 }) %>';
+            var starInactive = '<%= star_svg(filled: false, params: { size: 16 }) %>';
+
+            var stars = document.createElement('div');
+            stars.setAttribute('aria-label', value);
+            stars.setAttribute('class', 'rating-bar');
+            stars.dataset.rating = value;
+
+            for (var i = 1; i < 10; ++i) {
+              var star = document.createElement('span');
+              star.innerHTML = i < value ? starActive : starInactive;
+              stars.appendChild(star);
+            }
+
+            element.style.whiteSpace = 'nowrap';
+            element.style.overflow = 'hidden';
+            element.style.textOverflow = 'ellipsis';
+
+            element.setAttribute('aria-label', value);
+
+            return stars;
           },
           hozAlign: "center",
           width: 200,

diff --git a/content/static/style.css b/content/static/style.css
@@ -14,6 +14,28 @@
   color: rgba(0, 0, 0, .1);
 }
 
+.rating-bar {
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 8px 0;
+}
+
+.star-icon {
+  fill: rgba(0, 0, 0, .2);
+  vertical-align: text-bottom;
+  display: inline;
+}
+
+.star-icon.icon-active {
+  fill: rgb(255, 215, 0);
+}
+
+.star-icon.icon-inactive {
+  fill: rgba(0, 0, 0, .15);
+}
+
 body {
   margin: 0;
   padding: 0;

diff --git a/layouts/book.html.erb b/layouts/book.html.erb
@@ -6,11 +6,11 @@
 </h2>
 <h4><%= @item[:author] %></h4>
 
-<p aria-label="<%= @item[:rating] %>" title="<%= @item[:rating] %>" style="vertical-align: middle;">
+<div aria-label="<%= @item[:rating] %>" class="rating-bar" data-rating="<%= @item[:rating] %>" title="<%= @item[:rating] %>">
 <% 10.times do |i| %>
-<%= star_svg(filled: i < @item[:rating]) -%>
+<%= star_svg(filled: i < @item[:rating], params: { size: 16 }) -%>
 <% end %>
-</p>
+</div>
 
 <%
 unless @items["/cover/#{@item[:isbn]}.*"].nil?

diff --git a/lib/helpers.rb b/lib/helpers.rb
@@ -26,14 +26,18 @@ def book?(item)
   item.identifier =~ '/book/*'
 end
 
-def star_svg(filled:)
-  bg_color = filled ? '#FFEA00' : '#D2D2D2'
-  fg_color = filled ? '#C1AB60' : '#686868'
-  %Q[<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 512 512" xml:space="preserve" style="padding: 0px 1px;"><polygon fill="#{bg_color}" stroke="#{fg_color}" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "></polygon></svg>]
+def star_svg(filled:, params: {})
+  size = params.fetch(:size, 24)
+  width = params.fetch(:width, size)
+  height = params.fetch(:height, size)
+  %Q[<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="#{width}" height="#{height}" viewBox="0 0 576 512" class="star-icon #{filled ? 'icon-active' : 'icon-inactive'}"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>]
 end
 
-def heart_svg
-  %Q[<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"class="heart-icon" ><path d="M12 20a1 1 0 0 1-.437-.1C11.214 19.73 3 15.671 3 9a5 5 0 0 1 8.535-3.536l.465.465.465-.465A5 5 0 0 1 21 9c0 6.646-8.212 10.728-8.562 10.9A1 1 0 0 1 12 20z"></path></svg>]
+def heart_svg(params: {})
+size = params.fetch(:size, 24)
+  width = params.fetch(:width, size)
+  height = params.fetch(:height, size)
+  %Q[<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="#{width}" height="#{height}" viewBox="0 0 24 24" class="heart-icon"><path d="M12 20a1 1 0 0 1-.437-.1C11.214 19.73 3 15.671 3 9a5 5 0 0 1 8.535-3.536l.465.465.465-.465A5 5 0 0 1 21 9c0 6.646-8.212 10.728-8.562 10.9A1 1 0 0 1 12 20z"/></svg>]
 end
 
 def page_title(item)