@ -1,22 +1,75 @@
<div class="well">
<div class="alert" id="message" style="display:none">
<button type="button" class="close" data-dismiss="message">×</button>
<strong></strong>
<p></p>
</div>
<!-- Change Picture Modal -->
<div id="change-picture-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
<h3 id="myModalLabel">Change Picture</h3>
</div>
<div class="modal-body">
<div id="gravatar-box">
<img id="user-gravatar-picture" src="" class="img-polaroid user-profile-picture">
<span class="user-picture-label">Gravatar</span>
<i class='icon-ok'></i>
</div>
<div id="uploaded-box">
<img id="user-uploaded-picture" src="" class="img-polaroid user-profile-picture">
<span class="user-picture-label">Uploaded picture</span>
<i class='icon-ok'></i>
</div>
<a id="uploadPictureBtn" href="#">Upload new picture</a>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="savePictureChangesBtn" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- Upload picture modal-->
<div id="upload-picture-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
<h3 id="myModalLabel">Upload Picture</h3>
</div>
<div class="modal-body">
<form id="uploadForm" action="/pictureupload" method="post" enctype="multipart/form-data">
<input id="userPhotoInput" type="file" name="userPhoto" >
</form>
<span id="status" />
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="pictureUploadSubmitBtn" class="btn btn-primary">Upload Picture</button>
</div>
</div>
<!-- BEGIN user -->
<div class="account-username-box">
<span class="account-username"><a href="/users/ { user . username } "> { user . username } </a></span>
<span class="pull-right"><a href="/users/ { user . username } /edit">edit</a></span>
</div>
<div class="account-picture-block">
<img src=" { user . picture } ?s=128" />
<div class="account-picture-block text-center">
<img id="user-current-picture" class="user-profile-picture" src=" { user . picture } " /><br/>
<a id="changePictureBtn" href="#">change picture</a>
</div>
@ -66,35 +119,187 @@
</form>
</div>
<!-- how to pass data to the script ?? -->
<div id="user-data-picture" class="hide"> { user . picture } </div>
<div id="user-data-gravatarpicture" class="hide"> { user . gravatarpicture } </div>
<div id="user-data-uploadedpicture" class="hide"> { user . uploadedpicture } </div>
<!-- END user -->
</div>
</div>
<script type="text/javascript">
(function() {
$(document).ready(function() {
$('#uploadForm').submit(function() {
status('uploading the file ...');
$(this).ajaxSubmit( {
error: function(xhr) {
status('Error: ' + xhr.status);
},
success: function(response) {
if(response.error) {
status('Opps, something bad happened');
return;
}
var imageUrlOnServer = response.path;
$('#user-current-picture').attr('src', imageUrlOnServer);
$('#user-uploaded-picture').attr('src', imageUrlOnServer);
$('#user-data-uploadedpicture').html(imageUrlOnServer);
$('#upload-picture-modal').modal('hide');
socket.emit('api:updateHeader', { fields : [ 'username' , 'picture' ] } );
status('');
}
});
return false;
});
function status(message) {
$('#status').text(message);
}
});
(function() {
function submitUserData() {
var userData = {
uid:$('#inputUID').val(),
email:$('#inputEmail').val(),
fullname:$('#inputFullname').val(),
website:$('#inputWebsite').val(),
birthday:$('#inputBirthday').val(),
location:$('#inputLocation').val()
};
$.post('/edituser',
userData,
function(data) {
}
);
}
function changeUserPicture(type) {
var userData = {
uid: $('#inputUID').val(),
type: type
};
$.post('/changeuserpicture',
userData,
function(data) {
socket.emit('api:updateHeader', { fields : [ 'username' , 'picture' ] } );
}
);
}
$(document).ready(function() {
var selectedImageType = '';
$('#submitBtn').on('click',function() {
var userData = {
uid:$('#inputUID').val(),
email:$('#inputEmail').val(),
fullname:$('#inputFullname').val(),
website:$('#inputWebsite').val(),
birthday:$('#inputBirthday').val(),
location:$('#inputLocation').val()
};
$.post('/edituser',
userData,
function(data) {
submitUserData();
}
);
});
function updateImages() {
var currentPicture = $('#user-current-picture').attr('src');
var gravatarPicture = $('#user-data-gravatarpicture').html();
var uploadedPicture = $('#user-data-uploadedpicture').html();
if(gravatarPicture)
$('#user-gravatar-picture').attr('src', gravatarPicture);
else
$('#user-gravatar-picture').addClass('hide');
if(uploadedPicture)
$('#user-uploaded-picture').attr('src', uploadedPicture);
else
$('#user-uploaded-picture').addClass('hide');
if(currentPicture == gravatarPicture)
$('#gravatar-box .icon-ok').show();
else
$('#gravatar-box .icon-ok').hide();
if(currentPicture == uploadedPicture)
$('#uploaded-box .icon-ok').show();
else
$('#uploaded-box .icon-ok').hide();
}
$('#changePictureBtn').on('click', function() {
selectedImageType = '';
updateImages();
$('#change-picture-modal').modal('show');
return false;
});
$('#gravatar-box').on('click', function() {
$('#gravatar-box .icon-ok').show();
$('#uploaded-box .icon-ok').hide();
selectedImageType = 'gravatar';
});
$('#uploaded-box').on('click', function() {
$('#gravatar-box .icon-ok').hide();
$('#uploaded-box .icon-ok').show();
selectedImageType = 'uploaded';
});
$('#savePictureChangesBtn').on('click', function() {
$('#change-picture-modal').modal('hide');
if(selectedImageType) {
changeUserPicture(selectedImageType);
if(selectedImageType == 'gravatar')
$('#user-current-picture').attr('src', $('#user-data-gravatarpicture').html());
else if(selectedImageType == 'uploaded')
$('#user-current-picture').attr('src', $('#user-data-uploadedpicture').html());
}
});
$('#upload-picture-modal').on('hide', function() {
$('#userPhotoInput').val('');
});
$('#uploadPictureBtn').on('click', function() {
$('#change-picture-modal').modal('hide');
$('#upload-picture-modal').modal('show');
$('#pictureUploadSubmitBtn').on('click', function() {
$('#uploadForm').submit();
});
return false;
});
});
}());
</script>
Julian Lam
12 years ago