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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
<?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
* @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
*/
?>
<!-- grab the required js for icon cropping -->
<script type="text/javascript" src="<?php echo $vars['url']; ?>mod/profile/views/default/js/jquery.imgareaselect-0.4.2.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 = $vars['url'] . "pg/icon/" . $_SESSION['user']->username . "/medium/" . $_SESSION['user']->icontime . ".jpg";
echo "<img src=\"{$user_avatar}\" alt=\"avatar\" />";
?>
</div>
<div id="profile_picture_form">
<form action="<?php echo $vars['url']; ?>action/profile/iconupload" method="post" enctype="multipart/form-data">
<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="profile_picture_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 = $vars['url'] . "pg/icon/" . $_SESSION['user']->username . "/master/" . $_SESSION['user']->icontime . ".jpg";
?>
</p>
<script>
//function to display a preview of the users cropped section
function preview(img, selection) {
var origWidth = $("#user_avatar").width(); //get the width of the users master photo
var origHeight = $("#user_avatar").height(); //get the height of the users master photo
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;
$('#user_avatar_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'
});
}
//variables for the newly cropped avatar
var $x1, $y1, $x2, $y2, $w, $h;
function selectChange(img, selection){
//populate the form with the correct coordinates once a user has cropped their image
document.getElementById('x_1').value = selection.x1;
document.getElementById('x_2').value = selection.x2;
document.getElementById('y_1').value = selection.y1;
document.getElementById('y_2').value = selection.y2;
}
$(document).ready(function () {
//get and set the coordinates
$x1 = $('#x1');
$y1 = $('#y1');
$x2 = $('#x2');
$y2 = $('#y2');
$w = $('#w');
$h = $('#h');
$('<div id="user_avatar_preview"><img src="<?php echo $user_master_image; ?>" /></div>')
.insertAfter($('#user_avatar'));
$('<div id="user_avatar_preview_title"><label>Preview</label></div>').insertBefore($('#user_avatar_preview'));
});
$(window).load(function () {
//this produces the coordinates
$('#user_avatar').imgAreaSelect({ selectionOpacity: 0, onSelectEnd: selectChange });
//show the preview
$('#user_avatar').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});
</script>
<p>
<img id="user_avatar" src="<?php echo $user_master_image; ?>" alt="<?php echo elgg_echo("profile:icon"); ?>" />
</p>
<div class="clearfloat"></div>
<form action="<?php echo $vars['url']; ?>action/profile/cropicon" method="post" />
<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>
<div class="clearfloat"></div>
|
