blob: 20e16b97849d853aef3081df1e631f6c854f0760 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<?php
/**
* Elgg profile icon edit form
*
* @package ElggProfile
* @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html GNU Public License version 2
* @author Curverider
* @copyright Curverider Ltd 2008-2010
* @link http://elgg.com/
*
* @uses $vars['entity'] The user entity
* @uses $vars['profile'] Profile items from $CONFIG->profile, defined in profile/start.php for now
*/
// user is passed to view and set by caller (normally the page editicon)
$currentuser = $vars['user'];
?>
<!-- grab the required js for icon cropping -->
<script type="text/javascript" src="<?php echo $vars['url']; ?>mod/profile/views/default/js/jquery.imgareaselect-0.8.min.js"></script>
<p><?php echo elgg_echo('profile:profilepictureinstructions'); ?></p>
<div id="current_user_avatar">
<label><?php echo elgg_echo('profile:currentavatar'); ?></label>
<?php
$user_avatar = $currentuser->getIcon('medium');
echo "<img src='{$user_avatar}' alt='avatar' />";
?>
</div>
<div id="avatar_upload">
<form action="<?php echo $vars['url']; ?>action/profile/iconupload" method="post" enctype="multipart/form-data">
<?php echo elgg_view('input/securitytoken'); ?>
<input type="hidden" name="username" value="<?php echo $currentuser->username; ?>" />
<p><label><?php echo elgg_echo("profile:editicon"); ?></label><br />
<?php
echo elgg_view("input/file",array('internalname' => 'profileicon'));
?>
<br /><input type="submit" class="submit_button" value="<?php echo elgg_echo("upload"); ?>" />
</p>
</form>
</div>
<div id="avatar_croppingtool">
<label><?php echo elgg_echo('profile:profilepicturecroppingtool'); ?></label><br />
<p>
<?php
echo elgg_echo("profile:createicon:instructions");
//display the current user photo
$user_master_image = $currentuser->getIcon('master');
?>
</p>
<script type="text/javascript">
//function to display a preview of the users cropped section
function preview(img, selection) {
// catch for the first click on the image
if (selection.width == 0 || selection.height == 0) {
return;
}
var origWidth = $(".current_user_avatar").width(); //get the width of the users master photo
var origHeight = $(".current_user_avatar").height(); //get the height of the users master photo
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;
$('.user_avatar_crop_preview > img').css({
width: Math.round(scaleX * origWidth) + 'px',
height: Math.round(scaleY * origHeight) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}
function selectChange(img, selection){
//populate the form with the correct coordinates once a user has cropped their image
$('#x_1').val(selection.x1);
$('#x_2').val(selection.x2);
$('#y_1').val(selection.y1);
$('#y_2').val(selection.y2);
}
$(document).ready(function () {
$('<div class="user_avatar_crop_preview"><img src="<?php echo $user_master_image; ?>" /></div>')
.insertAfter($('.current_user_avatar'));
$('<label><?php echo elgg_echo('profile:preview'); ?></label><br />').insertBefore($('.user_avatar_crop_preview'));
});
$(window).load(function () {
//this produces the coordinates
$('.current_user_avatar').imgAreaSelect({ selectionOpacity: 0, onSelectEnd: selectChange });
//show the preview
$('.current_user_avatar').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});
</script>
<div id="avatar_cropping" class="clearfloat">
<img class="current_user_avatar" src="<?php echo $user_master_image; ?>" alt="<?php echo elgg_echo("profile:icon"); ?>" />
</div>
<form action="<?php echo $vars['url']; ?>action/profile/cropicon" method="post" />
<?php echo elgg_view('input/securitytoken'); ?>
<input type="hidden" name="username" value="<?php echo $vars['user']->username; ?>" />
<input type="hidden" name="x_1" value="<?php echo $vars['user']->x1; ?>" id="x_1" />
<input type="hidden" name="x_2" value="<?php echo $vars['user']->x2; ?>" id="x_2" />
<input type="hidden" name="y_1" value="<?php echo $vars['user']->y1; ?>" id="y_1" />
<input type="hidden" name="y_2" value="<?php echo $vars['user']->y2; ?>" id="y_2" />
<input type="submit" name="submit" value="<?php echo elgg_echo("profile:createicon"); ?>" />
</form>
</div>
|
