added JCrop to view

app/assets/javascripts/settings.coffee

@@ -3,3 +3,50 @@
   if ($ "input#user_current_password").val().length == 0
     evt.preventDefault()
     $("button[data-target=#modal-passwd]").trigger 'click'
+
+
+# Profile pic
+($ document).on 'change', 'input#user_profile_picture[type=file]', ->
+  input = ($ this)[0]
+
+  ($ '#profile-picture-crop-controls').slideUp()
+
+  if input.files and input.files[0]
+    fr = new FileReader()
+    ($ fr).on 'load', (e) ->
+      cropper = ($ '#profile-picture-cropper')
+      preview = ($ '#profile-picture-preview')
+      ($ '.jcrop-holder').remove()
+      jcrop = $.Jcrop('#profile-picture-cropper')
+
+      preview.on 'load', ->
+        jcrop.setImage e.target.result, ->
+          side = if preview[0].naturalWidth > preview[0].naturalHeight
+            preview[0].naturalHeight
+          else
+            preview[0].naturalWidth
+          console.log side
+
+          jcrop.setOptions
+            onChange: showPreview
+            onSelect: showPreview
+            aspectRatio: 1
+            setSelect: [ 0, 0, side, side ]
+            allowSelect: false
+
+          ($ '#profile-picture-crop-controls').slideDown()
+
+      preview.fadeOut 400, ->
+        ($ this).attr('src', e.target.result)
+        ($ this).fadeIn 400
+
+      showPreview = (coords) ->
+        rx = 100 / coords.w
+        ry = 100 / coords.h
+        ($ '#profile-picture-preview').css
+          width: Math.round(rx * preview[0].naturalWidth) + 'px'
+          height: Math.round(ry * preview[0].naturalHeight) + 'px'
+          marginLeft: '-' + Math.round(rx * coords.x) + 'px'
+          marginTop: '-' + Math.round(ry * coords.y) + 'px'
+
+    fr.readAsDataURL(input.files[0])

app/views/user/edit.html.haml

@@ -8,8 +8,17 @@
 
           = f.text_field :display_name, label: "Your name"
 
+          .media
+            .pull-left
+              %div.img-rounded.profile--img{style: 'width:100px;height:100px;overflow:hidden;margin-left:5px:'}
+                %img#profile-picture-preview{src: current_user.profile_picture.url, style: 'width: 100%; height: 100%'}
+            .media-body
               = f.file_field :profile_picture
 
+          .well#profile-picture-crop-controls{style: 'display: none;'}
+            %strong Adjust image
+            %img#profile-picture-cropper{src: current_user.profile_picture.url}
+
           = f.text_field :motivation_header, label: "Motivation header", placeholder: 'Ask me anything!'
 
           = f.text_field :website, label: "Website", placeholder: 'http://bad-dragon.com'