diff options
Diffstat (limited to 'mod/profile/views/default/profile/editicon.php')
| -rw-r--r-- | mod/profile/views/default/profile/editicon.php | 107 |
1 files changed, 38 insertions, 69 deletions
diff --git a/mod/profile/views/default/profile/editicon.php b/mod/profile/views/default/profile/editicon.php index 7731d9899..20e16b978 100644 --- a/mod/profile/views/default/profile/editicon.php +++ b/mod/profile/views/default/profile/editicon.php @@ -1,24 +1,21 @@ <?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']; - +/** + * 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 --> -<div class="contentWrapper"> <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> @@ -29,13 +26,13 @@ <?php $user_avatar = $currentuser->getIcon('medium'); - echo "<img src=\"{$user_avatar}\" alt=\"avatar\" />"; + echo "<img src='{$user_avatar}' alt='avatar' />"; ?> </div> -<div id="profile_picture_form"> +<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; ?>" /> @@ -50,21 +47,16 @@ </form> </div> -<div id="profile_picture_croppingtool"> +<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 @@ -72,11 +64,11 @@ return; } - 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 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_preview > img').css({ + $('.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', @@ -84,54 +76,34 @@ }); } - //variables for the newly cropped avatar - //var $x1, $y1, $x2, $y2, $w, $h; - - function selectChange(img, selection){ - + 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 () { - - //get the coordinates from the form - /* - var x_1 = $('#x_1').val(); - var x_2 = $('#x_2').val(); - var y_1 = $('#y_1').val(); - var y_2 = $('#y_2').val(); - var w = x_2 - x_1; - var h = y_2 - y_1; - selection = { x1: x_1, y1: y_1, x2: x_2, y2: y_2, width: w, height: h }; - */ - - $('<div id="user_avatar_preview"><img src="<?php echo $user_master_image; ?>" /></div>') - .insertAfter($('#user_avatar')); + $(document).ready(function () { - $('<div id="user_avatar_preview_title"><label><?php echo elgg_echo('profile:preview'); ?></label></div>').insertBefore($('#user_avatar_preview')); - }); + $('<div class="user_avatar_crop_preview"><img src="<?php echo $user_master_image; ?>" /></div>') + .insertAfter($('.current_user_avatar')); - $(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 }); + $('<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> -<p> -<img id="user_avatar" src="<?php echo $user_master_image; ?>" alt="<?php echo elgg_echo("profile:icon"); ?>" /> -</p> - -<div class="clearfloat"></div> +<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'); ?> @@ -144,6 +116,3 @@ </form> </div> -<div class="clearfloat"></div> - -</div> |