new avatar crop page and instructions

git-svn-id: https://code.elgg.org/elgg/trunk@1354 36083f99-b078-4883-b0ff-0f9b5a30f544

3 files changed, 179 insertions, 22 deletions

diff --git a/mod/profile/editicon.php b/mod/profile/editicon.php
index 3dc10cc21..0ab550eee 100644
--- a/mod/profile/editicon.php
+++ b/mod/profile/editicon.php
@@ -1,29 +1,134 @@
 <?php

 

 	/**

-	 * Elgg upload new profile icon

+	 * 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 Ben Werdmuller <ben@curverider.co.uk>

+	 * @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 

 	 */

 

-	// Load the Elgg framework

-		require_once(dirname(dirname(dirname(__FILE__))) . "/engine/start.php");

-		

-	// Make sure we're logged in

-		if (!isloggedin()) forward();

+?>

+<!-- 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">

 

-	// set title

-		$area1 = elgg_view_title(elgg_echo('profile:createicon:header'));

-		$area1 .= elgg_view("profile/editicon");

+	<label><?php echo elgg_echo('profile:currentavatar'); ?></label>

+	<?php 

 		

-	// Get the form and correct canvas area

-		$body = elgg_view_layout("one_column", $area1);

+		$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'));

 		

-	// Draw the page

-		page_draw(elgg_echo("profile:editicon"),$body);

+		?>

+		<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>

 

-?>
\ No newline at end of file
diff --git a/mod/profile/languages/en.php b/mod/profile/languages/en.php
index e9d96e79d..4da311ab1 100644
--- a/mod/profile/languages/en.php
+++ b/mod/profile/languages/en.php
@@ -21,12 +21,14 @@
 			'profile:user' => "%s's profile",

 	

 			'profile:edit' => "Edit profile",

-			'profile:editicon' => "Change your profile picture",

-			'profile:icon' => "Profile icon",

+			'profile:editicon' => "Upload a new profile picture",

+			'profile:profilepictureinstructions' => "The profile picture is the image that's displayed on your profile page. <br /> You can change it as often as you'd like. (File formats accepted: GIF, JPG or PNG)",

+			'profile:icon' => "Profile picture",

 			'profile:createicon' => "Create your avatar",

-			'profile:currentavatar' => "Your current avatar",

-			'profile:createicon:header' => "Upload your profile picture",

-			'profile:createicon:instructions' => "Click and drag to crop your main profile photo into a cool avatar",

+			'profile:currentavatar' => "Current avatar",

+			'profile:createicon:header' => "Profile picture",

+			'profile:profilepicturecroppingtool' => "Profile picture cropping tool",

+			'profile:createicon:instructions' => "Click and drag a square below to match how you want your picture cropped.  A preview of your cropped picture will appear in the box on the right.  When you are happy with the preview, click 'Create your avatar'. This cropped image will be used throughout the site as your avatar. ",

 	

 			'profile:aboutme' => "About me", 

 			'profile:description' => "About me", 

@@ -45,7 +47,7 @@
 		 */

 	

 			'profile:saved' => "Your profile was successfully saved.",

-			'profile:icon:uploaded' => "Your profile icon was successfully uploaded.",

+			'profile:icon:uploaded' => "Your profile picture was successfully uploaded.",

 	

 		/**

 		 * Error messages

@@ -54,7 +56,7 @@
 			'profile:noaccess' => "You do not have permission to edit this profile.",

 			'profile:notfound' => "Sorry; we could not find the specified profile.",

 			'profile:cantedit' => "Sorry; you do not have permission to edit this profile.",

-			'profile:icon:notfound' => "Sorry; there was a problem uploading your profile icon.",

+			'profile:icon:notfound' => "Sorry; there was a problem uploading your profile picture.",

 	

 	);

 					

diff --git a/views/default/css.php b/views/default/css.php
index 99d8c4f82..7c4b1210e 100644
--- a/views/default/css.php
+++ b/views/default/css.php
@@ -1254,6 +1254,56 @@ table.search_gallery {
 	padding:0 0 0 14px;
 	margin:0;
 }
+
+/* page titles */
+#canvas_header {
+	margin:0 0 20px 0;
+	padding:0 0 5px 0;
+	border-bottom:1px solid #4690d6;
+}
+	
+#canvas_header #canvas_header_content h2 {
+
+
+}	
+
+/* profile picture upload n crop page */	
+#profile_picture_form {
+	height:145px;
+}	
+#current_user_avatar {
+	float:left;
+	width:160px;
+	height:130px;
+	border-right:1px solid #cccccc;
+	margin:0 20px 0 0;
+}	
+#profile_picture_croppingtool {
+	border-top: 1px solid #cccccc;
+	margin:20px 0 0 0;
+	padding:10px 0 0 0;
+}	
+#profile_picture_croppingtool #user_avatar {
+	float: left;
+	margin-right: 20px;
+}	
+#profile_picture_croppingtool #applycropping {
+
+}
+#profile_picture_croppingtool #user_avatar_preview {
+	float: left;
+	position: relative;
+	overflow: hidden;
+	width: 100px;
+	height: 100px;
+}	
+	
+	
+	
+	
+	
+	
+	
 	
 	
 	
\ No newline at end of file