From 9848b01be937643f79b518246cabfb0d8600e4be Mon Sep 17 00:00:00 2001
From: pete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544>
Date: Wed, 9 Jul 2008 12:23:54 +0000
Subject: new avatar crop page and instructions

git-svn-id: https://code.elgg.org/elgg/trunk@1354 36083f99-b078-4883-b0ff-0f9b5a30f544
---
 mod/profile/editicon.php | 135 +++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 120 insertions(+), 15 deletions(-)

(limited to 'mod/profile/editicon.php')

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
-- 
cgit v1.2.3