FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

made the new cropper work

This commit is contained in:
nilsding 2014-12-29 16:29:46 +01:00
parent 26363c4742
commit fa16612ba8
2 changed files with 41 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
app/assets/javascripts/settings.coffee
View File

@ -9,48 +9,40 @@
($ document).on 'change', 'input#user_profile_picture[type=file]', -> ($ document).on 'change', 'input#user_profile_picture[type=file]', ->
input = ($ this)[0] 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] cropper.on 'load', ->
fr = new FileReader() side = if cropper[0].naturalWidth > cropper[0].naturalHeight
($ fr).on 'load', (e) -> cropper[0].naturalHeight
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 else
preview[0].naturalWidth cropper[0].naturalWidth
console.log side
jcrop.setOptions cropper.guillotine
onChange: showPreview width: side
onSelect: showPreview height: side
aspectRatio: 1 onChange: (data, action) ->
setSelect: [ 0, 0, side, side ] console.log data
allowSelect: false ($ '#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() ($ '#profile-picture-crop-controls').slideDown()
preview.fadeOut 400, -> cropper.attr 'src', e.target.result
($ this).attr('src', e.target.result)
($ this).fadeIn 400
showPreview = (coords) -> fr.readAsDataURL(input.files[0])
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])

16
app/views/user/edit.html.haml
View File

@ -10,14 +10,20 @@
.media .media
.pull-left .pull-left
%div.img-rounded.profile--img{style: 'width:100px;height:100px;overflow:hidden;margin-left:5px:'} %img.img-rounded.profile--img{src: current_user.profile_picture.url(:medium)}
%img#profile-picture-preview{src: current_user.profile_picture.url(:medium), style: 'width: 100%; height: 100%'}
.media-body .media-body
= f.file_field :profile_picture = f.file_field :profile_picture
.well#profile-picture-crop-controls{style: 'display: none;'} .row#profile-picture-crop-controls{style: 'display: none;'}
%strong Adjust image .col-sm-10.col-md-8
%img#profile-picture-cropper{src: current_user.profile_picture.url(:medium)} %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!' = f.text_field :motivation_header, label: "Motivation header", placeholder: 'Ask me anything!'