dynamic_scaffold 0.8.1 → 0.8.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2d38fc22e5839b2a4f2fda31b49b33750e787500a6d031d19e713bef0cf77019
-  data.tar.gz: 5a40a274745f8f9f39e8928f5aa0063c188142a9b714593137e5b0a75d3ad09c
+  metadata.gz: 870a77249eb9787da82b0b1baa43e4c1a637bc4e87c1864492954f2ce98d5b71
+  data.tar.gz: 11fd6107a0974ba41efd2847056732ab9092dd4419e3da2b722b846064098fce
 SHA512:
-  metadata.gz: 5a1bb89adddf8b3ad91d241cac6090f3e6bc9b8a58f6a2160f9f546529a62763451acf61230ebf0abfd166b4527dc6427ae3c659578b8035e2ff220704d1bba3
-  data.tar.gz: 152ed6d4b6bacce23dd7eb49619211796bb6cc12b885677a59789714477028717b63deb74a9582911e5c695c36714c1f57f2cd7b4a23bcaba38d44b81386ad2e
+  metadata.gz: ef79f42adc0334b5ef1594f3adbf506d5c3f0772df4a11379bf69d89b9c11ae9987e62460b3c822489f7aa8c0ab08dc1c147b76cf3f39b4c4e47aba990ada451
+  data.tar.gz: 75cfb87526cddcee3608ef3df9c2d15e3885adc7a3caaad1388846c6777cc590cc6c4a88f777542520b475e8820122d5b77b908c9307263585698c17a301696b

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

@@ -6,7 +6,8 @@ document.addEventListener('dynamic_scaffold:load', function (){
     const preview = wrapper.querySelector('.js-ds-image-preview')
     const img = preview.querySelector('img')
     const cropper_input = wrapper.querySelector('.js-ds-image-cropper')
-
+    const cropper_display = wrapper.querySelector('.js-ds-image-cropper-display')
+    
     // init preview display
     preview.style.display = 'inline-block'
 
@@ -28,19 +29,37 @@ document.addEventListener('dynamic_scaffold:load', function (){
       })
     }
 
-    // change event
+    
+    function initCropper(detail){
+      const options = JSON.parse(cropper_input.getAttribute('data-options'))
+      options.crop = function(event){
+        cropper_input.value = JSON.stringify(event.detail)
+        cropper_display.innerHTML = 'W:' + Math.round(event.detail.width) + ' x H:' + Math.round(event.detail.height)
+      }
+      options.ready = function(){
+        if(detail){
+          this.cropper.setData(detail)
+        }
+      }
+      const result = new Cropper(img, options)
+
+      return result
+    }
+
+    
     var cropper = undefined
+    if(cropper_input && cropper_input.value){
+      cropper = initCropper(JSON.parse(cropper_input.value))
+    }
+
+    // change event
     input.addEventListener('change', function(e){
       const reader = new FileReader();
       reader.onload = function (e) {
         if(cropper) cropper.destroy()
         img.src = e.target.result
         if(cropper_input){
-          const options = JSON.parse(cropper_input.getAttribute('data-options'))
-          options.crop = function(event){
-            cropper_input.value = JSON.stringify(event.detail)
-          }
-          cropper = new Cropper(img, options)
+          cropper = initCropper()
         }
 
         preview.style.display = 'inline-block'

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

@@ -30,9 +30,6 @@
             <% elsif elem.type? :carrierwave_image %>
               <%- image = form.object.public_send(elem.name) -%>
               <div class="js-ds-image-wrapper">
-                <%- if elem.cropper.present? -%>
-                <%= form.hidden_field "cropper_#{elem.name}", class: "js-ds-image-cropper", data:{options: elem.cropper.to_json} %>
-                <%- end -%>
                 <div class="js-ds-image-preview panel panel-default card mb-1">
                   <% if elem.options[:removable] %>
                   <div class="text-right panel-heading card-header">
@@ -42,6 +39,12 @@
                   </div>
                   <% end %>
                   <div class="panel-body card-body">
+                    <%- if elem.cropper.present? -%>
+                      <%= form.hidden_field "cropper_#{elem.name}", class: "js-ds-image-cropper", data:{options: elem.cropper.to_json} %>
+                      <div class="text-right" style="height: 24px;">
+                        <span class="js-ds-image-cropper-display badge badge-primary"></span>
+                      </div>
+                    <%- end -%>
                     <div style="<%= elem.preview_image_style %>">
                       <img src="<%= image.url if image.file.present? %>" alt="" class="img-responsive img-fluid">
                     </div>

data/lib/dynamic_scaffold/version.rb

@@ -1,3 +1,3 @@
 module DynamicScaffold
-  VERSION = '0.8.1'.freeze
+  VERSION = '0.8.2'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dynamic_scaffold
 version: !ruby/object:Gem::Version
-  version: 0.8.1
+  version: 0.8.2
 platform: ruby
 authors:
 - Masamoto Miyata
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-07-25 00:00:00.000000000 Z
+date: 2018-07-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: classnames-rails-view