dynamic_scaffold 1.11.0 → 1.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fa5ec9c069fde80c1ee44d34bafe454d67c1b8e9ad291175b65f2174d4fedd73
-  data.tar.gz: d23f8d2d63c3657288a1c1ac1b76fd81c68720b60e8d22d0ba986d52b1f4b610
+  metadata.gz: c42e88067995f3753891fcc0e2a29aa8a8b8fd7ff9b093780f20455db67eb731
+  data.tar.gz: 1872ac09ed02e4a0524e7bc0d26900d1e493596bcafe47b177bfda380e741d9a
 SHA512:
-  metadata.gz: cdc7b66a1db5b926895223a02a37fe69db8a4d1dd0f765f80419fe2b185956d9b8f519180baaa4f7fce692840ac754d03557c58853f8333d374adc582cc71115
-  data.tar.gz: a915af903ec7fa690bb03922146306f30664547e2644ad806b846107008495b20f0b6a2142fcd5fa413f28a3678e39f4a90b3c94a83c2da92aaa9c8cede871c6
+  metadata.gz: 9f893ff9dbb40db07c63c6929c11ccae374ac17e82621bf8f878325b7b2393da1f7ffc12e354ccac152579b8f888d2c66780179c015be4cb361bfa9e7837835b
+  data.tar.gz: d2ce03bded48b344d364a737b38bed3a4aa4129b431189fcb213092c5385652cb148513aaef7bb4070ee62b53d3edd42225405335d1357947ddec65a7a374c42

data/app/assets/javascripts/dynamic_scaffold.js

@@ -3,3 +3,4 @@
 //= require dynamic_scaffold/pagination
 //= require dynamic_scaffold/sorter
 //= require dynamic_scaffold/image
+//= require dynamic_scaffold/auto_width

data/app/assets/javascripts/dynamic_scaffold/auto_width.js

@@ -0,0 +1,32 @@
+var calcWidth = function(){
+  var firstRow = document.querySelector('.js-ds-list-row:first-child')
+
+  var wrapperWidth = firstRow.clientWidth
+
+  var autoWidthItemIndexes = Array.prototype.filter.call(firstRow.querySelectorAll('.js-ds-list-item'), function(item){
+    return item.classList.contains('ds-auto-width')
+  }).map(function(item){
+    return parseInt(item.getAttribute('data-index'), 10)
+  })
+
+  autoWidthItemIndexes.forEach(function(index){
+    var items = document.querySelectorAll('.js-ds-list-item[data-index="' + index + '"]')
+
+    Array.prototype.forEach.call(items, function(item){
+      item.style.width = 'auto' 
+    })
+    
+    var maxWidth = Array.prototype.reduce.call(items, function(currentMax, item){
+      return Math.max(currentMax, item.offsetWidth)
+    }, 0)
+
+    maxWidth = Math.min(maxWidth, wrapperWidth)
+
+    Array.prototype.forEach.call(items, function(item){
+      item.style.width = maxWidth + 'px' 
+    })
+  })
+}
+
+document.addEventListener('dynamic_scaffold:load', calcWidth)
+document.addEventListener('dynamic_scaffold:window_resized', calcWidth)

data/app/assets/javascripts/dynamic_scaffold/common.js

@@ -13,6 +13,7 @@ if (window.Element && !Element.prototype.closest) {
   };
 }
 
+// dynamic_scaffold:load
 (function(){
   var fireEvent = function(){
     var event = document.createEvent("HTMLEvents");
@@ -25,7 +26,25 @@ if (window.Element && !Element.prototype.closest) {
     // Not fire after the initial page load
     if (e.data.timing.visitEnd) fireEvent()
   })
-})()
+})();
+
+
+// dynamic_scaffold:window_resized
+(function(){
+  var fireEvent = function(){
+    var event = document.createEvent("HTMLEvents");
+    event.initEvent('dynamic_scaffold:window_resized', false, false)
+    document.dispatchEvent(event)
+  }
+
+  var timeout = 0
+  window.addEventListener('resize', function(e){
+    this.clearTimeout(timeout)
+    timeout = setTimeout(function(){
+      fireEvent()
+    }, 300)
+  })
+})();
 
 // promise polyfill
 // IE 11 has no Promise? Are you kidding?

data/app/views/dynamic_scaffold/bootstrap/_list.html.erb

@@ -38,9 +38,9 @@
             <div class="ds-list-heading"><%= dynamic_scaffold.list.title(record) %></div>
           <% end %>
           <div class="ds-list-items">
-          <%dynamic_scaffold.list.items.each do |disp|%>
+          <%dynamic_scaffold.list.items.each_with_index do |disp, index|%>
             <%- if disp.show?(self, record) -%>
-              <%= content_tag :div, class: class_names('ds-list-item', disp.classnames), **disp.html_attributes do%>
+              <%= content_tag :div, class: class_names('ds-list-item js-ds-list-item', disp.classnames), **{**disp.html_attributes, 'data-index': index} do%>
                 <div class="ds-list-label"><%= disp.label %></div>
                 <div class="ds-list-value"><%= disp.value self, record %></div>
               <%end%>

data/lib/dynamic_scaffold/version.rb

@@ -1,3 +1,3 @@
 module DynamicScaffold
-  VERSION = '1.11.0'.freeze
+  VERSION = '1.12.0'.freeze
 end

data/lib/generators/dynamic_scaffold/templates/controller.erb

@@ -62,7 +62,7 @@ class <%= @class_scope.present? ? "#{@class_scope}::" : '' %><%= @plural_model_n
     # Please see https://github.com/gomo/dynamic_scaffold#customize-list for details.
 
   <%- @model.column_names.each do |column| -%>
-    config.list.item(:<%= column %>, style: 'width: 120px;')
+    config.list.item(:<%= column %>, class: 'ds-auto-width')
   <%- end -%>
 
     # You can customize the form fields through `config.form`.

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dynamic_scaffold
 version: !ruby/object:Gem::Version
-  version: 1.11.0
+  version: 1.12.0
 platform: ruby
 authors:
 - Masamoto Miyata
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-07-23 00:00:00.000000000 Z
+date: 2021-08-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: classnames-rails-view
@@ -252,6 +252,7 @@ files:
 - app/assets/images/dynamic_scaffold/fontawesome/step-forward.svg
 - app/assets/images/dynamic_scaffold/fontawesome/times.svg
 - app/assets/javascripts/dynamic_scaffold.js
+- app/assets/javascripts/dynamic_scaffold/auto_width.js
 - app/assets/javascripts/dynamic_scaffold/common.js
 - app/assets/javascripts/dynamic_scaffold/delete.js
 - app/assets/javascripts/dynamic_scaffold/image.js