dynamic_scaffold 0.3.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 27b88a53221d6cd3762a14df6a327717d1633c7ad6fd15571149d3503b08c2f9
-  data.tar.gz: 2df989a2e51776a426ab9d464d13b879c728e097fdb978cbc3296c16c56e10ef
+  metadata.gz: c40fe45194a04923ed48fbb0d6efb18167fba2cd0af2220d23981ec0128fca8b
+  data.tar.gz: 3ecda8f9b0391686716eb10c151bdfa688b7b84e2b2ca48e8cbc02d99478205c
 SHA512:
-  metadata.gz: 01e25f9bc9f91d0b14079503acb5b1c15efe1a6ef48a1067548ac19a109a717c0c0c24f843110f481b7baba0a8a140b1a57783e483a2a710328227dcece20d40
-  data.tar.gz: 9ead2dc6192bd2847c4b0c96ca6e4f45fa7aec13fed3b8fdcb0a371b3da4c716c16b611d7bb7bfee7f05c3683089afa7229ae3f38ace3dd917c0ade22458d418
+  metadata.gz: a4851bb43b47f7d4d181d4f49e21ebfc2268df8cd29b5d1477007f992be0c0d5d0b1394621fc8c71f8b7e58530b5b64f639dd3b3ccd21fd6606ef6015c8800db
+  data.tar.gz: ff879c9a5f4fae140aeec1c2a2212ad705adb8bf7f176375406c5dfc8f9c137195847329acc48ca36dc43bff4a3f0f8348e5cc13b47d54597273e7862a3d490d

data/README.md

@@ -227,6 +227,14 @@ class ShopController < ApplicationController
     config.form.item(:collection_check_boxes, :state_ids, State.all, :id, :name)
     config.form.item(:collection_radio_buttons, :status, Shop.statuses.map{|k, _v| [k, k.titleize]}, :first, :last)
 
+    # You can add an image uploader with preview to the form. The save and remove part to the model corresponds to [carrierwave](https://github.com/carrierwaveuploader/carrierwave).
+    # In the example below, you need to mount the carrierwave uploader on the thumb column of the model.
+    #
+    # class Shop < ApplicationRecord
+    #   mount_uploader :thumb, ShopThumbUploader
+    #
+    config.form.item(:carrierwave_image, :thumb, preview_max_size: {width: '300px', height: '300px'})
+
     # If you want to display more free form field, use block.
     # The block is executed in the context of view, so you can call the method of view.
     config.form.item :block, :free do |form, field|
@@ -506,5 +514,9 @@ end
 * We use rspec for test.
 * Check code with [rubocop](https://github.com/bbatsov/rubocop).
 
+### Development hints.
+
+Please support both Bootstrap 3/4. You can change CSS to Bootstrap3 by registering `bootstrap=3` in cookie in the sample page.
+
 ## License
 The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/app/assets/javascripts/dynamic_scaffold.js

@@ -1,4 +1,5 @@
 //= require dynamic_scaffold/common
 //= require dynamic_scaffold/delete
 //= require dynamic_scaffold/pagination
-//= require dynamic_scaffold/sorter
+//= require dynamic_scaffold/sorter
+//= require dynamic_scaffold/image

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

@@ -0,0 +1,37 @@
+document.addEventListener('dynamic_scaffold:load', function (){
+  const inputs = document.querySelectorAll('.dynamicScaffoldJs-image')
+  Array.prototype.forEach.call(inputs, function(input){
+    // initialize
+    const wrapper = input.closest('.dynamicScaffoldJs-image-wrapper')
+    const preview = wrapper.querySelector('.dynamicScaffoldJs-image-preview')
+    const img = preview.querySelector('img')
+
+    // hide on non image
+    if(!img.getAttribute('src')){
+      preview.style.display = 'none'
+    }
+
+    // delete event
+    const button = preview.querySelector('.dynamicScaffoldJs-image-remove')
+    const flag = wrapper.querySelector('.dynamicScaffoldJs-image-remove-flag')
+    button.addEventListener('click', function(e){
+      preview.style.display = 'none'
+      flag.disabled = false
+      input.value = ''
+    })
+
+    // change event
+    input.addEventListener('change', function(e){
+      const reader = new FileReader();
+      reader.onload = function (e) {
+        img.src = e.target.result
+        preview.style.display = 'block'
+        flag.disabled = true
+      }
+
+      if(input.files.length){
+        reader.readAsDataURL(input.files[0])
+      }
+    })
+  })
+})

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

@@ -8,14 +8,20 @@ document.addEventListener('dynamic_scaffold:load', function(){
       sourceRect = source.getBoundingClientRect()
       targetRect = target.getBoundingClientRect()
 
-      //Calculate the duration according to the moving distance.
-      const distance = targetRect.top - sourceRect.top
+
+      // Find the distance between two points and calculate the animation duration.
       const durationBase = 200
+      const distance = Math.sqrt(
+        Math.pow(targetRect.left - sourceRect.left, 2 ) + Math.pow( targetRect.top - sourceRect.top, 2 )
+      )
       const durationFactor = Math.abs(distance) * 0.03
       const duration = Math.min(durationBase + durationFactor, 600)
-
       source.style.transition = 'all ' + duration + 'ms cubic-bezier(1.0, 0, 0.25, 1.0)'
-      source.style.transform = 'translateY(' + distance + 'px)'
+
+      //Calculate the duration according to the moving distance.
+      const y = targetRect.top - sourceRect.top
+      const x = targetRect.left - sourceRect.left
+      source.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
     }))
   }
 

data/app/assets/stylesheets/dynamic_scaffold/bootstrap4.scss

@@ -4,6 +4,7 @@
 $dynamic_scaffold_primary: #007bff !default;
 $dynamic_scaffold_secondary: #868e96 !default;
 $dynamic_scaffold_warning: #ffc107 !default;
+$dynamic_scaffold_danger: #dc3545 !default;
 
 .btn-outline-primary, .btn-outline-secondary, .btn-outline-warning{
   background-color: #fff;
@@ -29,7 +30,11 @@ $dynamic_scaffold_warning: #ffc107 !default;
   fill: $dynamic_scaffold_warning;
 }
 
-.btn-outline-warning:hover{
+.btn-outline-danger path{
+  fill: $dynamic_scaffold_danger;
+}
+
+.btn-outline-warning:hover, .btn-outline-danger:hover{
   path{
     fill: #fff;
   }

data/app/assets/stylesheets/dynamic_scaffold/resplist.scss

@@ -49,10 +49,12 @@
   clear: both;
 }
 
-ul.resplist {
+.resplist {
   list-style: none;
   padding: 0;
   border-collapse: separate;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .resplist-striped .resplist-row:nth-child(odd) {
@@ -114,6 +116,7 @@ ul.resplist {
   background-color: #fff;
   border-top: 1px solid #dddddd;
   padding: 0;
+  width: 100%;
 }
 
 .resplist-item-xs {

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

@@ -26,6 +26,22 @@
                   <%end%>
                 </div>
               <%end%>
+            <% elsif elem.type? :carrierwave_image %>
+              <%- image = form.object.public_send(elem.name) -%>
+              <div class="dynamicScaffoldJs-image-wrapper">
+                <div class="dynamicScaffoldJs-image-preview panel panel-default card mb-1" style="<%= elem.preview_image_style %>">
+                  <div class="text-right panel-heading card-header">
+                    <button type="button" class="btn btn-outline-danger btn-danger btn-sm dynamicScaffoldJs-image-remove">
+                      <%= dynamic_scaffold_icon :times %>
+                    </button>
+                  </div>
+                  <img src="<%= image.url if image.file.present? %>" alt="" class="img-responsive img-fluid">
+                </div>
+                <%= form.hidden_field "remove_#{elem.name}", value: "1", disabled:"disabled", class: 'dynamicScaffoldJs-image-remove-flag'%>
+                <%= elem.render(self, form, 'form-control-file dynamicScaffoldJs-image') do |attr|%>
+                  <%= form.file_field(elem.name, attr) %>
+                <%end%>
+              </div>
             <% else %>
               <%= elem.render(self, form, class_names('form-control', {'is-invalid': @record.errors[elem.proxy_field.name].any?})) %>
             <% end %>

data/lib/dynamic_scaffold/config.rb

@@ -263,6 +263,9 @@ module DynamicScaffold
       when
         :block then
         item = Form::Item::Block.new(@config, type, *args, block)
+      when
+        :carrierwave_image then
+        item = Form::Item::CarrierWaveImage.new(@config, type, *args)
       else
         raise DynamicScaffold::Error::Config, "Unknown form item type #{type}"
       end

data/lib/dynamic_scaffold/controller_utilities.rb

@@ -30,7 +30,10 @@ module DynamicScaffold
 
       # Get paramters for update record.
       def update_values
-        permitting = dynamic_scaffold.form.items.map(&:strong_parameter).concat(dynamic_scaffold.form.permit_params)
+        permitting = dynamic_scaffold.form.items
+                       .map(&:strong_parameter)
+                       .concat(dynamic_scaffold.form.permit_params)
+                       .flatten
         values = params
                    .require(dynamic_scaffold.model.name.underscore)
                    .permit(*permitting)

data/lib/dynamic_scaffold/form/item/carrier_wave_image.rb

@@ -0,0 +1,31 @@
+module DynamicScaffold
+  module Form
+    module Item
+      class CarrierWaveImage < Base
+        def initialize(config, type, name, options = {})
+          super(config, type, name, {})
+          @options = options
+        end
+
+        def preview_image_style
+          max_size = @options[:preview_max_size]
+          return '' unless max_size
+
+          ''.tap do |s|
+            s << "max-width: #{max_size[:width]};" if max_size[:width]
+            s << "max-height: #{max_size[:height]};" if max_size[:height]
+          end
+        end
+
+        def render(_view, _form, classnames = nil)
+          html_attributes = build_html_attributes(classnames)
+          yield(html_attributes)
+        end
+
+        def strong_parameter
+          [@name, "remove_#{@name}"]
+        end
+      end
+    end
+  end
+end

data/lib/dynamic_scaffold/icons/fontawesome.rb

@@ -41,6 +41,8 @@ Rails.application.config.dynamic_scaffold.icons = proc do |name|
     DynamicScaffold::Fontawesome.inline_svg('angle-double-up.svg')
   when :bottom then
     DynamicScaffold::Fontawesome.inline_svg('angle-double-down.svg')
+  when :times then
+    DynamicScaffold::Fontawesome.inline_svg('times.svg')
   else
     raise DynamicScaffold::Error::InvalidIcon, "Unknown icon type #{name} specified."
   end

data/lib/dynamic_scaffold/version.rb

@@ -1,3 +1,3 @@
 module DynamicScaffold
-  VERSION = '0.3.1'.freeze
+  VERSION = '0.4.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dynamic_scaffold
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.4.0
 platform: ruby
 authors:
 - Masamoto Miyata
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-05-22 00:00:00.000000000 Z
+date: 2018-05-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: classnames-rails-view
@@ -226,6 +226,7 @@ files:
 - app/assets/javascripts/dynamic_scaffold.js
 - app/assets/javascripts/dynamic_scaffold/common.js
 - app/assets/javascripts/dynamic_scaffold/delete.js
+- app/assets/javascripts/dynamic_scaffold/image.js
 - app/assets/javascripts/dynamic_scaffold/pagination.js
 - app/assets/javascripts/dynamic_scaffold/sorter.js
 - app/assets/stylesheets/dynamic_scaffold/bootstrap3.scss
@@ -259,6 +260,7 @@ files:
 - lib/dynamic_scaffold/error/invalid_icon.rb
 - lib/dynamic_scaffold/form/item/base.rb
 - lib/dynamic_scaffold/form/item/block.rb
+- lib/dynamic_scaffold/form/item/carrier_wave_image.rb
 - lib/dynamic_scaffold/form/item/single_option.rb
 - lib/dynamic_scaffold/form/item/two_options.rb
 - lib/dynamic_scaffold/form/item/two_options_with_block.rb