aboutsummaryrefslogtreecommitdiff
path: root/mod
diff options
context:
space:
mode:
authordave <dave@36083f99-b078-4883-b0ff-0f9b5a30f544>2008-06-23 17:38:56 +0000
committerdave <dave@36083f99-b078-4883-b0ff-0f9b5a30f544>2008-06-23 17:38:56 +0000
commitd8b3a5325735965d059d1a1e17c56867fdd5ba3e (patch)
tree0652288872692e91aad70e07764174948cfcb89b /mod
parent982389815df230607100c9ee2ec1c40583026e4b (diff)
downloadelgg-d8b3a5325735965d059d1a1e17c56867fdd5ba3e.tar.gz
elgg-d8b3a5325735965d059d1a1e17c56867fdd5ba3e.tar.bz2
more icon cropper tweaks, form added
git-svn-id: https://code.elgg.org/elgg/trunk@1074 36083f99-b078-4883-b0ff-0f9b5a30f544
Diffstat (limited to 'mod')
-rw-r--r--mod/profile/views/default/profile/editicon.php41
1 files changed, 33 insertions, 8 deletions
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