From f5a895ac06dfc3c26ed2a7d8295c7d7cd5c424f3 Mon Sep 17 00:00:00 2001
From: Michael Fairchild <mfairchild365@gmail.com>
Date: Wed, 17 Feb 2016 16:43:07 -0600
Subject: [PATCH] A better fix for the jQuery.imgAreaSelect plugin
There was still a race condition. The only sure fire way that I saw to fix this was to override the ui.avatar_cropper.js file and use requirejs in there to load the jquery library.
---
plugins/unl_theme/js/ui.avatar_cropper.js | 83 +++++++++++++++++++
plugins/unl_theme/start.php | 3 +
.../views/default/elgg/require_config.js.php | 2 +-
3 files changed, 87 insertions(+), 1 deletion(-)
create mode 100644 plugins/unl_theme/js/ui.avatar_cropper.js
diff --git a/plugins/unl_theme/js/ui.avatar_cropper.js b/plugins/unl_theme/js/ui.avatar_cropper.js
new file mode 100644
index 00000000..cfd380b8
--- /dev/null
+++ b/plugins/unl_theme/js/ui.avatar_cropper.js
@@ -0,0 +1,83 @@
+/**
+ * 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() {
+ //Load imgAreaSelect with requirejs (this is all that this override does)
+ require(['jquery', 'unl_theme/jquery.imgareaselect'], 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()) {
+
+ // TODO figure out why this is necessary
+ $(window).on('load', function () {
+ 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} img reference to the image
+ * @param {Object} selection 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} img reference to the image
+ * @param {Object} selection 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
diff --git a/plugins/unl_theme/start.php b/plugins/unl_theme/start.php
index d0959f53..958a4887 100755
--- a/plugins/unl_theme/start.php
+++ b/plugins/unl_theme/start.php
@@ -72,6 +72,9 @@ function unl_theme_init() {
elgg_unregister_js('jquery-ui');
elgg_unregister_js('jquery.imgareaselect');
+ //Load our own cropper that uses requirejs (make sure it loads last)
+ elgg_register_js('elgg.avatar_cropper', $base_url.'mod/unl_theme/js/ui.avatar_cropper.js', 'head', 9000);
+
//elgg_load_js("agency");
elgg_load_js('respond');
elgg_load_js("bootstrap");
diff --git a/plugins/unl_theme/views/default/elgg/require_config.js.php b/plugins/unl_theme/views/default/elgg/require_config.js.php
index 19716216..b40d8d9c 100644
--- a/plugins/unl_theme/views/default/elgg/require_config.js.php
+++ b/plugins/unl_theme/views/default/elgg/require_config.js.php
@@ -23,7 +23,7 @@ var unl_require_config = <?php echo json_encode($amdConfig, JSON_PRETTY_PRINT |
if (typeof WDN !== 'undefined') {
require.config(unl_require_config);
- require(['jquery', 'jqueryui', 'unl_theme/jquery.imgareaselect'], function($) {
+ require(['jquery', 'jqueryui'], function($) {
window.$ = $;
window.jQuery = $;
});
--
GitLab