From fa16612ba86a6a6a965c8f097aa6a0776878a5b9 Mon Sep 17 00:00:00 2001
From: nilsding <nilsding@nilsding.org>
Date: Mon, 29 Dec 2014 16:29:46 +0100
Subject: [PATCH] made the new cropper work

---
 app/assets/javascripts/settings.coffee | 68 ++++++++++++--------------
 app/views/user/edit.html.haml          | 16 ++++--
 2 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/app/assets/javascripts/settings.coffee b/app/assets/javascripts/settings.coffee
index a48f33e0..a11947ad 100644
--- a/app/assets/javascripts/settings.coffee
+++ b/app/assets/javascripts/settings.coffee
@@ -9,48 +9,40 @@
 ($ document).on 'change', 'input#user_profile_picture[type=file]', ->
   input = ($ this)[0]
 
-  ($ '#profile-picture-crop-controls').slideUp()
+  ($ '#profile-picture-crop-controls').slideUp 400, ->
+    if input.files and input.files[0]
+      fr = new FileReader()
+      ($ fr).on 'load', (e) ->
+        cropper = ($ '#profile-picture-cropper')
+        preview = ($ '#profile-picture-preview')
 
-  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
+        cropper.on 'load', ->
+          side = if cropper[0].naturalWidth > cropper[0].naturalHeight
+            cropper[0].naturalHeight
           else
-            preview[0].naturalWidth
-          console.log side
+            cropper[0].naturalWidth
 
-          jcrop.setOptions
-            onChange: showPreview
-            onSelect: showPreview
-            aspectRatio: 1
-            setSelect: [ 0, 0, side, side ]
-            allowSelect: false
+          cropper.guillotine
+            width: side
+            height: side
+            onChange: (data, action) ->
+              console.log data
+              ($ '#crop_x').val Math.floor(data.x)
+              ($ '#crop_y').val Math.floor(data.y)
+              ($ '#crop_w').val Math.floor(data.w)
+              ($ '#crop_h').val Math.floor(data.h)
+#              rx = 100 / data.w
+#              ry = 100 / data.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 * data.x) + 'px'
+#                marginTop: '-' + Math.round(ry * data.y) + 'px'
 
+          ($ '#cropper-zoom-out').click -> cropper.guillotine 'zoomOut'
+          ($ '#cropper-zoom-in').click -> cropper.guillotine 'zoomIn'
           ($ '#profile-picture-crop-controls').slideDown()
 
-      preview.fadeOut 400, ->
-        ($ this).attr('src', e.target.result)
-        ($ this).fadeIn 400
+        cropper.attr 'src', e.target.result
 
-      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'
-          ($ '#crop_x').val Math.floor(coords.x)
-          ($ '#crop_y').val Math.floor(coords.y)
-          ($ '#crop_w').val Math.floor(coords.w)
-          ($ '#crop_h').val Math.floor(coords.h)
-
-  fr.readAsDataURL(input.files[0])
\ No newline at end of file
+    fr.readAsDataURL(input.files[0])
\ No newline at end of file
diff --git a/app/views/user/edit.html.haml b/app/views/user/edit.html.haml
index fe057bd5..bd2540c7 100644
--- a/app/views/user/edit.html.haml
+++ b/app/views/user/edit.html.haml
@@ -10,14 +10,20 @@
 
           .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(:medium), style: 'width: 100%; height: 100%'}
+              %img.img-rounded.profile--img{src: current_user.profile_picture.url(:medium)}
             .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(:medium)}
+          .row#profile-picture-crop-controls{style: 'display: none;'}
+            .col-sm-10.col-md-8
+              %strong Adjust your new image
+              %img#profile-picture-cropper{src: current_user.profile_picture.url(:medium)}
+            .col-sm-2.col-md-4
+              .btn-group
+                %button#cropper-zoom-out.btn.btn-inverse{type: :button}
+                  %i.fa.fa-search-minus
+                %button#cropper-zoom-in.btn.btn-inverse{type: :button}
+                  %i.fa.fa-search-plus
 
           = f.text_field :motivation_header, label: "Motivation header", placeholder: 'Ask me anything!'