From d8b3a5325735965d059d1a1e17c56867fdd5ba3e Mon Sep 17 00:00:00 2001
From: dave <dave@36083f99-b078-4883-b0ff-0f9b5a30f544>
Date: Mon, 23 Jun 2008 17:38:56 +0000
Subject: more icon cropper tweaks, form added

git-svn-id: https://code.elgg.org/elgg/trunk@1074 36083f99-b078-4883-b0ff-0f9b5a30f544
---
 mod/profile/views/default/profile/editicon.php | 41 +++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 8 deletions(-)

(limited to 'mod/profile')

diff --git a/mod/profile/views/default/profile/editicon.php b/mod/profile/views/default/profile/editicon.php
index 1fa891598..a48ceb4cb 100644
--- a/mod/profile/views/default/profile/editicon.php
+++ b/mod/profile/views/default/profile/editicon.php
@@ -43,9 +43,10 @@
 
 <script>
 
+    //function to display a preview of the users cropped section
     function preview(img, selection) {
-        var origWidth = $("#user_avatar").width();
-        var origHeight = $("#user_avatar").height();
+        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 + div > img').css({ 
@@ -53,20 +54,33 @@
             height: Math.round(scaleY * origHeight) + 'px', 
             marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
             marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
-         }); } 
-         
-        var $x1, $y1, $x2, $y2, $w, $h;
+         }); 
+    } 
+        
+    //variables for the newly cropped avatar
+    var $x1, $y1, $x2, $y2, $w, $h;
         
         function selectChange(img, selection){
+            
+           //delete this once we have tested, it is for the coordinate display
            $x1.text(selection.x1);
            $y1.text(selection.y1);
            $x2.text(selection.x2);
            $y2.text(selection.y2);
            $w.text(selection.width);
            $h.text(selection.height);
+           
+           //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 () { 
+        $(document).ready(function () {
+            
+            //get and set the coordinates
             $x1 = $('#x1');
             $y1 = $('#y1');
             $x2 = $('#x2');
@@ -76,12 +90,15 @@
             
             $('<div><img src="<?php echo $user_master_image; ?>" style="position: relative;" /></div>') 
             .css({ float: 'left', position: 'relative', overflow: 'hidden', width: '100px', height: '100px' }) 
-            .insertAfter($('#user_avatar')); 
+            .insertAfter($('#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 });
   
         });
@@ -107,4 +124,12 @@
    <b>Height:</b> <span id="h"></span>
 
   </p>
- </div>
\ No newline at end of file
+ </div>
+ 
+<form name="" action="" />
+    <input type="hidden" name="x_1" value="" id="x_1" />
+    <input type="hidden name="x_2" value="" id="x_2" />
+    <input type="hidden" name="y_1" value="" id="y_1" />
+    <input type="hidden" name="y_2" value="" id="y_2" />
+    <input type="submit" name="submit" value="create your avatar" />
+</form>
\ No newline at end of file
-- 
cgit v1.2.3