ui.avatar_cropper.js File Reference

Go to the source code of this file.

Functions
elgg	provide ('elgg.avatarCropper')
	Avatar cropping. More...
elgg	register_hook_handler ('init', 'system', elgg.avatarCropper.init)

Variables
elgg avatarCropper	init
	Register the avatar cropper. More...
elgg avatarCropper	preview
	Handler for changing select area. More...
elgg avatarCropper	selectChange
	Handler for updating the form inputs after select ends. More...

Function Documentation

elgg provide

(

'elgg.avatarCropper'

)

Avatar cropping.

elgg register_hook_handler	(	'init'	,
		'system'	,
		elgg.avatarCropper.	init
	)

Variable Documentation

elgg avatarCropper init

Initial value:

= function() {
    var params = {
        selectionOpacity: 0,
        aspectRatio: '1:1',
        onSelectEnd: elgg.avatarCropper.selectChange,
        onSelectChange: elgg.avatarCropper.preview
    };

    if ($('input[name=x2]').val()) {
        params.x1 = $('input[name=x1]').val();
        params.x2 = $('input[name=x2]').val();
        params.y1 = $('input[name=y1]').val();
        params.y2 = $('input[name=y2]').val();
    }

    $('#user-avatar-cropper').imgAreaSelect(params);

    if ($('input[name=x2]').val()) {
        var ias = $('#user-avatar-cropper').imgAreaSelect({instance: true});
        var selection = ias.getSelection();
        elgg.avatarCropper.preview($('#user-avatar-cropper'), selection);
    }
}

Register the avatar cropper.

If the hidden inputs have the coordinates from a previous cropping, begin the selection and preview with that displayed.

Definition at line 13 of file ui.avatar_cropper.js.

elgg avatarCropper preview

Initial value:

= function(img, selection) {
    
    if (selection.width === 0 || selection.height === 0) {
        return;
    }

    var origWidth = $("#user-avatar-cropper").width();
    var origHeight = $("#user-avatar-cropper").height();
    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'
    });
}

Handler for changing select area.

Parameters

{Object}	reference to the image
{Object}	imgareaselect selection object

Returns

void

Definition at line 44 of file ui.avatar_cropper.js.

elgg avatarCropper selectChange

Initial value:

= function(img, selection) {
    $('input[name=x1]').val(selection.x1);
    $('input[name=x2]').val(selection.x2);
    $('input[name=y1]').val(selection.y1);
    $('input[name=y2]').val(selection.y2);
}

Handler for updating the form inputs after select ends.

Parameters

{Object}	reference to the image
{Object}	imgareaselect selection object

Returns

void

Definition at line 69 of file ui.avatar_cropper.js.