Add croppie tool to avatar editing [SCI-3502] (#1801)

* Add croppie tool to avatar editing

app/assets/javascripts/application.js.erb

@@ -46,6 +46,7 @@
 // Initialize links for submitting forms. This is useful for submitting
 // forms with clicking on links outside form in cases when other than
 // GET method is used.
+
 function initFormSubmitLinks(el) {
 
   el = el || $(document.body);

app/assets/javascripts/users/registrations/edit.js

@@ -68,6 +68,27 @@
       $(this).renderFormErrors('user', data.responseJSON);
     });
 
+  $('#user_raw_avatar').change(function() {
+    var reader = new FileReader();
+    var inputField = this;
+    var croppieContainer;
+
+    reader.readAsDataURL(inputField.files[0]);
+    reader.onload = function() {
+      $('#user_avatar').val(reader.result);
+      $('.new-avatar-preview-container').css('display', '').children().remove();
+      $('<img class="new-avatar-cropping-preview" src="' + reader.result + '"></img>').appendTo('.new-avatar-preview-container');
+      croppieContainer = $('.new-avatar-cropping-preview');
+      croppieContainer.croppie({ viewport: { type: 'circle' } });
+      $('.new-avatar-preview-container').off('update.croppie').on('update.croppie', function() {
+        croppieContainer.croppie('result', { type: 'base64', format: 'jpeg', circle: false })
+          .then(function(html) {
+            $('#user_avatar').val(html);
+          });
+      });
+    };
+  });
+
   $('#user-avatar-field :submit').click(function(ev) {
     var $form = $(ev.target.form);
     var $fileInput = $form.find('input[type=file]');

app/assets/stylesheets/shared/avatar.scss

@@ -16,3 +16,10 @@
     width: 100%;
   }
 }
+
+.new-avatar-preview-container {
+  height: 200px;
+  margin-bottom: 45px;
+  position: relative;
+  width: 100%;
+}

app/javascript/packs/custom/croppie.js

@@ -0,0 +1 @@
+require('croppie');

app/javascript/packs/custom/croppie_styles.scss

@@ -0,0 +1 @@
+@import "~croppie/croppie";

app/views/users/registrations/edit.html.erb

@@ -43,9 +43,11 @@
               <div data-part="edit" style="display: none;">
                 <div class="well">
                   <h4><%=t "users.registrations.edit.avatar_title" %></h4>
+                  <div class="new-avatar-preview-container" style="display:none"></div>
                   <div class="form-group avatar-file-upload">
                     <%= f.label :avatar, t("users.registrations.edit.avatar_edit_label") %>
-                    <%= f.file_field :avatar, class: "btn btn-default" %>
+                    <%= f.file_field :raw_avatar, class: "btn btn-default" %>
+                    <%= hidden_field_tag "user[avatar]", "" %>
                   </div>
                   <div class="align-right">
                     <a href="#" class="btn btn-default" data-action="cancel"><%=t "general.cancel" %></a>
@@ -233,5 +235,8 @@
   </div>
 </div>
 
+<%= javascript_pack_tag 'custom/croppie' %>
+<%= stylesheet_pack_tag 'custom/croppie_styles' %>
 <%= javascript_include_tag("canvas-to-blob.min") %>
 <%= javascript_include_tag "users/registrations/edit" %>
+

features/settings_page/profile.feature

@@ -22,15 +22,15 @@ Background:
 Scenario: Unsuccessful avatar image upload, file is too big
   Given I'm on the profile page
   Then I click on image within ".avatar-container" element
-  And I attach a "Moon.png" file to "user_avatar" field
-  And I click on "Upload"
+  And I attach a "Moon.png" file to "user_raw_avatar" field
+  And I trigger click '#user-avatar-field .btn-success'
   And I should see "Your avatar file cannot be larger than 0.2 MB. (Please try again with a smaller file.)" error message
 
 @javascript
 Scenario: Unsuccessful avatar image upload, file is invalid
   Given I'm on the profile page
   Then I click on image within ".avatar-container" element
-  And I attach a "File.txt" file to "user_avatar" field
+  And I attach a "File.txt" file to "user_raw_avatar" field
   And I click on "Upload"
   And I should see "Avatar content type is invalid" error message
 
@@ -38,7 +38,7 @@ Scenario: Unsuccessful avatar image upload, file is invalid
 Scenario: Successful upload avatar image
   Given I'm on the profile page
   Then I click on image within ".avatar-container" element
-  And I attach a "Star.png" file to "user_avatar" field
+  And I attach a "Star.png" file to "user_raw_avatar" field
   Then I click "Upload" button
   And I should see "Your account has been updated successfully" flash message
 

features/step_definitions/shared_steps.rb

@@ -2,6 +2,10 @@ When(/^I click "(.+)" button$/) do |button|
   click_button(button)
 end
 
+Then("I trigger click {string}") do |string|
+  find(string).trigger('click')
+end
+
 Given(/^Show me the page$/) do
   save_and_open_page
 end

package.json

@@ -59,6 +59,7 @@
     "coffeescript": "^1.12.6",
     "compression-webpack-plugin": "^1.1.11",
     "css-loader": "^0.28.11",
+    "croppie": "^2.6.4",
     "extract-text-webpack-plugin": "^3.0.2",
     "fabric": "1.6.7",
     "file-loader": "^0.11.2",