added JCrop to view

This commit is contained in:
nilsding 2014-12-29 13:52:19 +01:00
parent 7074a1edf7
commit 5071e3ffe8
2 changed files with 58 additions and 2 deletions

View File

@ -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])

View File

@ -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!'