added JCrop to view
This commit is contained in:
parent
7074a1edf7
commit
5071e3ffe8
|
@ -2,4 +2,51 @@
|
|||
($ document).on "submit", "form#edit_user", (evt) ->
|
||||
if ($ "input#user_current_password").val().length == 0
|
||||
evt.preventDefault()
|
||||
$("button[data-target=#modal-passwd]").trigger 'click'
|
||||
$("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])
|
|
@ -8,7 +8,16 @@
|
|||
|
||||
= f.text_field :display_name, label: "Your name"
|
||||
|
||||
= f.file_field :profile_picture
|
||||
.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!'
|
||||
|
||||
|
|
Loading…
Reference in New Issue