simple_form_bs5_file_input 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0a01187ab37b834c60ee0739e576f7b35869e27657fd2ccecaf0cc75ecabc1aa
-  data.tar.gz: 4f5b26770518772bf430cfffd9592125fd455b2e9247eb9af9eb20ebe0764121
+  metadata.gz: a3644590aace1052e9505f4784b7146dbde206dc2297a9b9336eada0eb954fac
+  data.tar.gz: 803d6a3b7a7ef3d2165015d5a80600a09fcd940276e86814407b400306d7d555
 SHA512:
-  metadata.gz: 367087c90da736c938022e8bc4fd1bb6b449fc3ef7b8b60cbff799655d4133317aeb080f516e81548b9f22099b5e17a56ec8272a72f7031450017e39c9270393
-  data.tar.gz: 01dba7a9ed7983a2cc748292f3e41031920499d4eebe16628e790f2d6ff03de51790fc7be7fd69333a92ac459377365527de43734794576958bcc8eb97d3e2b6
+  metadata.gz: 1dd7c7a363de204dcdcd6cd50810403e796cd5a35bc03e4c827d516e4a719940941bc0f194e42f4a3457cfb34694f5f1391ba084ebbe5fc4d531d9e874d413e8
+  data.tar.gz: 6e98d851b926ec6cd7f60dff3d79bb15a460ecb4e3335da23f8c15e6e9d3a180f0518cce22a3aa2a0f9717ff0e692441debec8a80bff56fb6b9f3cf126d5a505

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    simple_form_bs5_file_input (0.0.2)
+    simple_form_bs5_file_input (0.0.3)
       rails
       simple_form
 

data/README.md

@@ -101,6 +101,28 @@ The new field is still compatible with the `direct_upload` param.
 Please remember to include the `activestorage.js` library in order to use the direct_upload feature.
 Direct upload will send the file BEFORE the page submission. You will get a progress bar in the file field while the file is uploading.
 
+## Resize
+
+You can add an option to the field to resize the image after upload (of course it has to be an image!).
+Add `resize: true` to your field.
+You can also specify a ratio for the cropper. For example `resize: 1` will lock to aspect ratio to a square. Beware of the float constraints in rails. If you want a 4/3 ratio use `resize: 4/3.to_f` as 4/3 gives 1 in rails.
+
+
+The resizer is based on [CropperJS](https://github.com/fengyuanchen/cropperjs) so you have to add cropper and jquery-cropper to your dependencies.
+```
+yarn add cropperjs
+yarn add jquery-cropper
+```
+then include the js files in your application.js file
+```
+//= require cropperjs/dist/cropper
+//= require jquery-cropper/dist/jquery-cropper
+```
+and include the css in your application.sass file
+```
+@import 'cropperjs/dist/cropper'
+```
+
 
 ## I18n
 

data/assets/javascripts/simple_form_bs5_file_input.js

@@ -1,40 +1,132 @@
-/*global $, document, window */
+/*global $, document, window, bootstrap */
 window.inputSingleDeletableFile = {
-    onDelete: function (e) {
+    onFileDelete: function (e) {
         'use strict';
         var $scope = $(this).parents('.js-sdfi-deletable-file');
         e.preventDefault();
         e.stopPropagation();
-        $('.js-sdfi-deletable-file__hidden-field', $scope).val('true');
+        $('.js-sdfi-deletable-file__infos-field', $scope).val('');
+        $('.js-sdfi-deletable-file__delete-field', $scope).val('true');
         $('input[type="file"]', $scope).val('');
         $scope.removeClass('sdfi-deletable-file--with-file');
-        // $('.custom-file-preview', scope).hide();
     },
 
-    onChange: function () {
+    onFileSelected: function () {
         'use strict';
         var $scope = $(this).parents('.js-sdfi-deletable-file'),
-            fileName = $(this).val()
-                .split('\\')
-                .pop(),
+            $resizeModal = $('.js-sdfi-deletable-file__resize', $scope),
+            files = this.files,
+            file,
             hasPreview = $('.js-sdfi-deletable-file__preview', $scope).length > 0,
+            hasResize = $resizeModal.length > 0,
+            modal,
             reader,
             size;
-        if (fileName !== '') {
+
+        if (!files.length) {
+            return;
+        }
+
+        file = files[0];
+
+        if (!hasResize) {
+            // name display is delayed if we need to resize
             $scope.addClass('sdfi-deletable-file--with-file');
-            $('.js-sdfi-deletable-file__label', $scope).html(fileName);
-            $('.js-sdfi-deletable-file__hidden-field', $scope).val('');
+            $('.js-sdfi-deletable-file__label', $scope).html(file.name);
+            $('.js-sdfi-deletable-file__delete-field', $scope).val('');
+        }
+
+        if (/^image\/\w+$/.test(file.type) && (hasResize || hasPreview)) {
+            reader = new FileReader();
+            reader.readAsDataURL(file);
+            if (hasResize) {
+                reader.onload = function () {
+                    modal = new bootstrap.Modal($resizeModal, {
+                        backdrop: 'static',
+                        keyboard: false
+                    });
+                    $resizeModal.attr('data-image-result', this.result);
+                    $resizeModal.attr('data-filename', file.name);
+                    modal.show();
+                };
+            } else if (hasPreview) {
+                size = $('.js-sdfi-deletable-file__preview', $scope).attr('data-size')
+                    .split('x');
+                reader.onload = function (e) {
+                    $('.js-sdfi-deletable-file__preview', $scope).html('<img src="' + e.target.result + '" width="' + size[0] + '" height="auto" class="img-fluid img-thumbnail">');
+                };
+            }
         }
-        // preview
-        if (hasPreview && this.files && this.files[0]) {
+    },
+
+    onResizeModalShown: function (e) {
+        'use strict';
+        var $modal = $(e.target),
+            $scope = $modal.parents('.js-sdfi-deletable-file'),
+            $imgContainer = $('.js-sdfi-sdfi-deletable-file__resize-image', $scope),
+            $image,
+            image = $modal.attr('data-image-result'),
+            ratio = $imgContainer.attr('data-ratio');
+
+        $imgContainer.html('<img class="js-" src="' + image + '">');
+
+        $image = $('img', $imgContainer);
+        $image.css('opacity', 0);
+        setTimeout(function () {
+            // init cropper with a small delay
+            $image.cropper({
+                aspectRatio: ratio,
+                autoCropArea: 1,
+                movable: false,
+                guides: false,
+                background: false,
+                viewMode: 1,
+                zoomable: false,
+                crop: function (data) {
+                    $('.js-sdfi-deletable-file__infos-field', $scope).val(JSON.stringify(data.detail));
+                }
+            });
+            $image.css('opacity', 1);
+        }, 100);
+    },
+
+    onResizeModalCancel: function (e) {
+        'use strict';
+        var $scope = $(e.target).parents('.js-sdfi-deletable-file');
+        $('.js-sdfi-deletable-file__infos-field', $scope).val('');
+        $('.js-sdfi-deletable-file__delete-field', $scope).val('true');
+        $('input[type="file"]', $scope).val('');
+        $scope.removeClass('sdfi-deletable-file--with-file');
+    },
+
+    onResizeModalValidate: function (e) {
+        'use strict';
+        var $scope = $(e.target).parents('.js-sdfi-deletable-file'),
+            $resizeModal = $('.js-sdfi-deletable-file__resize', $scope),
+            $imgContainer = $('.js-sdfi-sdfi-deletable-file__resize-image', $scope),
+            $image = $('img', $imgContainer),
+            filename = $resizeModal.attr('data-filename'),
+            hasPreview = $('.js-sdfi-deletable-file__preview', $scope).length > 0,
+            imageData,
+            resizeModal = $resizeModal[0],
+            modal = bootstrap.Modal.getInstance(resizeModal),
+            size;
+
+        $scope.addClass('sdfi-deletable-file--with-file');
+        $('.js-sdfi-deletable-file__label', $scope).html(filename);
+        $('.js-sdfi-deletable-file__delete-field', $scope).val('');
+
+        // set the preview if we have preview
+        if (hasPreview) {
             size = $('.js-sdfi-deletable-file__preview', $scope).attr('data-size')
                 .split('x');
-            reader = new FileReader();
-            reader.onload = function (e) {
-                $('.js-sdfi-deletable-file__preview', $scope).html('<img src="' + e.target.result + '" width="' + size[0] + '" height="auto" class="img-fluid img-thumbnail">');
-            };
-            reader.readAsDataURL(this.files[0]);
+            imageData = $image.data('cropper')
+                .getCroppedCanvas()
+                .toDataURL();
+
+            $('.js-sdfi-deletable-file__preview', $scope).html('<img src="' + imageData + '" width="' + size[0] + '" height="auto" class="img-fluid img-thumbnail">');
         }
+        modal.hide();
     },
 
     bindEvents: function (field) {
@@ -43,8 +135,12 @@ window.inputSingleDeletableFile = {
         $('.js-sdfi-deletable-file__change-btn', $(field)).on('click', function () {
             $('input[type="file"]', $(field)).click();
         });
-        $('.js-sdfi-deletable-file__delete-btn', $(field)).on('click', this.onDelete);
-        $('input[type="file"]', $(field)).on('change', this.onChange);
+        $('.js-sdfi-deletable-file__delete-btn', $(field)).on('click', this.onFileDelete);
+        $('input[type="file"]', $(field)).on('change', this.onFileSelected);
+
+        $('.js-sdfi-deletable-file__resize', field).on('shown.bs.modal', this.onResizeModalShown);
+        $('.js-sdfi-deletable-file__resize-cancel', field).on('click', this.onResizeModalCancel);
+        $('.js-sdfi-deletable-file__resize-validate', field).on('click', this.onResizeModalValidate);
     }
 };
 

data/assets/stylesheets/simple_form_bs5_file_input.sass

@@ -67,6 +67,12 @@
         pointer-events: none
         width: 0%
 
+    &__resize
+        .sdfi-sdfi-deletable-file__resize-image
+            img
+                max-width: 100%
+                max-height: 300px
+
     &--with-file
         input[type='file']
             display: none

data/config/locales/en.yml

@@ -1,3 +1,6 @@
 en:
   simple_form_bs5_file_input:
+    modal_close: Close
+    modal_title: Resize the image
+    modal_validate: Validate  
     replace_file: 'Change the file'

data/config/locales/fr.yml

@@ -1,3 +1,6 @@
 fr:
   simple_form_bs5_file_input:
-    replace_file: 'Remplacer le fichier'
+    modal_close: Fermer
+    modal_title: Cadrer l'image
+    modal_validate: Valider
+    replace_file: Remplacer le fichier

data/lib/has_one_attached_deletable.rb

@@ -14,6 +14,7 @@ class ActiveRecord::Base
       define_method :"resize_#{name}" do
         return unless send(name).attached?
 
+
         params = JSON(send("#{name}_infos"))
         # reset the infos to prevent multiple resize if multiple save
         instance_variable_set :"@#{name}_infos", nil
@@ -30,7 +31,7 @@ class ActiveRecord::Base
         variant = Rails::VERSION::MAJOR >= 6  ? send(name).variant(**transformations)
                                               : send(name).variant(combine_options: transformations)
 
-        variant_url = variant.processed.service_url
+        variant_url = variant.processed.url
         downloaded_image = URI.open(variant_url)
         attachable = { io: downloaded_image, filename: send(name).filename.to_s }
 

data/lib/simple_form_bs5_file_input/single_deletable_file_input.rb

@@ -16,17 +16,13 @@ class SingleDeletableFileInput < SimpleForm::Inputs::Base
           <div class="sdfi-deletable-file__delete-btn js-sdfi-deletable-file__delete-btn"></div>
           <div class="sdfi-deletable-file__upload-background"></div>
           <div class="sdfi-deletable-file__upload-progress"></div>
-          <input type="hidden" name="%s" class="js-sdfi-deletable-file__hidden-field" %s />
+          <input type="hidden" name="%s" class="js-sdfi-deletable-file__infos-field" %s />
+          <input type="hidden" name="%s" class="js-sdfi-deletable-file__delete-field" %s />
         </div>
         %s
+        %s
       </div>
-    ', has_file_class, input_field(wrapper_options), field_classes(wrapper_options), change_file_text, field_id, existing_file_name_or_default_text, input_hidden_name, input_hidden_value, preview_div)
-  end
-
-  def preview_div
-    if options[:preview]
-      format('<div class="sdfi-deletable-file__preview js-sdfi-deletable-file__preview" data-size="%s">%s</div>', preview_image_width, preview_image_tag)
-    end
+    ', has_file_class, input_field(wrapper_options), field_classes(wrapper_options), change_file_text, field_id, existing_file_name_or_default_text, input_infos_name, input_infos_value, input_delete_name, input_delete_value, preview_div, resize_div)
   end
 
   def has_file_class
@@ -61,14 +57,52 @@ class SingleDeletableFileInput < SimpleForm::Inputs::Base
     end
   end
 
-  def input_hidden_name
+  def input_delete_name
     "#{@builder.object_name}[#{attribute_name.to_s}_delete]"
   end
 
-  def input_hidden_value
+  def input_delete_value
     "value='true'" if @builder.object.send("#{attribute_name}_delete") == 'true'
   end
 
+  def input_infos_name
+    "#{@builder.object_name}[#{attribute_name.to_s}_infos]"
+  end
+
+  def input_infos_value
+    "value='#{@builder.object.send("#{attribute_name}_infos")}'" if @builder.object.send("#{attribute_name}_infos")
+  end
+
+  def preview_div
+    if options[:preview]
+      format('<div class="sdfi-deletable-file__preview js-sdfi-deletable-file__preview" data-size="%s">%s</div>', preview_image_width, preview_image_tag)
+    end
+  end
+
+  def resize_div
+    if options[:resize]
+      format('<div class="sdfi-deletable-file__resize js-sdfi-deletable-file__resize modal" tabindex="-1">
+                <div class="modal-dialog">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <h5 class="modal-title">%s</h5>
+                      <button type="button" class="btn-close js-sdfi-deletable-file__resize-cancel" data-bs-dismiss="modal" aria-label="%s"></button>
+                    </div>
+                    <div class="modal-body">
+                      <div class="sdfi-sdfi-deletable-file__resize-image js-sdfi-sdfi-deletable-file__resize-image" data-ratio="%s">
+
+                      </div>
+                    </div>
+                    <div class="modal-footer">
+                      <button type="button" class="btn btn-sm btn-secondary js-sdfi-deletable-file__resize-cancel" data-bs-dismiss="modal">%s</button>
+                      <button type="button" class="btn btn-sm btn-primary js-sdfi-deletable-file__resize-validate">%s</button>
+                    </div>
+                  </div>
+                </div>
+              </div>', modal_title, close_btn_text, resize_ratio, close_btn_text, validate_btn_text)
+    end
+  end
+
   private
 
   def file_attachment
@@ -83,6 +117,10 @@ class SingleDeletableFileInput < SimpleForm::Inputs::Base
     options[:preview] == true ? default_preview_image_width : options[:preview].to_i
   end
 
+  def resize_ratio
+    options[:resize] == true ? '' : options[:resize]
+  end
+
   def preview_image_tag
     if should_display_file? && file_attachment&.variable?
       image_tag(file_attachment.variant(resize: "#{preview_image_width}x").processed.url, class: 'img-fluid img-thumbnail', width: preview_image_width)
@@ -92,4 +130,16 @@ class SingleDeletableFileInput < SimpleForm::Inputs::Base
   def default_preview_image_width
     1000
   end
+
+  def modal_title
+    I18n.t('simple_form_bs5_file_input.modal_title')
+  end
+
+  def close_btn_text
+    I18n.t('simple_form_bs5_file_input.modal_close')
+  end
+
+  def validate_btn_text
+    I18n.t('simple_form_bs5_file_input.modal_validate')
+  end
 end

data/lib/simple_form_bs5_file_input/version.rb

@@ -1,3 +1,3 @@
 module SimpleFormBs5FileInput
-  VERSION = "0.0.2".freeze
+  VERSION = "0.0.3".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: simple_form_bs5_file_input
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - Pierre-andré Boissinot
@@ -89,6 +89,7 @@ files:
 - lib/simple_form_bs5_file_input/single_deletable_file_input.rb
 - lib/simple_form_bs5_file_input/version.rb
 - pkg/simple_form_bs5_file_input-0.0.1.gem
+- pkg/simple_form_bs5_file_input-0.0.2.gem
 - simple_form_bs5_file_input.gemspec
 homepage: https://github.com/noesya/simple_form_bs5_file_input
 licenses: