Elgg  Version 1.9
ui.avatar_cropper.js
Go to the documentation of this file.
1 
5 elgg.provide('elgg.avatarCropper');
6 
13 elgg.avatarCropper.init = function() {
14  var params = {
15  selectionOpacity: 0,
16  aspectRatio: '1:1',
17  onSelectEnd: elgg.avatarCropper.selectChange,
18  onSelectChange: elgg.avatarCropper.preview
19  };
20 
21  if ($('input[name=x2]').val()) {
22  params.x1 = $('input[name=x1]').val();
23  params.x2 = $('input[name=x2]').val();
24  params.y1 = $('input[name=y1]').val();
25  params.y2 = $('input[name=y2]').val();
26  }
27 
28  $('#user-avatar-cropper').imgAreaSelect(params);
29 
30  if ($('input[name=x2]').val()) {
31  var ias = $('#user-avatar-cropper').imgAreaSelect({instance: true});
32  var selection = ias.getSelection();
33  elgg.avatarCropper.preview($('#user-avatar-cropper'), selection);
34  }
35 };
36 
44 elgg.avatarCropper.preview = function(img, selection) {
45  // catch for the first click on the image
46  if (selection.width === 0 || selection.height === 0) {
47  return;
48  }
49 
50  var origWidth = $("#user-avatar-cropper").width();
51  var origHeight = $("#user-avatar-cropper").height();
52  var scaleX = 100 / selection.width;
53  var scaleY = 100 / selection.height;
54  $('#user-avatar-preview > img').css({
55  width: Math.round(scaleX * origWidth) + 'px',
56  height: Math.round(scaleY * origHeight) + 'px',
57  marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
58  marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
59  });
60 };
61 
69 elgg.avatarCropper.selectChange = function(img, selection) {
70  $('input[name=x1]').val(selection.x1);
71  $('input[name=x2]').val(selection.x2);
72  $('input[name=y1]').val(selection.y1);
73  $('input[name=y2]').val(selection.y2);
74 };
75 
76 elgg.register_hook_handler('init', 'system', elgg.avatarCropper.init);
elgg
Definition: install.js:23
min width
Definition: admin.php:166
img
Definition: admin.php:40
line height
Definition: admin.php:82