aboutsummaryrefslogtreecommitdiff
path: root/js/lib/ui.avatar_cropper.js
diff options
context:
space:
mode:
authorSem <sembrestels@riseup.net>2011-11-18 07:32:27 +0100
committerSem <sembrestels@riseup.net>2011-11-18 07:32:27 +0100
commite53d410129701ea1c9d19529afa493f11b5f5b70 (patch)
treed9963b24bf8932654b4a47e36602c75975e50dba /js/lib/ui.avatar_cropper.js
parent377da25d2965c64941f83baae119fc970ec60982 (diff)
parent08a962c98e2923724f8013d6eaae89101243752a (diff)
downloadelgg-e53d410129701ea1c9d19529afa493f11b5f5b70.tar.gz
elgg-e53d410129701ea1c9d19529afa493f11b5f5b70.tar.bz2
Merge github.com:Elgg/Elgg
Conflicts: engine/lib/input.php
Diffstat (limited to 'js/lib/ui.avatar_cropper.js')
-rw-r--r--js/lib/ui.avatar_cropper.js76
1 files changed, 76 insertions, 0 deletions
diff --git a/js/lib/ui.avatar_cropper.js b/js/lib/ui.avatar_cropper.js
new file mode 100644
index 000000000..fc32a0832
--- /dev/null
+++ b/js/lib/ui.avatar_cropper.js
@@ -0,0 +1,76 @@
+/**
+ * Avatar cropping
+ */
+
+elgg.provide('elgg.avatarCropper');
+
+/**
+ * Register the avatar cropper.
+ *
+ * If the hidden inputs have the coordinates from a previous cropping, begin
+ * the selection and preview with that displayed.
+ */
+elgg.avatarCropper.init = 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);
+ }
+};
+
+/**
+ * Handler for changing select area.
+ *
+ * @param {Object} reference to the image
+ * @param {Object} imgareaselect selection object
+ * @return void
+ */
+elgg.avatarCropper.preview = function(img, selection) {
+ // catch for the first click on the image
+ 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 updating the form inputs after select ends
+ *
+ * @param {Object} reference to the image
+ * @param {Object} imgareaselect selection object
+ * @return void
+ */
+elgg.avatarCropper.selectChange = 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);
+};
+
+elgg.register_hook_handler('init', 'system', elgg.avatarCropper.init); \ No newline at end of file